/* === MYAVANA BRAND COLORS === */
:root {
    --onyx: #222323;
    --stone: #f5f5f7;
    --white: #ffffff;
    --sand: #eeece1;
    --coral: #e7a690;
    --light-coral: #fce5d7;
    --blueberry: #4a4d68;
    --myavana-white: #fff;
    --transition: all 0.3s ease-in-out;
    --bg-gradient-one: linear-gradient(130deg, var(--sand), #fff 33%, var(--sand));
    --bg-boxshadow-one: rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0,
        rgba(187, 18, 199, 0.15) 1px 1px 200px 0px,
        rgba(0, 98, 178, 0.15) -1px -1px 200px 0px;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

@font-face {
    font-family: "Archivo Narrow";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_n4.d4b9d2f1da097aa0a5086dbe5b5d10d347f871b5.woff2?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=c8c23277f677fe381d6ddd81c1b7e15a65e662ae3f20706d5f72d5037b271057") format("woff2"),
        url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_n4.349cd3904920e24a723ec27d52a45675dd70115f.woff?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=6e851d0f09a47ce3ae036c39641b098142cac3a937dbee1e55afebdb0c444e40") format("woff");
}

@font-face {
    font-family: "Archivo Narrow";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_n5.9f214bf19b6424f77a07bc8ff33bd458f7dd5ae8.woff2?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=b0e7bd6a987dda48f20e31ce6f128be6be63da384aea125e0d57399510988321") format("woff2"),
        url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_n5.f0698b16bfc79ae900be7c8108bf7eb2ab8f2a29.woff?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=5ef82f52472b3e591b9152a9b1c768787e53088116799a86b8800b979d01a45e") format("woff");
}

@font-face {
    font-family: "Archivo Narrow";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_n6.e447f4ff66dde1238d959c8e5b06668b0f1ff159.woff2?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=c2df069f57eac083187503cdac067ef29d6797970fb49861b792a83e3ad56cb2") format("woff2"),
        url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_n6.660c5838a5215c1624897e8db37ac4c3f509ce16.woff?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=92ba0e0bf41c4583baea4198aaada40a5b03eb2e9eeae0ad6069403ec94dd0d8") format("woff");
}

@font-face {
    font-family: "Archivo Narrow";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_i4.17739b2682d47a0adfc9cc5a306ff7fbf266c280.woff2?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=cfb8ab6aececceea05dfeb760f9d605dcee3d19c410373392a571de19624d3e3") format("woff2"),
        url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_i4.3af154e6263d1c9785c66e51942f45bd5941b027.woff?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=7d32e0b6fee6a1c4eac5aa01479eb6f3c67ea7476bedf2bf4bd6346feb11d40e") format("woff");
}

@font-face {
    font-family: "Archivo Narrow";
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    src: url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_i6.f1e2cef82f69217520498c6e611be01415cbe02f.woff2?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=00aa78c89d836cada28965ee8949fa1fc74344dede0c4dc7679c6fc2d7b56f7c") format("woff2"),
        url("//www.myavana.com/cdn/fonts/archivo_narrow/archivonarrow_i6.f711d95a7aa03c1b951a2986c03d5f915eeb033b.woff?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=20817300b2aa89db99d4202a0e7367afe825115d5f7d30521b094d44e58c0f2b") format("woff");
}


@font-face {
    font-family: Archivo;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("//www.myavana.com/cdn/fonts/archivo/archivo_n4.abb5ec97705c33fe369ef678fc93b9cf87658330.woff2?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=13eb724db2f474487dc287fab5a8deed455c328851913886d6edac76c9ef73a0") format("woff2"),
        url("//www.myavana.com/cdn/fonts/archivo/archivo_n4.0ae8e008abb455fbd654c11c5b30dc47b6849133.woff?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=59dcd8bc270bcbb45c600d58443e8e18fec9d709c8e1dfbf452be39c4d5b0482") format("woff");
}

@font-face {
    font-family: Archivo;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("//www.myavana.com/cdn/fonts/archivo/archivo_n4.abb5ec97705c33fe369ef678fc93b9cf87658330.woff2?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=13eb724db2f474487dc287fab5a8deed455c328851913886d6edac76c9ef73a0") format("woff2"),
        url("//www.myavana.com/cdn/fonts/archivo/archivo_n4.0ae8e008abb455fbd654c11c5b30dc47b6849133.woff?h1=bXlhdmFuYS5jb20&h2=bXlhdmFuYS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=59dcd8bc270bcbb45c600d58443e8e18fec9d709c8e1dfbf452be39c4d5b0482") format("woff");
}

#youzify-profile-navmenu {
    display: none;
}

.mck-sidebox-launcher {
    bottom: 60px !important;
}

#menu .nav a,
#menu .menu a,
.menu .nav a {
    color: var(--white);
}

body {
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading-font,
.h1-xlarge,
.h1-large {
    font-style: normal;
    font-weight: 600;
    font-family: 'Archivo Expanded', sans-serif !important;
}

.logolink.text-logo,
.customer-addresses .my-address .address-index {
    font-style: normal;
    font-weight: 400;
    font-family: "Archivo Light";
}

.youzify-hdr-v7 {
    display: none;
}

#youzify-profile-navmenu {
    margin-top: 60px;
}

.myvana-page-container,
.youzify-sidebar-column {
    padding-block: 100px !important;
}

button {
    cursor: pointer;
}

.myavana-header-section {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo Expanded Medium', sans-serif;
    font-weight: 800;
    color: var(--onyx);
    font-size: 1.1rem;
    /* smaller size */
    text-transform: uppercase;
    margin-top: 2rem !important;
}

.myavana-logo-section {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

.myavana-logo-section img {
    height: 40px;
    /* smaller logo */
}

.myavana-header-section .text {
    margin-top: 0.5rem;
}

/* Myavana Gradient Options */
/* Based on Myavana Brand Guidelines: Onyx (#222323), Stone (#f5f5f7), White (#ffffff), Sand (#eeece1), Coral (#e7a690), Light Coral (#fce5d7), Blueberry (#4a4d68) */
/* Designed to reflect elegance, innovation, and modern femininity */

/* Gradient 1: Coral Dawn */
.myavana-gradient-coral-dawn {
    background: linear-gradient(135deg, #fce5d7 0%, #e7a690 50%, #ffffff 100%);
}

/* Description: A soft, feminine gradient blending Light Coral to Coral, fading into White. Evokes warmth and empowerment, ideal for hero sections or CTAs. Use with Onyx text for contrast. */
/* Suggested Use: Hero background, button hovers, or promotional banners. */

/* Gradient 2: Sand Serenity */
.myavana-gradient-sand-serenity {
    background: linear-gradient(90deg, #eeece1 0%, #f5f5f7 50%, #ffffff 100%);
}

/* Description: A neutral, calming gradient from Sand to Stone to White. Reflects timeless neutrality and sophistication, perfect for subtle backgrounds. Pair with Onyx or Coral text. */
/* Suggested Use: Section backgrounds, product cards, or footer. */

/* Gradient 3: Onyx Elegance */
.myavana-gradient-onyx-elegance {
    background: linear-gradient(180deg, #222323 0%, #4a4d68 50%, #e7a690 100%);
}

/* Description: A bold, elegant gradient from Onyx to Blueberry to Coral. Conveys expertise and innovation with a modern edge. Use with White or Light Coral text for readability. */
/* Suggested Use: Feature sections, app icon backgrounds, or overlays on hero images. */

/* Gradient 4: Blueberry Bliss */
.myavana-gradient-blueberry-bliss {
    background: linear-gradient(45deg, #4a4d68 0%, #fce5d7 50%, #e7a690 100%);
}

/* Description: A subtle blend of Blueberry to Light Coral to Coral, offering a refined, feminine contrast. Use sparingly for accents to maintain brand hierarchy. Pair with White text. */
/* Suggested Use: Button backgrounds, decorative elements, or social media graphics. */

/* Gradient 5: Stone Harmony */
.myavana-gradient-stone-harmony {
    background: linear-gradient(120deg, #f5f5f7 0%, #eeece1 50%, #fce5d7 100%);
}

/* Description: A soft transition from Stone to Sand to Light Coral, embodying approachability and warmth. Ideal for inclusive imagery backgrounds. Use with Onyx text. */
/* Suggested Use: Inclusivity section, photo overlays, or subtle UI elements. */

/* Gradient 6: Coral Innovation */
.myavana-gradient-coral-innovation {
    background: linear-gradient(to right, #e7a690 0%, #fce5d7 30%, #4a4d68 100%);
}

/* Description: A vibrant gradient from Coral to Light Coral to Blueberry, symbolizing innovation and femininity. Best for dynamic elements like CTAs or headers. Use with White text. */
/* Suggested Use: Call-to-action buttons, header banners, or product highlights. */

/* Usage Notes:
   - Ensure gradients are applied on high-contrast backgrounds (e.g., Stone, White, Onyx) as per Myavana guidelines.
   - Maintain clearspace equivalent to the width/height of the Signature M around text or logos.
   - Test readability with text colors (Onyx, White, Coral) to meet WCAG contrast standards.
   - Apply gradients sparingly to avoid overwhelming the design, aligning with the Seal of Approval’s intentional use guideline.
*/


body {
    font-family: 'Archivo', sans-serif;
    background-color: #f5f5f7;
    color: #222323;
}

.myavana-title {
    font-family: 'Archivo Expanded Medium', sans-serif;
    text-transform: uppercase !important;
    background-color: var(--light-coral) !important;
    color: var(--onyx) !important;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    transition: var(--transition);
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto var(--sand) !important;
}

/* Spacing */
.mb-3 {
    margin-bottom: 24px !important;
}

.mt-3 {
    margin-top: 24px !important;
}

.ml-3 {
    margin-left: 24px !important;
}

.mr-3 {
    margin-right: 24px !important;
}

.mx-3 {
    margin-inline: 24px !important;
}

.my-3 {
    margin-block: 24px !important;
}

.pi-3 {
    padding-inline: 24px !important;
}

.pt-3 {
    padding-top: 24px !important;
}

.pl-3 {
    padding-left: 24px !important;
}

.pr-3 {
    padding-right: 24px !important;
}

.px-3 {
    padding-inline: 24px !important;
}

.py-3 {
    padding-block: 24px !important;
}

.pb-3 {
    padding-bottom: 24px !important;
}

/* === GENERAL STYLING === */
.myavana-entry-form,
.myavana-timeline,
.myavana-tryon,
.myavana-analytics,
.myavana-profile {
    margin: 0 auto;
    padding: 24px;
    background-color: var(--stone);
    border-radius: 8px;
    font-family: 'Archivo', sans-serif;
    transition: var(--transition);
}

/* === FORM INPUTS === */
.myavana-entry-form input,
.myavana-entry-form textarea,
.myavana-entry-form select,
.myavana-profile input,
.myavana-profile textarea,
.myavana-profile select,
.myavana-tryon input,
.myavana-tryon textarea,
.myavana-tryon select {
    background: linear-gradient(130deg, var(--sand), #fff 33%, var(--sand));
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0,
        rgba(187, 18, 199, 0.15) 1px 1px 200px 0px,
        rgba(0, 98, 178, 0.15) -1px -1px 200px 0px !important;
    border: 1px solid var(--sand);
    border-radius: 1rem;
    color: var(--onyx) !important;
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    font-family: 'Archivo', sans-serif;
    transition: var(--transition);
}

.myavana-entry-form input:focus,
.myavana-profile input:focus,
.myavana-tryon input:focus,
.myavana-entry-form textarea:focus,
.myavana-profile textarea:focus,
.myavana-tryon textarea:focus,
.myavana-entry-form select:focus,
.myavana-profile select:focus,
.myavana-tryon select:focus {
    border: 1px solid var(--light-coral) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(231, 166, 144, 0.3);
}

/* === LABELS === */
.myavana-entry-form label,
.myavana-profile label,
.myavana-tryon label {
    display: block;
    font-weight: 600;
    margin-top: 12px;
    color: var(--onyx);
    font-family: 'Archivo', sans-serif;
}

/* === BUTTONS === */
.myavana-entry-form button,
.myavana-tryon button {
    background-color: var(--white);
    color: var(--onyx);
    padding: 12px 24px;
    border: 1px solid var(--onyx);
    border-radius: 0px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Archivo Expanded Medium', sans-serif;
    transition: var(--transition);
}

.myavana-entry-form button,
.myavana-profile button,
.myavana-tryon button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: transparent;
    /* default transparent or your normal bg */
    color: var(--onyx);
    transition: color 0.3s, transform 0.3s;
}

.myavana-entry-form button::before,
.myavana-profile button::before,
.myavana-tryon button::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: var(--light-coral);
    z-index: -1;
    transition: height 0.4s ease;
}

.myavana-entry-form button:hover::before,
.myavana-profile button:hover::before,
.myavana-tryon button:hover::before {
    height: 100%;
}

.myavana-entry-form button:hover,
.myavana-profile button:hover,
.myavana-tryon button:hover {
    color: var(--onyx);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.myavana-primary-btn {
    background-color: var(--white);
    color: var(--onyx);
    padding: 12px 16px;
    border: 1px solid var(--onyx);
    border-radius: 0px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Archivo Expanded Medium', sans-serif;
    transition: var(--transition);
    width: fit-content;
}

/* === TEXT + FADE === */
.myavana-ai-tip,
.myavana-tryon #loading-tips {
    background: linear-gradient(135deg, var(--coral) 0%, var(--blueberry) 100%);
    color: var(--white) !important;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
    border-left: 4px solid var(--coral);
    color: var(--onyx);
    font-family: 'Archivo', sans-serif;
    animation: fadeIn 0.6s ease-in-out;
}


.myavana-profile p,
.myavana-tryon p,
.myavana-analytics p {
    margin: 10px 0;
    font-size: 14px;
    color: var(--onyx);
    letter-spacing: -0.02em;
}

/* === TRY-ON SPECIFIC === */
.myavana-tryon .camera-container,
.myavana-tryon .preview-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid var(--sand);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--white);
}

.myavana-tryon #camera-view video {
    width: 100% !important;
    max-width: 500px;
    border-radius: 8px;
}

.myavana-tryon .ar-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.myavana-tryon .options-panel {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.myavana-tryon .style-option {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid var(--sand);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.myavana-tryon .style-option:hover,
.myavana-tryon .style-option.selected {
    border-color: var(--coral);
    transform: scale(1.1);
}

.myavana-tryon .color-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 12px 0;
    margin-top: 12px;
}

.myavana-tryon .color-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.myavana-tryon .color-option:hover {
    transform: scale(1.1);
}

.myavana-tryon .color-option.active {
    border: 3px solid var(--coral);
}

.myavana-tryon .hair-overlay {
    transition: var(--transition);
}

.myavana-tryon .help-text p {
    font-size: 14px;
    color: var(--blueberry);
    margin-top: 8px;
}

/* === ANALYTICS SPECIFIC === */
.myavana-analytics .analytics-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.myavana-analytics .summary-card {
    background: rgba(255, 255, 255, 0.1);
    outline: var(--p-card) solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    color: var(--onyx);
    border: 1px solid var(--sand);
    border-radius: 8px;
    padding: 16px;
    flex: 1;
    text-align: center;
    transition: var(--transition);
}

.myavana-analytics .summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.myavana-analytics .summary-card h3 {
    font-family: 'Archivo Expanded Medium', sans-serif;
    color: var(--onyx);
    margin-bottom: 8px;
    font-size: 16px;
    text-transform: uppercase;
}

.myavana-analytics .summary-card p {
    font-size: 16px;
    color: var(--blueberry);
    font-weight: 600;
}

.myavana-analytics .analytics-chart {
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: 8px;
    padding: 16px;
}

/* === TIMELINE === */
.tl-slide {
    background-color: var(--stone);
}

.tl-text .tl-headline-date,
.tl-text h3.tl-headline-date {
    font-family: 'Archivo Expanded Medium', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    background-color: var(--light-coral);
    color: var(--onyx);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    transition: var(--transition);
}

.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content {
    background-color: var(--onyx);
    color: var(--white);
    border: 1px solid var(--light-coral);
    border-radius: 8px;
    padding: 12px;
    transition: var(--transition);
}

.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background-color: transparent;
    box-shadow: 0px 4px 8px rgba(60, 64, 67, 0.15);
    z-index: 9;
}

.tl-timeline .tl-timenav-slider h2.tl-headline {
    color: var(--white) !important;
    font-family: 'Archivo Expanded Medium', sans-serif;
}

.tl-timeline p {
    font-family: 'Archivo', sans-serif;
    color: var(--onyx);
    letter-spacing: -0.02em;
}

/* === SLIDENAV TEXT === */
.tl-slidenav-previous .tl-slidenav-content-container,
.tl-slidenav-next .tl-slidenav-content-container,
.tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-title,
.tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-title,
.tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-description,
.tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-description {
    text-shadow: 1px 1px 1px var(--white);
    color: var(--blueberry);
    font-family: 'Archivo Expanded Medium', sans-serif;
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESPONSIVE === */
@media (max-width: 600px) {

    .myavana-entry-form,
    .myavana-profile,
    .myavana-tryon,
    .myavana-analytics {
        padding: 16px;
    }

    .myavana-entry-form input,
    .myavana-entry-form textarea,
    .myavana-entry-form select,
    .myavana-profile input,
    .myavana-profile textarea,
    .myavana-profile select,
    .myavana-tryon input,
    .myavana-tryon textarea,
    .myavana-tryon select {
        font-size: 14px;
    }

    /* .myavana-entry-form button,
  .myavana-profile button,
  .myavana-tryon button {
    width: 100%;
  } */

    .myavana-tryon .camera-container,
    .myavana-tryon .preview-container {
        max-width: 100%;
    }

    .myavana-tryon .style-option {
        width: 50px;
        height: 50px;
    }

    .myavana-tryon .color-option {
        width: 30px;
        height: 30px;
    }

    .myavana-analytics .analytics-summary {
        flex-direction: column;
    }

    .myavana-analytics .summary-card {
        width: 100%;
    }
}

.filepond--root {
    width: 480px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px dashed #c2cdda;
}

.file-upload-container {
    height: 350px;
    width: 430px;
}

.file-upload-container .file-upload-wrapper {
    position: relative;
    height: 350px;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    border: 2px dashed #c2cdda;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.file-upload-wrapper.active {
    border: none;
}

.file-upload-wrapper .file-upload-image {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.file-upload-wrapper .file-upload-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.file-upload-wrapper .file-upload-icon {
    font-size: 100px;
    color: #335cc5;
}

.file-upload-wrapper .file-upload-text {
    font-size: 20px;
    font-weight: 600;
    color: #5b5b7b;
}

.file-upload-wrapper #file-upload-cancel-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #335cc5;
    display: none;
}

.file-upload-wrapper.active:hover #file-upload-cancel-btn {
    display: block;
}

.file-upload-wrapper.active #file-upload-cancel-btn:hover {
    color: #e74c3c;
}

.file-upload-wrapper .file-upload-filename {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #fff;
    padding: 8px 0;
    font-size: 18px;
    display: none;
    background: linear-gradient(135deg, #637ffd 0%, #335cc5 100%);
}

.file-upload-wrapper.active:hover .file-upload-filename {
    display: block;
}

.file-upload-container #file-upload-custom-btn {
    margin-top: 30px;
    width: 100%;
    height: 50px;
    display: block;
    border: none;
    outline: none;
    border-radius: 25px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(135deg, #637ffd 0%, #335cc5 100%);
}

.div-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;

}

.entry-file-upload {
    padding-top: 100px;
}

.file-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-icon svg {
    height: 80px;
    fill: rgba(75, 85, 99, 1);
}


/* Profile Header */
.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 16px;
}

.profile-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--coral), transparent);
    transition: var(--transition);
}

.profile-header .profile-avatar {
    border-radius: 50%;
    border: 3px solid var(--light-coral);
    transition: var(--transition);
    height: 80px;
    width: 80px;
    object-fit: cover;
}

.profile-header .profile-avatar:hover {
    transform: scale(1.05);
    border-color: var(--coral);
}

/* Profile Details */
.profile-details {
    border-radius: 16px;
    padding: 24px;
    animation: fadeIn 0.6s ease-in-out;
    background-color: var(--stone);
    position: relative;
}


/* Signature M Element */
.signature-m {
    position: absolute;
    opacity: 0.03;
    z-index: 1;
    font-family: 'Archivo Expanded', sans-serif;

    font-weight: 800;
    color: var(--onyx);
    pointer-events: none;
}

.mj-1 {
    top: 70px;
    right: 75px;
    transform: rotate(15deg);
    font-size: 130px;
}

.mj-1 img {
    width: 600px;
}

.mj-2 {
    bottom: 70px;
    left: 400px;
    transform: rotate(-10deg);
    font-size: 50px;
}

.profile-card {
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    outline: var(--p-card) solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    padding: 20px;
    border-radius: 16px;
}

.profile-details-widget {
    padding: 12px;
    animation: fadeIn 0.6s ease-in-out;
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
}

.youzify-custom-widget-box-padding {
    padding: 0 !important;
}

.profile-card {
    position: relative;
    gap: 30px;
}

.profile-card p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
    font-size: 16px;
    color: var(--sand);
    position: relative;
    padding-left: 32px;
    transition: var(--transition);
    padding-block: 10px;
}

.text-sand {
    color: var(--sand) !important;
}



/* .profile-card p i {
  color: var(--light-coral);
  font-size: 20px;
  position: absolute;
  left: 0;
} */

.profile-card p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--light-coral);
    transition: var(--transition);
}

.profile-card p:hover::before {
    background: var(--coral);
}

.youzify-profile-navmenu .youzify-navbar-item a {
    color: var(--onyx);
}

.youzify-profile-navmenu .youzify-navbar-item a:hover {
    color: var(--blueberry) !important;

}

.youzify-widget {
    border-radius: 16px !important;
}

.youzify-widget-head {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

/* .pb-6{
  padding-bottom: 40px;
} */
img {
    border: none !important;
}

.youzify-header-cover,
.youzify-sidebar-column,
.youzify-author-v6 {
    border-radius: 16px !important;

}

.youzify-header-cover {
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    outline: var(--p-card) solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--sand) !important;
}

/* Profile Edit Form */
.profile-edit-form {
    background: var(--white);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.6s ease-in-out;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}



.form-actions button#cancel-edit-btn:hover {
    background: var(--light-coral);
    color: var(--onyx);
}

/* Analytics Chart */
.analytics-chart {
    background: var(--stone);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.analytics-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--coral);
    border-radius: 8px 8px 0 0;
}

.chart-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.chart-summary p {
    flex: 1;
    background: var(--sand);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    color: var(--onyx);
}

/* Recent Entry */
.recent-entry {
    background: var(--white);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.entry-card {
    position: relative;
    padding: 16px;
    border-left: 4px solid var(--blueberry);
}

.entry-card p {
    margin: 8px 0;
}

.entry-link {
    display: inline-block;
    color: var(--blueberry);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: var(--transition);
    margin-top: 12px;
}

.entry-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--coral);
    transition: var(--transition);
}

.entry-link:hover::after {
    width: 100%;
}

.text-blueberry {
    color: var(--blueberry) !important;
}

/* Hair Tip */
.hair-tip {
    background: linear-gradient(135deg, var(--coral) 0%, var(--blueberry) 100%);
    color: var(--white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.hair-tip p {
    font-size: 16px;
    color: var(--white) !important;
    margin-bottom: 16px;
    opacity: 0.96;
}

.hair-tip button {
    position: relative;
    overflow: hidden;
    color: var(--cl-light);
}

.hair-tip button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.hair-tip button:hover::after {
    width: 200px;
    height: 200px;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .chart-summary p {
        flex: 100%;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions button {
        width: 100%;
    }
}

/* Updated Loader Container */
.myavana-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0px;
    background-color: rgba(255, 255, 255, 0.95);
    transition: opacity 0.6s ease-in-out;
}

.mask {
    background-color: var(--stone);
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 100000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0px;
}

#mgtup-preloader {
    display: table;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    position: relative;
    line-height: 0px;
}

/* Updated Loader */
.myavana-loader {
    --size: 200px;
    --duration: 2.5s;
    --logo-color: var(--coral);
    --background: linear-gradient(0deg,
            rgba(231, 166, 144, 0.1) 0%,
            rgba(231, 166, 144, 0.3) 100%);
    height: var(--size);
    aspect-ratio: 1;
    position: relative;
    margin-bottom: 20px;
}

.myavana-loader .logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.myavana-loader .logo img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border: none !important;
    margin-top: 15px;
}

.myavana-loader .box {
    position: absolute;
    background: var(--background);
    border-radius: 50%;
    border-top: 2px solid var(--coral);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
    animation: ripple var(--duration) infinite ease-in-out;
}

.myavana-loader .box:nth-child(1) {
    inset: 35%;
    z-index: 99;
}

.myavana-loader .box:nth-child(2) {
    inset: 25%;
    z-index: 98;
    border-color: rgba(231, 166, 144, 0.8);
    animation-delay: 0.3s;
}

.myavana-loader .box:nth-child(3) {
    inset: 15%;
    z-index: 97;
    border-color: rgba(231, 166, 144, 0.6);
    animation-delay: 0.6s;
}

.myavana-loader .box:nth-child(4) {
    inset: 5%;
    z-index: 96;
    border-color: rgba(231, 166, 144, 0.4);
    animation-delay: 0.9s;
}

.myavana-loader .box:nth-child(5) {
    inset: 0%;
    z-index: 95;
    border-color: rgba(231, 166, 144, 0.2);
    animation-delay: 1.2s;
}

.myavana-loader .logo svg {
    fill: var(--logo-color);
    width: 100%;
    animation: color-change var(--duration) infinite ease-in-out;
}

@keyframes ripple {
    0% {
        transform: scale(0.9);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.3);
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }
}

@keyframes color-change {
    0% {
        fill: var(--coral);
    }

    50% {
        fill: var(--light-coral);
    }

    100% {
        fill: var(--coral);
    }
}

/* New Sliding Tips */
.loader-tips {
    width: 600px;
    height: 60px;
    /* overflow: hidden; */
    text-align: center;
    position: relative;
    margin-top: 20px;
}

.loader-tip {
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    color: var(--onyx);
    position: absolute;
    width: 100%;
    animation: slideUp 5s ease-in-out infinite;
    padding: 0 10px;
    display: none;
}

.loader-tip::before {
    content: '✨';
    margin-right: 8px;
}

.loader-tip::after {
    content: '✨';
    margin-left: 8px;
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    20% {
        transform: translateY(0);
        opacity: 1;
    }

    80% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* No Entries Section */
.no-entries {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--white);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    animation: fadeIn 0.6s ease-in-out;
}

.no-entries-message {
    font-family: 'Archivo', sans-serif;
    font-size: 18px;
    color: var(--onyx);
    margin-bottom: 24px;
    line-height: 1.5;
}






/* Responsive Adjustments */
@media (max-width: 767px) {
    .no-entries {
        padding: 16px;
    }

    .no-entries-message {
        font-size: 16px;
    }

    .add-entry-btn {
        width: 100%;
        padding: 14px;
    }
}


/* File Upload Styling */
.filepond--root {
    width: 100%;
    max-width: 500px;
    height: 200px;
    border: 2px dashed var(--sand);
    border-radius: 8px;
    background: var(--white);
}

.filepond--panel-root {
    background: var(--white);
    border-radius: 8px;
}

.filepond--drop-label {
    color: var(--onyx);
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
}

.filepond--file-action-button {
    background: var(--coral);
    color: var(--white);
}

.filepond--file-action-button:hover {
    background: var(--light-coral);
}

/* Button Styling */
.myavana-button {
    background-color: var(--white);
    color: var(--onyx);
    padding: 12px 24px;
    border: 1px solid var(--onyx);
    border-radius: 0px;
    cursor: pointer;
    font-family: 'Archivo Expanded Medium', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin: 0 8px;
}

.myavana-button:hover {
    background-color: var(--light-coral);
    color: var(--onyx);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}



/* Camera, Upload, and Preview Controls */
.camera-controls,
.upload-controls,
.preview-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Style Options */
.style-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.style-option {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px solid var(--sand);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.style-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.style-option.active,
.style-option:hover {
    border-color: var(--coral);
    transform: scale(1.1);
}

/* Tooltip Styling */
.style-option .tooltip,
.color-option .tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--onyx);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    margin-bottom: 8px;
}

.style-option:hover .tooltip,
.color-option:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.style-option .tooltip::after,
.color-option .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--onyx);
}

/* Color Slider */
.color-slider {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 12px 0;
}

.color-option {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.active {
    border: 3px solid var(--coral);
}

/* Preview Container */
.preview-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .style-option {
        width: 60px;
        height: 60px;
    }

    .color-option {
        width: 32px;
        height: 32px;
    }

    .myavana-checkbox-content {
        padding: 12px;
    }

    .filepond--root {
        height: 180px;
    }

    .myavana-button {
        padding: 10px 16px;
        font-size: 14px;
    }
}

.text-black {
    color: var(--onyx);
}

/* Checkbox wrapper styling */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
}

.checkbox-wrapper * {
    outline: none;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-wrapper label {
    --size: 24px;
    --shadow: calc(var(--size) * .07) calc(var(--size) * .1);
    position: relative;
    width: var(--size);
    height: var(--size);
    background-color: var(--sand);
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
    overflow: hidden;
    z-index: 1;
}

.checkbox-wrapper label:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: calc(var(--size) * .7);
    height: calc(var(--size) * .7);
    margin: 0 auto;
    background-color: var(--white);
    transform: translateY(-50%);
    border-radius: 4px;
    transition: 0.2s ease width, 0.2s ease height;
}

.checkbox-wrapper label:hover:before {
    width: calc(var(--size) * .55);
    height: calc(var(--size) * .55);
}

.checkbox-wrapper label:active {
    transform: scale(0.9);
}

.checkbox-wrapper .tick_mark {
    position: absolute;
    top: -1px;
    right: 0;
    left: calc(var(--size) * -.05);
    width: calc(var(--size) * .6);
    height: calc(var(--size) * .6);
    margin: 0 auto;
    margin-left: calc(var(--size) * .14);
    transform: rotateZ(-40deg);
}

.checkbox-wrapper .tick_mark:before,
.checkbox-wrapper .tick_mark:after {
    content: "";
    position: absolute;
    background-color: var(--white);
    border-radius: 2px;
    opacity: 0;
    transition: 0.2s ease transform, 0.2s ease opacity;
}

.checkbox-wrapper .tick_mark:before {
    left: 0;
    bottom: 0;
    width: calc(var(--size) * .1);
    height: calc(var(--size) * .3);
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
    transform: translateY(calc(var(--size) * -.68));
}

.checkbox-wrapper .tick_mark:after {
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--size) * .1);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
    transform: translateX(calc(var(--size) * .78));
}

.checkbox-wrapper input[type="checkbox"]:checked+label {
    background-color: var(--coral);
    border-color: var(--coral);
}

.checkbox-wrapper input[type="checkbox"]:checked+label:before {
    width: 0;
    height: 0;
}

.checkbox-wrapper input[type="checkbox"]:checked+label .tick_mark:before,
.checkbox-wrapper input[type="checkbox"]:checked+label .tick_mark:after {
    transform: translate(0);
    opacity: 1;
}

/* Container styling */
.myavana-checkbox-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: var(--white);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.myavana-checkbox-text {
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    color: var(--onyx);
}

.myavana-checkbox-desc {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    color: var(--blueberry);
    margin-top: 4px;
}



/* Custom Horizontal Slider by Winston */

/* level settings 👇 */
.slider {
    --slider-width: 100%;
    --slider-height: 6px;
    --slider-bg: rgba(82, 82, 82, 0.322);
    --slider-border-radius: 10px;
    --level-color: #e7a690;
    /* updated */
    --level-transition-duration: 5s;
    --icon-margin: 15px;
    --icon-color: var(--slider-bg);
    --icon-size: 30px;
}

.slider {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.slider .volume {
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--icon-margin);
    color: var(--icon-color);
    width: var(--icon-size);
    height: auto;
    pointer-events: none;
    transition-duration: 0.5s;
}

.slider .level {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--slider-width);
    height: var(--slider-height);
    background: var(--slider-bg);
    overflow: hidden;
    border-radius: var(--slider-border-radius);
    transition: height var(--level-transition-duration);
    cursor: inherit;
    /* removed rotate(270deg) to make it horizontal */
}

.slider .level::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0px;
    height: 0px;
    box-shadow:
        -100px 0 5px 100px var(--level-color),
        -100px 0px 20px 100px var(--level-color);
}

.slider .level:hover~.volume {
    color: var(--level-color);
    opacity: 0.6;
}

.slider .level::-moz-range-thumb {
    width: 0;
    height: 0;
    border: none;
    box-shadow:
        -100px 0 5px 100px var(--level-color),
        -100px 0px 20px 100px var(--level-color);
}

.myavana-light-coral-text {
    color: #fce5d7;
}

.tryon-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.camera-wrapper {
    position: relative;
    width: 100%;
    height: 50px;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
}

.tryon-header {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
}

.controls {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.m-20 {
    padding: 20px;
}

.mt-2 {
    margin-top: 20px !important;
}


.control-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

#chatbot-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#chatbot-canvas {
    display: none;
}

#chatbot-transcript {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    font-family: 'Open Sans', sans-serif;
    max-height: 200px;
    padding: 10px;
    overflow-y: auto;
}

#chatbot-transcript p {
    margin: 0 0 5px;
}

.mt-4 {
    margin-top: 16px;
}

.mt-8 {
    margin-top: 32px;
}

.mt-16 {
    margin-top: 64px;
}

.hidden {
    display: none;
}

/* Log container styling */
#log {
    padding: 0px;
    margin: 0;
    /* remove margin-top if you want full height */
    width: 100%;
    height: 100vh;
    /* full viewport height */
    overflow-y: auto;
    /* better than scroll: hides scrollbar when not needed */
    background: transparent;
    color: #f9f9f9;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    box-sizing: border-box;
    /* include padding in width/height */
}

.log-message {
    margin-bottom: 5px;
}

.ai-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e7a690, #fce5d7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin-right: 2px;
    flex-shrink: 0;
}

.ai-message {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

.ai-message-content {
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0;

    padding: 15px;
    border-radius: 16px;
    flex-grow: 0;
    line-height: 1.5;
    color: #222323;
}

#hairHealthChart {
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0;
    border-radius: 16px;
    padding: 15px;
}

.usr-message-content {
    background-color: #f5f5f7;
    padding: 15px;
    border-radius: 16px;
    flex-grow: 0;
    line-height: 1.5;
    color: #222323;
}

.usr-message {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    justify-content: flex-end;
}

.usr-message .ai-message-content {
    text-align: right;
}

.myavana-users-profile-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    /* 14 * 0.25rem (1 rem = 16px typically) */
    height: 40px;
    border-radius: 50%;
    /* Full circle */
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* shadow-md */
    background-image: linear-gradient(to right, #fce5d7, #e7a690);
    transition: transform 0.3s ease, background-image 0.3s ease;
    cursor: pointer;
}

.myavana-ai-profile-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    /* 14 * 0.25rem (1 rem = 16px typically) */
    height: 40px;
    border-radius: 50%;
    /* Full circle */
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* shadow-md */
    background-image: linear-gradient(to right, #C9A9E9, #e7a690);
    transition: transform 0.3s ease, background-image 0.3s ease;
    cursor: pointer;
    padding: 5px;
}


.myavana-users-profile-icon:hover {
    background-image: linear-gradient(to right, #C9A9E9, #e7a690);
    transform: scale(1.1);
}

.myavana-ai-profile-icon:hover {
    background-image: linear-gradient(to right, #4a4d68, rgb(96, 97, 109));
    transform: scale(1.1);
}

.myavana-users-profile-icon .icon {
    width: 1.75rem;
    /* w-7 */
    fill: #4B5563;
    /* fill-gray-700 */
}

.myavana-ai-profile-icon .icon {
    width: 1.75rem;
    /* w-7 */
    fill: #fce5d7;
    /* fill-gray-700 */
}


/* Input area as part of the log container */
#inputContainer {
    margin-top: auto;
    /* push input area to the bottom */
    display: flex;
    align-items: center;
}

#textInput {
    flex: 1;
    padding: 8px;
    margin-right: 4px;
    background: #444;
    color: #f9f9f9;
    border: 1px solid #555;
}

/* Settings form styling */
#settingsForm {
    display: none;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #444;
    background: #333;
}

#settingsForm input {
    width: 100%;
    padding: 8px 18px;
    margin-bottom: 10px;
    background: #444;
    color: #f9f9f9;
    border: 1px solid #555;
    box-sizing: border-box;
}

#settingsForm button {
    padding: 8px;
    background: #555;
    color: #f9f9f9;
    border: 1px solid #666;
}

/* Remote audio control styling */
.audio-container {
    width: 100%;
    padding: 0px;
    position: absolute;
    top: 2px;
    z-index: 6;

}

.volume-control {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#volumeSlider {
    width: 100px;
    accent-color: #555;
}

#muteButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    /* 14 * 0.25rem (1 rem = 16px typically) */
    height: 40px;
    border-radius: 50%;
    /* Full circle */
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* shadow-md */
    background: #e7a690;
    transition: transform 0.3s ease, background-image 0.3s ease;
    cursor: pointer;
    font-size: 20px;
}

#muteButton:hover {
    background: var(--light-coral);
    color: var(--coral);
}

/* Add these styles to your existing CSS */
/* Volume Control Container */
.volume-control-container {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    /* 14 * 0.25rem (1 rem = 16px typically) */
    height: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
}

/* Volume Button */
.volume-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    /* 14 * 0.25rem (1 rem = 16px typically) */
    height: 40px;
    border-radius: 50%;
    transition: var(--transition);
    color: var(--onyx);
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* shadow-md */
    background: #e7a690;
    transition: transform 0.3s ease, background-image 0.3s ease;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.volume-button .volume {
    width: 20px;
    height: 20px;
    fill: #a5a5b0;
    color: var(--blueberry);

}

.volume-button:hover {
    background: var(--light-coral);
    color: var(--coral);
}

/* Volume Slider */
.new-volume-slider {
    position: absolute;
    top: 50px;
    right: -50px;
    z-index: 122;
    cursor: pointer;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.new-volume-slider.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.new-volume-slider .volume {
    margin-right: var(--icon-margin);
    color: var(--coral);
    width: var(--icon-size);
    height: auto;
    position: absolute;
    left: 8px;
    pointer-events: none;
    transition: color 0.3s ease-in-out;
}

.new-volume-slider .level {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--slider-width);
    height: var(--slider-height);
    background: var(--stone);
    overflow: hidden;
    border-radius: var(--slider-border-radius);
    transition: var(--transition);
    cursor: pointer;
    transform: rotate(270deg);
}

.new-volume-slider .level::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    box-shadow: -100px 0 0 100px var(--coral);
    transition: box-shadow 0.3s ease-in-out;
}

.new-volume-slider .level::-moz-range-thumb {
    width: 0;
    height: 0;
    border: none;
    box-shadow: -100px 0 0 100px var(--coral);
    transition: box-shadow 0.3s ease-in-out;
}

.new-volume-slider .level:hover~.volume {
    color: var(--blueberry);
}

/* Close Icon */
#volume-close-icon {
    cursor: pointer;
    width: 20px;
    height: 20px;
    fill: var(--coral);
    position: absolute;
    right: 8px;
    top: 8px;
    transition: var(--transition);
}

#volume-close-icon:hover {
    fill: var(--blueberry);
}

/* Mute Button */
.mute-button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition);
    color: var(--onyx);
}

.mute-button:hover {
    background: var(--light-coral);
    color: var(--coral);
}

.session-btn {
    padding: 12px 24px;
    background: var(--blueberry);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
}

.session-btn:hover {
    background: var(--coral);
    transform: translateY(-2px);
}

.myavana-link {
    color: var(--coral);
    text-decoration: none;
    font-weight: 600;
}

.myavana-link:hover {
    color: var(--light-coral);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.myavana-voice-ai-wrap {
    margin: 12px 0;
    font-family: 'Archivo', sans-serif;
}

.myavana-voice-ai-wrap select {
    width: 240px;
    background: var(--light-coral);
}

.myavana-voice-ai-status {
    color: var(--blueberry);
    font-size: 14px;
    margin-top: 8px;
}

.myavana-voice-ai-mute {
    background: var(--blueberry);
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.myavana-voice-ai-mute:hover {
    background: var(--coral);
}

.hair-insights h4 {
    font-size: 20px;
    color: var(--coral);
    margin-bottom: 12px;
}

.hair-insights ul {
    list-style: none;
    padding: 0;
}

.hair-insights li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hair-insights li::before {
    content: '✨';
    font-size: 16px;
}

.transcript-container {
    background: var(--sand);
    border-radius: 12px;
    padding: 16px;
    max-height: 250px;
    overflow-y: auto;
    margin-top: 16px;
    font-family: 'Archivo', sans-serif;
}

.hair-insights {
    background: var(--light-coral);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    color: var(--onyx);
    font-family: 'Archivo', sans-serif;
    animation: fadeIn 0.5s ease-in-out;
}

.coolinput {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: static;
    width: 100%;
}

.coolinput label.text {
    font-size: 0.75rem;
    color: var(--onyx);
    font-weight: 700;
    position: relative;
    top: 0.5rem;
    margin: 0 0 0 7px;
    padding: 0 3px;
    background: #e8e8e8;
    width: fit-content;
}

.coolinput .input {
    border: 1px solid var(--blueberry);
    border-radius: 8px;
    color: var(--onyx);
}

.coolinput .input:hover {
    border: 1px solid var(--light-coral);
    border-radius: 8px;
}

.coolinput .input:focus {
    border: 2px solid var(--coral);
}

/* .coolinput textarea[type="text"].input {
  padding: 11px 10px;
  font-size: 0.75rem;
  border: 2px var(--coral) solid;
  border-radius: 5px;
  background: #e8e8e8;
  color: var(--onyx) !important;
}

.coolinput textarea[type="text"].input:focus {
  outline: none;
}
.coolinput input[type="number"].input {
  padding: 11px 10px;
  font-size: 0.75rem;
  border: 2px var(--blueberry) solid;
  border-radius: 5px;
  background: #e8e8e8;
  color: var(--onyx) !important;
} */

/* .coolinput input[type="number"].input:focus {
  outline: none;
} */
.myavana-entry-form {
    /* background: linear-gradient(var(--stone), var(--sand)) padding-box,
              linear-gradient(145deg, transparent 35%,var(--blueberry), var(--coral)) border-box !important; */
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    outline: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    border: 2px solid transparent;
    box-sizing: border-box;
    border-radius: 16px !important;
    background-size: 200% 100% !important;
    /* animation: gradient 5s ease infinite !important; */
    padding: 32px 24px !important;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.coolinput input.input:invalid {
    animation: justshake 0.3s forwards;
    color: red;
}

@keyframes justshake {
    25% {
        transform: translateX(5px);
    }

    50% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX-(5px);
    }
}



/* Myavana Video Chatbot Styles */
.myavana-video-chatbot-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px;
    background: var(--stone);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(106, 70, 139, 0.15);
    color: #333;
}

.myavana-chatbot-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8dff5;
    position: relative;
    width: 100%;
}

.myavana-chatbot-header h2 {
    color: var(--onyx);
    font-size: 28px;
    margin: 15px 0 5px;
    font-weight: 600;
}

.myavana-chatbot-header .subtitle {
    color: var(--blueberry);
    font-size: 16px;
    margin: 0;
}

.myavana-chatbot-main {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.video-analysis-panel {
    flex: 1;
    min-width: 300px;
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(106, 70, 139, 0.1);
    position: relative;
}

.video-container {
    position: relative;
    width: 100%;
    min-height: 400px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    display: flex;
    justify-content: center;
}

#myavana-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#myavana-canvas {
    display: none;
}

.video-controls {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background: transparent;
    border-radius: 0 0 8px 8px;
}



.control-btn:hover {
    background: #6C4D8A;
    color: white;
    transform: scale(1.1);
}

.control-btn svg {
    width: 20px;
    height: 20px;
}

.hair-analysis-results {
    margin-top: 20px;
    background: var(--stone);
    padding: 15px;
    border-radius: 8px;
}

.hair-analysis-results h3 {
    color: var(--onyx);
    font-size: 18px;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.analysis-placeholder {
    color: var(--onyx);
    opacity: 0.6;
    font-style: italic;
    padding: 10px 0;
}

.analysis-result h4 {
    color: var(--onyx);
    opacity: 0.8;
    margin: 15px 0 8px;
    font-size: 16px;
}

.hair-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.detail {
    background: white;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.detail-label {
    font-weight: 600;
    color: var(--onyx);
    opacity: 0.6;
    display: block;
    font-size: 12px;
}

.detail-value {
    font-size: 14px;
    color: #333;
}

.product-recommendations {
    margin: 15px 0;
}

.product {
    position: relative;
    margin-bottom: 8px;
    padding: 8px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-match {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--light-coral);
    border-radius: 6px;
    z-index: 1;
}

.product-name {
    position: relative;
    z-index: 2;
    font-weight: 500;
}

.product-match-value {
    position: relative;
    z-index: 2;
    float: right;
    color: var(--blueberry);
    font-weight: 600;
}

.care-tips {
    padding-left: 20px;
    margin: 10px 0;
}

.care-tips li {
    margin-bottom: 5px;
    color: #555;
}

.hair-metrics {
    margin-top: 20px;
}

.metric {
    margin-bottom: 12px;
}

.metric-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--onyx);
    font-weight: 600;
}

.metric-bar {
    height: 8px;
    background: var(--light-coral);
    border-radius: 4px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--light-coral), var(--coral));
    border-radius: 4px;
    width: 0%;
}

.chat-container {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(106, 70, 139, 0.1);
}

.chat-messages {
    flex: 1;
    padding: 20px;
    height: max-content;
    overflow-y: auto;
    background: #fff;
}

.message {
    display: flex;
    margin-bottom: 15px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-message {
    justify-content: flex-start;
}

.user-message {
    justify-content: flex-end;
}

.system-message {
    justify-content: center;
}

.ai-avatar,
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.ai-avatar {
    background: #f5f0fa;
    margin-right: 12px;
}

.user-avatar {
    background: #e8dff5;
    margin-left: 12px;
}

.message-content {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.4;
}

.ai-message .message-content {
    background: white;
    border: 1px solid #e8dff5;
    border-bottom-left-radius: 4px;
    color: #333;
}

.user-message .message-content {
    background: #6C4D8A;
    color: white;
    border-bottom-right-radius: 4px;
}

.system-message-content {
    max-width: 80%;
    padding: 8px 12px;
    background: #f0e9f8;
    border-radius: 6px;
    font-size: 14px;
    color: #7D6B8F;
    text-align: center;
}

.error-message .system-message-content {
    background: #ffebee;
    color: #c62828;
}

.welcome-message {
    margin-bottom: 20px;
}

.welcome-message .message-content {
    background: white;
    border: 1px solid #e8dff5;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(108, 77, 138, 0.1);
}

.chat-input {
    display: flex;
    padding: 15px;
}

#chat-input-field {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #e8dff5;
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

#chat-input-field:focus {
    border-color: #9D7CBF;
    box-shadow: 0 0 0 3px rgba(108, 77, 138, 0.2);
}

.send-btn,
.voice-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #6C4D8A;
    color: white;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.send-btn:hover,
.voice-btn:hover {
    background: #5a3f72;
    transform: scale(1.05);
}

.send-btn svg,
.voice-btn svg {
    width: 20px;
    height: 20px;
}

.myavana-chatbot-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--onyx);
    padding-top: 15px;
    border-top: 1px solid var(--light-coral);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .myavana-chatbot-main {
        flex-direction: column;
    }

    .message-content {
        max-width: 80%;
    }

    .video-container {
        aspect-ratio: 9/16;
    }
}

@media (max-width: 480px) {
    .myavana-video-chatbot-container {
        padding: 15px;
    }

    .hair-details {
        grid-template-columns: 1fr;
    }

    .message-content {
        max-width: 90%;
    }

    .send-btn,
    .voice-btn {
        width: 40px;
        height: 40px;
    }
}

.form-select {
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0,
        rgba(187, 18, 199, 0.15) 1px 1px 200px 0px,
        rgba(0, 98, 178, 0.15) -1px -1px 200px 0px;
    border: 1px solid var(--sand);

}

.nice-select.open .list {
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0,
        rgba(187, 18, 199, 0.15) 1px 1px 200px 0px,
        rgba(0, 98, 178, 0.15) -1px -1px 200px 0px;
    border: 1px solid var(--sand);
}

#profile-form input,
#profile-form textarea {
    background: linear-gradient(130deg, var(--sand), #fff 33%, var(--sand));
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0,
        rgba(187, 18, 199, 0.15) 1px 1px 200px 0px,
        rgba(0, 98, 178, 0.15) -1px -1px 200px 0px !important;
    border: 1px solid var(--sand);
    border-radius: 1rem;
    color: var(--onyx) !important;
}

#profile-form input,
#profile-form textarea:focus {
    border: 1px solid var(--light-coral);
}

/* #profile-form input[type="date"],
#profile-form input[type="number"]{
  width: 200px;
} */
.nice-select .option:hover {
    background: var(--light-coral) !important;
    color: var(--onyx);
}

.entry-card,
.snapshot-card,
.product-card,
.summary-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary-outline {
    background: rgba(255, 255, 255, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    color: var(--onyx);
    padding: 0.75rem 1.5rem;
    border-bottom: 4px solid var(--coral);
    cursor: pointer;
}

.btn-primary {
    padding: 0.75rem 1.5rem;
    border-bottom: 4px solid var(--coral);
    cursor: pointer;
    font-size: 14px;
}

/* Myavana Audio control */
.myavana-voice-control-ai-card {
    --w-card: 320px;
    --h-card: 380px;
    --p-card: 2.4px;
    --p-inner: 18px;
    --round-card: 28px;
    --w-inner: calc(var(--w-card) - calc(var(--p-card) * 2));
    --h-inner: calc(var(--h-card) - calc(var(--p-card) * 2));
    --round-inner: calc(var(--round-card) - var(--p-card));
    border-radius: var(--round-card);
    width: var(--w-card);
    height: var(--h-card);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0,
        rgba(187, 18, 199, 0.15) 1px 1px 200px 0px,
        rgba(0, 98, 178, 0.15) -1px -1px 200px 0px;
}

.myavana-voice-control-ai-card::before {
    content: "";
    z-index: 1;
    position: absolute;
    width: var(--w-inner);
    height: var(--h-inner);
    border-radius: var(--round-inner);
    background: #ffffff;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.myavana-voice-control-ai-card::after {
    content: "";
    --cl-light: #fff;
    --cr-light: #0000;
    position: absolute;
    z-index: 0;
    filter: blur(60px);
    width: calc(var(--h-card) * 1.25);
    height: calc(var(--h-card) * 1.25);
    animation: rotating 10s linear infinite;
    background: conic-gradient(from 45deg at 50% 50%,
            var(--cl-light),
            var(--cr-light),
            var(--cl-light),
            var(--cl-light),
            var(--cl-light),
            var(--cr-light),
            var(--cl-light),
            var(--cl-light),
            var(--cl-light));
}

@keyframes rotating {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(1turn);
    }
}

.inner-card {
    position: relative;
    z-index: 2;
    width: var(--w-inner);
    height: var(--h-inner);
    border-radius: var(--round-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.35s ease;
    background: rgba(255, 255, 255, 0.1);
    outline: var(--p-card) solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
}

.inner-card::before,
.inner-card::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: var(--round-inner);
    filter: blur(60px);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.inner-card::before {
    background: linear-gradient(135deg, #fff, #7209d425 25%, #0000);
}

.inner-card::after {
    background: linear-gradient(135deg, #0000, #00a6b225 66%, #fff);
}

.myavana-voice-control-ai-input {
    display: none;
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
}

.trigger-wrap {
    --sz-trigger-wrap: calc(var(--w-card) * 0.65);
    --sz-trigger: calc(var(--sz-trigger-wrap) * 0.65);
    z-index: 4;
    inset: 50%;
    position: absolute;
    transform: translate(-50%, -65%);
    height: var(--sz-trigger-wrap);
    width: var(--sz-trigger-wrap);
    outline: 1.4px solid #ffffff70;
    border-radius: 9999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
    --shadow-wrap: rgba(255, 255, 255, 0.6) 0 0 20px 4px inset,
        rgba(50, 50, 93, 0.2) 0 10px 80px 2px inset,
        rgba(0, 0, 0, 0.1) 0px 18px 36px -18px inset;
    box-shadow:
        rgba(0, 0, 0, 0.25) 0 10px 50px,
        var(--shadow-wrap);
}

.trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 6;
    border-radius: 9999px;
    width: var(--sz-trigger);
    height: var(--sz-trigger);
    overflow: hidden;
    --shadows: rgb(255, 255, 255) 0 0 1px 1px, rgb(255, 255, 255) 0 0 10px 3px,
        rgb(255, 255, 255) 0 0 11px 2px, rgb(255, 255, 255) 0 0 22px 6px,
        rgba(255, 255, 255, 0.85) 0px 20px 50px,
        rgba(187, 18, 199, 0.8) 4px 4px 30px 0px,
        rgba(0, 98, 178, 0.8) -4px -4px 30px 0px;
    box-shadow: var(--shadows,
            rgba(255, 255, 255, 0.75) 0 0 1px 1px,
            rgba(255, 255, 255, 0.75) 0 0 15px 2px,
            rgba(255, 255, 255, 0.75) 0px 10px 50px,
            rgba(187, 18, 199, 0.8) 2px 2px 20px 0px,
            rgba(0, 98, 178, 0.8) -2px -2px 20px 0px);
    transition: all 0.35s ease;
}

.trigger::after {
    content: "";
    position: relative;
    z-index: 1;
    width: var(--sz-trigger);
    height: var(--sz-trigger);
    transition: all 0.35s ease;
    background: linear-gradient(to right, #C9A9E9, #e7a690);
    filter: blur(35px);
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    border-radius: 9999px;
}

.mic {
    height: 60px;
    width: 60px;
    color: var(--onyx);
    opacity: 0.5;
    transition: all 0.35s ease;
    position: absolute;
    z-index: 9;
    pointer-events: none;
    overflow: visible;
}

.mic * {
    transition: all 0.35s ease;
}

.spectrum {
    z-index: 2;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 90%;
    overflow: hidden;
    border-radius: 999px;
    pointer-events: none;
    animation: rotating 5s steps(45) infinite;
}

.spectrum b {
    width: 1px;
    pointer-events: none;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(calc(8deg * var(--index)));
}

.spectrum b::before,
.spectrum b::after {
    --h-spectrums: 1px;
    content: "";
    position: absolute;
    z-index: 0;
    inset-inline: 0;
    width: 1px;
    opacity: 1;
    background: white;
    border-radius: 9999px;
    transition: all 0.35s ease;
    height: calc(var(--index) * calc(var(--h-spectrums) / 2.5));
}

.spectrum b::before {
    top: 68px;
}

.spectrum b::after {
    bottom: 68px;
}

.myavana-voice-control-ai-input:checked~.inner-card {
    box-shadow:
        rgba(255, 255, 255) 0 0 10px,
        rgba(255, 255, 255, 0.95) 0 0 10px 4px;
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap {
    transform: translate(-50%, -50%);
    outline: 1px solid #fff;
    box-shadow:
        rgba(0, 0, 0, 0.25) 0 0 50px,
        var(--shadow-wrap);
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap .spectrum b::before {
    --h-spectrums: 1.5px;
    top: 68px;
    animation: spectrums 0.6s steps(3) infinite 0.6s;
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap .spectrum b::after {
    --h-spectrums: 2px;
    bottom: 68px;
    animation: spectrums 0.6s steps(3) infinite 0.6s;
}

@keyframes spectrums {

    0%,
    100% {
        opacity: 0.5;
        height: calc(var(--index) * 0px);
    }

    25% {
        opacity: 0.5;
        height: calc(var(--index) * calc(var(--h-spectrums) / 2));
    }

    50% {
        opacity: 1;
        height: calc(var(--index) * var(--h-spectrums));
    }

    75% {
        opacity: 0.75;
        height: calc(var(--index) * calc(var(--h-spectrums) / 3));
    }
}

.trigger:hover~.mic,
.trigger:hover~.mic .fill-head-mic {
    opacity: 0.85;
}

.trigger:active {
    transform: scale(0.95);
}

.trigger:active~.mic {
    transform: scale(1.05);
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap .trigger {
    --shadows: rgb(255, 255, 255) 0 0 1px 6px, rgb(255, 255, 255) 0 0 10px 9px,
        rgb(255, 255, 255) 0 0 11px 7px, rgb(255, 255, 255) 0 0 22px 11px,
        rgba(255, 255, 255, 0.85) 0px 20px 50px,
        rgba(187, 18, 199, 0.8) 4px 4px 30px 0px,
        rgba(0, 98, 178, 0.8) -4px -4px 30px 0px;
    animation: shadows 1.2s linear infinite 1s;
}

@keyframes shadows {

    from,
    to {
        box-shadow: var(--shadows);
    }

    50% {
        box-shadow:
            rgb(255, 255, 255, 0.85) 0 0 1px 4px,
            rgb(255, 255, 255, 0.85) 0 0 10px 6px,
            rgb(255, 255, 255, 0.85) 0 0 11px 8px,
            rgb(255, 255, 255, 0.85) 0 0 22px 4px,
            rgba(255, 255, 255, 0.85) 0px 20px 50px,
            rgba(187, 18, 199, 0.8) 4px 4px 30px 0px,
            rgba(0, 98, 178, 0.8) -4px -4px 30px 0px;
    }
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap .trigger::after {
    animation: gradients 2.4s linear infinite;
}

@keyframes gradients {

    0%,
    99.99% {
        background: radial-gradient(circle,
                #eeece1 0%,
                #e7a690 20%,
                #4a4d68 100%);
    }

    33.33% {
        background: radial-gradient(circle, #222323 0%, #e7a690 100%);
    }

    66.66% {
        background: radial-gradient(circle, #4a4d68 0%, #e7a690 100%);
    }
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap .mic {
    opacity: 0.85;
    animation: opacity 2.4s linear infinite 1s;
}

@keyframes opacity {

    from,
    to {
        opacity: 0.85;
    }

    50% {
        opacity: 0.45;
    }
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap .mic path {
    --dasharray: 100;
    d: path("m37.75,11.84h-13.75c-.72,0-5.2-6.05-6-6.04s-5.53,15.65-6,15.65C11.56,21.45,6.84,0,5.99,0,5.02,0,1.49,11.86,0,11.85h-13.75"
        );
    stroke-width: 1.6;
    stroke-dasharray: var(--dasharray);
    animation: rate 2.4s infinite linear forwards;
}

@keyframes rate {
    from {
        stroke-dashoffset: calc(var(--dasharray) * -1px);
    }

    to {
        stroke-dashoffset: var(--dasharray);
    }
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap .mic line {
    opacity: 0;
}

.myavana-voice-control-ai-input:checked~.inner-card .trigger-wrap .mic rect {
    --sz-rect: 54px;
    x: -15;
    y: -15;
    width: var(--sz-rect);
    height: var(--sz-rect);
    rx: var(--sz-rect);
    ry: var(--sz-rect);
    stroke: #0000;
    stroke-width: 0.8;
}

.myavana-voice-control-ai-input:checked~.inner-card .content {
    transform: translate(-0%, 100%) scale(0.8);
    transition-delay: 0s;
    pointer-events: none;
    opacity: 0;
}

.content {
    position: absolute;
    bottom: var(--p-inner);
    z-index: 1;
    margin-top: 44px;
    font-size: 12px;
    line-height: 1.5;
    width: calc(100% - calc(var(--p-inner) * 2));
    padding: 12px;
    background: #ffffff50;
    outline: 2px solid #ffffff70;
    border-radius: 12px;
    transition: all 0.35s ease;
    transition-delay: 0.25s;
    box-shadow:
        rgba(0, 0, 0, 0.06) 0px 2px 4px 0px,
        rgba(0, 0, 0, 0.1) 0px 10px 50px,
        rgba(0, 0, 0, 0.1) 0px 0px 1px inset;
}

.content span {
    color: #424242;
    font-weight: 600;
}

@media (hover: hover) {

    .trigger:hover~.mic,
    .trigger:hover~.mic .path-mic {
        opacity: 0.85;
    }
}

/* Existing styles */
.the-video {
    position: relative;
    width: 100%;
    max-width: 800px;
    /* Increased max-width for larger display */
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    height: 620px !important;
    /* aspect-ratio: 16/9; */
    margin: 0 auto;
    /* Center the video */
    display: none;
}

.the-video:not(.hidden) {
    display: block;
}

#myavana-video {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
}

#myavana-canvas {
    display: none;
}

.video-controls {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0 0 8px 8px;
}

.control-btn {
    background: var(--blueberry);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
}

.control-btn:hover {
    background: #e7a690;
    color: var(--onyx);
    transform: scale(1.1);
}

.control-btn:disabled {
    background: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.error-message {
    background: #ffebee;
    color: #c62828;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

#msg {
    color: #c62828;
    text-align: center;
    margin-top: 10px;
    display: none;
}

#msg:not(:empty) {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .the-video {
        max-width: 100%;
        aspect-ratio: 4/3;
    }
}





.mode-toggle {
    font-size: 12px;
    border-radius: 12px;
    background: linear-gradient(45deg, #4a4d68 0%, #fce5d7 50%, #e7a690 100%);
    color: rgb(218, 218, 218);
    border: none;
    padding: 2px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mode-toggle span {
    border-radius: 10px;
    padding: 0.8em 1.3em;
    padding-right: 1.2em;
    text-shadow: 0px 0px 20px #4b4b4b;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    transition: all 0.3s;
    background: var(--blueberry)
}

.mode-toggle.video-mode span {
    background: var(--coral);
    color: var(--onyx);
}

.mode-toggle:hover span {
    background: var(--coral);
    color: var(--onyx);
}

.mode-toggle-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-conic-gradient(rgb(48, 47, 47) 0.0000001%, rgb(51, 51, 51) 0.000104%) 60% 60%/600% 600%;
    filter: opacity(10%) contrast(105%);
    -webkit-filter: opacity(10%) contrast(105%);
}

.mode-toggle svg {
    width: 15px;
    height: 15px;
}



.new-volume-slider {
    /* slider */
    --slider-width: 100%;
    --slider-height: 15px;
    --slider-bg: rgba(82, 82, 82, 0.322);
    --slider-border-radius: 10px;
    /* level */
    --level-color: var(--coral);
    --level-transition-duration: 5s;
    /* icon */
    --icon-margin: 15px;
    --icon-color: var(--slider-bg);
    --icon-size: 30px;
}

.new-volume-slider {
    position: absolute;
    top: 24px;
    right: -40px;
    z-index: 12;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
}

.new-volume-slider.visible {
    opacity: 1;
}

.new-volume-slider .volume {
    display: inline-block;
    vertical-align: top;
    margin-right: var(--icon-margin);
    color: var(--icon-color);
    width: var(--icon-size);
    height: auto;
    position: absolute;
    left: 8px;
    pointer-events: none;
    transition-duration: 0.5s;
    fill: var(--level-color);
}

.new-volume-slider .level {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--slider-width);
    height: var(--slider-height);
    background: var(--slider-bg);
    overflow: hidden;
    border-radius: var(--slider-border-radius);
    -webkit-transition: height var(--level-transition-duration);
    -o-transition: height var(--level-transition-duration);
    transition: height var(--level-transition-duration);
    cursor: inherit;
    transform: rotate(270deg);
}

.new-volume-slider .level::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0px;
    height: 0px;
    -webkit-box-shadow: -200px 0 0 200px var(--level-color);
    box-shadow:
        -100px 0 5px 100px var(--level-color),
        -100px 0px 20px 100px var(--level-color);
}

.new-volume-slider .level:hover~.volume {
    color: var(--level-color);
    opacity: 0.6;
}

.new-volume-slider .level::-moz-range-thumb {
    width: 0;
    height: 0;
    border-radius: 0;
    border: none;
    box-shadow:
        -100px 0 5px 100px var(--level-color),
        -100px 0px 20px 100px var(--level-color);
}



/* Myavana Waveform Styling for Chatbot */
/* Uses Onyx (#222323) and Coral (#e7a690) for brand consistency */

.waveform {
    width: 100%;
    margin: 10px 0;
    overflow: hidden;
}

.waveform svg {
    width: 100%;
    height: 20px;
    display: block;
}

.audio-wave rect {
    fill: var(--coral);
    /* animation: wave 1.2s infinite ease-in-out; */
    -webkit-animation: Rofa 10s infinite ease-in-out;
    animation: Rofa 10s infinite ease-in-out;
    transform-origin: bottom;
    transition: fill 0.3s;
}

.ai-message .audio-wave rect {
    fill: var(--blueberry);
}

.audio-wave.active rect {
    fill: #e7a690;
    /* Myavana Coral */
}

.audio-wave rect:nth-child(1) {
    animation-delay: 0s;
}

.audio-wave rect:nth-child(2) {
    animation-delay: 0.06s;
}

.audio-wave rect:nth-child(3) {
    animation-delay: 0.12s;
}

.audio-wave rect:nth-child(4) {
    animation-delay: 0.18s;
}

.audio-wave rect:nth-child(5) {
    animation-delay: 0.24s;
}

.audio-wave rect:nth-child(6) {
    animation-delay: 0.30s;
}

.audio-wave rect:nth-child(7) {
    animation-delay: 0.36s;
}

.audio-wave rect:nth-child(8) {
    animation-delay: 0.42s;
}

.audio-wave rect:nth-child(9) {
    animation-delay: 0.48s;
}

.audio-wave rect:nth-child(10) {
    animation-delay: 0.54s;
}

.audio-wave rect:nth-child(11) {
    animation-delay: 0.60s;
}

.audio-wave rect:nth-child(12) {
    animation-delay: 0.66s;
}

.audio-wave rect:nth-child(13) {
    animation-delay: 0.72s;
}

.audio-wave rect:nth-child(14) {
    animation-delay: 0.78s;
}

.audio-wave rect:nth-child(15) {
    animation-delay: 0.84s;
}

.audio-wave rect:nth-child(16) {
    animation-delay: 0.90s;
}

.audio-wave rect:nth-child(17) {
    animation-delay: 0.96s;
}

.audio-wave rect:nth-child(18) {
    animation-delay: 1.02s;
}

.audio-wave rect:nth-child(19) {
    animation-delay: 1.08s;
}

.audio-wave rect:nth-child(20) {
    animation-delay: 1.14s;
}

@keyframes wave {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(2.5);
    }
}

/* Ensure waveform is centered in chat-messages */
.chat-messages .waveform {
    text-align: center;
}


@-webkit-keyframes Rofa {
    0% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        background-color: yellow;
    }

    5% {
        height: 100%;
        -webkit-transform: translatey(15px);
        transform: translatey(15px);
        background-color: fuchsia;
    }

    10% {
        height: 90%;
        transform: translatey(0);
        -webkit-transform: translatey(0);
        background-color: bisque;
    }

    15% {
        height: 80%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    20% {
        height: 70%;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        background-color: var(--blueberry);
    }

    25% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        background-color: var(--blueberry);
    }

    30% {
        height: 70%;
        -webkit-transform: translatey(0);
        transform: translatey(0);
        background-color: var(--blueberry);
    }

    35% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    40% {
        height: 60%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    45% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    50% {
        height: 50%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    55% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    60% {
        height: 40%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    65% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    70% {
        height: 30%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    75% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    80% {
        height: 20%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    85% {
        height: 0%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    90% {
        height: 10%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    95% {
        height: 5%;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }

    100% {
        height: 0;
        -webkit-transform: translatey(0);
        transform: translatey(0);

        background-color: var(--blueberry);
    }
}

.sound-wave {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;

    svg {
        display: block;
        height: 3rem;
        width: 100%;
    }
}

.sound-wave:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 40rem;
    z-index: -1;
    top: 0;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(var(--blueberry), transparent 60%, transparent 100%);
}

@keyframes scale1 {
    0% {
        transform: scaleY(0.6);
    }

    40% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(0.6);
    }
}

.bar-scale1 {
    animation: scale1 0.6s infinite;
    transform-origin: center;
}

@keyframes scale2 {
    0% {
        transform: scaleY(0.5);
    }

    30% {
        transform: scaleY(1.6);
    }

    100% {
        transform: scaleY(0.5);
    }
}

.bar-scale2 {
    animation: scale2 0.6s infinite;
    transform-origin: center;
}

@keyframes scale3 {
    0% {
        transform: scaleY(1.5);
    }

    70% {
        transform: scaleY(0.5);
    }

    100% {
        transform: scaleY(1.5);
    }
}

.bar-scale3 {
    animation: scale3 0.6s infinite;
    transform-origin: center;
}

.myavana-profile {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.myavana-profile-widget {
    max-width: 350px;
    margin: 0 auto;
    padding: 0;
}

.form-label {
    font-weight: bold;
    color: #222323;
    margin-bottom: 0.5rem;
    display: block;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #e7a690;
    outline: none;
    box-shadow: 0 0 0 2px rgba(231, 183, 144, 0.3);
}


.btn-primary:hover {
    background: #d68b7a;
}

.btn-secondary {
    background: var(--onyx);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0px;
    cursor: pointer;
}

.btn-secondary:hover {
    background: #3a3d58;
}

.error-message,
.success-message,
.ai-tip {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.error-message {
    background: #fee2e2;
    color: #dc2626;
}

.success-message {
    background: #d1fae5;
    color: #065f46;
}

.ai-tip {
    background: #fef3c7;
    color: #92400e;
}

.table-auto th,
.table-auto td {
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
}

.progress-metric {
    font-size: 1.25rem;
    font-weight: bold;
    color: #e7a690;
}

.hidden {
    display: none !important;
}

/* Start Page Styles */
.start-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(108, 77, 138, 0.1) 0%, rgba(231, 166, 144, 0.1) 100%);
}

.start-logo {
    width: 120px;
    margin-bottom: 30px;
}

.start-title,
.end-title {
    font-size: 38px;
    color: var(--onyx);
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.start-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--coral);
}

.end-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--coral);
}

.start-subtitle {
    font-size: 24px !important;
    color: var(--onyx);
    margin-bottom: 12px !important;
    max-width: 700px;
    opacity: 0.7;
}

.start-description {
    font-size: 18px;
    line-height: 26px !important;
    color: var(--text);
    margin-bottom: 50px;
    margin-inline: 40px !important;
}

.start-btn {
    background: var(--onyx);
    color: var(--light-coral);
    border: none;
    padding: 15px 40px;
    border-radius: 0px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 10px;
}

.start-btn:hover {
    background: var(--white);
    transform: translateY(-3px);
    color: var(--onyx);
}

.start-features {
    display: flex;
    gap: 30px;
    margin-top: 60px;
    flex-wrap: wrap;
    justify-content: center;
}

.start-features .feature-card {
    flex: 1 1 calc(33.333%);
    max-width: calc(33.333%);
    box-sizing: border-box;
}

/* Medium screens: 2 cards per row */
@media (max-width: 900px) {
    .start-features .card {
        flex: 1 1 calc(50% - 30px);
        max-width: calc(50% - 30px);
    }
}

/* Small screens: 1 card per row */
@media (max-width: 600px) {
    .start-features .card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.feature-card-timeline {
    background: var(--white);
    padding: 30px;
    border-radius: 15px;
    width: 100%;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}

.feature-card-timeline:hover {
    transform: translateY(-10px);
}

.feature-icon {
    font-size: 16px;
    color: var(--secondary);
    margin-bottom: 15px;
}

.feature-title {
    font-size: 20px;
    color: var(--dark);
    margin-bottom: 10px;
}

.feature-text {
    font-size: 14px;
    color: var(--text);
}

/* End Page Styles */
.end-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(231, 166, 144, 0.1) 0%, rgba(108, 77, 138, 0.1) 100%);
}

.modal-bg {
    background: var(--sand);
}

.modal-bg::before {
    background: linear-gradient(135deg, rgba(231, 166, 144, 0.1) 0%, rgba(108, 77, 138, 0.1) 100%);
}


.ensubtitled- {
    font-size: 24px;
    color: var(--onyx);
    margin-bottom: 40px !important;
    margin-top: 26px !important;
    max-width: 700px;
    opacity: 0.7;
}

.progress-summary {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.progress-item {
    background: var(--sand);
    outline: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    padding: 25px;
    border-radius: 15px;
    width: 200px;
    box-shadow: var(--shadow);
}

.progress-item::before {
    background: linear-gradient(135deg, #fff, #7209d425 25%, #0000);
}

.progress-item::after {
    background: linear-gradient(135deg, #0000, #00a6b225 66%, #fff);
}

.progress-value {
    font-size: 36px;
    color: var(--blueberry);
    margin-bottom: 5px;
    font-weight: 600;
}

.progress-label {
    font-size: 14px;
    color: var(--text);
    padding-top: 12px;
}

.end-actions {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.end-btn {
    background: var(--white);
    color: var(--onyx);
    border: 2px solid var(--onyx);
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 10px;
}

.end-btn.primary {
    background: var(--light-coral);
    color: var(--onyx);
}

.end-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(108, 77, 138, 0.2);
}

.end-btn.primary:hover {
    background: var(--white);
}

/* Main Timeline Container */
.hair-diary-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
    display: none;
}

.diary-header {
    text-align: center !important;
    margin-bottom: 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.diary-header h1 {
    font-size: 28px;
    color: var(--dark);
    position: relative;
    display: inline-block;
}

.diary-header h1:after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--secondary);
}

.diary-header p {
    max-width: 600px;
    font-size: 18px;
    color: var(--text);
    text-align: center;
    margin-top: 24px !important;
}

/* Main Timeline Slider */
.timeline-slider {
    position: relative;
    margin-bottom: 100px;
}

.slider-container {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
    margin-bottom: 40px;
    padding: 20px 0;
}

.main-entry {
    min-width: 100%;
    padding: 0 40px;
    transition: transform 0.5s;
}

.entry-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.entry-image-container {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
}

.entry-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.entry-image:hover {
    transform: scale(1.03);
}

.ai-tags {
    position: absolute;
    bottom: 30px;
    left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-tag {
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--coral);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-tag i {
    margin-right: 8px;
    color: var(--coral);
}

.entry-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.entry-date {
    font-size: 14px;
    color: var(--coral);
    margin-bottom: 20px;
    opacity: 0.8;
}

.entry-title {
    /* font-size: 32px;
    margin-bottom: 20px !important; */
    color: var(--onyx);
    line-height: 1.3 !important;
    /* padding: 8px 16px; */
    /* background: var(--light-coral); */
}

.entry-text {
    margin-bottom: 30px !important;
    color: var(--text);
    font-size: 18px;
    line-height: 1.6 !important;
    max-height: 140px;
    /* or any height you prefer */
    overflow-y: auto;
}

.entry-text::-webkit-scrollbar {
    width: 6px;
}

.entry-text::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.entry-products {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1rem;
    padding-block: 1rem;
    margin-bottom: 30px !important;
    scroll-behavior: smooth;
    /* optional: smooth scrolling */
}

.entry-products::-webkit-scrollbar {
    height: 8px;
}

.entry-products::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.entry-products::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Optional: make children look like cards/chips */
.entry-products>* {
    flex: 0 0 auto;
    /* keep items from shrinking or growing */
    min-width: 150px;
    /* adjust to your content size */
    background: #f9f9f9;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    /* keep text in one line */
}

.product-tag {
    display: inline-block;
    background: var(--light-coral);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    color: var(--onyx);
    font-weight: 600;
    opacity: 0.8;
}

.entry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.entry-mood {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #888;
}

.mood-icon {
    margin-right: 10px;
    color: var(--light-coral);
    font-size: 20px;
}

.entry-source {
    font-size: 14px;
    color: #888;
}

.social-share {
    display: flex;
    gap: 15px;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    transition: transform 0.3s;
}

.share-btn:hover {
    transform: translateY(-3px);
}

.facebook {
    background: #3b5998;
}

.twitter {
    background: #1da1f2;
}

.pinterest {
    background: #e60023;
}

.instagram {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

/* Timeline Navigation */
.timeline-nav {
    position: relative;
    height: 120px;
    margin-top: 200px;
}

.timeline-track {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 4px;
    background: rgba(108, 77, 138, 0.2);
    border-radius: 2px;
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--secondary);
    border-radius: 2px;
    transition: width 0.3s;
}

.timeline-dates {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.date-marker {
    position: relative;
    padding: 0 30px;
    cursor: pointer;
    transition: all 0.3s;
}

.date-marker.active .marker-dot {
    background: var(--secondary);
    outline: var(--light-coral);
    transform: scale(1.3);
}

.date-marker.active .marker-date {
    color: var(--coral);
    font-weight: 600;
}

.date-marker.active .mini-card {
    opacity: 0.8;
    visibility: visible;
    transform: translateY(0);
}

.marker-dot {
    width: 16px;
    height: 16px;
    background: var(--coral);
    border-radius: 50%;
    margin: 0 auto 10px;
    transition: all 0.3s;
}

.marker-date {
    font-size: 14px;
    font-weight: 500;
    color: #888;
    transition: all 0.3s;
    text-align: center;
}

.mini-card {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 150px;
    background: var(--bg-gradient-one);
    border-radius: 10px;
    padding: 15px;
    box-shadow: var(--bg-boxshadow-one);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    margin-bottom: 15px;
}

.mini-card-image {
    display: block;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.timeline-small-card-image {
    background-size: cover;
    background-position: center;
    display: block;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 100%;
    position: relative;
}

.mini-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    outline: 4px solid var(--light-coral);
}

.mini-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation Buttons */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.nav-btn {
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--coral);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    pointer-events: auto;
}

.nav-btn:hover {
    background: var(--coral);
    color: var(--white);
    transform: scale(1.1);
}

.add-entry-btn {
    position: fixed;
    bottom: 40px;
    left: 40px;
    width: 60px;
    height: 60px;
    background: var(--light-coral);
    color: var(--onyx);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.3s, background 0.3s;
    z-index: 100000000;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
}

.add-entry-btn:hover {
    background-color: var(--white);
    color: var(--onyx);
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}



/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000000000000000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: var(--stone);
    border-radius: 20px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s;
    margin-top: 80px;
}

.modal-overlay.active .modal-container {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blueberry);
    color: var(--coral);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-close:hover {
    background: var(--coral);
    color: var(--white);
}

.modal-title {
    font-size: 32px;
    color: var(--dark);
    margin-bottom: 30px;
    text-align: center;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark);
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--coral);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-col {
    flex: 1;
}

.file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.file-upload:hover {
    border-color: var(--coral);
}

.file-upload-icon {
    font-size: 36px;
    color: var(--coral);
    margin-bottom: 15px;
}

.file-upload-text {
    text-align: center;
    margin-bottom: 10px;
}

.file-upload-hint {
    font-size: 12px;
    color: #888;
}

#imagePreview {
    display: none;
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
    margin-top: 15px;
}

.mood-selector {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.mood-option {
    flex: 1;
    min-width: 100px;
}

.mood-option input {
    display: none;
}

.mood-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.mood-option input:checked+label {
    border-color: var(--coral);
    background: rgba(108, 77, 138, 0.1);
}

.mood-icon-lg {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--secondary);
}

.product-input-container {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.product-input {
    flex: 1;
}

.add-product-btn {
    background: var(--light);
    color: var(--coral);
    border: none;
    border-radius: 8px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.add-product-btn:hover {
    background: var(--coral);
    color: var(--white);
}

.product-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.product-tag-edit {
    display: inline-flex;
    align-items: center;
    background: var(--light);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
    color: var(--coral);
    font-weight: 600;
}

.remove-product {
    margin-left: 8px;
    cursor: pointer;
    color: #888;
    font-size: 12px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.btn {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background: var(--white);
    color: var(--onyx);
    border: 1px solid var(--onyx);
    border-radius: 0;
}

.btn-primary:hover {
    background: var(--onyx);
    color: var(--white);
}

.btn-secondary {
    background: var(--onyx);
    color: var(--white);
    border: 1px solid var(--onyx);
}

.btn-secondary:hover {
    background: var(--light);
}

/* Responsive styles */
@media (max-width: 1200px) {
    .entry-content {
        height: 450px;
        gap: 30px;
    }

    /* .entry-title {
        font-size: 28px;
    } */
}

@media (max-width: 992px) {
    .entry-content {
        grid-template-columns: 1fr;
        height: auto;
    }

    .entry-image-container {
        height: 500px;
    }

    .slider-nav {
        top: 30%;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 768px) {
    .diary-header h1 {
        font-size: 26px;
    }

    .entry-content {
        padding: 30px;
    }

    .entry-title {
        font-size: 24px;
    }

    .entry-text {
        font-size: 16px;
    }

    .nav-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .timeline-track {
        width: 90%;
    }

    .start-title,
    .end-title {
        font-size: 36px;
    }

    .start-subtitle,
    .end-subtitle {
        font-size: 20px;
    }

    .modal-container {
        padding: 30px 20px;
    }

    .modal-title {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .diary-header h1 {
        font-size: 20px;
    }

    .diary-header p {
        font-size: 16px;
    }

    .entry-content {
        padding: 20px;
    }

    .entry-date {
        font-size: 20px;
    }

    .date-marker {
        padding: 0 15px;
    }



    .start-title,
    .end-title {
        font-size: 30px;
    }

    .start-subtitle,
    .end-subtitle {
        font-size: 18px;
    }

    .start-description {
        font-size: 16px;
    }

    .feature-card {
        width: 100%;
        max-width: 300px;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}

/* Additional styles for the shortcode */
.myavana-login-required {
    text-align: center;
    padding: 40px;
    font-size: 18px;
    background: #f9f4ff;
    border-radius: 10px;
    margin: 20px 0;
}

.myavana-login-required a {
    color: #6C4D8A;
    font-weight: 600;
    text-decoration: none;
}

.myavana-login-required a:hover {
    text-decoration: underline;
}

.no-entries {
    text-align: center;
    padding: 60px 20px;
    font-size: 18px;
    color: #666;
    width: 100%;
}

/* Delete button styles */
.entry-delete-btn {
    background: none;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    transition: all 0.3s;
}

.entry-delete-btn:hover {
    color: #ff0000;
    transform: scale(1.1);
}

/* Danger button style */
.btn-danger {
    background: #ff6b6b;
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #ff0000;
}

/* Modal adjustments */
.modal-container p {
    margin-bottom: 20px;
    font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .entry-delete-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255, 255, 255, 0.8);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.myavana-profile-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: var(--onyx);
}

.profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.profile-avatar {
    position: relative;
    margin-right: 20px;
}

.profile-avatar img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 3px solid var(--coral);
}

#change-avatar {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px 10px;
    font-size: 12px;
}

.profile-info h1 {
    margin: 0;
    color: var(--onyx);
}

.member-since {
    color: var(--taupe);
    font-size: 14px;
    margin-top: 5px;
}

.profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--light-taupe);
    margin-bottom: 20px;
}

.tab-button {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--taupe);
    transition: all 0.3s ease;
}

.tab-button.active {
    color: var(--coral);
    border-bottom-color: var(--coral);
}

.tab-content {
    display: none;
    padding: 20px 0;
}

.tab-content.active {
    display: block;
}

.empty-state {
    padding: 20px;
    text-align: center;
    color: var(--taupe);
    background: var(--light-coral);
    border-radius: 8px;
}

/* Hair Goals Styles */
.hair-goal-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.goal-actions button {
    background: none;
    border: none;
    color: var(--coral);
    cursor: pointer;
    margin-left: 10px;
    font-size: 14px;
}

.goal-progress {
    margin: 15px 0;
}

.progress-bar {
    height: 10px;
    background: var(--light-taupe);
    border-radius: 5px;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    border-radius: 5px;
    background: var(--coral);
    transition: width 0.5s ease;
}

.progress-text {
    font-size: 14px;
    color: var(--taupe);
}

.goal-dates {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--taupe);
    margin-bottom: 15px;
}

.goal-updates ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.goal-updates li {
    padding: 5px 0;
    border-bottom: 1px dashed var(--light-taupe);
}

.goal-updates li small {
    color: var(--taupe);
    font-size: 12px;
}

.add-update {
    display: flex;
    margin-top: 10px;
    align-items: baseline;
}

.add-update input {
    flex: 1;
    padding: 8px;
    border-bottom: 1px solid var(--light-coral) !important;
    border-radius: 4px 0 0 4px;
    color: var(--onyx);
}

.add-update input:focus {
    outline: none;
    border: 1px solid var(--sand) !important;
}


.add-update button {
    width: 68px;
    height: 44px;
    background: var(--light-coral);
    color: var(--onyx);
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.add-update button:hover {
    background: var(--coral);
}


/* Hair Analysis Styles */
.analysis-limit {
    background: var(--light-coral);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.limit-reached {
    color: var(--coral);
    font-weight: 600;
}

.camera-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
}

#camera-view-analysis,
#camera-canvas-analysis {
    width: 100%;
    display: block;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.analysis-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.analysis-card:hover {
    transform: translateY(-5px);
}

.analysis-image img {
    width: 100%;
    object-fit: cover;
}

.analysis-summary {
    padding: 15px;
}

.analysis-summary h4 {
    margin: 0 0 10px;
}

.analysis-summary p {
    font-size: 14px;
    color: var(--taupe);
    margin: 0 0 15px;
}

.view-analysis-details {
    background: var(--coral);
    color: var(--onyx);
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Routine Styles */
/* .routine-step {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
} */

.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.step-actions {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;


}

.step-details p {
    margin: 5px 0;
    font-size: 14px;
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}



.remove-product {
    margin-left: 5px;
    cursor: pointer;
}

/* Modal Styles */
.myavana-modal {
    position: fixed;
    z-index: 10000000000000000000000000000000000000000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(34, 35, 35, 0.85);
    overflow-y: auto;
    backdrop-filter: blur(8px);
}

.modal-content {
    /* background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand)) !important; */
    background: linear-gradient(var(--stone), var(--white)) padding-box,
        linear-gradient(145deg, transparent 35%, var(--coral), var(--blueberry)) border-box;
    border: 2px solid transparent;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0,
        rgba(187, 18, 199, 0.15) 1px 1px 200px 0px,
        rgba(0, 98, 178, 0.15) -1px -1px 200px 0px !important;
    border-radius: 8px;
    margin: 8% auto;
    padding: 30px;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content h3 {
    color: var(--onyx);
    margin-block: 16px;
}

.modal-content.wide {
    max-width: 800px;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: var(--coral);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background-color: var(--onyx);
    transition: var(--transition);
}

.close-modal:hover {
    color: var(--coral);
    transform: scale(1.1);
}

/* === FORM STYLING === */
.hair-goal-form-enhanced {
    margin-top: 1rem;
}

.enhanced-form-group {
    margin-bottom: 1.5rem;
}

.enhanced-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--onyx);
    font-size: 0.9rem;
}

.form-field-with-help {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-field-with-help label {
    margin-bottom: 0;
}

/* === HELP ICON STYLES === */
.help-icon-enhanced {
    width: 20px;
    height: 20px;
    background: var(--coral);
    border-radius: 50%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    flex-shrink: 0;
}

.help-icon-enhanced:hover {
    background: var(--blueberry);
    transform: scale(1.1);
}

.help-tooltip-enhanced {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--onyx);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1001;
    width: 200px;
    white-space: normal;
    text-align: center;
}

.help-tooltip-enhanced::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--onyx);
}

.help-icon-enhanced:hover .help-tooltip-enhanced {
    opacity: 1;
    visibility: visible;
}

/* === ENHANCED SELECT STYLES === */
.myavana-select-enhanced {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--sand);
    border-radius: 8px;
    background: var(--white);
    color: var(--onyx);
    font-size: 1rem;
    transition: var(--transition);
    appearance: none;
    /* background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7a690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem; */
    padding-right: 2.5rem;
}

.myavana-select-enhanced:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(231, 166, 144, 0.2);
}

.myavana-select-enhanced option {
    padding: 0.5rem;
    background: var(--white);
    color: var(--onyx);
}

/* === ENHANCED PROGRESS STYLES === */
.progress-container-enhanced {
    margin-top: 0.5rem;
}

.myavana-range-enhanced {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--sand);
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: var(--transition);
}

.myavana-range-enhanced::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--coral);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(231, 166, 144, 0.3);
    transition: var(--transition);
}

.myavana-range-enhanced::-webkit-slider-thumb:hover {
    background: var(--blueberry);
    transform: scale(1.1);
}

.myavana-range-enhanced::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--coral);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(231, 166, 144, 0.3);
    transition: var(--transition);
}

.myavana-range-enhanced::-moz-range-thumb:hover {
    background: var(--blueberry);
    transform: scale(1.1);
}

.progress-display-enhanced {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.progress-value-enhanced {
    font-weight: 600;
    color: var(--coral);
    font-size: 1.1rem;
}

.progress-bar-bg-enhanced {
    width: 100%;
    height: 8px;
    background: var(--sand);
    border-radius: 3px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.progress-bar-fill-enhanced {
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--blueberry));
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* === ENHANCED DATE PICKER STYLES === */
.myavana-date-enhanced {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--sand);
    border-radius: 8px;
    background: var(--white);
    color: var(--onyx);
    font-size: 1rem;
    transition: var(--transition);
    position: relative;
}

.myavana-date-enhanced:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(231, 166, 144, 0.2);
}

.myavana-date-enhanced::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7a690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e");
    background-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition);
}

.myavana-date-enhanced::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* === ENHANCED BUTTON STYLES === */
.myavana-button-enhanced {
    background: linear-gradient(135deg, var(--coral), var(--blueberry));
    color: var(--white);
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    margin-top: 1rem;
}

.myavana-button-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(231, 166, 144, 0.3);
}

.myavana-button-enhanced:active {
    transform: translateY(0);
}

/* === ENHANCED TEXTAREA STYLES === */
.myavana-textarea-enhanced {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--sand);
    border-radius: 8px;
    background: var(--white);
    color: var(--onyx);
    font-size: 1rem;
    transition: var(--transition);
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.myavana-textarea-enhanced:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(231, 166, 144, 0.2);
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    .modal-content {
        margin: 1rem;
        padding: 1.5rem;
    }

    .help-tooltip-enhanced {
        max-width: 150px;
        font-size: 0.7rem;
    }
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.myavana-input,
.myavana-select,
.myavana-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--light-taupe);
    border-radius: 4px;
}

.myavana-textarea {
    min-height: 100px;
}

.myavana-range {
    width: 100%;
    margin: 10px 0;
}

.product-input-container {
    position: relative;
}

.product-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--light-taupe);
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}

.product-suggestion {
    padding: 10px;
    cursor: pointer;
}

.product-suggestion:hover {
    background: var(--light-coral);
}

.selected-products {
    margin-top: 10px;
}

/* Analysis Detail Styles */
.analysis-detail-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}

.analysis-image img {
    width: 100%;
    border-radius: 8px;
}

.detail-section {
    margin-bottom: 20px;
}

.detail-section h4 {
    margin-top: 0;
    color: var(--coral);
}

.metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.metric label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.product-card {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-match {
    height: 5px;
    background: var(--light-taupe);
    border-radius: 3px;
    margin-bottom: 10px;
}

.product-match .progress-fill {
    height: 100%;
    background: var(--coral);
    border-radius: 3px;
}

.product-card h5 {
    margin: 5px 0;
    font-size: 16px;
}

.product-card p {
    margin: 0;
    font-size: 14px;
    color: var(--taupe);
}


.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--white) !important;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
    z-index: 2;
}

.profile-name {
    font-family: 'Archivo Expanded', sans-serif;
    font-size: 36px;
    color: var(--dark);
    margin-bottom: 10px;
}

.profile-handle {
    color: var(--coral);
    font-weight: 600;
    margin-bottom: 20px;
}

.profile-bio {
    max-width: 600px;
    margin: 0 auto 30px;
    font-size: 18px;
}

.profile-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.stat-item {
    text-align: center;
}

.stat-value {

    font-size: 18px;
    color: var(--coral);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    color: var(--text);
    opacity: 0.8;
}

.profile-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}



/* .btn-primary {
    background: var(--coral);
    color: var(--white);
    border: none;
    box-shadow: var(--shadow);
} */
.btn-primary {
    display: inline-flex;
    cursor: pointer;
    padding: 7px 30px;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid;
    background: #fff var(--dark);
    color: var(--dark);
    border-radius: 0px;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: color 0.25s cubic-bezier(0.104, 0.204, 0.492, 1), background-color 0.25s cubic-bezier(0.104, 0.204, 0.492, 1), border-color 0.25s cubic-bezier(0.104, 0.204, 0.492, 1) !important;
}

.btn-primary:hover {
    background: var(--dark);
    transform: translateY(-3px);
    color: #fff;
}

.btn-primary:hover:before {
    transform: rotate3d(0, 0, 1, 0) translateZ(0);
}

.btn-outline {
    background: var(--white);
    color: var(--coral);
    border: 2px solid var(--coral);
}

.btn-outline:hover {
    background: var(--light);
    transform: translateY(-3px);
}

/* Hair Profile Sections */
.profile-section {
    background: var(--myavana-white);
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 40px;
    box-shadow: var(--shadow);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.section-title {
    text-transform: uppercase;
    font-size: 28px;
    color: var(--dark);
    position: relative;
    display: inline-block;
}

.section-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--light-coral);
}

.section-edit {
    color: var(--myavana-onyx);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.7;
}


.section-edit i {
    font-size: 14px;
}

.section-edit:hover {
    background-color: var(--light-coral);
    padding: 16px 24px;
    opacity: 1;
    color: var(--onyx);
}

.hair-analysis-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
}

.myavana-button-two {
    position: relative;
    overflow: hidden;
    outline: none;
    cursor: pointer;
    border-radius: 0px;
    border: 1px solid var(--onyx);
    background-color: var(--white);
    color: var(--onyx);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.myavana-button-two:hover {
    border: 1px solid var(--light-coral);
}

.default-btn {
    background: var(--white);
    color: var(--onyx);
}

.default-btn,
.hover-btn {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 1em 3em;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.hover-btn {
    position: absolute;
    inset: 0;
    font-size: 16px;
    padding: 1em 3em;
    text-align: center;
    background: var(--onyx);

    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    transform: translate(0%, 100%);
}

.default-btn span {
    color: var(--onyx);
}

.hover-btn span {
    color: var(--white);
}

button:hover .default-btn {
    transform: translate(0%, -100%);
}

button:hover .hover-btn {
    transform: translate(0%, 0%);
}

/* Hair Analysis Card */
.hair-analysis {
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow);
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px;
    width: 100%;
    height: 100%;
}

.analysis-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 300px;
}

.analysis-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.analysis-details {
    display: flex;
    flex-direction: column;
}

.hair-type {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.hair-type-icon {
    width: 60px;
    height: 60px;
    background: var(--light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--coral);
    margin-right: 20px;
}

.hair-type-info h3 {

    font-size: 24px;
    color: var(--dark);
    margin-bottom: 5px;
}

.hair-type-info p {
    color: var(--text);
    opacity: 0.8;
}

.hair-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background: rgba(255, 255, 255, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    width: 100%;
}

.metric-value {

    font-size: 24px;
    color: var(--coral);
    margin-bottom: 5px;
}

.metric-label {
    font-size: 14px;
    color: var(--text);
    opacity: 0.8;
}

.analysis-actions {
    display: flex;
    gap: 15px;
    margin-top: auto;
}

/* Hair Goals */
.goals-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.goal-card {
    background: rgba(255, 255, 255, 0.1);
    outline: var(--p-card) solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    padding: 25px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.goal-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--light-coral);
}

.goal-title {

    font-size: 20px;
    color: var(--dark);
    margin-bottom: 15px;
}

.goal-description {
    margin-bottom: 20px;
    color: var(--onyx);
    opacity: 0.7;
    padding-block: 12px;
}

.goal-progress {
    margin-bottom: 15px;
}

.progress-bar {
    height: 8px;
    background: rgba(108, 77, 138, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    background: var(--coral);
    border-radius: 4px;
    transition: width 0.5s;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text);
    opacity: 0.8;
}

.goal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goal-date {
    font-size: 12px;
    color: var(--text);
    opacity: 0.6;
}

.goal-btn {
    background: var(--coral);
    color: var(--white);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.goal-btn:hover {
    background: var(--dark);
}

/* Current Routine */
.routine-steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.routine-step {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.step-number {
    width: 50px;
    background: var(--light-coral);
    color: var(--onyx);
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
}

.step-content {
    flex: 1;
    padding: 20px;
    position: relative;
}

.step-links {
    position: absolute;
    top: 10px;
    right: 10px;

}

.step-title {

    font-size: 18px;
    color: var(--dark);
    margin-bottom: 10px;
}

.step-meta-container {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-left: 8px;
    padding-right: 8px;
}

.meta-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 3px;
    border-radius: 3px;
}

.frequency-meta:before {
    background: var(--coral);
}

.time-meta:before {
    background: var(--gold);
}

.meta-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.meta-text {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: 12px;
    color: var(--slate-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.meta-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--onyx);
}

/* SVG Animations */
.frequency-svg {
    width: 40px;
    height: 40px;
    stroke: var(--coral);
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    animation: pulse-animation 2s infinite;
    transform-origin: center;
}

.frequency-path {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: dash 3s ease-in-out infinite;
}

.time-svg {
    width: 20px;
    height: 20px;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}

.sun-center {
    fill: var(--gold);
    opacity: 0.8;
}

.sun-rays {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 90;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -90;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

.step-txt {
    color: var(--slate-gray);
    font-size: 14px;
    line-height: 1.6;
    margin: 16px 0;
    padding: 12px;
    background: rgba(245, 245, 245, 0.6);
    border-radius: 8px;
    border-left: 3px solid var(--light-coral);
}

/* .step-txt{
    color: var(--dark);
    opacity: 0.7;
    padding-top: 12px;
} */

.step-products {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.product-badge {
    background: var(--white);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
    color: var(--coral);
    font-weight: 600;
    box-shadow: var(--shadow);
}



/* Hair History */
.history-timeline {
    position: relative;
    padding-left: 30px;
}

.history-timeline:before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 2px;
    height: 100%;
    background: rgba(108, 77, 138, 0.2);
}

.history-item {
    position: relative;
    padding-bottom: 30px;
}

.history-item:last-child {
    padding-bottom: 0;
}

.history-dot {
    position: absolute;
    left: -30px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 10px;
}

.history-content {
    background: rgba(255, 255, 255, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    padding: 20px;
    border-radius: 10px;
}

.history-date {
    font-size: 14px;
    color: var(--coral);
    margin-bottom: 10px;
    font-weight: 600;
}

.history-title {

    font-size: 18px;
    color: var(--dark);
    margin-bottom: 10px;
}

.history-description {
    color: var(--text);
    margin-bottom: 15px;
    opacity: 0.7;
    padding-top: 12px;
    padding-bottom: 24px;
    line-height: 1.6 !important;
}

.history-products {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .hair-analysis {
        grid-template-columns: 1fr;
    }

    .analysis-image {
        height: 200px;
    }
}

@media (max-width: 992px) {
    .profile-name {
        font-size: 30px;
    }

    .profile-bio {
        font-size: 16px;
    }

    .section-title {
        font-size: 24px;
    }

    .hair-type-info h3 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .profile-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .profile-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .profile-section {
        padding: 10px;
    }



    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .routine-step {
        padding-bottom: 60px;
    }

    .step-links {
        position: absolute;
        top: 96%;
        right: 10px;

    }

    .myavana-hair-image {
        max-width: 300px;
    }

    .myavana-hair-slider {
        max-width: 560px;
    }

    .myavana-history-grid,
    .goals-container {
        grid-template-columns: 1fr !important;
    }

    .meta-item {
        flex-direction: column;
    }

    .myavana-hair-date {
        position: absolute;
        bottom: 1rem;
        left: 2.4rem;
    }

    .controls {
        position: absolute;
        top: -30px;
        right: 0px;
    }

}

#hairHealthChart {
    width: 100%;
}

@media (max-width: 576px) {
    .container {
        padding: 20px 15px;
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
    }

    .profile-name {
        font-size: 26px;
    }

    .profile-section {
        padding: 10px;
    }

    .section-title {
        font-size: 22px;
    }

    .routine-step {
        flex-direction: column;
    }

    .step-number {
        width: 100%;
        height: 40px;
    }

    .myavana-hair-image {
        max-width: 300px;
    }

    .myavana-hair-slider {
        max-width: 350px;
    }

    .myavana-history-grid,
    .goals-container {
        grid-template-columns: 1fr !important;
    }
}

.editBtn,
.deleteBtn {
    width: 55px;
    height: 55px;
    border-radius: 20px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.123);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.editBtn {
    background: var(--light-coral) !important;
}

.deleteBtn {
    background: var(--sand) !important;
    /* You might want to define this variable */
    margin-left: 10px;
    /* Add some spacing between buttons */
}

.editBtn::before,
.deleteBtn::before {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    z-index: 1;
    transform: scale(0);
    transition: all 0.3s;
    border-radius: 50%;
    filter: blur(10px);
}

.editBtn::before {
    background-color: var(--coral);
}

.deleteBtn::before {
    background-color: var(--coral);
    /* You might want to define this variable */
}

.editBtn:hover::before,
.deleteBtn:hover::before {
    transform: scale(1);
}

.editBtn:hover,
.deleteBtn:hover {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.336);
}

.editBtn svg,
.deleteBtn svg {
    height: 17px;
    fill: var(--onyx);
    z-index: 3;
    transition: all 0.2s;
    transform-origin: bottom;
}

.editBtn:hover svg {
    transform: rotate(-15deg) translateX(5px);
}

.deleteBtn:hover svg {
    transform: rotate(15deg) translateX(5px);
}

.editBtn::after,
.deleteBtn::after {
    content: "";
    width: 25px;
    height: 1.5px;
    position: absolute;
    bottom: 19px;
    left: -5px;
    background-color: var(--onyx);
    border-radius: 2px;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-out;
}

.editBtn:hover::after,
.deleteBtn:hover::after {
    transform: scaleX(1);
    left: 0px;
    transform-origin: right;
}


.routine-container {
    display: flex;
    flex-direction: column;

}

.p-b-2 {
    padding-block: 12px;
}

time-svg {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
}

.time-svg path,
.time-svg circle {
    fill: none;
    stroke: var(--coral);
    stroke-width: 2;
    transition: stroke 0.3s ease;
}

.time-svg.morning path,
.time-svg.morning circle {
    stroke: #FFD700;
    /* Gold for morning */
}

.time-svg.evening path,
.time-svg.evening circle {
    stroke: #FF8C00;
    /* Orange for evening */
}

.time-svg.night path,
.time-svg.night circle {
    stroke: #1C2526;
    /* Navy for night */
}

.time-svg.any-time path,
.time-svg.any-time circle {
    stroke: var(--blueberry);
    /* Blueberry for any time */
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#tryon-interface,
#tryon-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.error-message {
    background: #fee2e2;
    color: #dc2626;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.success-message {
    background: #d1fae5;
    color: #047857;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: var(--white);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--light-coral);
    border: 1px solid var(--coral);
    color: var(--text);
}

/* New Hair Analysis Styles */
.hair-analysis-results {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.hair-analysis-results h3 {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--onyx);
    margin-bottom: 16px;
}

.hair-analysis-results svg {
    stroke: var(--coral);
    margin-right: 8px;
}

.analysis-placeholder {
    text-align: center;
    color: var(--text);
    padding: 20px;
    background: var(--stone);
    border-radius: 8px;
    margin-bottom: 16px;
}

.hair-metrics {
    display: grid !important;
    gap: 16px;
}

.metric {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--onyx);
}

.metric-bar {
    background: var(--stone);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.metric-fill {
    background: var(--coral);
    height: 100%;
    transition: width 0.5s ease;
}

.metric-value {
    font-size: 0.875rem;
    color: var(--blueberry);
    margin-top: 4px;
}

.analysis-details {
    margin-top: 16px;
    padding: 16px;
    border-radius: 8px;
}

.analysis-details p {
    margin-bottom: 8px;
    color: var(--onyx);
}

.recommendations,
.products {
    margin-top: 16px;
}

.recommendations h4,
.products h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--onyx);
    margin-bottom: 8px;
}

.recommendations ul,
.products ul {
    list-style: disc;
    padding-left: 20px;
}

.recommendations li,
.products li {
    margin-bottom: 8px;
    color: var(--text);
}

.info-tooltip {
    display: inline-block;
    cursor: pointer;
    margin-top: -20px !important;
}

.info-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

.info-tooltip .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--light-coral);
    color: var(--onyx);
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
}

.relative {
    position: relative;
}

.faq-absolute {
    position: absolute;
    top: 6px;
    right: 0px;
}

.analysis-result-container {
    background: var(--white);
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
}

.hair-analysis-results h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 16px;
}

.hair-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.detail {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background: var(--stone);
    border-radius: 4px;
}

.detail-label {
    font-weight: 600;
    color: var(--text);
}

.detail-value {
    color: var(--coral);
}

.product-recommendations {
    margin-bottom: 24px;
}

.product {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.product-match {
    height: 8px;
    background: var(--coral);
    border-radius: 4px;
    margin-right: 12px;
}

.product-name {
    flex: 1;
    color: var(--text);
}

.product-match-value {
    color: var(--coral);
    font-size: 0.875rem;
}

.care-tips {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 24px;
}

.care-tips li {
    margin-bottom: 8px;
    color: var(--text);
}

.metric {
    margin-bottom: 16px;
}

.metric-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.metric-bar {
    height: 8px;
    background: var(--stone);
    border-radius: 4px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: var(--coral);
    transition: width 1s ease-in-out;
}

.myavana-button.secondary {
    background: var(--stone);
    color: var(--text);
    border: 1px solid var(--coral);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.myavana-button.secondary:hover {
    background: var(--light-coral);
}

.text-link {
    position: absolute;
    /* corner positioning */
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.8em;
    background: rgba(0, 0, 0, 0.7);
    /* semi-transparent dark bg */
    color: var(--onyx) !important;
    font-size: 0.875rem;
    /* small text */
    text-decoration: none;
    border-radius: 999px;
    /* pill shape */
    transition: background 0.3s, transform 0.2s;
    z-index: 10;
    /* appear on top */
}

.text-link:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

.text-link-icon {
    font-size: 1rem;
    /* icon size */
    display: flex;
    align-items: center;
}

.text-link-text {
    white-space: nowrap;
    /* keep text in one line */
}

.main-entry {
    padding-block: 20px;
}

.splide__arrow {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.2s;
    z-index: 10;
}

.splide__arrow:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.splide__arrow--prev {
    left: 1rem;
    /* inset from the left edge */
}

.splide__arrow--next {
    right: 1rem;
    /* inset from the right edge */
}

/* Only slider navigation styling */
.splide__arrow {
    background: var(--coral);
    opacity: 1;
    width: 40px;
    height: 40px;
}

.splide__arrow svg {
    fill: white;
    width: 16px;
    height: 16px;
}

.splide__arrow--prev {
    left: -50px;
}

.splide__arrow--next {
    right: -50px;
}

@media (max-width: 768px) {
    .splide__arrow {
        display: none;
    }

    .splide__pagination {
        bottom: -20px;
    }

    .splide__pagination__page.is-active {
        background: var(--coral);
    }
}

/* Custom Hair Analysis Slider Styles */
.myavana-hair-slider-container {
    position: relative;
    margin: 2rem 0;
    padding: 0 1rem;
    /* Reduced padding */
    overflow: hidden;
    background: transparent;
}

.myavana-hair-slider {
    display: flex;
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.myavana-hair-slide {
    flex: 0 0 100%;
    width: 100%;
    background: var(--stone);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 350px;
    position: relative;
}

/* Debug mode - temporarily show all slides side by side */
.myavana-hair-slider.debug-mode {
    overflow: visible;
    gap: 1.5rem;
}

.myavana-hair-slider.debug-mode .myavana-hair-slide {
    flex: 0 0 calc(50% - 0.75rem);
    width: calc(50% - 0.75rem);
    border: 2px solid #ff0000 !important;
    /* Debug: red border */
    min-height: 400px !important;
}

/* Debug: highlight content areas */
.myavana-hair-slider.debug-mode .myavana-hair-visual {
    background: #ffeeee !important;
    border: 1px solid #ff6666 !important;
}

.myavana-hair-slider.debug-mode .myavana-hair-details {
    background: #eeffee !important;
    border: 1px solid #66ff66 !important;
}

.myavana-hair-visual {
    position: relative;
    background: var(--stone);
    display: flex;
    align-items: center;
    justify-content: center;
}

.myavana-hair-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 400px;
    border: 5px solid var(--light-coral) !important;
    border-bottom-left-radius: 16px;
    border-top-left-radius: 16px;
}

.myavana-hair-placeholder {
    text-align: center;
    color: #E7A690;
    padding: 2rem;
}

.myavana-hair-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.myavana-hair-date {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.myavana-hair-details {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.myavana-hair-type {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.myavana-hair-type-icon {
    width: 50px;
    height: 50px;
    background: #FCE5D7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E7A690;
    font-size: 1.5rem;
}

.myavana-hair-type-icon img {
    border-radius: 50%;
}

.myavana-hair-type-info h3 {
    font-size: 1.25rem;
    margin: 0;
    color: #222323;
}

.myavana-hair-type-info p {
    margin: 0;
    color: #6D6D6D;
    font-size: 0.9rem;
}

.myavana-hair-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.myavana-hair-metric {
    background: linear-gradient(130deg, var(--stone), #fff 33%, var(--sand));
    box-shadow:
        rgba(0, 0, 0, 0.1) 0 4px 30px,
        rgba(60, 64, 67, 0.1) 0 1px 8px 0,
        rgba(60, 64, 67, 0.1) 0 1px 1px 0,
        rgba(187, 18, 199, 0.15) 1px 1px 200px 0px,
        rgba(0, 98, 178, 0.15) -1px -1px 200px 0px;
    border: 1px solid var(--sand);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.myavana-metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #E7A690;
    margin-bottom: 0.25rem;
}

.myavana-metric-label {
    font-size: 0.8rem;
    color: #6D6D6D;
    margin-bottom: 0.5rem;
}

.myavana-metric-bar {
    height: 6px;
    background: #EEE;
    border-radius: 3px;
    overflow: hidden;
}

.myavana-metric-fill {
    height: 100%;
    background: #E7A690;
    width: 0%;
    transition: width 0.5s ease;
}

.myavana-hair-summary {
    flex-grow: 1;
    margin-bottom: 1.5rem;
    color: #4A4D68;
    line-height: 1.5;
}

.myavana-hair-actions {
    display: flex;
    gap: 1rem;
}

.myavana-hair-action-btn {
    flex: 1;
    padding: 0.75rem;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.myavana-hair-action-btn i {
    font-size: 0.9rem;
}

.myavana-hair-action-btn.view-details {
    background: #E7A690;
    color: white;
}

.myavana-hair-action-btn.view-details:hover {
    background: #D4927A;
}

.myavana-hair-action-btn.compare {
    background: white;
    color: #4A4D68;
    border: 1px solid #DDD;
}

.myavana-hair-action-btn.compare:hover {
    background: #F5F5F7;
}

.myavana-slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.myavana-slider-prev,
.myavana-slider-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 1px solid #DDD;
    color: #4A4D68;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.myavana-slider-prev:hover,
.myavana-slider-next:hover {
    background: #F5F5F7;
}

.myavana-slider-dots {
    display: flex;
    gap: 0.5rem;
}

.myavana-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #DDD;
    cursor: pointer;
    transition: all 0.2s ease;
}

.myavana-slider-dot.active {
    background: #E7A690;
    transform: scale(1.2);
}

.myavana-no-analysis {
    text-align: center;
    padding: 3rem;
    color: #6D6D6D;
}

.myavana-no-analysis i {
    font-size: 3rem;
    color: #E7A690;
    margin-bottom: 1rem;
}

.myavana-no-analysis p {
    margin-bottom: 1.5rem;
}

.myavana-primary-btn {
    background: #E7A690;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
}

.myavana-primary-btn:hover {
    background: #D4927A;
}

/* Analysis History Styles */
.myavana-analysis-history {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #EEE;
}

.myavana-history-title {
    font-size: 1.5rem;
    color: var(--myavana-onyx);
    margin-bottom: 2rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
}

.myavana-history-title:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: #E7A690;
    border-radius: 4px;
}

.myavana-empty-history {
    text-align: center;
    padding: 2rem;
    color: #6D6D6D;
}

.myavana-empty-history i {
    font-size: 2rem;
    color: #E7A690;
    margin-bottom: 1rem;
}

.myavana-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.myavana-history-card {
    background: var(--myavana-white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.o-7 {
    opacity: 0.7;
}

.o-6 {
    opacity: 0.6;
}

.myavana-history-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.myavana-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.myavana-history-header h4 {
    margin: 0;
    color: #222323;
    font-size: 1rem;
}

.myavana-history-score {
    background: var(--light-coral);
    color: var(--onyx);
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.myavana-history-score span {
    font-weight: 400;
    font-size: 0.7rem;
    opacity: 0.8;
}

.myavana-history-preview {
    margin-bottom: 1rem;
    color: var(--myavana-onyx);
    line-height: 1.5;
    font-size: 0.9rem;
}

.myavana-history-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.myavana-history-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #6D6D6D;
}

.myavana-history-meta-item i {
    color: #E7A690;
}

.myavana-history-details-btn {
    width: 100%;
    background: none;
    border: none;
    color: #E7A690;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.myavana-history-details-btn:hover {
    color: #D4927A;
}

/* Analysis Modal Styles */
.myavana-analysis-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.myavana-analysis-modal.active {
    opacity: 1;
    visibility: visible;
}

.myavana-modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    margin-top: 120px;
}

.myavana-analysis-modal.active .myavana-modal-content {
    transform: translateY(0);
}

.myavana-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6D6D6D;
    transition: color 0.2s ease;
}

.myavana-modal-close:hover {
    color: #222323;
}

.myavana-modal-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #EEE;
}

.myavana-modal-title {
    margin: 0;
    color: #222323;
    font-size: 1.5rem;
}

.myavana-modal-date {
    color: #6D6D6D;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.myavana-modal-body {
    padding: 0.5rem 0;
}

.myavana-modal-section {
    margin-bottom: 2rem;
}

.myavana-section-title {
    font-size: 1.1rem;
    color: #222323;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.myavana-section-title:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #E7A690;
    border-radius: 50%;
}

.myavana-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.myavana-detail-item {
    background: var(--stone);
    border-radius: 8px;
    padding: 1rem;
}

.myavana-detail-label {
    display: block;
    font-size: 0.8rem;
    color: #6D6D6D;
    margin-bottom: 0.25rem;
}

.myavana-detail-value {
    font-weight: 500;
    color: #222323;
}

.myavana-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.myavana-metric-item {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #EEE;
}

.myavana-metric-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.myavana-metric-name {
    font-weight: 500;
    color: #222323;
}

.myavana-metric-value {
    font-weight: 700;
    color: #E7A690;
}

.myavana-recommendations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.myavana-recommendations-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #F5F5F7;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.myavana-recommendations-list li:before {
    content: '•';
    color: #E7A690;
    font-size: 1.2rem;
    line-height: 1;
}

.myavana-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.myavana-product-card {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #EEE;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.myavana-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.myavana-product-name {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #222323;
}

.myavana-product-match {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.myavana-product-match-value {
    font-size: 0.8rem;
    color: #E7A690;
    font-weight: 500;
}

.myavana-product-match-bar {
    height: 4px;
    background: #EEE;
    border-radius: 2px;
    overflow: hidden;
}

.myavana-product-match-fill {
    height: 100%;
    background: #E7A690;
    width: 0%;
    transition: width 0.5s ease;
}

.myavana-full-summary {
    background: var(--stone);
    border-radius: 8px;
    padding: 1rem;
    line-height: 1.6;
    color: var(--onyx);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .myavana-hair-slide {
        grid-template-columns: 1fr;
        margin-right: 1rem;
    }

    .myavana-hair-visual {
        min-height: 250px;
    }

    .myavana-history-grid {
        grid-template-columns: 1fr !important;
    }

    .myavana-detail-grid,
    .myavana-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.custom-end-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.end-journey-btn {
    background: var(--coral);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.end-journey-btn:hover {
    background: var(--blueberry);
    transform: translateX(5px);
}

.end-journey-btn i {
    transition: var(--transition);
}

.end-journey-btn:hover i {
    transform: translateX(3px);
}


.form-group input {
    background-color: #eee !important;
    border: 1px solid var(--sand) !important;
    padding: 1rem;
    font-size: 1rem;
    width: 100%;
    border-radius: 1rem;
    color: var(--onyx) !important;
    box-shadow: 0 0.4rem #dfd9d9 !important;
}

.form-group input:focus {
    outline-color: var(--light-coral);
}

.form-group textarea {
    background-color: #eee;
    border: 1px solid var(--sand) !important;
    color: var(--onyx) !important;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 1rem;
    box-shadow: 0 0.4rem #dfd9d9 !important;
}

.mb-2 {
    margin-bottom: 16px !important;
}

.mb-3 {
    margin-bottom: 24px !important;
}

.mb-4 {
    margin-bottom: 32px !important;
}

.mb-12 {
    margin-bottom: 96px !important;
}

.mb-6 {
    margin-bottom: 48px !important;
}

.splide__track {
    overflow: visible !important;
}

.splide__slide {
    opacity: 0.6;
    transition: opacity var(--transition);
}

.splide__slide.is-active {
    opacity: 1;
}

.splide__arrow {
    background: var(--light-coral);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splide__arrow:hover {
    background: var(--coral);
}


.splide__arrow--prev {
    left: 50px;
}

.splide__arrow--next {
    right: 50px;
}

.splide__pagination {
    display: none;
}

.timeline-nav {
    margin-top: 20px;
}

.timeline-track {
    background: var(--stone);
    height: 4px;
    border-radius: 2px;
    position: relative;
}

.timeline-progress {
    background: var(--coral);
    height: 100%;
    border-radius: 2px;
    transition: width var(--transition);
}

.timeline-dates {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.date-marker {
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.date-marker.active .marker-dot {
    background: var(--coral);
    transform: scale(1.2);
}

.marker-dot {
    width: 10px;
    height: 10px;
    background: var(--blueberry);
    border-radius: 50%;
    margin: 0 auto;
    transition: var(--transition);
}

.mini-card {
    background: var(--white);
    padding: 10px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 5px;
    transform: translateY(0);
    transition: var(--transition);
}

.date-marker.active .mini-card {
    transform: translateY(-5px);
}

.mini-card-image img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.main-entry {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin: 0 15px;
    width: 600px;
    max-width: 100%;
}



.entry-image-container {
    position: relative;
    margin-bottom: 15px;
}

.entry-image {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: 8px;
}

.entry-details {
    padding: 0 10px;
}

.entry-date {
    color: var(--blueberry);
    font-weight: 600;
    margin-bottom: 5px;
}

.entry-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.entry-text {
    margin-bottom: 15px;
}

.entry-products {
    margin-bottom: 15px;
}

.product-tag {
    background: var(--light-coral);
    padding: 5px 10px;
    border-radius: 15px;
    margin-right: 5px;
    display: inline-block;
}

.entry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.entry-mood {
    display: flex;
    align-items: center;
    gap: 5px;
}

.social-share {
    display: flex;
    gap: 10px;
}

.share-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--blueberry);
    color: var(--white);
    cursor: pointer;
}

.entry-delete-btn {
    background: none;
    border: none;
    color: var(--coral);
    cursor: pointer;
    font-size: 1.2rem;
}

.diary-timeline-container {
    background: linear-gradient(135deg, rgba(108, 77, 138, 0.1) 0%, rgba(231, 166, 144, 0.1) 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 32px;
}

.calendar-container {
    background: var(--stone);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.calendar-day {
    padding: 8px;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.calendar-day.entry {
    background-color: #ffdab9;
}

.calendar-day.selected {
    background-color: var(--light-coral);
    box-shadow: 0 0 8px rgba(230, 230, 250, 0.5);
}

.calendar-day:hover {
    background-color: var(--coral);
}

.timeline-container {
    position: relative;
    padding-left: 40px;
    max-height: 440px;
    /* or any height you prefer */
    overflow-y: auto;
}

.entry-text::-webkit-scrollbar {
    width: 6px;
}

.entry-text::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.timeline-line {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #ffdab9;
}

.timeline-entry {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: slideIn 0.5s ease-out;
}

.timeline-entry::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 20px;
    width: 12px;
    height: 12px;
    background-color: #e7a690;
    border-radius: 50%;
    border: 2px solid #fffaf0;
}

.timeline-entry:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.timeline-entry img {
    transition: transform 0.3s ease;
}

.timeline-entry:hover img {
    transform: scale(1.1);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .diary-timeline-container {
        flex-direction: column;
    }

    .calendar-container,
    .timeline-container {
        width: 100%;
    }

    .timeline-container {
        padding-left: 0;
    }

    .timeline-line {
        left: 20px;
    }
}

.nxt-prev {
    color: var(--blueberry);
    font-weight: 600;
}

.nxt-prev:hover {
    color: var(--coral);
}

.goal-progress-slider {
    width: 100%;
    margin: 10px 0;
    accent-color: var(--coral);
}

.progress-bar {
    background: var(--stone);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    background: var(--coral);
    height: 100%;
    transition: width 0.3s ease-in-out;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text);
    margin-top: 8px;
}

/* ===== IMPROVED TIMELINE STYLES ===== */

/* Import Archivo fonts for improved timeline */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&family=Archivo+Black:wght@400&display=swap');

/* Additional variables for improved timeline */
:root {
    /* Additional grays for UI */
    --myavana-gray-50: #f8f9fa;
    --myavana-gray-100: #e9ecef;
    --myavana-gray-200: #dee2e6;
    --myavana-gray-300: #ced4da;
    --myavana-gray-500: #6c757d;
    --myavana-gray-700: #495057;

    /* Status colors */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-info: #17a2b8;

    /* Ultra compact spacing */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */

    /* Compact typography */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(34, 35, 35, 0.1);
    --shadow-md: 0 4px 12px rgba(34, 35, 35, 0.15);
    --shadow-lg: 0 10px 25px rgba(34, 35, 35, 0.2);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* Reset and Base Styles */
.myavana-improved-timeline {
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    color: var(--onyx);
    background-color: var(--white);
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.myavana-improved-timeline *,
.myavana-improved-timeline *::before,
.myavana-improved-timeline *::after {
    box-sizing: border-box;
}

/* Swiper Container - Ultra Compact */
.timeline-swiper-container {
    width: 100%;
    height: auto;
    min-height: 500px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.timeline-swiper-wrapper {
    display: flex;
    transition-timing-function: ease;
}

.timeline-slide {
    width: 100%;
    height: auto;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    position: relative;
}

/* Start Slide - Welcome */
.start-slide {
    background: linear-gradient(135deg, var(--onyx) 0%, var(--myavana-gray-700) 100%);
    color: var(--white);
    padding: var(--space-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

.start-slide-content {
    max-width: 400px;
}

.start-slide h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-2xl);
    font-weight: 900;
    margin: 0 0 var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.start-slide p {
    font-size: var(--text-sm);
    margin: 0 0 var(--space-4) 0;
    opacity: 0.9;
    line-height: 1.6;
}

.start-slide-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    width: 100%;
}

.feature-item {
    background: rgba(252, 229, 215, 0.1);
    border: 1px solid var(--coral);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
    transition: var(--transition-fast);
}

.feature-item:hover {
    background: rgba(252, 229, 215, 0.2);
    transform: translateY(-2px);
}

.feature-icon {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    color: var(--coral);
}

.feature-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.begin-journey-btn {
    background: var(--coral);
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-sm);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.begin-journey-btn:hover {
    background: #d4956f;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Timeline Header - Compact */
.timeline-header {
    background: var(--myavana-gray-50);
    border-bottom: 1px solid var(--myavana-gray-200);
    padding: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.timeline-header h3 {
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--onyx);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-stats {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.stat-number {
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-base);
    font-weight: 900;
    color: var(--coral);
    margin-bottom: var(--space-1);
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--myavana-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    text-align: center;
}

/* Timeline Content - Ultra Compact */
.timeline-content {
    padding: var(--space-4);
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

.timeline-entries {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.timeline-entry {
    background: var(--white);
    border: 1px solid var(--myavana-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: var(--transition-fast);
    cursor: pointer;
    position: relative;
}

.timeline-entry:hover {
    border-color: var(--coral);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.timeline-entry.featured {
    border-color: var(--coral);
    background: linear-gradient(to right, var(--light-coral), var(--white));
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
}

.entry-date {
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-sm);
    font-weight: 900;
    color: var(--onyx);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entry-type {
    background: var(--coral);
    color: var(--white);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entry-content {
    margin-bottom: var(--space-2);
}

.entry-title {
    font-size: var(--text-sm);
    /* font-weight: 600; */
    color: var(--onyx);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.4;
}

.entry-excerpt {
    font-size: var(--text-xs);
    color: var(--myavana-gray-500);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-media {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.entry-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--myavana-gray-200);
}

.entry-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--myavana-gray-100);
}

.entry-metrics {
    display: flex;
    gap: var(--space-3);
}

.metric-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--myavana-gray-500);
}

.metric-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.view-entry-btn {
    background: var(--onyx);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-entry-btn:hover {
    background: var(--myavana-gray-700);
}

/* Timeline Navigation - Compact */
.timeline-navigation {
    background: var(--myavana-gray-50);
    border-top: 1px solid var(--myavana-gray-200);
    padding: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--white);
    border: 1px solid var(--myavana-gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: 600;
}

.nav-btn:hover:not(:disabled) {
    background: var(--light-coral);
    border-color: var(--coral);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.timeline-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--myavana-gray-300);
    cursor: pointer;
    transition: var(--transition-fast);
}

.pagination-dot.active {
    background: var(--coral);
    width: 12px;
    height: 12px;
}

.pagination-dot:hover {
    background: var(--onyx);
}

/* Empty State */
.timeline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
    color: var(--myavana-gray-500);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    color: var(--myavana-gray-300);
}

.timeline-empty h4 {
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-lg);
    color: var(--onyx);
    margin: 0 0 var(--space-2) 0;
    text-transform: uppercase;
}

.timeline-empty p {
    margin: 0 0 var(--space-4) 0;
    max-width: 300px;
}

.add-first-entry-btn {
    background: var(--coral);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.add-first-entry-btn:hover {
    background: #d4956f;
    transform: translateY(-2px);
}

/* Loading State */
.timeline-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--myavana-gray-200);
    border-top: 3px solid var(--coral);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-3);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    color: var(--myavana-gray-500);
    font-size: var(--text-sm);
    margin: 0;
}

/* Modal Styles */
.timeline-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(34, 35, 35, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: var(--space-4);
}

.modal-content {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.modal-header {
    background: var(--myavana-gray-50);
    border-bottom: 1px solid var(--myavana-gray-200);
    padding: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--onyx);
    margin: 0;
    text-transform: uppercase;
}

.modal-close {
    background: none;
    border: none;
    font-size: var(--text-xl);
    cursor: pointer;
    color: var(--myavana-gray-500);
    transition: var(--transition-fast);
    padding: var(--space-1);
}

.modal-close:hover {
    color: var(--onyx);
}

.modal-body {
    padding: var(--space-4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .myavana-improved-timeline {
        padding: var(--space-2);
    }

    .timeline-swiper-container {
        min-height: 450px;
    }

    .start-slide {
        padding: var(--space-4);
    }

    .start-slide h2 {
        font-size: var(--text-xl);
    }

    .start-slide-features {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .timeline-stats {
        width: 100%;
        justify-content: space-around;
    }

    .timeline-content {
        max-height: 350px;
    }

    .timeline-navigation {
        flex-direction: column;
        gap: var(--space-3);
    }

    .entry-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .entry-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .modal-content {
        margin: var(--space-2);
    }
}

@media (max-width: 480px) {
    .timeline-swiper-container {
        min-height: 400px;
    }

    .timeline-content {
        max-height: 300px;
    }

    .timeline-stats {
        flex-direction: column;
        gap: var(--space-2);
    }

    .stat-item {
        flex-direction: row;
        min-width: auto;
        gap: var(--space-2);
    }
}

/* ===== HAIR JOURNEY TIMELINE STYLES ===== */

.myvana-page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-2);
    font-family: 'Archivo', sans-serif;
}

/* Start Page - Beautiful & Compact */
.start-page {
    background: linear-gradient(135deg, var(--onyx) 0%, var(--myavana-gray-700) 50%, var(--onyx) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    box-shadow: var(--shadow-lg);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.start-page::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(231, 166, 144, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.start-hero {
    margin-bottom: var(--space-5);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.start-icon {
    font-size: 3rem;
    color: var(--coral);
    margin-bottom: var(--space-3);
    display: block;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.start-title {
    color: var(--coral);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

.start-subtitle {
    color: var(--white);
    margin-bottom: var(--space-3);
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.5rem;
    line-height: 1.6 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.start-description {
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
    margin: 0 auto var(--space-5) auto;
    line-height: 1.5;
    font-size: var(--text-sm);
}

.start-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    position: relative;
    z-index: 2;
}

.feature-card-timeline {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(231, 166, 144, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
    transition: var(--transition-fast);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feature-card-timeline:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(231, 166, 144, 0.2);
    border-color: var(--coral);
    background: rgba(255, 255, 255, 0.15);
}

.feature-icon {
    font-size: 1.2rem !important;
    color: var(--coral);
    margin-bottom: var(--space-2);
    width: 20%;

}

.feature-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-sm);
    color: var(--white);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-text {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin: 0;
    font-size: var(--text-xs);
}

.start-cta {
    position: relative;
    z-index: 2;
}

.begin-journey-btn {
    background: linear-gradient(135deg, var(--coral) 0%, #d4956f 100%);
    color: var(--white);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-6);
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-sm);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 20px rgba(231, 166, 144, 0.4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
}

.begin-journey-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.begin-journey-btn:hover::before {
    left: 100%;
}

.begin-journey-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(231, 166, 144, 0.6);
}

.begin-journey-btn svg {
    transition: var(--transition-fast);
}

.begin-journey-btn:hover svg {
    transform: translateX(2px);
}

/* Hair Diary Container - Compact */
.hair-diary-container {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.diary-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

/* Timeline Slider - Ultra Compact Mobile-First */
.timeline-slider {
    position: relative;
}

.splide {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--myavana-white);
}

.splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;
    padding: var(--space-2);
}

.main-entry {
    background: var(--white);
    border: 1px solid var(--myavana-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    width: 100%;
    max-width: 320px;
    position: relative;
    transition: var(--transition-fast);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.main-entry:hover,
.main-entry:active,
.main-entry:focus {
    border-color: var(--coral);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Touch optimization for mobile */
@media (hover: none) and (pointer: coarse) {
    .main-entry:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Floating Entry Card - Compact & Beautiful */
.floating-entry-card {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--white) 0%, var(--light-coral) 100%);
    border: 2px solid var(--coral);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 8px 25px rgba(231, 166, 144, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.main-entry:hover .floating-entry-card {
    opacity: 1;
    visibility: visible;
    top: -90px;
    transform: translateX(-50%) translateY(0);
}

.floating-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(231, 166, 144, 0.3);
}

.floating-card-image {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--coral);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.floating-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 60%, rgba(231, 166, 144, 0.2));
    pointer-events: none;
}

.floating-card-meta {
    flex: 1;
    min-width: 0;
}

.floating-card-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-sm);
    font-weight: 900;
    color: var(--onyx);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.floating-card-time {
    font-size: var(--text-xs);
    color: var(--coral);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.floating-card-content {
    margin-bottom: var(--space-3);
}

.floating-card-preview {
    font-size: var(--text-xs);
    color: var(--myavana-gray-700);
    line-height: 1.4;
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.floating-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.floating-stat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--coral);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--onyx);
    white-space: nowrap;
}

.floating-stat-icon {
    font-size: 12px;
}

.floating-card-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.floating-action-btn {
    flex: 1;
    background: var(--coral);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.floating-action-btn:hover {
    background: var(--onyx);
    transform: translateY(-1px);
}

.floating-action-btn.secondary {
    background: transparent;
    color: var(--coral);
    border: 1px solid var(--coral);
}

.floating-action-btn.secondary:hover {
    background: var(--coral);
    color: var(--white);
}

/* Mobile optimizations for floating card */
@media (max-width: 768px) {
    .floating-entry-card {
        min-width: 260px;
        max-width: 280px;
        padding: var(--space-2);
        top: -70px;
    }

    .main-entry:hover .floating-entry-card {
        top: -75px;
    }

    .floating-card-image {
        width: 40px;
        height: 40px;
    }

    .floating-card-title {
        font-size: 11px;
        -webkit-line-clamp: 1;
    }

    .floating-card-preview {
        font-size: 10px;
        -webkit-line-clamp: 2;
    }

    .floating-card-stats {
        flex-direction: column;
        gap: var(--space-1);
    }

    .floating-stat {
        padding: 2px var(--space-1);
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .floating-entry-card {
        min-width: 240px;
        max-width: 260px;
        top: -60px;
    }

    .main-entry:hover .floating-entry-card {
        top: -65px;
    }

    .floating-card-image {
        width: 35px;
        height: 35px;
    }

    .floating-card-actions {
        flex-direction: column;
        gap: var(--space-1);
    }
}

/* Touch devices - show on tap */
@media (hover: none) and (pointer: coarse) {
    .floating-entry-card {
        opacity: 0;
        visibility: hidden;
    }

    .main-entry:active .floating-entry-card,
    .main-entry.tapped .floating-entry-card {
        opacity: 1;
        visibility: visible;
        top: -75px;
    }
}

.main-entry.featured {
    border-color: var(--coral);
    background: linear-gradient(135deg, var(--light-coral) 0%, var(--white) 100%);
}

/* Entry Content - Compact Layout */
.entry-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.entry-image-container {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    height: 180px;
    background: var(--myavana-gray-100);
    margin-bottom: var(--space-2);
}

.entry-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--myavana-gray-500);
    font-size: var(--text-sm);
}

.no-image-placeholder i {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.entry-image-zoom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-fast);
}

.entry-image-container:hover .entry-image-zoom-overlay {
    opacity: 1;
}

.zoom-icon {
    color: var(--white);
    font-size: 1.5rem;
}

/* Entry Details */
.entry-details {
    text-align: left;
    padding: 0 var(--space-1);
}

.entry-date {
    color: var(--coral);
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
    line-height: 1.2;
}

.entry-title {

    /* font-size: var(--text-sm); */
    color: var(--onyx);
    margin-bottom: var(--space-2);
    /* text-transform: uppercase; */
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-text {
    color: var(--myavana-gray-500);
    line-height: 1.4;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-meta {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: 0 var(--space-1);
}

.entry-mood {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--myavana-gray-500);
    font-size: var(--text-xs);
}

.mood-icon {
    color: var(--coral);
}

/* AI Tags - Compact */
.ai-tags {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 120px;
}

.ai-tag {
    background: rgba(0, 0, 0, 0.85);
    color: var(--white);
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
    font-weight: 600;
}

/* Love Heart - Compact */
.entry-love-heart {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 28px;
    height: 28px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.entry-love-heart:hover {
    transform: scale(1.1);
    background: var(--light-coral);
}

.entry-love-heart.loved .love-heart-icon {
    color: #e74c3c;
}

.love-heart-icon {
    color: var(--myavana-gray-300);
    transition: var(--transition-fast);
}

/* Completeness Ring - Mini */
.entry-completeness-ring {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    width: 36px;
    height: 36px;
}

.completeness-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.completeness-percentage {
    font-family: 'Archivo Black', sans-serif;
    font-size: 9px;
    font-weight: 900;
    color: var(--onyx);
}

/* Quick Actions - Mini with Touch Optimization */
.entry-quick-actions {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: var(--transition-fast);
}

.main-entry:hover .entry-quick-actions {
    opacity: 1;
}

/* Show actions on mobile touch */
@media (hover: none) and (pointer: coarse) {
    .entry-quick-actions {
        opacity: 0.8;
    }

    .main-entry:active .entry-quick-actions {
        opacity: 1;
    }
}

.quick-action-btn {
    width: 24px;
    height: 24px;
    background: var(--white);
    border: 1px solid var(--myavana-gray-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--myavana-gray-500);
    font-size: 10px;
    /* Better touch target */
    min-width: 32px;
    min-height: 32px;
    margin: -4px;
}

.quick-action-btn:hover {
    background: var(--coral);
    color: var(--white);
    border-color: var(--coral);
}

/* Timeline Navigation - Compact */
.timeline-nav {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--myavana-gray-50);
    border-radius: var(--radius-md);
}

.timeline-track {
    height: 3px;
    background: var(--myavana-gray-300);
    border-radius: 2px;
    position: relative;
    margin-bottom: var(--space-3);
}

.timeline-progress {
    height: 100%;
    background: var(--coral);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.timeline-dates {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-1);
    overflow-x: auto;
    padding: var(--space-1) 0;
    -webkit-overflow-scrolling: touch;
}

.date-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 50px;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.date-marker:hover {
    transform: translateY(-1px);
}

.mini-card {
    background: var(--white);
    border: 1px solid var(--myavana-gray-200);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.date-marker.active .mini-card {
    border-color: var(--coral);
    background: var(--light-coral);
}

.mini-card-image {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
    margin-bottom: 2px;
}

.mini-card-title {
    font-size: 9px;
    color: var(--onyx);
    text-align: center;
    line-height: 1.1;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.marker-dot {
    width: 6px;
    height: 6px;
    background: var(--myavana-gray-300);
    border-radius: 50%;
    transition: var(--transition-fast);
}

.date-marker.active .marker-dot {
    background: var(--coral);
    transform: scale(1.3);
}

.marker-date {
    font-size: 9px;
    color: var(--myavana-gray-500);
    font-weight: 600;
    text-align: center;
}

/* End Page - Beautiful Celebration */
.end-page {
    background: linear-gradient(135deg, var(--coral) 0%, #d4956f 50%, var(--onyx) 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.end-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="20" opacity="0.1">✨🎉🌟💫⭐</text></svg>') repeat;
    animation: confetti 20s linear infinite;
    pointer-events: none;
}

@keyframes confetti {
    0% {
        transform: translateY(-100px) rotate(0deg);
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}

.celebration-header {
    margin-bottom: var(--space-5);
    position: relative;
    z-index: 2;
}

.celebration-icon {
    font-size: 3rem;
    margin-bottom: var(--space-3);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.end-title {
    color: var(--white);
    margin-bottom: var(--space-2);
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.end-subtitle {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-5);
    font-size: var(--text-base);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.progress-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0;
    position: relative;
    z-index: 2;
}

.progress-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    transition: var(--transition-fast);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.progress-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.progress-value {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: var(--space-2);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.progress-label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.progress-achievement {
    margin: var(--space-5) 0;
    position: relative;
    z-index: 2;
}

.achievement-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: var(--onyx);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-xl);
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-sm);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    margin-bottom: var(--space-3);
}

.achievement-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 350px;
    margin: 0 auto;
}

.end-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
    position: relative;
    z-index: 2;
}

.end-action-btn {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    font-family: 'Archivo Black', sans-serif;
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.end-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.end-action-btn.primary {
    background: var(--white);
    color: var(--onyx);
    border-color: var(--white);
}

.end-action-btn.primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px) scale(1.05);
}

/* =============================================
   MYAVANA REDESIGNED END PAGE STYLES
   ============================================= */

/* Main End Page Container */
.myavana-end-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--myavana-stone) 0%, var(--myavana-white) 30%, var(--myavana-sand) 100%);
    padding: 2rem 1rem;
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
}

/* Background Elements */
.myavana-celebration-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.myavana-celebration-bg .bg-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(231, 166, 144, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(74, 77, 104, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(231, 166, 144, 0.05) 0%, transparent 50%);
    animation: float 20s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

/* Hero Section */
.myavana-celebration-hero {
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 600px;
    gap: 1rem;
}

.celebration-icon-container {
    position: relative;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.celebration-icon-ring {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 80px;
    height: 80px;
    border: 3px solid var(--myavana-coral);
    border-radius: 50%;
    animation: pulse-ring 2s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
}

.celebration-icon {
    font-size: 3rem;
    display: block;
    padding: 0.5rem;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* MYAVANA Typography Classes */
.myavana-preheader {
    font-family: 'Archivo Black', sans-serif;
    font-size: 13.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--myavana-coral);
    margin-bottom: 0.5rem;
}

.myavana-h1-celebration {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--myavana-onyx);
    margin: 0.5rem 0;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.myavana-subheader-celebration {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--myavana-onyx);
    margin: 1rem 0;
}

.myavana-body-celebration {
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--myavana-onyx);
    opacity: 0.8;
    max-width: 500px;
    margin: 0 auto;
}

/* Progress Section */
.myavana-progress-section {
    width: 100%;
    max-width: 800px;
    margin: 2rem 0 3rem 0;
    position: relative;
    z-index: 2;
}

/* Progress Ring */
.myavana-progress-ring-container {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.myavana-progress-ring {
    filter: drop-shadow(0 4px 8px rgba(231, 166, 144, 0.3));
}

.progress-circle {
    animation: progress-fill 2s ease-out forwards;
}

@keyframes progress-fill {
    from {
        stroke-dashoffset: 534;
    }

    to {
        stroke-dashoffset: 134;
    }
}

.myavana-progress-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-percentage {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--myavana-coral);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.progress-label {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--myavana-blueberry);
}

/* Stats Grid */
.myavana-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.myavana-stat-card {
    background: var(--myavana-white);
    border: 1px solid var(--myavana-stone);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(34, 35, 35, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.myavana-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--myavana-coral), var(--myavana-blueberry));
}

.myavana-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(34, 35, 35, 0.12);
}

.stat-visual {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.stat-content {
    text-align: center;
}

.stat-number {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--myavana-coral);
    margin-bottom: 0.5rem;
    display: block;
    animation: count-up 1.5s ease-out forwards;
}

@keyframes count-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-label {
    font-family: 'Archivo', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--myavana-blueberry);
}

/* Achievement Section */
.myavana-achievement-section {
    width: 100%;
    max-width: 800px;
    margin: 3rem 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.myavana-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.myavana-achievement-badge {
    background: var(--myavana-white);
    border: 2px solid var(--myavana-stone);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer;
}

.myavana-achievement-badge.earned {
    border-color: var(--myavana-coral);
    background: linear-gradient(135deg, var(--myavana-white) 0%, var(--myavana-light-coral) 100%);
}

.badge-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--myavana-coral), var(--myavana-blueberry));
    border-radius: 16px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.myavana-achievement-badge.earned .badge-glow {
    opacity: 0.6;
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

.badge-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    animation: badge-bounce 0.6s ease-out forwards;
}

@keyframes badge-bounce {
    from {
        transform: scale(0) rotate(180deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.2) rotate(-10deg);
        opacity: 1;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.badge-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--myavana-onyx);
    margin-bottom: 0.5rem;
}

.badge-description {
    font-family: 'Archivo', sans-serif;
    font-size: 12px;
    color: var(--myavana-blueberry);
    opacity: 0.8;
}

/* Milestone Message */
.myavana-milestone-message {
    width: 100%;
    max-width: 600px;
    margin: 3rem 0;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-content {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(231, 166, 144, 0.2);
}

.myavana-subheader {
    font-family: 'Archivo', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--myavana-onyx);
    margin-bottom: 1rem;
}

.myavana-body {
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--myavana-onyx);
    opacity: 0.8;
}

/* Action Buttons */
.myavana-celebration-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
    margin: 2rem 0;
    position: relative;
    z-index: 2;
}

.myavana-btn-primary.celebration-primary {
    background: var(--myavana-coral);
    color: var(--myavana-white);
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(231, 166, 144, 0.3);
}

.myavana-btn-primary.celebration-primary:hover {
    background: #d4956f;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 166, 144, 0.4);
}

.myavana-btn-secondary.celebration-secondary {
    background: transparent;
    color: var(--myavana-onyx);
    border: 2px solid var(--myavana-onyx);
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 12px;
}

.myavana-btn-secondary.celebration-secondary:hover {
    background: var(--myavana-onyx);
    color: var(--myavana-white);
    transform: translateY(-1px);
}

/* Celebration Quote */
.myavana-celebration-quote {
    width: 100%;
    max-width: 600px;
    margin: 3rem 0 2rem 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.myavana-celebration-quote blockquote {
    font-family: 'Archivo', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--myavana-onyx);
    font-style: italic;
    margin: 0 0 1rem 0;
    position: relative;
}

.myavana-celebration-quote blockquote::before {
    content: '"';
    font-size: 4rem;
    color: var(--myavana-coral);
    position: absolute;
    top: -1rem;
    left: -1rem;
    font-family: serif;
}

.myavana-celebration-quote cite {
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--myavana-blueberry);
    font-style: normal;
}

/* Responsive Design */
@media (min-width: 768px) {
    .myavana-end-page {
        padding: 4rem 2rem;
    }

    .myavana-celebration-actions {
        flex-direction: row;
        justify-content: center;
    }

    .myavana-celebration-actions .myavana-btn-secondary {
        flex: 1;
        max-width: 200px;
    }

    .myavana-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .myavana-badge-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .myavana-celebration-hero {
        margin-bottom: 4rem;
    }

    .myavana-progress-section {
        margin: 3rem 0 4rem 0;
    }
}

/* Animation Classes for Enhanced Interactions */
.myavana-stat-card.animate-in {
    animation: slide-up-fade 0.8s ease-out forwards;
}

@keyframes slide-up-fade {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.myavana-achievement-badge.animate-earned {
    animation: badge-celebrate 1s ease-out forwards;
}

@keyframes badge-celebrate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Enhanced Progress Circle Animation */
.progress-circle {
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stat Card Hover Enhancements */
.myavana-stat-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.myavana-stat-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Achievement Badge Enhancements */
.myavana-achievement-badge {
    transform: scale(0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.myavana-achievement-badge.earned {
    transform: scale(1);
}

.myavana-achievement-badge.animate-earned {
    animation: badge-celebrate 1s ease-out forwards,
        badge-glow-flash 2s ease-out forwards;
}

@keyframes badge-glow-flash {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(34, 35, 35, 0.08);
    }

    50% {
        box-shadow: 0 8px 32px rgba(231, 166, 144, 0.4),
            0 0 24px rgba(231, 166, 144, 0.3);
    }
}

/* Progress Ring Enhancement */
.myavana-progress-ring-container {
    position: relative;
}

.myavana-progress-ring-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231, 166, 144, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: pulse-glow 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Animation Delays for Staggered Effects */
.myavana-stat-card:nth-child(1) {
    animation-delay: 0.1s;
}

.myavana-stat-card:nth-child(2) {
    animation-delay: 0.2s;
}

.myavana-stat-card:nth-child(3) {
    animation-delay: 0.3s;
}

.myavana-stat-card:nth-child(4) {
    animation-delay: 0.4s;
}

.myavana-achievement-badge:nth-child(1) .badge-icon {
    animation-delay: 0.2s;
}

.myavana-achievement-badge:nth-child(2) .badge-icon {
    animation-delay: 0.4s;
}

.myavana-achievement-badge:nth-child(3) .badge-icon {
    animation-delay: 0.6s;
}

/* Add Entry Button - Mobile Optimized */
.myavana-add-entry-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--coral);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
    z-index: 1000;
    color: var(--white);
    border: none;
    /* Better touch target */
    min-width: 48px;
    min-height: 48px;
}

.myavana-add-entry-btn:hover,
.myavana-add-entry-btn:active {
    transform: scale(1.05);
    background: #d4956f;
}

/* Mobile touch optimization */
@media (hover: none) and (pointer: coarse) {
    .myavana-add-entry-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    background: var(--myavana-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--myavana-gray-500);
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--coral);
    color: var(--white);
}

/* Form Styles */
.coolinput {
    margin-bottom: var(--space-4);
}

.coolinput .text {
    font-size: var(--text-sm);
    color: var(--onyx);
    font-weight: 600;
    margin-bottom: var(--space-2);
    display: block;
}

.coolinput .input {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--myavana-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    transition: var(--transition-fast);
    background: var(--white);
}

.coolinput .input:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 2px rgba(231, 166, 144, 0.2);
}

/* Mood Selector */
.mood-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.mood-option {
    text-align: center;
}

.mood-option input[type="radio"] {
    display: none;
}

.mood-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--myavana-gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.mood-option input[type="radio"]:checked+label {
    border-color: var(--coral);
    background: var(--light-coral);
}

.mood-icon-lg {
    font-size: 1.5rem;
    color: var(--coral);
}

/* Form Actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* Mobile-First Responsive Design */
@media (max-width: 768px) {
    .myvana-page-container {
        padding: var(--space-1);
    }

    .start-subtitle {
        font-size: 1.25rem;
        line-height: 1.6;
    }

    .start-features {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .feature-card-timeline {
        padding: var(--space-3);
    }

    .splide__slide {
        min-height: 300px;
        padding: var(--space-1);
    }

    .main-entry {
        max-width: 280px;
        padding: var(--space-2);
    }

    .entry-image-container {
        height: 150px;
    }

    .entry-title {
        font-size: 11px;
        -webkit-line-clamp: 1;
    }

    .entry-text {
        font-size: 10px;
        -webkit-line-clamp: 2;
    }

    .timeline-dates {
        justify-content: flex-start;
    }

    .mini-card {
        width: 45px;
        height: 45px;
        padding: var(--space-1);
    }

    .mini-card-title {
        font-size: 9px;
    }

    .end-actions {
        flex-direction: column;
        align-items: center;
    }

    .myavana-add-entry-btn {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }

    .modal-container {
        width: 95%;
        padding: var(--space-3);
    }

    .mood-selector {
        grid-template-columns: repeat(3, 1fr);
    }

    .progress-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .splide__slide {
        min-height: 280px;
        padding: 4px;
    }

    .main-entry {
        max-width: 260px;
        padding: var(--space-1);
    }

    .entry-image-container {
        height: 130px;
    }

    .entry-details {
        padding: 0;
    }

    .entry-title {
        font-size: 10px;
        margin-bottom: var(--space-1);
    }

    .entry-text {
        font-size: 9px;
        margin-bottom: var(--space-1);
    }

    .entry-date {
        font-size: 9px;
    }

    .entry-love-heart {
        width: 24px;
        height: 24px;
    }

    .entry-completeness-ring {
        width: 30px;
        height: 30px;
    }

    .completeness-percentage {
        font-size: 8px;
    }

    .quick-action-btn {
        width: 20px;
        height: 20px;
        font-size: 8px;
    }

    .ai-tag {
        font-size: 8px;
        padding: 1px 3px;
    }
}

/* ============================================================================
   SITE-WIDE MODAL SYSTEM
   ============================================================================ */

/* Modal Overlay Base */
.myavana-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(34, 35, 35, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: var(--space-4);
}

.myavana-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container Base */
.myavana-modal-container {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px rgba(34, 35, 35, 0.25);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.8) translateY(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.myavana-modal-overlay.active .myavana-modal-container {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.myavana-modal-header {
    background: linear-gradient(135deg, var(--coral) 0%, var(--light-coral) 100%);
    padding: var(--space-6);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.myavana-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    animation: float 20s ease-in-out infinite;
}

.myavana-modal-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    position: relative;
    z-index: 2;
}

.myavana-modal-subtitle {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
    margin: var(--space-2) 0 0 0;
    position: relative;
    z-index: 2;
}

/* Modal Close Button */
.myavana-modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
    color: var(--white);
    font-size: 18px;
}

.myavana-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Modal Content */
.myavana-modal-content {
    padding: var(--space-6);
    overflow-y: auto;
    max-height: calc(90vh - 120px);
}

/* Modal Actions */
.myavana-modal-actions {
    padding: var(--space-4) var(--space-6);
    background: var(--stone);
    border-top: 1px solid var(--myavana-gray-200);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* ============================================================================
   VIEW ENTRY MODAL
   ============================================================================ */

.view-entry-modal .myavana-modal-container {
    width: 600px;
}

.view-entry-content {
    display: grid;
    gap: var(--space-4);
}

.view-entry-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.view-entry-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--stone);
    border-radius: var(--radius-md);
}

.view-entry-meta-item {
    text-align: center;
}

.view-entry-meta-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--myavana-blueberry);
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.view-entry-meta-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--coral);
}

.view-entry-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--onyx);
}

.view-entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.view-entry-tag {
    background: var(--light-coral);
    color: var(--coral);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================================
   EDIT ENTRY MODAL
   ============================================================================ */

.edit-entry-modal .myavana-modal-container {
    width: 700px;
}

.edit-entry-form {
    display: grid;
    gap: var(--space-4);
}

.edit-form-group {
    display: grid;
    gap: var(--space-2);
}

.edit-form-label {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--onyx);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-form-input,
.edit-form-textarea,
.edit-form-select {
    padding: var(--space-3);
    border: 2px solid var(--myavana-gray-200);
    border-radius: var(--radius-md);
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--white);
}

.edit-form-input:focus,
.edit-form-textarea:focus,
.edit-form-select:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(231, 166, 144, 0.1);
}

.edit-form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Image Upload Area */
.edit-image-upload {
    border: 2px dashed var(--myavana-gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.edit-image-upload:hover {
    border-color: var(--coral);
    background: var(--light-coral);
}

.edit-image-upload.has-image {
    border-style: solid;
    border-color: var(--coral);
}

.edit-upload-icon {
    font-size: 48px;
    color: var(--coral);
    margin-bottom: var(--space-2);
}

.edit-upload-text {
    color: var(--myavana-blueberry);
    font-weight: 600;
}

.edit-current-image {
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin: var(--space-2) auto;
    display: block;
}

/* ============================================================================
   SHARE MODAL
   ============================================================================ */

.share-modal .myavana-modal-container {
    width: 500px;
}

.share-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4);
    border: 2px solid var(--myavana-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.share-option:hover {
    border-color: var(--coral);
    background: var(--light-coral);
    transform: translateY(-2px);
}

.share-option-icon {
    font-size: 32px;
    margin-bottom: var(--space-2);
}

.share-option-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--onyx);
}

/* Social Platform Colors */
.share-option.facebook:hover {
    border-color: #1877f2;
    background: rgba(24, 119, 242, 0.1);
}

.share-option.twitter:hover {
    border-color: #1da1f2;
    background: rgba(29, 161, 242, 0.1);
}

.share-option.instagram:hover {
    border-color: #e1306c;
    background: rgba(225, 48, 108, 0.1);
}

.share-option.copy:hover {
    border-color: var(--coral);
    background: var(--light-coral);
}

.share-preview {
    background: var(--stone);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.share-preview-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--onyx);
    margin-bottom: var(--space-2);
}

.share-preview-text {
    font-size: 14px;
    color: var(--myavana-blueberry);
    line-height: 1.5;
}

/* ============================================================================
   DELETE CONFIRMATION MODAL
   ============================================================================ */

.delete-modal .myavana-modal-container {
    width: 450px;
}

.delete-modal .myavana-modal-header {
    background: linear-gradient(135deg, #dc3545 0%, #f8d7da 100%);
}

.delete-warning {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.delete-warning-icon {
    font-size: 24px;
    color: #e53e3e;
}

.delete-warning-text {
    color: #742a2a;
    font-weight: 500;
}

.delete-entry-preview {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--stone);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.delete-entry-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.delete-entry-info h4 {
    margin: 0 0 var(--space-1) 0;
    color: var(--onyx);
    font-size: 16px;
}

.delete-entry-info p {
    margin: 0;
    color: var(--myavana-blueberry);
    font-size: 14px;
}

/* ============================================================================
   MODAL BUTTONS
   ============================================================================ */

.myavana-modal-btn {
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.myavana-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.myavana-modal-btn.primary {
    background: var(--coral);
    color: var(--white);
}

.myavana-modal-btn.primary:hover:not(:disabled) {
    background: #d4956f;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 166, 144, 0.3);
}

.myavana-modal-btn.secondary {
    background: var(--stone);
    color: var(--onyx);
    border: 1px solid var(--myavana-gray-300);
}

.myavana-modal-btn.secondary:hover:not(:disabled) {
    background: var(--myavana-gray-100);
    transform: translateY(-2px);
}

.myavana-modal-btn.danger {
    background: #dc3545;
    color: var(--white);
}

.myavana-modal-btn.danger:hover:not(:disabled) {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
}

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

@media (max-width: 768px) {
    .myavana-modal-overlay {
        padding: var(--space-2);
    }

    .myavana-modal-container {
        max-width: 100%;
        max-height: 100%;
    }

    .view-entry-modal .myavana-modal-container,
    .edit-entry-modal .myavana-modal-container,
    .share-modal .myavana-modal-container,
    .delete-modal .myavana-modal-container {
        width: 100%;
    }

    .myavana-modal-header {
        padding: var(--space-4);
    }

    .myavana-modal-title {
        font-size: 20px;
    }

    .myavana-modal-content {
        padding: var(--space-4);
    }

    .view-entry-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .share-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .myavana-modal-actions {
        padding: var(--space-3) var(--space-4);
        flex-direction: column;
    }
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

.modal-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--light-coral);
    border-top: 4px solid var(--coral);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
}

.myavana-modal-container.animate-in {
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.myavana-modal-container.animate-out {
    animation: modalSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hair-journey-card {
    position: absolute;
    left: 5%;
    top: 15px;
    width: 100%;
    height: 60%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hair-journey-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.journey-card-image {
    height: 50%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.journey-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7), transparent);
}

.journey-card-content {
    padding: 10px 12px;
    background-color: white;
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.journey-time {
    font-size: 10px;
    color: var(--myavana-coral);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.journey-title {
    font-size: 11px;
    font-weight: 700;
    color: #5a4b41;
    line-height: 1.3;
    margin-bottom: 2px;
}

.journey-description {
    font-size: 10px;
    color: #8a7f7a;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.journey-tag {
    display: inline-block;
    padding: 3px 8px;
    background-color: #fce5d7;
    color: #8a5a44;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    margin-top: 5px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.hair-type {
    font-size: 9px;
    color: #8a7f7a;
    display: flex;
    align-items: center;
}

.hair-type::before {
    content: '●';
    color: #d4a88c;
    margin-right: 4px;
    font-size: 12px;
}

.card-actions {
    display: flex;
    gap: 5px;
}

.myavana-modal-overlay.active .myavana-modal-container {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.myavana-modal-header {
    background: linear-gradient(135deg, var(--coral) 0%, var(--light-coral) 100%);
    padding: var(--space-6);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.myavana-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    animation: float 20s ease-in-out infinite;
}

.myavana-modal-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    position: relative;
    z-index: 2;
}

.myavana-modal-subtitle {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
    margin: var(--space-2) 0 0 0;
    position: relative;
    z-index: 2;
}

/* Modal Close Button */
.myavana-modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
    color: var(--white);
    font-size: 18px;
}

.myavana-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Modal Content */
.myavana-modal-content {
    padding: var(--space-6);
    overflow-y: auto;
    max-height: calc(90vh - 120px);
}

/* Modal Actions */
.myavana-modal-actions {
    padding: var(--space-4) var(--space-6);
    background: var(--stone);
    border-top: 1px solid var(--myavana-gray-200);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* ============================================================================
   VIEW ENTRY MODAL
   ============================================================================ */

.view-entry-modal .myavana-modal-container {
    width: 600px;
}

.view-entry-content {
    display: grid;
    gap: var(--space-4);
}

.view-entry-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.view-entry-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--stone);
    border-radius: var(--radius-md);
}

.view-entry-meta-item {
    text-align: center;
}

.view-entry-meta-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--myavana-blueberry);
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.view-entry-meta-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--coral);
}

.view-entry-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--onyx);
}

.view-entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.view-entry-tag {
    background: var(--light-coral);
    color: var(--coral);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================================
   EDIT ENTRY MODAL
   ============================================================================ */

.edit-entry-modal .myavana-modal-container {
    width: 700px;
}

.edit-entry-form {
    display: grid;
    gap: var(--space-4);
}

.edit-form-group {
    display: grid;
    gap: var(--space-2);
}

.edit-form-label {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--onyx);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-form-input,
.edit-form-textarea,
.edit-form-select {
    padding: var(--space-3);
    border: 2px solid var(--myavana-gray-200);
    border-radius: var(--radius-md);
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--white);
}

.edit-form-input:focus,
.edit-form-textarea:focus,
.edit-form-select:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(231, 166, 144, 0.1);
}

.edit-form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Image Upload Area */
.edit-image-upload {
    border: 2px dashed var(--myavana-gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.edit-image-upload:hover {
    border-color: var(--coral);
    background: var(--light-coral);
}

.edit-image-upload.has-image {
    border-style: solid;
    border-color: var(--coral);
}

.edit-upload-icon {
    font-size: 48px;
    color: var(--coral);
    margin-bottom: var(--space-2);
}

.edit-upload-text {
    color: var(--myavana-blueberry);
    font-weight: 600;
}

.edit-current-image {
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin: var(--space-2) auto;
    display: block;
}

/* ============================================================================
   SHARE MODAL
   ============================================================================ */

.share-modal .myavana-modal-container {
    width: 500px;
}

.share-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4);
    border: 2px solid var(--myavana-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.share-option:hover {
    border-color: var(--coral);
    background: var(--light-coral);
    transform: translateY(-2px);
}

.share-option-icon {
    font-size: 32px;
    margin-bottom: var(--space-2);
}

.share-option-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--onyx);
}

/* Social Platform Colors */
.share-option.facebook:hover {
    border-color: #1877f2;
    background: rgba(24, 119, 242, 0.1);
}

.share-option.twitter:hover {
    border-color: #1da1f2;
    background: rgba(29, 161, 242, 0.1);
}

.share-option.instagram:hover {
    border-color: #e1306c;
    background: rgba(225, 48, 108, 0.1);
}

.share-option.copy:hover {
    border-color: var(--coral);
    background: var(--light-coral);
}

.share-preview {
    background: var(--stone);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.share-preview-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--onyx);
    margin-bottom: var(--space-2);
}

.share-preview-text {
    font-size: 14px;
    color: var(--myavana-blueberry);
    line-height: 1.5;
}

/* ============================================================================
   DELETE CONFIRMATION MODAL
   ============================================================================ */

.delete-modal .myavana-modal-container {
    width: 450px;
}

.delete-modal .myavana-modal-header {
    background: linear-gradient(135deg, #dc3545 0%, #f8d7da 100%);
}

.delete-warning {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.delete-warning-icon {
    font-size: 24px;
    color: #e53e3e;
}

.delete-warning-text {
    color: #742a2a;
    font-weight: 500;
}

.delete-entry-preview {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--stone);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.delete-entry-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.delete-entry-info h4 {
    margin: 0 0 var(--space-1) 0;
    color: var(--onyx);
    font-size: 16px;
}

.delete-entry-info p {
    margin: 0;
    color: var(--myavana-blueberry);
    font-size: 14px;
}

/* ============================================================================
   MODAL BUTTONS
   ============================================================================ */

.myavana-modal-btn {
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.myavana-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.myavana-modal-btn.primary {
    background: var(--coral);
    color: var(--white);
}

.myavana-modal-btn.primary:hover:not(:disabled) {
    background: #d4956f;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 166, 144, 0.3);
}

.myavana-modal-btn.secondary {
    background: var(--stone);
    color: var(--onyx);
    border: 1px solid var(--myavana-gray-300);
}

.myavana-modal-btn.secondary:hover:not(:disabled) {
    background: var(--myavana-gray-100);
    transform: translateY(-2px);
}

.myavana-modal-btn.danger {
    background: #dc3545;
    color: var(--white);
}

.myavana-modal-btn.danger:hover:not(:disabled) {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
}

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

@media (max-width: 768px) {
    .myavana-modal-overlay {
        padding: var(--space-2);
    }

    .myavana-modal-container {
        max-width: 100%;
        max-height: 100%;
    }

    .view-entry-modal .myavana-modal-container,
    .edit-entry-modal .myavana-modal-container,
    .share-modal .myavana-modal-container,
    .delete-modal .myavana-modal-container {
        width: 100%;
    }

    .myavana-modal-header {
        padding: var(--space-4);
    }

    .myavana-modal-title {
        font-size: 20px;
    }

    .myavana-modal-content {
        padding: var(--space-4);
    }

    .view-entry-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .share-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .myavana-modal-actions {
        padding: var(--space-3) var(--space-4);
        flex-direction: column;
    }
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

.modal-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--light-coral);
    border-top: 4px solid var(--coral);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
}

.myavana-modal-container.animate-in {
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.myavana-modal-container.animate-out {
    animation: modalSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hair-journey-card {
    position: absolute;
    left: 5%;
    top: 15px;
    width: 100%;
    height: 60%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hair-journey-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.journey-card-image {
    height: 50%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.journey-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7), transparent);
}

.journey-card-content {
    padding: 10px 12px;
    background-color: white;
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.journey-time {
    font-size: 10px;
    color: var(--myavana-coral);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.journey-title {
    font-size: 11px;
    font-weight: 700;
    color: #5a4b41;
    line-height: 1.3;
    margin-bottom: 2px;
}

.journey-description {
    font-size: 10px;
    color: #8a7f7a;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.journey-tag {
    display: inline-block;
    padding: 3px 8px;
    background-color: #fce5d7;
    color: #8a5a44;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    margin-top: 5px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.hair-type {
    font-size: 9px;
    color: #8a7f7a;
    display: flex;
    align-items: center;
}

.hair-type::before {
    content: '●';
    color: #d4a88c;
    margin-right: 4px;
    font-size: 12px;
}

.card-actions {
    display: flex;
    gap: 5px;
}