@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-cream-50;
    }
}

@layer components {
    .input-field {
        @apply bg-white border-2 border-warmBrown-200 text-warmBrown-900 text-base rounded-xl focus:ring-2 focus:ring-terracotta-400 focus:border-terracotta-400 block w-full p-4 transition-all duration-200;
    }

    .input-label {
        @apply block mb-2 mt-5 text-sm font-medium text-warmBrown-800
    }

    .submit-button {
        @apply text-cream-50 bg-terracotta-500 hover:bg-terracotta-600 focus:ring-4 focus:outline-none focus:ring-terracotta-300 font-medium rounded-xl text-base w-full sm:w-auto px-6 py-3.5 text-center transition-all duration-200 shadow-md hover:shadow-lg
    }

    .secondary-action-button {
        @apply inline-flex items-center rounded-xl border-2 border-warmBrown-300 bg-cream-50 px-5 py-2.5 text-sm font-medium text-warmBrown-700 shadow-sm hover:bg-cream-100 focus:outline-none focus:ring-2 focus:ring-terracotta-400 focus:ring-offset-2 transition-all duration-200
    }

    .text-link {
        @apply text-warmBrown-700 hover:text-terracotta-600 transition-colors duration-200
    }

    h1 {
        @apply font-display font-bold text-3xl mb-8 text-warmBrown-900
    }

    h2 {
        @apply font-display font-bold text-2xl mb-6 text-warmBrown-900 leading-7 sm:text-2xl sm:tracking-tight
    }

    h3 {
        @apply font-display font-semibold text-xl mb-2 text-warmBrown-800 leading-7 sm:text-xl sm:tracking-tight
    }

    h4 {
        @apply font-semibold text-lg mb-2 text-warmBrown-700 leading-7 sm:text-lg sm:tracking-tight
    }

    h5 {
        @apply text-sm mb-2 text-warmBrown-700 leading-7 sm:tracking-tight uppercase
    }

    .pagination {
        @apply flex justify-end text-sm;
        @apply my-2 py-2;
    }

    .pagination a {
        @apply py-2 px-2 mx-1;
        @apply text-warmBrown-600 no-underline bg-cream-50 rounded-lg border border-warmBrown-200 hover:bg-cream-100 transition-colors duration-200;
    }

    .pagination span {
        @apply flex;
    }

    .pagination span.page.current {
        @apply block py-2 px-2 text-terracotta-600;
    }

    .pagination a:hover {
        @apply text-terracotta-600;
    }

    /* Culinary pattern background */
    .culinary-pattern {
        background-color: #fdfcfa;
        background-image:
            radial-gradient(circle at 20% 50%, rgba(237, 107, 67, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(122, 139, 95, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 40% 20%, rgba(201, 178, 153, 0.04) 0%, transparent 50%);
    }

    /* Recipe card styling */
    .recipe-card {
        @apply bg-white rounded-2xl shadow-sm border-2 border-warmBrown-100 p-8 transition-shadow duration-300 hover:shadow-md;
    }

    /* Platform icon container */
    .platform-icons {
        @apply flex items-center justify-center gap-6 mt-6 mb-2;
    }

    .platform-icon {
        @apply flex flex-col items-center gap-2 opacity-60 hover:opacity-100 transition-opacity duration-200;
    }

    .platform-icon svg {
        @apply w-8 h-8;
    }

    .platform-icon span {
        @apply text-xs text-warmBrown-600 font-medium;
    }

    /* Recipe title styling */
    .recipe-title {
        @apply font-display text-4xl md:text-5xl font-bold text-warmBrown-900 mb-6 text-center leading-tight;
    }

    /* Ingredients and instructions styling */
    .recipe-section-title {
        @apply font-display text-2xl font-bold text-terracotta-600 mb-6 flex items-center gap-3;
    }

    .ingredients-list {
        @apply space-y-3 text-warmBrown-800;
    }

    .ingredients-list li {
        @apply pl-2 leading-relaxed;
    }

    .instructions-list {
        @apply space-y-4 text-warmBrown-800;
    }

    .instructions-list li {
        @apply pl-2 leading-relaxed;
    }

    /* Custom list markers */
    .ingredients-list li::marker {
        @apply text-terracotta-500;
    }

    .instructions-list li::marker {
        @apply text-terracotta-500 font-bold;
    }
}
/*

 */

@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.extra.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.alternates.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.symbols.var-59f27012284f5e97bbff303eb599ca98f29629a1c0fe7352bcc15b27d1dcd937.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Italic';
}

/* extra */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.extra.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.alternates.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.symbols.var-59f27012284f5e97bbff303eb599ca98f29629a1c0fe7352bcc15b27d1dcd937.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Italic';
}
/* cyrillic */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.cyrillic.var-a31159d5ce68b317b19edc7ee7f1f3ffdd5316ee899945b502406abda313afa2.woff2) format('woff2');
  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
  font-named-instance: 'Italic';
}
/* greek */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.greek.var-77ec12f9397b88a29c16c05f2db87d9c0d0c2b157f1980271fed020f00b35321.woff2) format('woff2');
  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
  font-named-instance: 'Italic';
}
/* vietnamese */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.vietnamese.var-b5dc5b6490ba49e8193315ff62c8e90551102055440f084a6e982e5eab8e589a.woff2) format('woff2');
  unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
  font-named-instance: 'Italic';
}
/* latin-ext */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.latin-ext.var-802705fb8496b82eda3f410c7e70a35c9407ba98b97cc5d9754db82750466fad.woff2) format('woff2');
  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
  font-named-instance: 'Italic';
}
/* latin */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-italic.latin.var-cbfc0334f8cfad4727431982cd32c32f7daf6e73f0ab6f759ec3dc757c1c6bf7.woff2) format('woff2');
  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
  font-named-instance: 'Italic';
}
/* extra */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-roman.extra.var-29781a209d7978155bf343eb1653779269965fa4a43d504b1fb361ab20e8487b.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Regular';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-roman.alternates.var-29781a209d7978155bf343eb1653779269965fa4a43d504b1fb361ab20e8487b.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Regular';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-roman.symbols.var-847d2a436a03ba1fbd4b750915db031a12a713befe0dcd79e8f39bf6a6e1a647.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Regular';
}
/* cyrillic */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-roman.cyrillic.var-8aa524d3da3b8fd4a03ff2d0d41ea50520113fb2e8ae57c15079dabea44b3529.woff2) format('woff2');
  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
  font-named-instance: 'Regular';
}
/* greek */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-roman.greek.var-1134a39060691474b0f57b2de5e09977a31a8c06df90960b982314f58a5b4c63.woff2) format('woff2');
  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
  font-named-instance: 'Regular';
}
/* vietnamese */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-roman.vietnamese.var-a10e650090dc30250de0db440654c9bf29a843b233ee95a699b008bab0a6d498.woff2) format('woff2');
  unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
  font-named-instance: 'Regular';
}
/* latin-ext */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-roman.latin-ext.var-46bc23ba7e33ea447579cd95b95f34665d7560377065b72f3a77df8bca4b0e5c.woff2) format('woff2');
  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
  font-named-instance: 'Regular';
}
/* latin */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/Inter-roman.latin.var-4b87a3d384ea557b10afa9570b753eda868b12b5e51eea0977ffa6e641998f6a.woff2) format('woff2');
  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
  font-named-instance: 'Regular';
}
/* This file may be used for providing additional customizations to the Trestle
 * admin. It will be automatically included within all admin pages.
 *
 * For organizational purposes, you may wish to define your customizations
 * within individual partials in this folder and they'll be required below.
 *

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.submit-button[disabled] {
    background-color: #ed6b43bb;
    cursor: wait;
}

.submit-button[disabled] .default-content {
    display: none;
}

.submit-button[disabled] .loading-content {
    display: flex;
}

.submit-button[disabled] .spinner svg {
    width: 1.5rem;
    height: 1.5rem;
}

.submit-button .loading-content {
    display: none;
}

/* Navigation Header Styles */
.nav-header {
    position: relative;
    border-bottom: 2px solid #e6d9c8;
    backdrop-filter: blur(8px);
    background-color: rgba(253, 252, 250, 0.8);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(237, 107, 67, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(166, 127, 91, 0.02) 0%, transparent 50%);
}

.nav-container {
    height: 5rem;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 80rem;
}

.nav-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-logo-wrapper::before {
    content: '';
    position: absolute;
    inset: -0.5rem;
    background-color: #fef6f4;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.nav-logo-wrapper:hover::before {
    opacity: 1;
}

.nav-logo-wrapper:hover {
    /* Removed translateY to keep logo still on hover */
}

.nav-logo-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-logo-svg {
    height: 3rem;
    width: 3rem;
    filter: drop-shadow(0 2px 4px rgba(117, 86, 65, 0.12));
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-logo-wrapper:hover .nav-logo-svg {
    transform: rotate(-8deg) scale(1.08);
    filter: drop-shadow(0 4px 8px rgba(218, 79, 42, 0.25));
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
}

.nav-logo-brand {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.nav-logo-vid {
    color: #513c30;
    transition: color 0.3s ease;
}

.nav-logo-arrow {
    color: #da4f2a;
    font-weight: 300;
    font-size: 1.35rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.nav-logo-wrapper:hover .nav-logo-arrow {
    /* Removed translateX to keep arrow still on hover */
    color: #ed6b43;
}

.nav-logo-recipe {
    color: #da4f2a;
    transition: color 0.3s ease;
}

.nav-logo-wrapper:hover .nav-logo-vid,
.nav-logo-wrapper:hover .nav-logo-recipe {
    color: #ed6b43;
}

.nav-logo-tagline {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.7rem;
    line-height: 1;
    color: #8e6a4d;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    transition: all 0.3s ease;
    margin-top: 0.15rem;
}

.nav-logo-wrapper:hover .nav-logo-tagline {
    opacity: 1;
    color: #da4f2a;
    letter-spacing: 0.1em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .nav-links {
        gap: 1.5rem;
    }

    .nav-logo-brand {
        font-size: 1.75rem;
    }

    .nav-logo-arrow {
        font-size: 1.6rem;
    }
}

@media (min-width: 1024px) {
    .nav-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .nav-links {
        gap: 2rem;
    }
}

/* Mobile Menu Styles */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #755641;
    transition: color 0.2s ease;
}

.nav-hamburger:hover {
    color: #da4f2a;
}

.nav-hamburger svg {
    width: 1.75rem;
    height: 1.75rem;
}

.nav-mobile-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(81, 60, 48, 0.5);
    backdrop-filter: blur(4px);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-mobile-overlay-open {
    opacity: 1;
    visibility: visible;
}

.nav-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    max-width: 20rem;
    background-color: #fdfcfa;
    box-shadow: -4px 0 20px rgba(81, 60, 48, 0.15);
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.nav-mobile-menu-open {
    transform: translateX(0);
}

.nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 2px solid #e6d9c8;
    background-color: rgba(237, 107, 67, 0.03);
}

.nav-mobile-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #513c30;
}

.nav-mobile-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #755641;
    transition: color 0.2s ease;
}

.nav-mobile-close:hover {
    color: #da4f2a;
}

.nav-mobile-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.nav-mobile-links {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    gap: 0;
}

.nav-mobile-links li {
    display: block;
}

.nav-mobile-links li a,
.nav-mobile-links li button {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: 1rem !important;
    border: none;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #513c30 !important;
    font-weight: 500;
    border-radius: 0;
}

.nav-mobile-links li a:hover,
.nav-mobile-links li button:hover {
    background-color: #fef6f4;
}

.nav-mobile-links li a.bg-terracotta-500 {
    background-color: transparent !important;
    color: #da4f2a !important;
    font-weight: 600;
}

.nav-mobile-links li a.bg-terracotta-500:hover {
    background-color: #fef6f4 !important;
}

/* Mobile menu dropdown styles */
.nav-mobile-links #user-menu-button {
    display: none !important;
}

.nav-mobile-links #dropdown {
    position: static;
    display: block !important;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    width: 100%;
}

.nav-mobile-links #dropdown ul {
    padding: 0;
}

.nav-mobile-links #dropdown li {
    border-top: none;
}

.nav-mobile-links #dropdown li a {
    padding: 1rem 1.5rem;
}

.nav-mobile-links #dropdown li form {
    padding: 0;
}

.nav-mobile-links #dropdown li form button {
    width: 100%;
    text-align: left;
    padding: 1rem 1.5rem;
}

@media (max-width: 640px) {
    .nav-container {
        height: 4rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-logo-wrapper {
        gap: 0.5rem;
    }

    .nav-logo-content {
        gap: 0.5rem;
    }

    .nav-logo-svg {
        height: 2rem;
        width: 2rem;
    }

    .nav-logo-tagline {
        display: none;
    }

    .nav-logo-brand {
        font-size: 1rem;
    }

    .nav-logo-arrow {
        font-size: 0.95rem;
    }

    /* Hide desktop nav, show hamburger on mobile */
    .nav-links-desktop {
        display: none;
    }

    .nav-hamburger {
        display: block;
    }
}

/* ===== PRICING PAGE STYLES ===== */

.pricing-hero {
    text-align: center;
    margin: 3rem auto 4rem;
    max-width: 48rem;
    padding: 0 1.5rem;
}

.pricing-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3rem;
    font-weight: 800;
    color: #513c30;
    margin-bottom: 1rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.pricing-subtitle {
    font-size: 1.125rem;
    color: #755641;
    line-height: 1.6;
    font-weight: 400;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

@media (max-width: 640px) {
    .pricing-grid {
        padding: 0 1rem 2rem;
        gap: 1.25rem;
    }

    .pricing-hero {
        margin: 1.5rem auto 1.5rem;
        padding: 0 1rem;
    }

    .pricing-title {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .pricing-subtitle {
        font-size: 0.95rem;
    }

    .pricing-card {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .pricing-card-header {
        margin-bottom: 1rem;
    }

    .pricing-plan-name {
        font-size: 1.35rem;
        margin-bottom: 0.25rem;
    }

    .pricing-plan-desc {
        font-size: 0.85rem;
    }

    .pricing-price-section {
        margin: 1rem 0;
    }

    .pricing-price {
        margin: 0.5rem 0;
    }

    .pricing-amount {
        font-size: 2.5rem;
    }

    .pricing-limit {
        margin: 1rem 0;
        font-size: 0.9rem;
    }

    .pricing-features {
        gap: 0.5rem;
    }

    .pricing-feature {
        padding: 0.5rem 0;
        font-size: 0.875rem;
    }

    .pricing-cta {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        margin-top: 1.25rem;
    }

    .pricing-badge {
        padding: 0.35rem 0.85rem;
        font-size: 0.7rem;
        top: -0.65rem;
    }
}

@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Pricing Card Base */
.pricing-card {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    border: 2px solid #e6d9c8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    background-image:
        radial-gradient(circle at 90% 10%, rgba(237, 107, 67, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(201, 178, 153, 0.03) 0%, transparent 50%);
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(117, 86, 65, 0.12);
    border-color: #da4f2a;
}

/* Featured Pro Card */
.pricing-card-pro {
    border-color: #da4f2a;
    border-width: 3px;
    box-shadow: 0 10px 30px rgba(218, 79, 42, 0.15);
}

.pricing-card-pro:hover {
    box-shadow: 0 20px 50px rgba(218, 79, 42, 0.25);
}

.pricing-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    color: white;
    padding: 0.4rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(218, 79, 42, 0.3);
}

/* Card Header */
.pricing-card-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.pricing-plan-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    color: #8e6a4d;
    transition: all 0.3s ease;
}

.pricing-card-pro .pricing-plan-icon {
    color: #da4f2a;
}

.pricing-card:hover .pricing-plan-icon {
    transform: scale(1.1) rotate(5deg);
    color: #ed6b43;
}

.pricing-plan-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #513c30;
    margin-bottom: 0.5rem;
}

.pricing-plan-desc {
    font-size: 0.95rem;
    color: #755641;
    line-height: 1.5;
}

/* Price Section */
.pricing-price-section {
    text-align: center;
    margin: 1.5rem 0;
    padding: 1.5rem 0;
    border-top: 2px solid #f5ede3;
    border-bottom: 2px solid #f5ede3;
}

.pricing-price {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    line-height: 1;
}

.pricing-currency {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: #755641;
    margin-top: 0.5rem;
}

.pricing-amount {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 4rem;
    font-weight: 900;
    color: #513c30;
    letter-spacing: -0.03em;
}

.pricing-card-pro .pricing-amount {
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-period {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #8e6a4d;
    font-weight: 500;
}

/* Limit Badge */
.pricing-limit {
    text-align: center;
    margin: 1.5rem 0;
    padding: 0.75rem 1.5rem;
    padding-top: 0.5rem;
    background: linear-gradient(135deg, #fef6f4 0%, #fdfcfa 100%);
    border-radius: 0.75rem;
    border: 1px solid #fcd5c7;
    display: inline-flex;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    align-items: baseline;
}

.pricing-limit-text {
    font-size: 0.9rem;
    color: #755641;
}

.pricing-limit-value {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #da4f2a;
}

/* Features List */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    flex-grow: 1;
}

.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #513c30;
}

.pricing-feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.pricing-feature-included .pricing-feature-icon {
    color: #7a8b5f;
}

.pricing-feature-excluded {
    opacity: 0.5;
}

.pricing-feature-excluded .pricing-feature-icon {
    color: #8e6a4d;
}

/* CTA Buttons */
.pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

.pricing-cta svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.pricing-cta:hover svg {
    transform: translateX(4px);
}

.pricing-cta-primary {
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(218, 79, 42, 0.25);
}

.pricing-cta-primary:hover {
    box-shadow: 0 6px 20px rgba(218, 79, 42, 0.35);
    transform: translateY(-2px);
}

.pricing-cta-secondary {
    background: white;
    color: #755641;
    border: 2px solid #d3bda2;
}

.pricing-cta-secondary:hover {
    background: #fdfcfa;
    border-color: #da4f2a;
    color: #da4f2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(117, 86, 65, 0.12);
}

/* Responsive */
@media (max-width: 768px) {
    .pricing-title {
        font-size: 2.25rem;
    }

    .pricing-amount {
        font-size: 3rem;
    }

    .pricing-currency {
        font-size: 1.5rem;
    }
}

@media (max-width: 640px) {
    /* Remove container padding on pricing page for full-width cards */
    main:has(.pricing-grid) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pricing-grid {
        padding: 0 1rem 1.5rem;
        gap: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    .pricing-hero {
        margin: 1.25rem 0;
        padding: 0 1rem;
    }

    .pricing-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .pricing-subtitle {
        font-size: 0.875rem;
    }

    .pricing-card {
        padding: 1rem;
        border-radius: 0.875rem;
    }

    .pricing-card-header {
        margin-bottom: 0.75rem;
    }

    .pricing-plan-name {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .pricing-plan-desc {
        font-size: 0.8rem;
    }

    .pricing-price-section {
        margin: 0.75rem 0;
    }

    .pricing-price {
        margin: 0.35rem 0;
    }

    .pricing-amount {
        font-size: 2.25rem;
    }

    .pricing-limit {
        margin: 0.75rem 0;
        padding: 0.65rem;
        font-size: 0.85rem;
    }

    .pricing-limit-value {
        font-size: 1.15rem;
    }

    .pricing-features {
        gap: 0.35rem;
        margin: 0.75rem 0;
    }

    .pricing-feature {
        padding: 0.35rem 0;
        font-size: 0.8rem;
    }

    .pricing-feature-icon {
        width: 1rem;
        height: 1rem;
    }

    .pricing-cta {
        padding: 0.65rem 1.25rem;
        font-size: 0.875rem;
        margin-top: 1rem;
    }

    .pricing-badge {
        padding: 0.3rem 0.75rem;
        font-size: 0.65rem;
        top: -0.6rem;
    }

    .pricing-currency {
        font-size: 1.35rem;
    }
}

/* ===== SUBSCRIPTION PAGE STYLES ===== */

.subscription-container {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.subscription-header {
    text-align: center;
    margin-bottom: 3rem;
}

.subscription-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #513c30;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.subscription-subtitle {
    font-size: 1.125rem;
    color: #755641;
    line-height: 1.6;
}

.subscription-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .subscription-plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

.subscription-card {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    border: 2px solid #e6d9c8;
    transition: all 0.3s ease;
}

.subscription-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(117, 86, 65, 0.12);
}

.subscription-card-current {
    border-color: #da4f2a;
    border-width: 3px;
    box-shadow: 0 10px 30px rgba(218, 79, 42, 0.15);
    background: linear-gradient(135deg, rgba(253, 252, 250, 1) 0%, rgba(254, 246, 244, 1) 100%);
}

.subscription-card-current:hover {
    box-shadow: 0 15px 40px rgba(218, 79, 42, 0.2);
}

.subscription-card-upgrade {
    opacity: 0.85;
}

.subscription-card-upgrade:hover {
    opacity: 1;
    border-color: #a67f5b;
}

.subscription-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(218, 79, 42, 0.3);
}

.subscription-card-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.subscription-plan-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #513c30;
    margin-bottom: 0.5rem;
}

.subscription-plan-desc {
    font-size: 0.95rem;
    color: #8e6a4d;
    line-height: 1.5;
}

.subscription-price-section {
    text-align: center;
    margin: 1.5rem 0;
}

.subscription-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.subscription-currency {
    font-size: 1.75rem;
    font-weight: 600;
    color: #755641;
}

.subscription-amount {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #513c30;
    line-height: 1;
}

.subscription-card-current .subscription-amount {
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subscription-period {
    display: block;
    font-size: 1rem;
    color: #8e6a4d;
    margin-top: 0.25rem;
}

.subscription-limit {
    text-align: center;
    padding: 1rem;
    background-color: rgba(237, 107, 67, 0.05);
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}

.subscription-limit-text {
    font-size: 0.95rem;
    color: #755641;
}

.subscription-limit-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #da4f2a;
    margin: 0 0.35rem;
}

.subscription-actions {
    margin-top: 2rem;
}

.subscription-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

.subscription-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.subscription-btn:hover svg {
    transform: translateX(4px);
}

.subscription-btn-primary {
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(218, 79, 42, 0.3);
}

.subscription-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(218, 79, 42, 0.4);
    transform: translateY(-2px);
}

.subscription-btn-secondary {
    background: white;
    color: #da4f2a;
    border: 2px solid #da4f2a;
}

.subscription-btn-secondary:hover {
    background: #fef6f4;
    border-color: #ed6b43;
    color: #ed6b43;
}

@media (max-width: 640px) {
    .subscription-container {
        padding: 2rem 1rem;
    }

    .subscription-header {
        margin-bottom: 2rem;
    }

    .subscription-title {
        font-size: 1.75rem;
    }

    .subscription-subtitle {
        font-size: 1rem;
    }

    .subscription-plans {
        gap: 1.5rem;
    }

    .subscription-card {
        padding: 1.5rem;
    }

    .subscription-plan-name {
        font-size: 1.5rem;
    }

    .subscription-amount {
        font-size: 2.75rem;
    }
}

/* ===== FAQ PAGE STYLES ===== */

.faq-container {
    max-width: 56rem;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #513c30;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.faq-subtitle {
    font-size: 1.125rem;
    color: #755641;
    line-height: 1.6;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.faq-item {
    width: 100%;
    background: white;
    border: 2px solid #e6d9c8;
    border-radius: 1rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.faq-item:hover {
    border-color: #d3bda2;
    box-shadow: 0 4px 12px rgba(117, 86, 65, 0.08);
}

.faq-item-open {
    border-color: #da4f2a;
    box-shadow: 0 4px 16px rgba(218, 79, 42, 0.12);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background-color: rgba(237, 107, 67, 0.03);
}

.faq-item-open .faq-question {
    background-color: rgba(237, 107, 67, 0.05);
}

.faq-question-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: #513c30;
    line-height: 1.5;
    padding-right: 1rem;
}

.faq-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: #8e6a4d;
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item-open .faq-icon {
    transform: rotate(180deg);
    color: #da4f2a;
}

.faq-answer {
    display: none;
    padding: 0 1.5rem 1.5rem;
}

.faq-item-open .faq-answer {
    display: block;
}

.faq-answer p {
    color: #755641;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-link {
    color: #da4f2a;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.faq-link:hover {
    color: #ed6b43;
    text-decoration: underline;
}

.faq-footer {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(253, 252, 250, 1) 0%, rgba(254, 246, 244, 1) 100%);
    border-radius: 1rem;
    border: 2px solid #e6d9c8;
    text-align: center;
}

.faq-footer-text {
    font-size: 1.125rem;
    color: #755641;
}

.faq-footer-link {
    color: #da4f2a;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.faq-footer-link:hover {
    color: #ed6b43;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .faq-container {
        padding: 2rem 1rem;
    }

    .faq-header {
        margin-bottom: 2rem;
    }

    .faq-title {
        font-size: 1.75rem;
    }

    .faq-subtitle {
        font-size: 1rem;
    }

    .faq-question {
        padding: 1rem 1.25rem;
    }

    .faq-question-text {
        font-size: 1rem;
    }

    .faq-answer {
        padding: 0 1.25rem 1.25rem;
    }

    .faq-footer {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .faq-footer-text {
        font-size: 1rem;
    }
}

/* ===== LOGIN PAGE STYLES ===== */

.login-page {
    min-height: calc(100vh - 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
}

.login-page::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(237, 107, 67, 0.08) 0%, transparent 70%);
    filter: blur(60px);
    animation: login-ambient 15s ease-in-out infinite;
}

.login-page::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(122, 139, 95, 0.06) 0%, transparent 70%);
    filter: blur(60px);
    animation: login-ambient 15s ease-in-out infinite reverse;
}

@keyframes login-ambient {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.1); }
}

.login-container {
    width: 100%;
    max-width: 28rem;
    position: relative;
    z-index: 1;
}

.login-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(81, 60, 48, 0.08);
    border: 1px solid rgba(230, 217, 200, 0.5);
    animation: login-card-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes login-card-enter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, #fef6f4 0%, #fde9e3 100%);
    border-radius: 1rem;
    border: 2px solid #fcd5c7;
    animation: login-icon-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

@keyframes login-icon-enter {
    from {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.login-icon svg {
    width: 2rem;
    height: 2rem;
    color: #da4f2a;
}

.login-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.875rem;
    font-weight: 800;
    color: #513c30;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.login-subtitle {
    font-size: 0.95rem;
    color: #755641;
    line-height: 1.5;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.login-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #513c30;
}

.login-input {
    width: 100%;
    padding: 0.875rem 1.125rem;
    font-size: 1rem;
    color: #513c30;
    background: white;
    border: 2px solid #e6d9c8;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    outline: none;
}

.login-input::placeholder {
    color: #c9b299;
}

.login-input:focus {
    border-color: #da4f2a;
    box-shadow: 0 0 0 4px rgba(218, 79, 42, 0.1);
}

.login-input:hover {
    border-color: #d3bda2;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #d3bda2;
    border-radius: 0.375rem;
    color: #da4f2a;
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-checkbox:checked {
    background-color: #da4f2a;
    border-color: #da4f2a;
}

.login-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(218, 79, 42, 0.1);
}

.login-checkbox-label {
    font-size: 0.875rem;
    color: #755641;
    cursor: pointer;
    user-select: none;
}

.login-actions {
    margin-top: 0.5rem;
}

.login-submit {
    width: 100%;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(218, 79, 42, 0.25);
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 79, 42, 0.35);
}

.login-submit:active {
    transform: translateY(0);
}

.login-footer {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid #e6d9c8;
    text-align: center;
}

.login-footer .text-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #755641;
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
    margin-bottom: 0.75rem;
}

.login-footer .text-link:hover {
    color: #da4f2a;
}

/* Responsive */
@media (max-width: 640px) {
    .login-page {
        padding: 1.5rem 1rem;
    }

    .login-card {
        padding: 2rem 1.5rem;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .login-input {
        padding: 0.75rem 1rem;
    }
}

/* ===== SIGN UP PAGE STYLES ===== */

.signup-page {
    min-height: calc(100vh - 5rem);
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #fdfcfa 0%, #fef6f4 100%);
    position: relative;
    overflow: hidden;
}

.signup-page::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 180%;
    background: radial-gradient(circle, rgba(237, 107, 67, 0.06) 0%, transparent 70%);
    pointer-events: none;
    animation: signup-float 20s ease-in-out infinite;
}

@keyframes signup-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-30px, 40px) rotate(2deg); }
    66% { transform: translate(30px, -30px) rotate(-2deg); }
}

.signup-container {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .signup-container {
        grid-template-columns: 5fr 4fr;
        gap: 0;
        min-height: calc(100vh - 5rem);
    }
}

/* ===== LEFT HERO PANEL ===== */

.signup-hero {
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, #513c30 0%, #755641 100%);
    overflow: hidden;
}

.signup-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(237, 107, 67, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(122, 139, 95, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.signup-hero::after {
    content: '';
    position: absolute;
    bottom: -5%;
    left: -5%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(218, 79, 42, 0.08) 0%, transparent 70%);
    filter: blur(40px);
    animation: signup-pulse 8s ease-in-out infinite;
}

@keyframes signup-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.signup-hero-content {
    max-width: 36rem;
    position: relative;
    z-index: 2;
    animation: signup-hero-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes signup-hero-enter {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.signup-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    background: rgba(253, 252, 250, 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253, 252, 250, 0.2);
    border-radius: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 0 20px rgba(237, 107, 67, 0.3);
}

.signup-hero-badge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #ed6b43;
}

.signup-hero-badge span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fdfcfa;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.signup-hero-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: #fdfcfa;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
    animation: signup-title-enter 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

@keyframes signup-title-enter {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.signup-hero-accent {
    display: block;
    background: linear-gradient(135deg, #ed6b43 0%, #f9b89d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 0.5rem;
}

.signup-hero-description {
    font-size: 1.125rem;
    color: rgba(253, 252, 250, 0.85);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    animation: signup-desc-enter 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards;
}

@keyframes signup-desc-enter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.signup-hero-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.signup-hero-feature {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    animation: signup-feature-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.signup-hero-feature:nth-child(1) { animation-delay: 0.5s; }
.signup-hero-feature:nth-child(2) { animation-delay: 0.6s; }
.signup-hero-feature:nth-child(3) { animation-delay: 0.7s; }

@keyframes signup-feature-enter {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.signup-hero-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #ed6b43;
    flex-shrink: 0;
}

.signup-hero-feature span {
    font-size: 1rem;
    color: rgba(253, 252, 250, 0.9);
    font-weight: 500;
}

/* ===== RIGHT FORM PANEL ===== */

.signup-form-panel {
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfcfa;
    position: relative;
}

.signup-form-wrapper {
    max-width: 28rem;
    width: 100%;
    animation: signup-form-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
}

@keyframes signup-form-enter {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.signup-form-header {
    margin-bottom: 2.5rem;
}

.signup-form-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 800;
    color: #513c30;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.signup-form-subtitle {
    font-size: 0.95rem;
    color: #755641;
    line-height: 1.5;
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.signup-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.signup-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #513c30;
    cursor: pointer;
    transition: color 0.2s ease;
}

.signup-label:hover {
    color: #da4f2a;
}

.signup-label-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: #a67f5b;
    transition: color 0.2s ease;
}

.signup-label:hover .signup-label-icon {
    color: #da4f2a;
}

.signup-input {
    width: 100%;
    padding: 0.875rem 1.125rem;
    font-size: 1rem;
    color: #513c30;
    background: white;
    border: 2px solid #e6d9c8;
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.signup-input::placeholder {
    color: #c9b299;
}

.signup-input:focus {
    border-color: #da4f2a;
    box-shadow: 0 0 0 4px rgba(218, 79, 42, 0.1);
    transform: translateY(-2px);
}

.signup-input:hover {
    border-color: #d3bda2;
}

.signup-field-hint {
    font-size: 0.8rem;
    color: #8e6a4d;
    margin-top: -0.25rem;
}

.signup-actions {
    margin-top: 1rem;
}

.signup-submit {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    border: none;
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(218, 79, 42, 0.3);
    position: relative;
    overflow: hidden;
}

.signup-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ed6b43 0%, #f58e6b 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.signup-submit:hover::before {
    opacity: 1;
}

.signup-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(218, 79, 42, 0.4);
}

.signup-submit:active {
    transform: translateY(-1px);
}

.signup-footer {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e6d9c8;
    text-align: center;
}

.signup-footer .text-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #755641;
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
    margin-bottom: 0.75rem;
}

.signup-footer .text-link:hover {
    color: #da4f2a;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1023px) {
    .signup-hero {
        padding: 2.5rem 1.5rem;
    }

    .signup-hero-title {
        font-size: 2.5rem;
    }

    .signup-form-panel {
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .signup-page {
        min-height: auto;
    }

    .signup-hero {
        padding: 2rem 1.25rem;
    }

    .signup-hero-title {
        font-size: 2rem;
    }

    .signup-hero-description {
        font-size: 1rem;
    }

    .signup-form-panel {
        padding: 2rem 1.25rem;
    }

    .signup-form-title {
        font-size: 1.75rem;
    }

    .signup-input {
        padding: 0.75rem 1rem;
    }

    .signup-submit {
        padding: 0.875rem 1.75rem;
    }
}

/* ===== RECIPES COLLECTION PAGE STYLES ===== */

.recipes-collection {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.recipes-header {
    text-align: center;
    margin-bottom: 3rem;
}

.recipes-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #513c30;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.recipes-subtitle {
    font-size: 1.125rem;
    color: #755641;
    font-weight: 400;
}

/* Empty State */
.recipes-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 1.5rem;
    border: 2px dashed #d3bda2;
    max-width: 32rem;
    margin: 0 auto;
}

.recipes-empty-icon {
    width: 4rem;
    height: 4rem;
    color: #c9b299;
    margin: 0 auto 1.5rem;
}

.recipes-empty-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #513c30;
    margin-bottom: 0.5rem;
}

.recipes-empty-text {
    font-size: 1rem;
    color: #755641;
    margin-bottom: 2rem;
}

.recipes-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    color: white;
    border-radius: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(218, 79, 42, 0.25);
}

.recipes-empty-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 79, 42, 0.35);
}

/* Recipe Grid */
.recipes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 640px) {
    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Recipe Card */
.recipe-card {
    display: block;
    background: white;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 2px solid #e6d9c8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(117, 86, 65, 0.06);
}

.recipe-card:hover {
    transform: translateY(-8px);
    border-color: #da4f2a;
    box-shadow: 0 12px 32px rgba(117, 86, 65, 0.15);
}

/* Recipe Card Image */
.recipe-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: linear-gradient(135deg, #f5ede3 0%, #e6d9c8 100%);
    overflow: hidden;
}

.recipe-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.recipe-card:hover .recipe-card-image {
    transform: scale(1.05);
}

.recipe-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(81, 60, 48, 0.6) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.recipe-card:hover .recipe-card-overlay {
    opacity: 1;
}

.recipe-card-play-icon {
    width: 4rem;
    height: 4rem;
    color: white;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.recipe-card:hover .recipe-card-play-icon {
    transform: scale(1);
}

/* Recipe Card Content */
.recipe-card-content {
    padding-top: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 0;
}

.recipe-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #513c30;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.recipe-card:hover .recipe-card-title {
    color: #da4f2a;
}

.recipe-card-channel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: #8e6a4d;
}

.recipe-card-channel-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.recipe-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f5ede3;
}

.recipe-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: #755641;
}

.recipe-card-meta-item svg {
    width: 1.125rem;
    height: 1.125rem;
    color: #a67f5b;
    flex-shrink: 0;
}

.recipe-card-date {
    font-size: 0.8rem;
    color: #9a8369;
    font-style: italic;
}

/* Pagination */
.recipes-pagination {
    margin-top: 3rem;
}

/* Responsive */
@media (max-width: 640px) {
    .recipes-title {
        font-size: 2rem;
    }

    .recipes-collection {
        padding: 1.5rem 1rem 3rem;
    }

    .recipe-card-content {
        padding-top: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: 1.25rem;
        padding-left: 0;
    }

    .recipe-card-title {
        font-size: 1.125rem;
    }
}

/* ===== FLASH MESSAGES STYLES ===== */

.flash-container {
    position: fixed;
    top: 6rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 100;
    padding: 0 1rem;
    pointer-events: none;
}

.flash-message {
    max-width: 42rem;
    width: 100%;
    background: white;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 10px 40px rgba(81, 60, 48, 0.15);
    border: 2px solid;
    pointer-events: auto;
    animation: flash-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes flash-slide-in {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flash-slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

.flash-content {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
}

.flash-icon-wrapper {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.flash-message:hover .flash-icon-wrapper {
    transform: scale(1.05);
}

.flash-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.flash-icon-success {
    background: linear-gradient(135deg, #7a8b5f 0%, #8fa16c 100%);
    color: white;
}

.flash-icon-error {
    background: linear-gradient(135deg, #da4f2a 0%, #ed6b43 100%);
    color: white;
}

.flash-text {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: #513c30;
    flex: 1;
    min-width: 0;
}

.flash-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.flash-help-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.flash-help-link svg {
    width: 1rem;
    height: 1rem;
}

.flash-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flash-close-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Success/Notice variant */
.flash-notice {
    border-color: #b4c69c;
    background: linear-gradient(135deg, #fdfcfa 0%, #f8faf5 100%);
}

.flash-notice .flash-close {
    color: #7a8b5f;
}

.flash-notice .flash-close:hover {
    background-color: #e8f0dc;
    color: #5d6e48;
}

/* Error/Alert variant */
.flash-alert {
    border-color: #fcd5c7;
    background: linear-gradient(135deg, #fdfcfa 0%, #fef6f4 100%);
}

.flash-alert .flash-help-link {
    color: #da4f2a;
}

.flash-alert .flash-help-link:hover {
    background-color: #fcd5c7;
    color: #c23d1a;
}

.flash-alert .flash-close {
    color: #da4f2a;
}

.flash-alert .flash-close:hover {
    background-color: #fcd5c7;
    color: #c23d1a;
}

/* Responsive */
@media (max-width: 640px) {
    .flash-container {
        top: 4.5rem;
    }

    .flash-message {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    .flash-icon-wrapper {
        width: 2rem;
        height: 2rem;
    }

    .flash-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .flash-text {
        font-size: 0.875rem;
    }

    .flash-help-link {
        font-size: 0.8rem;
        padding: 0.375rem 0.625rem;
    }

    .flash-help-link svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    .flash-close-icon {
        width: 1.125rem;
        height: 1.125rem;
    }
}