/* ========================================
   NEW CARD & FILTER STYLES
   ======================================== */

:root {
    --shimmer-hue-1: 213deg;
    --shimmer-sat-1: 95%;
    --shimmer-lit-1: 91%;
    --shimmer-hue-2: 248deg;
    --shimmer-sat-2: 100%;
    --shimmer-lit-2: 86%;
    --shimmer-hue-3: 293deg;
    --shimmer-sat-3: 78%;
    --shimmer-lit-3: 89%;

    --glow-hue: 222deg;
    --shadow-hue: 180deg;
    --spring-easing: linear(0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
            1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
            1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
            0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
            0.998 84%, 1);
    --spring-duration: 1.33s;
}

/* --- Existing Shimmer/Wave CSS --- */
@property --mask {
    syntax: "<angle>";
    inherits: false;
    initial-value: 33deg;
}

@keyframes vertical-wipe {
    0% {
        mask-position: center 200%;
    }

    100% {
        mask-position: center -100%;
    }
}

@keyframes spin {
    0% {
        --mask: 0deg;
    }

    100% {
        --mask: 360deg;
    }
}

.profile-shimmer-container {
    position: relative;
    isolation: isolate;
    border-radius: inherit;
}

.profile-shimmer-container .shimmer {
    position: absolute;
    inset: -40px;
    border-radius: inherit;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 20;
}

.profile-shimmer-container .shimmer::before,
.profile-shimmer-container .shimmer::after {
    transition: all 0.5s ease;
    opacity: 0;
    content: "";
    border-radius: inherit;
    position: absolute;
    inset: 40px;
}

.profile-shimmer-container .shimmer::before {
    box-shadow: 0 0 5px 3px hsl(var(--shimmer-hue-1) 20% 95%),
        0 0 15px 8px hsl(var(--shimmer-hue-1) 20% 80%),
        0 0 30px 15px hsl(var(--shimmer-hue-2) 40% 60%),
        0 0 50px 25px hsl(var(--shimmer-hue-2) 20% 40%);
    z-index: -1;
}

.profile-shimmer-container .shimmer::after {
    box-shadow: inset 0 0 0 2px hsl(var(--shimmer-hue-2) 70% 95%),
        inset 0 0 8px 3px hsl(var(--shimmer-hue-2) 100% 80%),
        inset 0 0 18px 6px hsl(var(--shimmer-hue-2) 100% 70%);
    z-index: 2;
}

.profile-shimmer-container .shimmer::before,
.profile-shimmer-container .shimmer::after {
    opacity: 1;
}

.profile-shimmer-container[data-effect=vertical-wave] .shimmer {
    mask-image: linear-gradient(180deg, transparent 15%, black 45%, black 55%, transparent 85%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: vertical-wipe 3s linear infinite both -0.5s;
}

/* --- Flip Card CSS --- */

.text-center {
    text-align: center;
}

.color-white {
    color: #fff;
}

.box-container {
    font-family: 'Poppins', sans-serif;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    padding: 80px 20px;
    width: 100%;
    gap: 15rem 6rem;
}

/* Wrapper for z-index management */
.card-wrapper {
    position: relative;
    width: 100%;
    max-width: 415px;
    /* Restoration of original size cap */
    z-index: 10;
    transition: z-index 0s 0.7s;
    /* Ensure no overflow clipping on the wrapper */
    overflow: visible;
}

@media (max-width: 1400px) {
    .box-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .box-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .box-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Raise z-index on hover so it overlaps neighbors if tilted */
.card-wrapper:hover {
    z-index: 100;
    transition: z-index 0s 0s;
}

.box-item {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* REMOVED backface-visibility: hidden to allow children to extend outside without clipping in 3D space */
    transform-style: preserve-3d;
}

.flip-box {
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.flip-box-front,
.flip-box-back {
    background-size: cover;
    background-position: center;
    min-height: 475px;
    -ms-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    -webkit-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* CRITICAL: Allows price to hang outside on front too */
    overflow: visible !important;
}

/* --- FLIP LOGIC WITH SAFETY --- */

/* 
   Trigger flip on hover of the wrapper...
   BUT prevent flip if the user is hovering the Front Button. 
   This allows clicking the front button without the card running away.
*/

.card-wrapper:hover .flip-box-front {
    -ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

/* Override the above if hovering the front button */
.card-wrapper:has(.flip-box-front .product__btn:hover) .flip-box-front {
    -ms-transform: rotateY(0deg) !important;
    -webkit-transform: rotateY(0deg) !important;
    transform: rotateY(0deg) !important;
}

.flip-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* CRITICAL: Allows button to hang outside */
    overflow: visible !important;
}

.card-wrapper:hover .flip-box-back {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/* Override the above if hovering the front button (keep back hidden) */
.card-wrapper:has(.flip-box-front .product__btn:hover) .flip-box-back {
    -ms-transform: rotateY(180deg) !important;
    -webkit-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
}

.flip-box .inner {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    /* Adjusted padding to sit nicely at top */
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 20;

    /* Position at top */
    top: 0;

    transform: translateZ(60px) scale(0.9);
    -webkit-transform: translateZ(60px) scale(0.9);
    -ms-transform: translateZ(60px) scale(0.9);

    text-align: center;
}

.parallax-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    object-fit: contain;
    /* Increased Z translation to 150px for stronger floating effect */
    transform: translate(-50%, -50%) translateZ(150px);
    -webkit-transform: translate(-50%, -50%) translateZ(150px);
    /* Adjusted shadow to be further down/diffused to match height */
    filter: drop-shadow(0 40px 40px rgba(0, 0, 0, 0.5));
    z-index: 10;
    pointer-events: none;
    opacity: 1;
}

/* --- ICON GLOW EFFECT (Positioned just behind parallax-icon) --- */
.icon-glow-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    /* 145px z-index puts it just behind the 150px icon */
    transform: translate(-50%, -50%) translateZ(145px);
    pointer-events: none;
    z-index: 9;
}

.icon-glow-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Radial gradient matching the button color #228DFF */
    background: radial-gradient(circle, rgba(34, 141, 255, 0.6) 0%, transparent 70%);
    filter: blur(15px);
    opacity: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: screen;
}

/* Trigger pulse when button is hovered */
.flip-box-front:has(.product__btn:hover) .icon-glow-inner,
.flip-box-back:has(.product__btn:hover) .icon-glow-inner {
    opacity: 1;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.3;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.4);
    }

    100% {
        opacity: 0.3;
        transform: scale(0.9);
    }
}

.flip-box-header {
    font-size: 34px;
}

.flip-box p {
    font-size: 20px;
    line-height: 1.5em;
}

.flip-box-img {
    margin-top: 15px;
    display: inline-block;
}

/* --- PRICE TAG CSS --- */

.product__price {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Overlapping the border */
    top: -10px;
    left: -10px;
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.95);
    color: #fff;
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 50;
    transform: translateZ(60px);
    -webkit-transform: translateZ(60px);

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* --- NEW BUTTON CSS (Requested Glow Effect) --- */

.product__btn {
    /* Positioning in 3D card */
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 50;
    transform: translateZ(60px);
    -webkit-transform: translateZ(60px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Base Styling */
    color: var(--color-text-secondary, #fff);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    /* Slight visibility when idle */
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
}

.product__btn:hover {
    color: #000000;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 30px rgba(255, 255, 255, 0.6),
        0 0 60px rgba(255, 255, 255, 0.4),
        0 0 90px rgba(255, 255, 255, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: navLinkGlow 1.5s ease-in-out infinite;
}

/* --- Interaction: Glow Price when Button is Hovered --- */
/* Note: This works because we placed the button before the price in the DOM */
.product__btn:hover~.product__price {
    color: #ffffff;
    text-shadow:
        0 0 10px #ffffff,
        0 0 20px #228DFF;
    box-shadow:
        0 0 20px rgba(34, 141, 255, 0.6),
        inset 0 0 20px rgba(34, 141, 255, 0.2);
    border-color: rgba(34, 141, 255, 0.5);
    transform: translateZ(70px) scale(1.05);
}

@keyframes shine-loop {
    0% {
        transform: skewX(45deg) translateX(250%);
    }

    15% {
        transform: skewX(45deg) translateX(-250%);
    }

    100% {
        transform: skewX(45deg) translateX(-250%);
    }
}

.animate-shine-loop {
    animation: shine-loop 5s infinite;
}

/* Specific shadow requested by user */
.custom-card-shadow {
    box-shadow: 0 70px 63px -60px #494848;
}

/* Trigger glow on both faces when the parent container (.box-item) is hovered */
.box-item:hover .custom-card-shadow {
    box-shadow: 0 70px 63px -60px #494848, 0 0 20px rgba(255, 255, 255, 0.6);
}

/* ========================================
   SEGMENTED CONTROL STYLES (Provided)
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;700&display=swap');

:root {
    --font-barlow: 'Barlow', sans-serif;
    --font-barlowCondensed: 'Barlow Condensed', sans-serif;

    --time-nav-hover: 0.25s;

    --color-fire: #00aeff;
    --color-black: #191919;
    --color-grey-5: #FBFBFB;
    --color-grey-10: #F6F7F7;
    --color-grey-cool-10: #EEEEEF;
    --color-grey-15: #E8E8E8;
    --color-grey-20: #D5D6D8;
    --color-grey-60: #ABADB1;
    --color-grey-70: #888891;
    --color-grey-80: #6B6A6A;
    --color-grey-85: #59595F;

    --shadow-fire:
        0 4px 12px 4px rgba(0, 174, 255, 0.2),
        0 1px 3px 0 rgba(0, 87, 128, 0.4);

    --focus-style: dotted 2px var(--color-black);
    --focus-offset: 2px;
}

/* Scoped to avoid breaking global styles */
#card-app-container .input-container-wrapper {
    /* Replaces #inputContainer body styles */
    color: var(--color-black);
    font-family: var(--font-barlow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#inputContainer {
    margin: 0 auto;
    max-width: 60em;
    /* Increased width to fit both in row */
    padding: 1em;
    /* Reduced padding */

    display: flex;
    flex-flow: row wrap;
    /* Allow side-by-side */
    gap: 2em;
    /* Gap between groups */
    justify-content: center;
    align-items: flex-end;
    /* Align bottom so labels line up */
}

.inputGroup {
    display: block;
    margin: 0;
    border: none;
    /* Reset fieldset border */
    padding: 0;
}

.label {
    display: block;
    font-size: 1em;
    /* Reduced from 1.5em */
    font-weight: 700;
    font-family: var(--font-barlowCondensed);
    line-height: 1.25em;
    margin: 0 0 .4em;
    padding: 0;
    text-transform: uppercase;
    color: white;
    text-align: center;
    /* Center label over control */
    letter-spacing: 0.05em;
}

.segmentedControl {
    --options: 3;
    --options-active: 1;
    --options-gap: .25em;
    /* Reduced gap to save space */

    background: var(--color-grey-10);
    border: solid 1px var(--color-grey-70);
    border-radius: 0.25em;
    position: relative;

    display: flex;
    flex-flow: row;
    justify-content: flex-start;

    /* Ensure it has a minimum width but not too huge */
    min-width: 400px;
    /* Increased from 300px to fit "Platinum" */
}

.segmentedControl .segmentedControl--group {
    flex: 0 0 auto;
    margin: var(--options-gap);
    width: calc((100% - ((var(--options)*var(--options-gap))*2)) / var(--options));

    display: flex;
    flex-flow: row;
    justify-content: stretch;
    align-items: stretch;
}

.segmentedControl .segmentedControl--group input {
    opacity: 0;
    position: absolute;
}

.segmentedControl .segmentedControl--group input+label {
    border-radius: .25em;
    flex: 1 1 100%;
    font-size: 1em;
    font-weight: normal;
    font-family: var(--font-barlow);
    line-height: 1;
    margin: 0;
    padding: 0.4em 0;
    position: relative;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    cursor: pointer;
    white-space: nowrap;
    /* Prevent wrapping */
    overflow: hidden;
    /* Prevent spillover */
    text-overflow: ellipsis;
    /* Graceful degradation */
}

.segmentedControl .segmentedControl--group input+label::before,
.segmentedControl .segmentedControl--group input+label::after {
    border-radius: inherit;
    content: "";
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

.segmentedControl .segmentedControl--group input+label::before {
    background: var(--color-grey-20);
    transition: opacity .15s ease;
}

.segmentedControl .segmentedControl--group input+label::after {
    background: var(--color-fire);
    box-shadow: var(--shadow-fire);
    transition: opacity .15s ease;
}

.segmentedControl .segmentedControl--group input+label:hover::before {
    opacity: 1;
}

.segmentedControl .segmentedControl--group input:focus+label {
    outline: none;
}

.segmentedControl .segmentedControl--group input:focus-visible+label {
    outline: var(--focus-style);
    outline-offset: var(--focus-offset);
}

.segmentedControl .segmentedControl--group input:-moz-focusring+label {
    outline: var(--focus-style);
    outline-offset: var(--focus-offset);
}

.segmentedControl .segmentedControl--group input:checked+label {
    background: var(--color-grey-10);
    color: #fff;
    font-weight: 700;
}

.segmentedControl .segmentedControl--group input:checked+label::after {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
    .segmentedControl .segmentedControl--group input+label {
        transition: color .2s ease;
    }

    .segmentedControl .segmentedControl--group input+label::before {
        transition: opacity .3s ease;
    }

    .segmentedControl .segmentedControl--group input+label::after {
        transform: scale(.85, .5);
        transition: opacity .15s ease, transform .3s cubic-bezier(0, .99, .52, 1.29);
    }

    .segmentedControl.useSlidingAnimation::before {
        background: #228DFF;
        border-radius: .375em;
        box-shadow: 0 0 15px rgba(34, 141, 255, 0.8), 0 0 5px rgba(34, 141, 255, 0.5);
        content: "";
        display: block;
        height: calc(100% - (var(--options-gap)*2));
        position: absolute;
        top: var(--options-gap);
        left: var(--options-gap);
        transform: translateX(calc((100% + (var(--options-gap) * 2)) * (var(--options-active) - 1)));
        transition: transform cubic-bezier(.8, .34, .28, 1.15) .35s;
        width: calc((100% - ((var(--options)*var(--options-gap))*2)) / var(--options));
    }

    .segmentedControl.useSlidingAnimation .segmentedControl--group input+label {
        background: none;
        transition: color .3s ease;
        color: var(--color-black);
        /* Default text color */
    }

    .segmentedControl.useSlidingAnimation .segmentedControl--group input:checked+label {
        color: white;
        /* Active text color */
    }

    .segmentedControl.useSlidingAnimation .segmentedControl--group input+label::after {
        content: none;
    }

    .segmentedControl.useSlidingAnimation .segmentedControl--group input:checked+label:hover::before {
        opacity: 0;
    }
}

/* Utilities */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}