/**
 * CLAPLEY Glove Customizer Styles
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --gc-bg: #EBEBEB;
    --gc-primary: #142809;
    /* Dark Green from Figma */
    --gc-secondary: #0D520F;
    /* Slightly lighter green for accents */
    --gc-text: #101010;
    --gc-text-light: #6F6F6F;
    --gc-white: #FFFFFF;
    --gc-border: #D0D0D0;
    --gc-divider: #E9E9E9;
    --gc-shadow: rgba(0, 0, 0, 0.1);
    --gc-transition: 0.3s ease;
    --gc-font-body: 'Jost', sans-serif;
    --gc-font-heading: 'Jost', sans-serif;
}

/* ========================================
   Container & Layout
   ======================================== */
.gc-container {
    font-family: var(--gc-font-body);
    background-color: var(--gc-bg);
    color: var(--gc-text);
    width: 100%;
    max-width: 100%;
    /* Full width as per design concept */
    margin: 0 auto;
    padding: 60px 40px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    min-height: 800px;
    /* Ensure enough height */
}

.gc-container *,
.gc-container *::before,
.gc-container *::after {
    box-sizing: border-box;
}

/* ========================================
   Header Styles
   ======================================== */
.gc-header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
    padding-left: 10%;
    /* Approximation for layout */
}

.gc-title {
    font-family: var(--gc-font-heading);
    font-size: 24px;
    font-weight: 300;
    margin: 0;
    color: var(--gc-text);
    letter-spacing: 0;
    text-transform: none;
}

/* Collection Tabs */
.gc-collection-tabs {
    display: flex;
    align-items: center;
    gap: 30px;
}

.gc-collection-tab {
    background: none;
    border: none;
    font-family: var(--gc-font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--gc-text-light);
    /* #6F6F6F */
    cursor: pointer;
    padding: 5px 0;
    position: relative;
    transition: color var(--gc-transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gc-collection-tab:hover {
    color: var(--gc-text);
}

.gc-collection-tab.gc-active {
    color: var(--gc-secondary);
    /* #0D520F */
    font-weight: 700;
}

.gc-collection-tab.gc-active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--gc-primary);
    border-radius: 50%;
}

/* ========================================
   Main Content Grid
   ======================================== */
.gc-main {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

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

.gc-col-left {
    align-items: flex-start;
    padding-left: 50px;
}

.gc-col-center {
    align-items: center;
}

.gc-col-right {
    align-items: flex-start;
    /* Label aligns left, but content might differ */
    padding-right: 50px;
}

.gc-section-title {
    font-family: var(--gc-font-body);
    font-size: 24px;
    font-weight: 300;
    color: var(--gc-text);
    margin: 0 0 30px 0;
    white-space: nowrap;
}

/* Hand Selection */
.gc-hand-selection {
    display: flex;
    flex-direction: row;
    /* Horizontal */
    gap: 0;
    background: transparent;
}

.gc-hand-btn {
    width: 80px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--gc-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
}

/* Left button style */
.gc-hand-btn[data-hand="left"] {
    background: var(--gc-primary);
    /* Default active state style for demonstration */
    border-color: var(--gc-primary);
}

.gc-hand-btn[data-hand="right"] {
    background: var(--gc-divider);
}

.gc-hand-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--gc-text);
}

.gc-hand-btn[data-hand="left"] .gc-hand-label {
    color: var(--gc-white);
}

/* Logic for active state override */
.gc-hand-btn.gc-active {
    background: var(--gc-primary);
    border-color: var(--gc-primary);
}

.gc-hand-btn.gc-active .gc-hand-label {
    color: var(--gc-white);
}

.gc-hand-btn:not(.gc-active) {
    background: var(--gc-divider);
    /* #E9E9E9 */
    border-color: var(--gc-secondary);
}

.gc-hand-btn:not(.gc-active) .gc-hand-label {
    color: var(--gc-text);
}


/* Glove Preview */
.gc-preview {
    margin-bottom: 20px;
}

.gc-glove-image-wrapper {
    /* Shadow as per design */
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

.gc-glove-image {
    max-height: 500px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Product Info & Action */
.gc-info-section {
    text-align: center;
    margin-bottom: 30px;
}

.gc-product-name {
    font-size: 16px;
    font-weight: 300;
    color: var(--gc-text);
    margin-bottom: 10px;
}

.gc-pagination-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.gc-pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #999;
    border: none;
    padding: 0;
    cursor: pointer;
}

.gc-pagination-dot.gc-active {
    background-color: var(--gc-primary);
}

/* Action Button */
.gc-btn-primary {
    background-color: var(--gc-primary);
    color: var(--gc-white);
    padding: 15px 40px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 0;
    /* Square/Rectangle per design or slight radius? Figma looks sharp/minimal */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
    /* "Choose your Ballmarker" mixed case */
}

.gc-btn-arrow {
    width: 16px;
    height: 16px;
}

/* Color Swatches */
.gc-colors {
    display: flex;
    flex-direction: row;
}

.gc-color-swatches {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.gc-color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    /* No border by default */
    cursor: pointer;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

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

.gc-color-swatch.gc-active {
    transform: scale(1.1);
    /* Maybe adds ring? */
    box-shadow: 0 0 0 2px var(--gc-bg), 0 0 0 4px var(--gc-primary);
}


/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1024px) {
    .gc-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 30px;
        text-align: center;
    }

    .gc-header {
        flex-direction: column;
        padding-left: 0;
        justify-content: center;
        gap: 20px;
    }

    .gc-col-left,
    .gc-col-right {
        align-items: center;
        padding: 0;
    }

    .gc-hand-selection {
        justify-content: center;
    }

    .gc-color-swatches {
        justify-content: center;
    }
}

/* Utility for flipping images */
.gc-flipped {
    transform: scaleX(-1);
}

/* Hide Screen 2 initially */
.gc-screen {
    display: none;
    animation: fadeIn 0.5s ease;
}

.gc-screen.gc-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========================================
   Screen 2: Ball Marker Selection
   ======================================== */

/* Screen 2 Header */
.gc-screen-2-header {
    padding-left: 100px;
    margin-bottom: 40px;
}

.gc-collection-title {
    font-family: var(--gc-font-heading);
    font-size: 48px;
    font-weight: 700;
    color: var(--gc-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
}

.gc-subtitle {
    font-size: 16px;
    font-weight: 300;
    color: var(--gc-text);
    margin: 0 0 20px 0;
}

/* Category Tabs */
.gc-category-tabs {
    display: flex;
    gap: 30px;
    align-items: center;
}

.gc-category-tab {
    background: none;
    border: none;
    font-family: var(--gc-font-body);
    font-size: 16px;
    font-weight: 300;
    color: var(--gc-text-light);
    cursor: pointer;
    padding: 5px 0;
    position: relative;
    transition: color var(--gc-transition);
}

.gc-category-tab:hover {
    color: var(--gc-text);
}

.gc-category-tab.gc-active {
    color: var(--gc-primary);
    font-weight: 500;
}

.gc-category-tab.gc-active::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--gc-primary);
    border-radius: 50%;
}

/* Screen 2 Main Layout */
.gc-screen-2-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin-bottom: 20px;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 500px;
    /* Constrain height */
}

/* Unified Carousel Container */
.gc-carousel-container {
    position: absolute;
    /* Changed to absolute to overlay glove properly if needed, or relative in flex stack? */
    /* Let's keep it relative within flex but ensure overlap. 
       Actually, if we want carousel ON TOP of glove, we might need absolute or negative margins.
       But glove acts as background now? User said "remove overlay, use center item".
       So the glove is visually behind. 
    */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass to glove if not on items */
    z-index: 20;
    /* Above glove wrapper */
    overflow: hidden;
}

/* Glove with Marker Preview */
.gc-marker-preview {
    /* Glove stays centered */
    position: relative;
    z-index: 1;
    /* margin: 0 50px; removed margin since carousel is absolute now */
}

.gc-glove-with-marker {
    position: relative;
}

.gc-glove-with-marker .gc-glove-image {
    max-height: 450px;
    width: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

/* REMOVED .gc-marker-overlay styles */

/* Carousel Track */
.gc-carousel-track {
    display: flex;
    gap: 0;
    align-items: center;
    /* Items are centered vertically in the track */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    position: absolute;
    /* Vertical positioning: Align center of items with the wrist spot.
       Adjusted to 100px based on visual inspection (moved up 35px from 65px)
    */
    bottom: 100px;
    left: -52px;
    height: 100px;
    /* ample height for items */
    pointer-events: auto;
    /* Re-enable clicks */
    z-index: 25;
}

/* Carousel Items */
.gc-carousel-item {
    width: 77px;
    height: 77px;
    flex-shrink: 0;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 40px;
    transition: all 0.4s ease;
    filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.1));
    opacity: 0.6;
    transform: scale(0.9);
}

.gc-carousel-item:hover {
    opacity: 1;
    transform: scale(1);
}

.gc-carousel-item.gc-active {
    opacity: 1;
    /* Visible! */
    pointer-events: auto;
    transform: scale(1);
    z-index: 30;
}

.gc-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Re-added Arrow Styles */
.gc-carousel-arrow {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--gc-white);
    border: 1px solid var(--gc-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--gc-transition);
    padding: 0;
}

.gc-carousel-arrow:hover {
    border-color: var(--gc-primary);
    background-color: var(--gc-divider);
    transform: scale(1.1);
}

.gc-carousel-arrow svg {
    width: 16px;
    height: 16px;
    color: var(--gc-text);
}

/* Carousel Arrow Wrappers need update to specific Absolute positions */
.gc-carousel-arrow-wrapper {
    position: absolute;
    /* Vertically align with the carousel track which is at bottom: 65px */
    bottom: 65px;
    top: auto;
    transform: translateY(-50%);
    /* Center within the track height? Track is height 100px. 
                                    If track bottom is 65px, center is 65 + 50 = 115px from bottom?
                                    Actually arrow should be vertically centered with the ITEMS. 
                                    Items are 77px. Track bottom 65px. 
                                    Item center is 65 + (77/2) = 103.5px from bottom.
                                    So let's set bottom: 103.5px and translateY(-50%)
                                 */
    bottom: 85px;
    /* Approx center of items */
    transform: translateY(0);
    /* Remove translateY center trick since we use specific bottom */
    z-index: 40;
    /* Higher than items (30) */
    padding: 0;
}

.gc-carousel-arrow-left {
    left: 20px;
}

.gc-carousel-arrow-right {
    right: 20px;
}


/* Product Name for Screen 2 */
.gc-screen-2-product-name {
    text-align: center;
    margin-bottom: 30px;
}

.gc-product-name-text {
    font-size: 16px;
    font-weight: 300;
    color: var(--gc-text);
}

/* Screen 2 Footer */
.gc-screen-2-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.gc-btn-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gc-white);
    border: 1px solid var(--gc-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--gc-transition);
}

.gc-btn-circle:hover {
    background: var(--gc-divider);
}

.gc-btn-circle svg {
    width: 20px;
    height: 20px;
    color: var(--gc-primary);
}

.gc-btn-discover {
    text-decoration: none;
}

/* ========================================
   Screen 2 Responsive
   ======================================== */
@media (max-width: 1024px) {
    .gc-screen-2-header {
        padding-left: 20px;
        text-align: center;
    }

    .gc-collection-title {
        font-size: 32px;
    }

    .gc-category-tabs {
        justify-content: center;
        flex-wrap: wrap;
    }

    .gc-screen-2-main {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
    }

    .gc-screen-2-carousel-items {
        order: 2;
    }

    .gc-marker-preview {
        order: 1;
    }

    .gc-carousel-arrow-wrapper {
        display: none;
    }
}