@layer base, components, utilities;

@layer base {
    :root {
        --text-color: oklch(15.77% 0.021 262.33);
        --bg-color: oklch(95.00% 0.021 262.33);
        --primary-color: oklch(65% 0.22 262.33);
        --secondary-color: oklch(80% 0.22 262.33);
        --accent-color: oklch(70% 0.25 150);
        --surface-color: oklch(98% 0.01 262.33);

        --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

        --shadow-color: 220 3% 15%;
        --shadow-strength: 1%;
        --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%));
        --shadow-3: 0 7px 14px -4px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
        --shadow-4: 0 12px 24px -4px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));

    }

    body {
        font-family: var(--font-primary);
        background-color: var(--bg-color);
        color: var(--text-color);
        margin: 0;
        padding: 1rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    h1, h2 {
        color: var(--primary-color);
    }

    header, main, section {
        margin-bottom: 2rem;
    }

    .subscription-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Reduced card size */
        gap: 1rem;
    }

    #search-input {
        width: calc(100% - 2rem); /* Full width with padding consideration */
        padding: 0.75rem 1rem;
        margin-bottom: 1.5rem;
        border: 1px solid oklch(70% 0.05 262.33);
        border-radius: 8px;
        font-size: 1rem;
        background-color: var(--surface-color);
        color: var(--text-color);
    }

    #optimize-button {
        padding: 1rem 2rem;
        font-size: 1.2rem;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
        box-shadow: var(--shadow-2);
        margin-top: 1rem;
    }

    #optimize-button:hover {
        background-color: oklch(55% 0.22 262.33); /* Darken primary color */
        box-shadow: var(--shadow-3);
    }

    .total-cost {
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--accent-color);
    }
}

@layer components {

    subscription-card {
        display: block;
        background: var(--surface-color);
        border-radius: 12px;
        padding: 1rem; /* Reduced padding */
        box-shadow: var(--shadow-2);
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    subscription-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-4);
    }

    subscription-card:active {
        transform: translateY(-2px);
        box-shadow: var(--shadow-3);
    }

    subscription-card.selected {
        box-shadow: 0 0 0 3px var(--accent-color), var(--shadow-3);
    }

    subscription-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, oklch(80% 0.25 150 / 0.1), transparent 40%);
        transform: scale(0);
        transition: transform 0.4s ease-out;
        pointer-events: none;
    }

    subscription-card:hover::before {
        transform: scale(1);
    }

    subscription-card img { /* Adjusted image size */
        width: 60px;
        height: 60px;
        border-radius: 12px;
        box-shadow: var(--shadow-2);
    }

    /* Animation for result container */
    @keyframes highlight {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.01); opacity: 0.98; }
        100% { transform: scale(1); opacity: 1; }
    }

    #result-container.highlight {
        animation: highlight 0.5s ease-out;
        border: 2px solid var(--accent-color);
        border-radius: 12px;
        padding: 1rem;
        background-color: oklch(98% 0.03 150 / 0.1);
    }
}