/* CSS Variables */
:root {
    --dial-base-color: #ffffff;
    --dial-design-color: #000000;
    --dial-index-color: #000000;
}

/* Site-Wide */
body {
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
}

/* Global Navigation (Unified with main site) */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: var(--primary);
    color: white;
    transition: transform 0.3s ease, background 0.3s ease;
}

.navInner {
    max-width: 1400px;
    margin: 0 auto;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.navSide {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.navCenter {
    flex: 0 0 auto;
}

.navRight {
    justify-content: flex-end;
}

.cartToggle {
    position: relative;
    font-size: 1.3rem;
    cursor: pointer;
    color: white;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    top: 2px;
}

.cartToggle:hover {
    color: var(--accent-light);
    transform: translateY(-2px);
}

/* Initial Advertising Banner */
.banner {
    background: url(https://plus.unsplash.com/premium_photo-1672940671025-113a634f83d1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmxhY2slMjBiYWNrZ3JvdW5kfGVufDB8fDB8fHww);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border-bottom: 5px solid black;
    border-top: 5px solid black;
}

.bannerContent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align items to the left */
    max-width: 100%;
    /* Use the full width of the container */
    padding: 0px;
    /* Maintain padding */
    gap: 50px;
    /* Ensure at least 50px gap between text and image */
}

.bannerText {
    position: sticky;
    left: 30px;
    /* Force the text 30px from the left edge */
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* Vertically center-align text */
    color: white;
    text-align: left;
}


.bannerImage {
    flex: 1;
    max-width: 400px;
    /* Image will not exceed 50% of the banner width */
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
    object-fit: cover;
    margin-left: 50px;
    /* Keep 50px gap from the text */
    border-radius: 10px;
    /* Optional for style */
}


.bannerTitle {
    font-size: 52px;
    font-weight: 900;
    margin: 0 0 10px;
}

.bannerPrice {
    font-size: 22px;
    margin: 0 0 20px;
}

.buyButton {
    font-size: 18px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    background-color: #111111;
    padding: 10px 20px;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.buyButton:hover {
    background-color: white;
    color: black;
}



/* Features Section */
.features {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 60px;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.featureImage {
    width: 50px;
    height: 50px;
}

.featureTitle {
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
}

.featureDescription {
    color: gray;
    width: 80%;
    height: 100px;
    font-size: 80%;
}

.dialcustomizationtitle {
    background-color: #111111;
    padding-top: 0;
    color: white;
    border-top: 5px solid black;
    border-bottom: 5px solid black;
}

.dialTitle {
    font-size: 55px;
    font-weight: 300;
    text-align: center;
}

.dialPrice {
    font-size: 32px;
    text-align: center;
    font-weight: 900;
}

.dialDescription {
    font-size: 20px;
    color: gray;
    text-align: center;
    font-weight: 300;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
}

.dialPreviewTop {
    margin: 0px;
    background-color: #222222;
    color: #222222;
    font-size: 40px;
    border-bottom: 3px solid black;
}

/* Dial Preview Section */

.dialPreviewContainer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-right: 0%;
    background: var(--bg-silver);
    position: relative;
    /* Ensures the container stays in position */
}

.dialPreview {
    flex: 1 1 55%;
    max-width: 66%;
    max-height: 75vh;
    margin: 0;
    position: sticky;
    top: 13.5vh;
    /* Adjusted to account for nav bar presence consistently on all resolutions */
    transition: top 0.3s ease;
    padding: 0;
    /* Removed padding to standardize center at 50% */
    box-sizing: border-box;
    display: flex;
    /* Allows proper centering of child elements */
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    container-type: inline-size;
    /* Changed to inline-size for better stability */
    z-index: 1;
}

#dialCaptureArea {
    width: 70%;
    height: 70%;
    aspect-ratio: 1 / 1 !important;
    max-width: 70%;
    max-height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#dialBaseImage {
    z-index: 1;
    pointer-events: none;
}

#dialBaseColor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    background-color: var(--dial-base-color);

    /* Alpha mask using the SAME dial PNG */
    -webkit-mask-image: url('/assets/img/dialcolors/white.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url('/assets/img/dialcolors/white.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    z-index: 2;
    pointer-events: none;
}

#dialBaseImage {
    z-index: 1;
}

#dialBaseColor {
    z-index: 2;
}

#dialDesignOverlay {
    z-index: 3;
}

#dialIndexOverlay {
    z-index: 4;
}

#dialCaseOverlay {
    z-index: 10;
}


.dialImage,
.dialOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Maintain aspect ratio */
}

#dialDesignOverlay {
    /* Show design overlay normally (currently neutral PNG, color logic still wired via CSS var) */
    filter: none;
    opacity: 1;
}

#dialIndexOverlay {
    /* Use plain images; colorization is applied in JS-generated PNGs */
    filter: none;
    opacity: 1;
}

#dialCaseOverlay,
#dialMovementOverlay {
    z-index: 10;
    /* Higher than other overlays */
    pointer-events: none;
    /* Ensures this overlay doesn't block interactions with other elements */
}



.dialcustomization {
    flex: 1;
    /* Allow customization to take up the remaining space */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}


/* Dial Customization Section */

.dialmaterials,
.dialcolors,
.dialindices,
.dialmovements,
.dialsizes,
.dialdesigns,
.diallogos {
    background-color: transparent;
    flex-wrap: wrap;
    /* Allows the items to wrap onto the next line when needed */
    border: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    align-self: self-start;
    justify-content: center;
    width: 80%;
    max-width: 600px;
    padding-top: 10px;
    box-shadow: none;
}



.dialmaterialstitle,
.dialsizestitle,
.dialmovementstitle,
.dialcolorstitle,
.dialindicestitle,
.dialdesignstitle,
.diallogostitle {
    text-align: start;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    background-color: transparent;
    color: var(--text-dark);
    font-size: 1.8rem;
    border: none;
    width: 100%;
    letter-spacing: -0.02em;
}

.dialmaterialstitles,
.dialsizestitles,
.dialmovementstitles,
.dialcolorstitles,
.dialindicestitles,
.dialdesignstitles,
.diallogostitles {
    margin-top: 15vh;
    margin-bottom: 10px;
    background-color: transparent;
    flex-wrap: wrap;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    align-self: self-start;
    width: 85%;
    max-width: 900px;
    padding-bottom: 5px;
    padding-top: 10px;
    border-bottom: 3px solid var(--accent);
    box-shadow: none;
}

.dialmaterialstitles {
    margin-top: 260px;
}


.dialsize,
.dialmovement {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 21px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background-color: #0d0d0d;
    border-radius: 12px;
    margin: 7px;
    cursor: pointer;
    color: var(--text-dark);
    width: 100%;
    min-width: 120px;
    max-width: 35%;
    align-self: baseline;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    transition: var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}


.dialsize.selected,
.dialmovement.selected,
.diallogo.selected {
    background-color: #1a150a;
    color: var(--accent-light);
    font-weight: 700;
    border: 2px solid var(--accent);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.dialsize:hover,
.dialmovement:hover,
.diallogo:hover {
    background-color: #111;
    color: var(--accent-light);
    border: 2px solid var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}


.dialcolor,
.dialindex,
.dialdesign {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background-color: #0d0d0d;
    border-radius: 12px;
    margin: 10px;
    cursor: pointer;
    width: 100%;
    max-width: 22%;
    height: 120px;
    text-align: start;
    transition: var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.customColorPicker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 2px solid rgba(212, 175, 55, 0.4);
    background-color: #0d0d0d;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.customColorPicker:hover {
    border-color: var(--accent-dark);
}

/* --- LIGHT LUXURY EDIT CONTROLS --- */
.edit-position-controls-lux {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 40px 0;
    padding: 30px;
    background: #0d0d0d;
    border-radius: 12px;
    position: relative;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.lux-edit-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    border-bottom: 3px solid var(--accent);
    padding-bottom: 2px;
    color: var(--text-dark);
    margin-bottom: 15px;
    text-align: start;
    letter-spacing: 0.5px;
    width: 100%;
}

.lux-controls-container {
    display: none;
    /* Hidden by default - shown via JS on Edit */
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 30px;
    animation: slideDownIn 0.3s ease-out;
}

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

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

.lux-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52%;
    padding: 15px;
    background: #111;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.lux-control-group:hover {
    border-color: var(--accent);
    background: #161616;
}

.lux-control-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 12px;
    letter-spacing: 1.5px;
    font-weight: 700;
    background-color: transparent;
    box-shadow: none;
    border-color: transparent;
}

.lux-control-label:hover {
    background-color: transparent;
    transform: none;
    box-shadow: none;
    cursor: pointer;
    border-color: transparent;
}

.lux-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lux-numeric-btn {
    width: 30px;
    height: 30px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
    border-radius: 50%;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.lux-numeric-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2);
}

.lux-num-input {
    width: 50px;
    height: 30px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 600;
    padding: 0;
    transition: border-color 0.3s ease;
}

.lux-num-input:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

.lux-buttons-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.lux-edit-btn,
.lux-confirm-btn {
    flex: 1;
    padding: 15px 20px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lux-edit-btn {
    background: #111;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--text-dark);
}

.lux-edit-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    color: var(--accent);
}

.lux-confirm-btn {
    background: var(--accent);
    border: 2px solid var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.lux-confirm-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
    .edit-position-controls-lux {
        padding: 25px 15px;
    }

    .lux-control-group {
        min-width: 120px;
    }

    .lux-buttons-row {
        flex-direction: column;
    }
}

.customColorPicker.selected {
    border: 2px solid var(--accent) !important;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.customColorPicker.selected label {
    color: var(--accent);
}

.customColorPicker.selected .customColorInput {
    border-color: var(--accent) !important;
}

.dialcolorImage,
.dialindexImage,
.dialdesignImage {
    width: 70%;
    /* Adjust size */
}

/* Mask-based colorization for design and index option preview images */
.dialindexImage,
.dialdesignImage {
    aspect-ratio: 1 / 1;
    background-color: var(--current-material-color, #ffffff);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    margin: 0 auto;
}

.dialcolorText,
.dialindexText,
.dialdesignText {
    font-size: 1rem;
    margin-bottom: 0px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    align-self: center;
    margin-top: 10px;
}



.dialcolor.selected,
.dialindex.selected,
.dialdesign.selected {
    background-color: #1a150a;
    border-color: var(--accent);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.dialcolor.selected .dialcolorText,
.dialindex.selected .dialindexText,
.dialdesign.selected .dialdesignText {
    color: var(--text-dark);
}

.dialcolor:hover,
.dialindex:hover,
.dialdesign:hover {
    background-color: #111;
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.dialcolor:hover .dialcolorText,
.dialindex:hover .dialindexText,
.dialdesign:hover .dialdesignText {
    color: var(--text-dark);
}


.dialmaterials,
.dialcolors,
.dialmovements,
.dialdesigns,
.dialindices,
.dialsizes,
.diallogos,
.dialtexts {
    display: flex;
}

.dialmaterials.active,
.dialcolors.active,
.dialmovements.active,
.dialdesigns.active,
.dialindices.active,
.dialsizes.active,
.diallogos.active {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 85%;
}

.dialmaterials.active,
.dialcolors.active,
.dialdesigns.active,
.dialindices.active {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
}

/* Material Section Styling */
.dialmaterial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    padding-bottom: 30px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background-color: #0d0d0d;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
    width: 100%;
    max-width: 22%;
    min-width: 120px;
    height: 180px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.dialmaterialText {
    font-size: 0.95rem;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
}


.materialIncludedBadge {
    position: absolute;
    top: 140px;
    align-self: center;
    background-color: var(--bg-silver);
    color: var(--text-dark);
    padding: 2px 15px;
    border: 1px solid var(--accent-light);
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}

.materialPriceBadge {
    position: absolute;
    top: 135px;
    align-self: center;
    background-color: var(--accent-light);
    color: var(--bg-silver);
    padding: 5px 15px;
    border: 1px solid var(--bg-silver);
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.materialSwatch {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.materialSwatch.stainless-steel {
    background: linear-gradient(135deg, #e0e0e0 0%, #a0a0a0 100%);
}

.materialSwatch.titanium {
    background: linear-gradient(135deg, #a0a0a0 0%, #606060 100%);
}

.materialSwatch.copper {
    background: linear-gradient(135deg, #cb6d51 0%, #804020 100%);
}

.materialSwatch.brass {
    background: linear-gradient(135deg, #f6e3b4 0%, #b8860b 100%);
}

.materialSwatch.aluminum {
    background: linear-gradient(135deg, #f0f0f0 0%, #c0c0c0 100%);
}

.materialSwatch.gold {
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
}

.materialSwatch.silver {
    background: linear-gradient(135deg, #e0e0e0 0%, #808080 100%);
}

.materialSwatch.platinum {
    background: linear-gradient(135deg, #ffffff 0%, #d1d1d1 100%);
}

.dialmaterial.selected {
    border-color: var(--accent);
    background-color: rgba(212, 175, 55, 0.05);
    box-shadow: var(--glow-accent);
}

.dialmaterial:hover {
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Remove Coloring Button Styling */
.removeColorWrapper {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px 0;
}

/* Specific centering for dial base coloring */
.removeColorWrapper[data-target="dial-base"] {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 5px;
}

.removeColorBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--bg-silver);
    border-radius: 12px;
    margin: 10px;
    cursor: pointer;
    width: 40%;
    height: 60px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    color: var(--text-dark);
    font-weight: normal;
    transition: var(--transition-fast);
}

.removeColorBtn:hover {
    border-color: var(--accent-dark);
    transform: scale(1.05);
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.removeColorBtn.selected {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* No Color Button Styling */
.noColorWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* Allows wrapping if space is tight */
    margin: 10px 0 20px 0;
    flex: 0 0 100%;
}

.noColorBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--bg-silver);
    border-radius: 12px;
    margin: 0px;
    cursor: pointer;
    width: 40%;
    height: 60px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    color: var(--text-dark);
    font-weight: normal;
    transition: var(--transition-fast);
}

.noColorBtn:hover {
    border-color: var(--accent-dark);
    transform: scale(1.05);
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.noColorBtn.selected {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}



/* Dial Design & Index Colour Customization */

.colorOption {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--bg-silver);
    border-radius: 50%;
    margin: 10px;
    cursor: pointer;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    font-weight: normal;
    /* Ensures padding is included in the width/height */
    transition: var(--transition-fast);
    color: var(--text-dark);
}

.colorOption img {
    max-width: 60%;
    /* Ensure the image fits within the circle */
    max-height: 60%;
    /* Keep aspect ratio */
    border-radius: 50%;
    /* Optional: make the image a circle too */
}

.colorOption:hover {
    border-color: var(--accent-dark);
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.colorOption.selected {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.dialdesigncolors,
.dialindicescolors,
.dialupperlogocolors,
.diallowerlogocolors {
    width: 100%;
    /* Or a max-width to match your layout */
    max-width: 380px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.design_color_title {
    color: var(--text-dark);
    border-bottom: 3px solid var(--accent);
    margin-bottom: 10px;
    padding-bottom: 2px;
    width: 100%;
    padding-top: 15px;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}



/* Dial Logo & Text Customization Styling */


.logotextarea {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    background-color: #333333;
    color: whitesmoke;
    resize: none;
    overflow: auto;
}

.textbutton {
    align-self: center;
    padding: 10px 20px;
    background-color: black;
    color: whitesmoke;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 10px;
}

.textbutton:hover {
    background-color: whitesmoke;
    color: black;
}


.logo-upload {
    display: none;
    /* Hide the input element, styled with the label */
}

label {
    display: inline-block;
    /* Ensure it behaves like a button */
    background-color: var(--accent);
    color: white;
    padding: 12px 24px;
    cursor: default;
    border-radius: 6px;
    text-align: center;
    /* Center text inside the label */
    overflow: auto;
    /* Prevent text from overflowing */
    max-width: 100%;
    /* Adjust the maximum width to fit the container */
    transition: var(--transition-fast);
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

label:hover {
    background-color: var(--accent);
    opacity: 0.8;
    transition: var(--transition-fast);
    transform: scale(1.05);
}

label:active {
    transform: translateY(0);
}


#upper-logo-preview,
#lower-logo-preview {
    margin-top: 10px;
    justify-content: center;
    display: flex;
}

#upper-logo-preview img,
#lower-logo-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 5px;
}


/* Customizated Options */

.customSizeSection,
.customMovementSection {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--text-dark);
    max-width: 50%;
    box-sizing: border-box;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.dialDiameterInput,
.commentsInput,
.dialShapeUpload,
.movementInput {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-dark);
    box-sizing: border-box;
    transition: var(--transition-fast);
    font-family: 'Montserrat', sans-serif;
}

.dialDiameterInput:focus,
.commentsInput:focus,
.dialShapeUpload:focus,
.movementInput:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.dialDiameterInput {
    text-align: right;
    display: inline-block;
    width: calc(100% - 40px);
    /* Adjust to leave space for 'mm' */
    appearance: textfield;
    /* To hide arrows in some browsers */
}

.dialDiameterWrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.commentsInput,
.movementInput {
    height: 100px;
    resize: none;
}

.saveButton {
    padding: 12px 24px;
    background-color: var(--accent-dark);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-end;
    transition: var(--transition-fast);
    font-family: 'Montserrat', sans-serif;
}

.saveButton:hover {
    background-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.saveButton:active {
    transform: translateY(0);
}







/* Uploading Custom Logo Images */

.resizable-image-container {
    position: absolute;
    display: inline-block;
    width: 30%;
    /* Default size - overridden by JS */
    aspect-ratio: 1;
    /* Maintain square proportions */
    z-index: 11;
    outline: 3px dashed transparent;
    transition: outline-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}


.resizable-image-container.show-controls {
    z-index: 25 !important;
    outline-color: var(--accent);
    /* Ensure handles for custom uploads stay above EVERYTHING */
}

.default-edit-container.show-controls {
    z-index: 15 !important;
    /* Ensure default handles stay above dial case (z-index 10) */
    background: transparent !important;
    /* Prevent flash */
}

/* Force default cursor when frozen/stopped editing */
.resizable-image-container[data-frozen="true"],
.resizable-image-container[data-frozen="true"] img {
    cursor: default !important;
}

.resizable-image-container.show-controls .remove-button,
.resizable-image-container.show-controls .control-actions-container {
    display: flex;
    /* Show controls */
}

.resizable-image-container.clicked {
    z-index: 12;
    /* Bring clicked image to the front */
}

.resizable-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: border 0.3s;
}

.remove-button {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 12px;
    display: none;
    /* Hide by default */
}

/* Luxury Uploaded Image Actions */
.control-actions-container {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    display: flex;
    gap: 15px;
    z-index: 26;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.resizable-image-container.show-controls .control-actions-container {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    background: transparent;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

.rotate-action-btn {
    border: 2px solid white;
    color: white;
}

.rotate-action-btn:hover {
    background: white;
    color: black;
    transform: scale(1.1) rotate(90deg);
}

.rotate-action-btn:active {
    cursor: grabbing;
    background: white;
    color: black;
}

.remove-action-btn {
    border: 2px solid #ff4d4d;
    color: #ff4d4d;
}

.remove-action-btn:hover {
    background: #ff4d4d;
    color: white;
    transform: scale(1.1);
}

.resize-handle {
    position: absolute;
    width: 15px !important;
    height: 15px !important;
    background-color: var(--accent-dark) !important;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    border-radius: 50% !important;
    z-index: 25;
    /* Always above dial case (z-index 10) */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.resizable-image-container.show-controls .resize-handle {
    opacity: 0.9 !important;
    pointer-events: auto;
    transform: scale(1);
}

.resize-handle:hover {
    opacity: 1 !important;
    background-color: var(--accent-light, #f6e3b4) !important;
}

.rotation-tooltip {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 30;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.rotation-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Larger hit area for resize handles */
.resize-handle::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: transparent;
    border-radius: 50%;
    /* Optional: matches rounded handles if they are */
}

.resize-handle.top-left {
    top: -7px;
    left: -7px;
    cursor: nwse-resize;
}

.resize-handle.top-right {
    top: -7px;
    right: -7px;
    cursor: nesw-resize;
}

/* Scoped inward handles for default items */
.default-edit-container .resize-handle.top-left {
    top: 15%;
    left: 15%;
}

.default-edit-container .resize-handle.top-right {
    top: 15%;
    right: 15%;
}

.resize-handle.bottom-left {
    bottom: -7px;
    left: -7px;
    cursor: nesw-resize;
}

.resize-handle.bottom-right {
    bottom: -7px;
    right: -7px;
    cursor: nwse-resize;
}

.default-edit-container .resize-handle.bottom-left {
    bottom: 15%;
    left: 15%;
}

.default-edit-container .resize-handle.bottom-right {
    bottom: 15%;
    right: 15%;
}

.resize-handle.top {
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.resize-handle.bottom {
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.resize-handle.left {
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.resize-handle.right {
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.default-edit-container .resize-handle.top {
    top: 15%;
}

.default-edit-container .resize-handle.bottom {
    bottom: 15%;
}

.default-edit-container .resize-handle.left {
    left: 15%;
}

.default-edit-container .resize-handle.right {
    right: 15%;
}








.custom-text {
    position: absolute;
    text-align: center;
    color: black;
    font-weight: bold;
    pointer-events: none;
    /* Prevent mouse interactions with the text directly */
    z-index: 20;
    white-space: nowrap;
    overflow: hidden;
}

.custom-text.dragging {
    pointer-events: auto;
    /* Allow dragging interactions */
    cursor: grabbing;
}

.font-color-select option {
    display: flex;
    align-items: center;
}

.font-color-select option::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border: 1px solid #ddd;
    background-color: currentColor;
    /* Default color is the option value */
}

/* For custom dropdown styling */
.font-color-select option[value="#034638"]::before {
    background-color: #034638;
}

.font-color-select option[value="#440088"]::before {
    background-color: #440088;
}

/* --- New Structured Text Customization Layout --- */
.text-line-item {
    background-color: var(--bg-white);
    border: 3px solid var(--bg-silver);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    align-self: center;
}


.text-line-item h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-dark);
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 2px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.diallogoheader {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--bg-silver);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dark);
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.diallogoheader-upper {
    text-align: center;
    width: 100%;
    margin-top: -0.25rem;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--bg-silver);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dark);
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.diallogoheader-lower {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--bg-silver);
    padding-top: 80px;
    border-top: 3px solid var(--accent);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dark);
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.input-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    text-align: left;
    line-height: 1.2;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

.input-group label:hover {
    transform: none;
}

#upper-text-customization,
#lower-text-customization {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px;
}

.control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
}

.styling-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px 0;
    border-radius: 0;
}

.styling-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 7px 21px;
    border-radius: 6px;
    background-color: rgba(244, 244, 244, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.styling-option:hover {
    background: #1a150a;
    border-color: var(--accent);
    transform: translate(0, -2px);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.text-effects-title {
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 20px 0 -10px 0;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    display: inline-block;
    padding-bottom: 2px;
}

.bold-text {
    font-weight: bold;
}

.italic-text {
    font-style: italic;
}

.underline-text {
    text-decoration: underline;
}

/* Checkbox styling for luxurious appearance */
.input-group label {
    padding-bottom: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 500;
}

.styling-option input[type="checkbox"],
.vertical-align-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
}

.styling-option input[type="checkbox"]:hover,
.vertical-align-toggle:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.styling-option input[type="checkbox"]:checked,
.vertical-align-toggle:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.styling-option input[type="checkbox"]:checked::after,
.vertical-align-toggle:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 6px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-text-input {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-dark);
}

.custom-text-input:hover,
.custom-text-input:focus {
    transform: translate(0, -2px);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.font-displacement-input,
.font-size-input {
    width: 100% !important;
    min-width: 120px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-dark);
}

.font-family-select,
.font-color-select {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 15px;
    background-color: #0d0d0d;
    color: var(--text-dark);
    cursor: pointer;
}

/* UI Control Group (Displacement, Font Size, etc.) */
.control-group,
.displacement-controls,
.font-size-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(244, 244, 244, 0.1);
    padding: 6px;
    border-radius: 8px;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.control-group:hover,
.displacement-controls:hover,
.font-size-controls:hover {
    transform: translate(0, -2px);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.control-btn,
.displacement-btn,
.font-size-btn {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 6px;
    background-color: var(--accent-dark);
    color: white;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover,
.displacement-btn:hover,
.font-size-btn:hover {
    background-color: var(--accent);
    transform: scale(1.05);
}

.control-value,
.displacement-value,
.font-size-value,
.font-size-number-input {
    font-weight: bold;
    font-size: 14px;
    min-width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    width: 45px;
}

.font-size-number-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}

/* Hide spin buttons for Chrome, Safari, Edge, Opera */
.font-size-number-input::-webkit-outer-spin-button,
.font-size-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spin buttons for Firefox */
.font-size-number-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Add Line Button Styling */
.add-line-btn {
    margin-bottom: 80px;
    display: block;
    width: fit-content;
    min-width: 200px;
    padding: 12px 30px;
    background-color: var(--accent);
    opacity: 0.7;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2);
    clear: both;
    font-family: 'Montserrat', sans-serif;
}

.add-line-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.add-line-btn:active {
    transform: translateY(0);
}

/* Font Family Previews */
.font-family-select option {
    font-size: 16px;
    padding: 10px;
}

.font-family-select option[value="Times New Roman"] {
    font-family: 'Times New Roman', serif;
}

.font-family-select option[value="Gothic A1"] {
    font-family: 'Gothic A1', sans-serif;
}

.font-family-select option[value="Arial"] {
    font-family: 'Arial', sans-serif;
}

.font-family-select option[value="Roboto"] {
    font-family: 'Roboto', sans-serif;
}

.font-family-select option[value="Montserrat"] {
    font-family: 'Montserrat', sans-serif;
}

.font-family-select option[value="Playfair Display"] {
    font-family: 'Playfair Display', serif;
}

.font-family-select option[value="Dancing Script"] {
    font-family: 'Dancing Script', cursive;
}

.font-family-select option[value="Oswald"] {
    font-family: 'Oswald', sans-serif;
}

.font-family-select option[value="Lato"] {
    font-family: 'Lato', sans-serif;
}

.font-family-select option[value="Poppins"] {
    font-family: 'Poppins', sans-serif;
}

.font-family-select option[value="Merriweather"] {
    font-family: 'Merriweather', serif;
}

.font-family-select option[value="Lobster"] {
    font-family: 'Lobster', cursive;
}

.font-family-select option[value="Pacifico"] {
    font-family: 'Pacifico', cursive;
}

.font-family-select option[value="Bebas Neue"] {
    font-family: 'Bebas Neue', sans-serif;
}

.font-family-select option[value="Open Sans"] {
    font-family: 'Open Sans', sans-serif;
}

/* Font Color Previews (Approximate since native selects have limits) */
.font-color-select option[value="#000000"] {
    color: #000000;
    font-weight: bold;
}

.font-color-select option[value="#FFFFFF"] {
    color: #000000;
    background-color: #f0f0f0;
}

.font-color-select option[value="#FF0000"] {
    color: #FF0000;
    font-weight: bold;
}

.font-color-select option[value="#ff8800"] {
    color: #ff8800;
    font-weight: bold;
}

.font-color-select option[value="#ffff00"] {
    color: #cccc00;
    font-weight: bold;
}

.font-color-select option[value="#00ff00"] {
    color: #008800;
    font-weight: bold;
}

.font-color-select option[value="#006600"] {
    color: #006600;
    font-weight: bold;
}

.font-color-select option[value="#00ffff"] {
    color: #00cccc;
    font-weight: bold;
}

.font-color-select option[value="#88ccff"] {
    color: #0088ff;
    font-weight: bold;
}

.font-color-select option[value="#000088"] {
    color: #000088;
    font-weight: bold;
}

.font-color-select option[value="#440088"] {
    color: #440088;
    font-weight: bold;
}

.font-color-select option[value="#8800ff"] {
    color: #8800ff;
    font-weight: bold;
}


/* Luxury Text Color Control */
.font-color-control-lux {
    position: relative;
    width: 100%;
}

.font-color-btn-lux {
    width: 100%;
    height: 49px;
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    background-color: rgba(244, 244, 244, 0.1) !important;
    color: white;
    /* Hue updated by JS */
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    text-transform: uppercase;
}

.color-text-lux {
    pointer-events: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
    /* Alternative for better contrast on very light colors */
    padding: 10px;
}

.font-color-btn-lux:hover {
    transform: translate(0, -2px);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Indicator box removed */
.color-indicator-lux {
    display: none;
}

.font-color-popout,
.font-family-popout {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 250px;
    /* Increased slightly for better fit */
    max-width: 90vw;
    /* Prevent overflow on mobile */
    background: rgba(18, 18, 18, 0.98);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    padding: 15px;
    z-index: 10005;
    /* Controlled by JS */
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.1s ease-out, left 0.1s ease-out;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
    overflow: visible;
    /* Prevent arrow clipping */
    backdrop-filter: blur(15px);
}


.font-color-popout.active {
    display: block !important;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.popout-section-title {
    font-size: 11px;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 8px;
}

.popout-color-swatch-full {
    width: 100%;
    height: 42px;
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    color: #eee;
    padding: 0 10px;
    margin-top: 2px;
}

.popout-color-swatch-full:hover {
    background-color: #252525;
    transform: translateY(-1px);
}

.popout-color-swatch-full.active {
    box-shadow: 0 0 0 2px var(--accent);
}


.font-color-popout::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent rgba(18, 18, 18, 0.98) transparent;
    z-index: 10006;
}

.font-color-popout.popout-above::before {
    top: auto;
    bottom: -16px;
    border-color: rgba(18, 18, 18, 0.98) transparent transparent transparent;
}

.popout-colors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    justify-content: center;
}

/* Luxury Font Family Control */
.font-family-control-lux {
    position: relative;
    width: 100%;
}

.font-family-btn-lux {
    width: 100%;
    min-height: 44px;
    /* Ensure touch targets */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background-color: rgba(244, 244, 244, 0.1);
    /* Match No Coloring Button */
    color: var(--text-dark);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
}


.font-family-btn-lux:hover {
    transform: translate(0, -2px);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.font-family-popout {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 250px;
    /* Increased for logic consistency */
    max-width: 90vw;
    /* Prevent overflow on mobile */
    height: auto;
    background: rgba(18, 18, 18, 0.98);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    padding: 8px;
    z-index: 10005;
    transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), top 0.1s ease-out, left 0.1s ease-out;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Prevents arrow clipping */
    border: 1px solid rgba(255, 255, 255, 0.12);
}


.font-family-popout::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent rgba(18, 18, 18, 0.98) transparent;
    z-index: 10006;
}

.font-family-popout.popout-above::before {
    top: auto;
    bottom: -16px;
    border-color: rgba(18, 18, 18, 0.98) transparent transparent transparent;
}

.font-search-container {
    padding: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.5);
    order: 2;
    /* Bottom by default (when popout is BELOW button) */
}


.font-family-popout.popout-above .font-search-container {
    order: 0;
    /* Top when popout is ABOVE button */
}

.font-family-options-wrapper {
    overflow-y: auto;
    max-height: 250px;
    order: 1;
}

.font-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    background: #111;
    color: var(--text-dark);
}

.font-search-input:focus {
    border-color: #d4af37;
}

.font-family-popout.active {
    display: block !important;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.font-family-popout::-webkit-scrollbar {
    width: 6px;
}

.font-family-popout::-webkit-scrollbar-track {
    background: transparent;
}

.font-family-popout::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.font-family-option-lux {
    padding: 14px 20px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.font-family-option-lux:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
    padding-left: 25px;
}

.font-family-option-lux.active {
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
    font-weight: 600;
}

.font-family-option-lux.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.8rem;
}

.popout-color-swatch {
    width: 42px;
    height: 42px;
    aspect-ratio: 1;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-fast);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popout-color-swatch.active {
    box-shadow: 0 0 0 2px var(--accent), 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.popout-color-swatch.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.popout-color-swatch[style*="background-color: #ffffff"].active::after,
.popout-color-swatch[style*="background-color: #ffee58"].active::after {
    color: #333;
    text-shadow: none;
}

.popout-color-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.popout-color-swatch.custom-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d0d0d;
    color: var(--text-muted);
    font-size: 14px;
}

.popout-color-swatch.custom-trigger.active {
    box-shadow: 0 0 0 2px var(--accent);
    color: var(--accent);
    background-color: #111;
}


.popout-custom-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: block !important;
    /* Always visible */
}

.popout-custom-title {
    font-size: 10px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: 0.5px;
}

.popout-custom-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.popout-custom-input {
    width: 100%;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    background: #111;
    padding: 2px;
}

.popout-custom-hex-container {
    width: 100%;
}

.popout-custom-hex-container label {
    display: none;
}

.popout-custom-hex {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    font-family: monospace;
    background: #111;
    color: var(--text-dark);
}





.dialbutton {
    float: right;
    padding: 12px 24px;
    background-color: var(--accent-dark);
    color: white;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 6px;
    transition: var(--transition-fast);
    border: none;
    font-family: 'Montserrat', sans-serif;
}

.dialbutton:hover {
    background-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* Custom Color Picker Styles */
.customColorPicker {
    display: none;
    /* Hidden by default, shown via JS */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--bg-silver);
    border-radius: 12px;
    width: 100%;
    max-width: 260px;
    /* Center the picker below color options */
    margin-left: auto;
    margin-right: auto;
    /* Force full width of flex container and center */
    flex-basis: 100%;
    align-self: center;
    box-shadow: var(--shadow-premium);
}

/* Dial base custom color picker specific centering */
.customColorPicker[data-target="dial-base"] {
    flex: 0 0 100%;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.customColorPicker label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: block;
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: default;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.customColorPicker .customColorInput {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    background: none;
    padding: 0;
    transition: var(--transition-fast);
}

.customColorPicker .customColorInput:hover {
    border-color: var(--accent);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.customColorPicker .customColorHex {
    width: 100px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    background-color: #111;
    color: var(--text-dark);
}

.customColorPicker .customColorHex:focus {
    outline: none;
    border-color: #ff5757;
}








.dialPreviewBottom {
    margin: 0px;
    background-color: #222222;
    color: #222222;
    font-size: 40px;
    border-top: 3px solid black;
}

@media screen and (max-width: 900px) {
    .dialPreviewContainer {
        flex-direction: column;
        background-color: var(--bg-silver);
    }

    .dialPreview {
        width: 100% !important;
        height: 42vh !important;
        max-width: 100% !important;
        max-height: 75vh !important;
        margin: 0 auto 10px !important;
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
        padding-bottom: 20px !important;
        padding-top: 10px !important;
        z-index: 100;
        border-radius: 0;
        transition: top 0.3s ease;
        border-bottom: 3px solid black;
        background-color: var(--bg-silver);
        flex: none !important;
        box-sizing: border-box !important;
    }

    #dialCaptureArea {
        width: min(42vh, 95vw) !important;
        height: min(42vh, 95vw) !important;
        aspect-ratio: 1 / 1 !important;
        max-width: 95vw !important;
        max-height: 42vh !important;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0 auto !important;
    }

    /* Pseudo-element to block content behind nav area - more robust than border-top */
    .dialPreview::before {
        content: "";
        position: absolute;
        top: -150px;
        /* Extends UP to cover nav */
        left: -1px;
        /* Overlap to prevent sub-pixel gaps at edges */
        right: -1px;
        height: 155px;
        /* Slight extra to ensure overlap */
        background-color: var(--bg-white);
        z-index: -1;
    }

    /* Adjust overlays to fit the smaller, shorter container while respecting padding */
    .dialImage,
    .dialOverlay,
    #dialBaseColor,
    #dialBaseImage,
    #dialCaseOverlay,
    #dialMovementOverlay {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }

    /* Fix for #dialBaseColor specific positioning since it uses a mask */
    #dialBaseColor {
        width: 100%;
        left: 0;
        transform: none;
        /* We need to ensure the mask aligns with the image. 
           Since dialBaseImage is centered with transform, it's tricky to match the div perfectly without complex calcs.
           However, if we center the mask background as well, it might work.
        */
        -webkit-mask-position: center;
        mask-position: center;
    }

    .dialcustomization {
        width: 100%;
        overflow-y: visible;
    }

    .dialsize,
    .dialmovement {
        padding: 10px;
        font-size: 14px;
        min-width: 100px;
        margin: 5px;
    }

    .dialcolor,
    .dialindex,
    .dialdesign {
        min-height: 130px;
        padding: 5px;
        margin: 5px;
        max-width: 28%;
    }

    .dialcolorText,
    .dialindexText,
    .dialdesignText {
        font-size: 14px;
    }

    .dialcolorImage,
    .dialindexImage,
    .dialdesignImage {
        width: 60%;
    }

    .colorOption {
        width: 80px;
        height: 80px;
        font-size: 14px;
        margin: 5px;
    }

    .dialdesigncolors,
    .dialindicescolors,
    .dialupperlogocolors,
    .diallowerlogocolors {
        max-width: 350px;
    }

    .design_color_title {
        font-size: 18px;
    }

    .customColorPicker {
        padding: 8px;
        max-width: 200px;
        margin-top: 10px;
        flex-basis: auto;
    }

    .customColorPicker .customColorInput {
        width: 50px;
        height: 50px;
    }

    .customColorPicker label {
        font-size: 14px;
    }

    .customColorPicker .customColorHex {
        width: 80px;
        font-size: 12px;
        padding: 5px;
    }

    .dialmaterialstitles {
        margin-top: 20vh;
    }

    .dialsizestitles,
    .dialmovementstitles,
    .dialcolorstitles,
    .dialindicestitles,
    .dialdesignstitles,
    .diallogostitles {
        margin-top: 45vh !important;
    }

    .dialmaterials,
    .dialcolors,
    .dialindices,
    .dialmovements,
    .dialsizes,
    .dialdesigns,
    .diallogos {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .dialmaterialstitles,
    .dialsizestitles,
    .dialmovementstitles,
    .dialcolorstitles,
    .dialindicestitles,
    .dialdesignstitles,
    .diallogostitles {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
}

/* General gap and Centering for custom uploads - applies to all resolutions */
.diallogoupload {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.diallogoupload .logo-upload {
    margin-top: 10px;
}

/* Add spacing above custom design and index upload sections */



.sidebar-remove-button {
    background-color: var(--accent);
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s;
}

.sidebar-remove-button:hover {
    background-color: var(--accent-dark) !important;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Cart Icon */
.cartIcon {
    position: absolute;
    /* Keep absolute to allow logo centering */
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
    display: flex;
    align-items: center;
}

.cartIcon:hover {
    transform: translateY(-50%) scale(1.1);
}

.cartCount {
    position: absolute;
    top: -2px;
    right: -6px;
    background: var(--accent-light);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Dial Actions (Share / Add to Cart) - Updated */
.dialActions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    /* Left align margin */
    align-self: self-start;
    /* Desktop: Align with left-aligned titles */
    width: 85%;
    /* Match title width */
    max-width: 900px;
    /* Match title max-width */
}

.actionBtn {
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-family: 'Gothic A1', sans-serif;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.shareBtn {
    background-color: var(--accent-light);
    color: var(--bg-silver);
}

.shareBtn:hover {
    background-color: var(--accent);
    transform: translateY(-2px);
}

.cartBtn {
    background-color: var(--accent);
    color: white;
}

.cartBtn:hover {
    background-color: var(--accent-dark);
    transform: translateY(-2px);
}




/* Nav Visibility & Preview Shift */
/* Sticky behavior handled by global nav class now */
.nav-hidden {
    transform: translateY(-100%);
}

.nav-is-hidden .dialPreview {
    top: 10vh;
}

@media screen and (max-width: 900px) {
    .nav-is-hidden .dialPreview {
        top: 2vh;
        /* Minimal offset when nav is hidden */
    }

    .nav-is-hidden .dialPreview::before {
        top: -60px;
        height: 65px;
    }

    .dialActions {
        width: 95%;
        margin: 30px auto;
        /* Mobile: Center to match titles */
        align-self: center;
    }
}

/* Hide resize handles and remove button during image capture */
.capturing .resize-handle,
.capturing .remove-button {
    display: none !important;
    visibility: hidden !important;
}

/* Sidebar Preview Alignment Fixes */
.logo-upload,
#upper-logo-preview,
#lower-logo-preview,
#design-upload-preview,
#index-upload-preview {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    width: 100%;
}


.sidebar-remove-button {
    margin: 10px auto !important;
    display: block !important;
}

.divider-above-remove {
    width: 65%;
    height: 3px;
    background-color: var(--bg-silver);
    /* Light gray divider */
    margin: 20px auto 10px auto;
    /* Individually editable margins */
}

.divider-below-crop {
    width: 65%;
    height: 3px;
    background-color: var(--bg-silver);
    /* Light gray divider */
    margin: 10px auto 20px auto;
    /* Individually editable margins */
}

/* Hide default "Browse..." text */
input[type="file"] {
    color: transparent;
    width: 120px;
}

input[type="file"]::-webkit-file-upload-button {
    display: none;
}

/* Additional browser support for hiding file input button */
input[type="file"]::file-selector-button {
    display: none !important;
}

input[type="file"]::-ms-browse {
    display: none !important;
}

input[type="file"] {
    font-size: 0 !important;
}

/* Sharing Modal - Premium Design */
.share-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 500px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: var(--shadow-premium);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 30px;
    max-height: 90vh;
    /* Ensure it fits within the viewport */
    overflow-y: auto;
    /* Allow scrolling if content is too tall */
    display: flex;
    flex-direction: column;
}

.share-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.share-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
}

.share-modal-overlay.open {
    display: block;
    opacity: 1;
}

.share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.share-modal-header h2 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--text-dark);
}

.close-share-modal {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    font-size: 24px;
    color: #555;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-share-modal:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

.share-modal-preview {
    width: 100%;
    aspect-ratio: 1/1;
    background: #050505;
    border-radius: 16px;
    margin-bottom: 25px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

#sharePreviewImg {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.share-utilities {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.dialindicescolors {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.share-modal-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 25px 0;
    width: 100%;
}

.share-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 5px 0 5px;
    margin-top: 0;
}

/* Custom scrollbar for options grid */
.share-options-grid::-webkit-scrollbar {
    width: 4px;
}

.share-options-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.share-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.share-option-btn i {
    font-size: 24px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.share-option-btn span {
    font-size: 11px;
    font-family: 'Gothic A1', sans-serif;
    font-weight: 500;
    color: var(--text-light);
    text-align: center;
}

.share-option-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}

/* Platform-specific brand colors on hover */
.share-option-btn.whatsapp:hover {
    background: #E7F6ED;
}

.share-option-btn.whatsapp:hover i {
    color: #25D366;
}

.share-option-btn.telegram:hover {
    background: #E8F4F9;
}

.share-option-btn.telegram:hover i {
    color: #0088cc;
}

.share-option-btn.sms:hover {
    background: #EAF4F4;
}

.share-option-btn.sms:hover i {
    color: #4CAF50;
}

.share-option-btn.twitter:hover {
    background: #F0F0F0;
}

.share-option-btn.twitter:hover i {
    color: #000;
}

.share-option-btn.facebook:hover {
    background: #E7F0FF;
}

.share-option-btn.facebook:hover i {
    color: #1877F2;
}

.share-option-btn.reddit:hover {
    background: rgba(255, 69, 0, 0.08);
}

.share-option-btn.reddit:hover i {
    color: #FF4500;
}

.share-option-btn.pinterest:hover {
    background: #FCEEEF;
}

.share-option-btn.pinterest:hover i {
    color: #BD081C;
}

.share-option-btn.email:hover {
    background: #F5F5F5;
}

.share-option-btn.email:hover i {
    color: #EA4335;
}

.share-option-btn.copy-link:hover,
.share-option-btn.copy-image:hover,
.share-option-btn.save-device:hover {
    background: #F0F4FF;
}

.share-option-btn.copy-link:hover i,
.share-option-btn.copy-image:hover i,
.share-option-btn.save-device:hover i {
    color: #4A90E2;
}

.share-modal-hint {
    margin-top: 15px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
    padding: 0 10px;
}

.share-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    z-index: 10001;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.share-toast.show {
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* Mobile adjustments for share modal */
@media screen and (max-width: 500px) {
    .share-modal {
        width: 95%;
        padding: 20px;
    }

    .share-options-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Shared Layout Placeholder for URL-based shares */
.resizable-image-container.shared-layout-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.resizable-image-container.shared-layout-placeholder:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

/* --- Material Categories & Warning Popup --- */

.dialmaterials-category-title {
    width: 100%;
    margin: 40px 0 15px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-dark);
    border-bottom: 2px solid var(--accent-light);
    padding-bottom: 8px;
    align-self: flex-start;
    margin-left: 10%;
}

.dialmaterials-category-title small {
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-muted);
    font-weight: 400;
    display: block;
    margin-top: 5px;
}

.dialmaterials {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.warning-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.warning-popup-content {
    background: #0a0a0a;
    padding: 40px;
    border-radius: 20px;
    max-width: 550px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    animation: popupFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

@keyframes popupFadeIn {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }

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

.warning-popup-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.warning-popup-message {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 35px;
}

.warning-popup-message strong {
    color: var(--accent-dark);
    font-weight: 700;
}

.warning-popup-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.warning-btn {
    padding: 16px 32px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
}

.warning-btn-understand {
    background: var(--primary);
    color: white;
}

.warning-btn-understand:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.warning-btn-colors {
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(212, 175, 55, 0.3);
    text-decoration: none;
    display: inline-block;
}

.warning-btn-colors:hover {
    border-color: var(--accent);
    background: rgba(212, 175, 55, 0.05);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .dialmaterials-category-title {
        margin-left: 5%;
        font-size: 1.3rem;
    }

    .warning-popup-content {
        padding: 30px 20px;
    }

    .warning-popup-title {
        font-size: 1.6rem;
    }

    .warning-popup-message {
        font-size: 0.95rem;
    }

    .warning-btn {
        width: 100%;
    }
}

/* Material Category Styling */
.material-category-header {
    width: 100%;
    text-align: left;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 15px;
    padding-bottom: 2px;
    margin-bottom: 10px;
    border-bottom: 3px solid var(--bg-silver);
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
}

.material-category-header:first-child {
    margin-top: 15px;
}

.material-category-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

/* Color Warning Popup Modal */
.color-warning-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    animation: fadeIn 0.3s ease;
}

.color-warning-overlay.active {
    display: block;
}

.color-warning-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 90%;
    max-width: 600px;
    animation: slideDown 0.4s ease;
}

.color-warning-modal.active {
    display: block;
}

.color-warning-content {
    background: #0a0a0a;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: var(--shadow-premium);
    border: 2px solid var(--accent);
    position: relative;
}

.color-warning-icon {
    text-align: center;
    font-size: 3.5rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.color-warning-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.color-warning-message {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 15px;
}

.color-warning-message strong {
    color: var(--accent-dark);
    font-weight: 700;
}

.color-warning-submessage {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 30px;
}

.color-warning-submessage a {
    color: var(--accent-dark);
    text-decoration: underline;
    font-weight: 600;
}

.color-warning-submessage a:hover {
    color: var(--accent);
}

.color-warning-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.color-warning-footer {
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 15px;
}

.color-forget-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.2s;
}

.color-forget-btn:hover {
    color: var(--accent);
}

.color-warning-btn {
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    border: none;
}

.color-warning-btn.primary {
    background: var(--accent);
    color: var(--text-dark);
    border: 2px solid var(--accent);
}

.color-warning-btn.primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.color-warning-btn.secondary {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
}

.color-warning-btn.secondary:hover {
    background: var(--text-dark);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 900px) {
    .color-warning-modal {
        width: 95%;
        max-width: 500px;
    }

    .color-warning-content {
        padding: 30px 20px;
    }

    .color-warning-title {
        font-size: 1.5rem;
    }

    .color-warning-message {
        font-size: 0.95rem;
    }

    .color-warning-submessage {
        font-size: 0.85rem;
    }

    .color-warning-actions {
        flex-direction: column;
        gap: 10px;
    }

    .color-warning-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.85rem;
    }

    .material-category-header {
        font-size: 1rem;
        margin-top: 20px;
    }
}

/* Sticky Bottom Bar Styling */
.sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
    z-index: 999;
    padding: 10px 0;
    transition: background 0.3s ease, transform 0.3s ease;
}



.sticky-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sticky-price-display {
    display: flex;
    flex-direction: column;
}

.price-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: -5px;
    margin-top: 10px;
}

.price-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
}

.sticky-actions {
    display: flex;
    gap: 15px;
}

.sticky-actions .actionBtn {
    margin: 0 !important;
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    white-space: wrap;
}

@media (max-width: 900px) {
    .sticky-bar-inner {
        padding: 0 20px;
    }

    .price-amount {
        font-size: 1.1rem;
        white-space: nowrap;
        margin-right: 20px;
    }

    .sticky-actions .actionBtn {
        font-size: 0.65rem !important;
    }

    .price-label {
        font-size: 0.5rem;
    }
}

/* Edit Position Controls */
.edit-position-controls {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    background-color: #0d0d0d;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}

.edit-controls-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

.edit-buttons-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.edit-pos-btn,
.looks-good-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.edit-pos-btn {
    background-color: transparent;
    color: var(--text-dark);
    border: 2px solid var(--accent);
}

.edit-pos-btn:hover {
    background-color: var(--accent);
    color: #000;
}

.looks-good-btn {
    background-color: var(--accent);
    color: #ffffff;
    border: 2px solid var(--accent);
    flex-grow: 1;
    /* Allow it to expand */
    max-width: 300px;
}

.looks-good-btn:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* --- Studio Fluidity & Premium Animations --- */

/* Smooth Section Toggles */
.dialmaterials.active,
.dialcolors.active,
.dialmovements.active,
.dialdesigns.active,
.dialindices.active,
.dialsizes.active,
.diallogos.active,
.dialtexts.active {
    display: flex !important;
    /* Ensure it overrides display: none */
    animation: luxuriousEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes luxuriousEntrance {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

/* Dial Image Layer Transitions */
.dialImage,
.dialOverlay,
#dialBaseColor,
#dialMovementOverlay,
#dialDesignOverlay,
#dialIndexOverlay,
#text-group,
#resizable-image-container {
    transition: opacity 0.18s ease-in-out, background-color 0.18s ease-in-out, filter 0.18s ease-in-out !important;
}

/* Hover Adjustments for Studio Elements */
.dialsize,
.dialmovement,
.dialcolor,
.dialindex,
.dialdesign,
.diallogo {
    transition: var(--transition);
}

/* Sticky Bar Reveal */
#stickyBar {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Loading Modal Smoothness */
#loadingModal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    transition: opacity 0.4s ease;
}

/* Global Interactive Shadows for Dial Customizer */
h1,
h2,
h3,
h4,
p,
span,
a,
label,
.dialTitle,
.dialPrice,
.lux-edit-title,
.buyButton,
.bannerTitle {
    text-shadow: var(--text-shadow-soft, 0 2px 8px rgba(0, 0, 0, 0.15));
    transition: text-shadow var(--transition-fast, 0.2s);
}



.dialsize,
.dialmaterial,
.dialmovement,
.dialcolor,
.dialindex,
.dialdesign,
.lux-control-group,
.customColorPicker,
.feature {
    box-shadow: var(--shadow-soft, 0 10px 40px rgba(0, 0, 0, 0.05));
    transition: var(--transition);
}

.dialsize:hover,
.dialmaterial:hover,
.dialmovement:hover,
.dialcolor:hover,
.dialindex:hover,
.dialdesign:hover,
.lux-control-group:hover,
.customColorPicker:hover,
.feature:hover {
    box-shadow: var(--shadow-premium, 0 40px 100px rgba(0, 0, 0, 0.15)) !important;
}

/* --- LUXURY UPLOAD POPUP --- */

.luxury-upload-trigger {
    cursor: pointer !important;
}

.luxury-upload-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.luxury-upload-popup.active {
    opacity: 1;
    visibility: visible;
}

.luxury-upload-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Start with no blur but keep the property for transition */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    transition: opacity 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out, -webkit-backdrop-filter 0.5s ease-in-out;
    pointer-events: auto;
}

.luxury-upload-popup.active .luxury-upload-backdrop {
    opacity: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.luxury-upload-container {
    position: relative;
    width: 90%;
    max-width: 600px;
    background: #0a0a0a;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(30px) scale(0.98);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.luxury-upload-popup.active .luxury-upload-container {
    transform: translateY(0) scale(1);
}

.close-luxury-upload {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.3);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-luxury-upload:hover {
    color: var(--accent, #d4af37);
    transform: rotate(90deg);
    background: rgba(255, 255, 255, 0.05);
}

.luxury-upload-header {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.luxury-upload-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--text-color);
    border-bottom: 4px solid var(--accent);
    margin: 0 0 10px 0;
    font-weight: 600;
    letter-spacing: 1px;
    width: 90%;
    padding-bottom: 4px;
}

.luxury-upload-subtitle {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.luxury-template-link {
    display: block;
    font-family: 'Montserrat', sans-serif;
    color: var(--accent);
    font-size: 0.80rem;
    text-decoration: none;
    margin-top: 10px;
    font-weight: bolder;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    opacity: 0.8;
    font-style: italic;
    width: 55%;
    border: 2px solid var(--accent);
    padding: 4px;
    margin-bottom: -10px;
}

.luxury-template-link:hover {
    opacity: 1;
    transform: scale(1.05);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.luxury-upload-body {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Dropzone Styles */
.luxury-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 50px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.luxury-dropzone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.luxury-dropzone:hover,
.luxury-dropzone.dragover {
    border-color: var(--accent, #d4af37);
    background: rgba(212, 175, 55, 0.03);
}

.luxury-dropzone:hover::before,
.luxury-dropzone.dragover::before {
    opacity: 1;
}

.luxury-dropzone.dragover {
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.2);
}

.dropzone-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    pointer-events: none;
}

.dropzone-icon {
    font-size: 3rem;
    color: var(--accent, #d4af37);
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.luxury-dropzone:hover .dropzone-icon,
.luxury-dropzone.dragover .dropzone-icon {
    transform: translateY(-5px);
    opacity: 1;
}

.dropzone-text {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-light);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

.dropzone-or {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.dropzone-or::before,
.dropzone-or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.dropzone-or::before {
    right: 100%;
    margin-right: 15px;
}

.dropzone-or::after {
    left: 100%;
    margin-left: 15px;
}

/* Buttons */
.luxury-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    pointer-events: auto;
    margin: 10px;
}

.btn-browse {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dark);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    box-shadow: (var(--shadow-soft));
}

.btn-browse:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
    box-shadow: (var(--shadow-premium));
}

.luxury-dropzone.dragover .btn-browse {
    background: var(--accent, #d4af37);
    color: #000;
    border-color: var(--accent, #d4af37);
    transform: scale(1.05);
}

.btn-upload-url {
    background: var(--accent, #d4af37);
    color: white;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    flex-shrink: 0;
}

.btn-upload-url:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-1px);
}

/* URL Upload */
.luxury-url-upload {
    display: flex;
    gap: 5px;
    align-items: center;
    background: #0d0d0d;
    padding: 5px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.url-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0 15px;
    border-radius: 8px;
    margin: 0 10px;
    width: 100%;
}

.url-icon {
    color: rgba(0, 0, 0, 0.3);
    font-size: 1rem;
    margin-right: 12px;
}

.luxury-url-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    padding: 12px 0;
    caret-color: var(--accent, #d4af37);
    /* Visible blinking cursor */
}

.luxury-url-input:focus {
    outline: none;
}

/* Ensure the focus style is smooth and premium */
.url-input-group {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.luxury-url-input::placeholder {
    color: var(--text-muted);
}

/* Focus state for URL group */
.url-input-group.focused {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
}

.url-input-group.focused .url-icon {
    color: var(--accent, #d4af37);
}

/* Loading State for Dropzone */
.luxury-dropzone.loading .dropzone-icon {
    animation: spin 1s linear infinite;
}

.luxury-dropzone.loading .dropzone-icon::before {
    content: "\f1ce";
    /* fa-circle-notch */
}

.luxury-dropzone.loading .dropzone-text {
    color: var(--accent, #d4af37);
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .luxury-upload-container {
        width: 95%;
        padding: 25px 20px;
        gap: 20px;
    }

    .luxury-upload-title {
        font-size: 1.8rem;
    }

    .luxury-dropzone {
        padding: 30px 15px;
    }

    .luxury-url-upload {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        gap: 15px;
    }

    .url-input-group {
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        box-sizing: border-box;
    }

    .btn-upload-url {
        width: 100%;
    }
}


/* ============================================================
   CUSTOMIZER SECTION — LUXURY SHADOWS & TRANSITIONS
   Scoped ONLY to .dialcustomization and its children.
   The dial preview section is intentionally left untouched.
   ============================================================ */

/* --- Section titles (Playfair headings) --- */
.dialcustomization .dialmaterialstitle,
.dialcustomization .dialsizestitle,
.dialcustomization .dialmovementstitle,
.dialcustomization .dialcolorstitle,
.dialcustomization .dialindicestitle,
.dialcustomization .dialdesignstitle,
.dialcustomization .diallogostitle {
    text-shadow: var(--text-shadow-soft);
    transition: var(--transition-fast);
    cursor: default;
    pointer-events: none;
}

/* --- Selectable cards: size, movement, color, index, design, material --- */
.dialcustomization .dialsize,
.dialcustomization .dialmovement,
.dialcustomization .dialcolor,
.dialcustomization .dialindex,
.dialcustomization .dialdesign,
.dialcustomization .dialmaterial {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .dialsize:hover,
.dialcustomization .dialmovement:hover,
.dialcustomization .dialcolor:hover,
.dialcustomization .dialindex:hover,
.dialcustomization .dialdesign:hover,
.dialcustomization .dialmaterial:hover {
    box-shadow: var(--shadow-hover);
}

/* Selected state — premium gold glow */
.dialcustomization .dialsize.selected,
.dialcustomization .dialmovement.selected,
.dialcustomization .dialcolor.selected,
.dialcustomization .dialindex.selected,
.dialcustomization .dialdesign.selected,
.dialcustomization .dialmaterial.selected,
.dialcustomization .diallogo.selected {
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.25), var(--glow-accent);
}

/* --- Card inner text labels --- */
.dialcustomization .dialcolorText,
.dialcustomization .dialindexText,
.dialcustomization .dialdesignText,
.dialcustomization .dialmaterialText {
    text-shadow: var(--text-shadow-soft);
    transition: var(--transition-fast);
}

/* --- Color swatches / circle options --- */
.dialcustomization .colorOption {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .colorOption:hover {
    box-shadow: var(--shadow-hover);
}

.dialcustomization .colorOption.selected {
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3), var(--glow-accent);
}

/* --- No-color / Remove-color buttons --- */
.dialcustomization .noColorBtn,
.dialcustomization .removeColorBtn {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .noColorBtn:hover,
.dialcustomization .removeColorBtn:hover {
    box-shadow: var(--shadow-hover);
}

.dialcustomization .noColorBtn.selected,
.dialcustomization .removeColorBtn.selected {
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

/* --- Text-line items (logo / text customisation cards) --- */
.dialcustomization .text-line-item {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .text-line-item:hover {
    box-shadow: var(--shadow-premium);
    z-index: 0;
}

.dialcustomization .text-line-item h4 {
    text-shadow: var(--text-shadow-soft);
}

/* --- Design / index colour section titles --- */
.dialcustomization .design_color_title {
    text-shadow: var(--text-shadow-soft);
}

/* --- Lux edit position controls panel --- */
.dialcustomization .edit-position-controls-lux {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .edit-position-controls-lux:hover {
    box-shadow: var(--shadow-premium);
}

.dialcustomization .lux-edit-title {
    text-shadow: var(--text-shadow-soft);
}

/* Lux control groups */
.dialcustomization .lux-control-group {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .lux-control-group:hover {
    box-shadow: var(--shadow-hover);
}


/* Lux increment buttons */
.dialcustomization .lux-numeric-btn {
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

.dialcustomization .lux-numeric-btn:hover {
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* Lux action buttons (Edit / Confirm) */
.dialcustomization .lux-edit-btn,
.dialcustomization .lux-confirm-btn {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .lux-edit-btn:hover,
.dialcustomization .lux-confirm-btn:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Custom size / movement section panels --- */
.dialcustomization .customSizeSection,
.dialcustomization .customMovementSection {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

/* Target custom sections when their specific buttons are hovered so they stay aligned */
.dialsize[data-value="custom"]:hover~.customSizeSection,
.dialmovement[data-value="custom"]:hover~.customMovementSection {
    transform: translateY(-3px);
}

/* --- Text inputs & textareas inside customizer --- */
.dialcustomization .dialDiameterInput,
.dialcustomization .commentsInput,
.dialcustomization .movementInput,
.dialcustomization .custom-text-input,
.dialcustomization .font-displacement-input,
.dialcustomization .font-size-input,
.dialcustomization .font-family-select,
.dialcustomization .font-color-select {
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

.dialcustomization .dialDiameterInput:hover,
.dialcustomization .commentsInput:hover,
.dialcustomization .movementInput:hover,
.dialcustomization .custom-text-input:hover,
.dialcustomization .font-displacement-input:hover,
.dialcustomization .font-size-input:hover,
.dialcustomization .font-family-select:hover,
.dialcustomization .font-color-select:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Control groups (displacement, font size) --- */
.dialcustomization .control-group,
.dialcustomization .displacement-controls,
.dialcustomization .font-size-controls {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .control-group:hover,
.dialcustomization .displacement-controls:hover,
.dialcustomization .font-size-controls:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Styling option toggles (Bold / Italic / etc.) --- */
.dialcustomization .styling-option {
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

/* --- Font family / color luxury trigger buttons --- */
.dialcustomization .font-family-btn-lux,
.dialcustomization .font-color-btn-lux {
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

.dialcustomization .font-family-btn-lux:hover,
.dialcustomization .font-color-btn-lux:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Action buttons (Save, Add Line, Add to Cart, Share) --- */
.dialcustomization .saveButton,
.dialcustomization .add-line-btn,
.dialcustomization .dialbutton {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .saveButton:hover,
.dialcustomization .add-line-btn:hover,
.dialcustomization .dialbutton:hover {
    box-shadow: var(--shadow-hover);
}

.dialcustomization .actionBtn {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .actionBtn:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Custom colour picker card --- */
.dialcustomization .customColorPicker {
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.dialcustomization .customColorPicker:hover {
    box-shadow: var(--shadow-premium);
}

.dialcustomization .customColorPicker label {
    text-shadow: var(--text-shadow-soft);
}

/* --- Upload labels (logo upload button) --- */
.dialcustomization label {
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

.dialcustomization label:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Section sub-headings & misc text --- */
.dialcustomization .diallogoheader,
.dialcustomization .text-effects-title {
    text-shadow: var(--text-shadow-soft);
}

/* --- Input group labels inside customizer --- */
.dialcustomization .input-group label {
    text-shadow: var(--text-shadow-soft);
    /* Override the inherited box-shadow from the broad label rule above */
    box-shadow: none;
}

.dialcustomization .input-group label:hover {
    box-shadow: none;
}

/* --- Sidebar remove buttons --- */
.dialcustomization .sidebar-remove-button {
    box-shadow: var(--shadow-soft);
    transition: var(--transition-fast);
}

.dialcustomization .sidebar-remove-button:hover {
    box-shadow: var(--shadow-hover);
}

/* --- Material colour swatches --- */
.dialcustomization .materialSwatch {
    transition: var(--transition-fast);
}



/* --- Dial title / price / description (header block) --- */
.dialcustomization .dialTitle,
.dialcustomization .dialPrice,
.dialcustomization .dialDescription {
    text-shadow: var(--text-shadow-soft);
}

/* ============================================================
   CROPPER.JS LUXURY OVERRIDES
   ============================================================ */
.cropper-view-box,
.cropper-face {
    border-radius: 4px;
    /* Slight rounding for luxury feel */
}

/* Accent color for crop box border */
.cropper-view-box {
    outline: 3px dashed var(--accent) !important;
    outline-color: var(--accent) !important;
    outline-width: 3px !important;
}

/* Accent color for grid lines */
.cropper-line {
    background-color: var(--accent);
    opacity: 0.6;
}

/* Bigger, easier to grab corner handles in accent color */
.cropper-container .cropper-point {
    background-color: var(--accent-dark) !important;
    width: 15px !important;
    height: 15px !important;
    opacity: 0.9 !important;
    border-radius: 50% !important;
    /* Circle handles look more premium */
}

.cropper-container .cropper-point:hover {
    opacity: 1 !important;
    background-color: var(--accent-light, #f6e3b4) !important;
}

/* Specific corner handle positioning adjustments */
.cropper-container .cropper-point.point-e {
    right: -7px !important;
    margin-top: -7px !important;
}

.cropper-container .cropper-point.point-n {
    top: -7px !important;
    margin-left: -7px !important;
}

.cropper-container .cropper-point.point-w {
    left: -7px !important;
    margin-top: -7px !important;
}

.cropper-container .cropper-point.point-s {
    bottom: -7px !important;
    margin-left: -7px !important;
}

.cropper-container .cropper-point.point-ne {
    right: -7px !important;
    top: -7px !important;
}

.cropper-container .cropper-point.point-nw {
    left: -7px !important;
    top: -7px !important;
}

.cropper-container .cropper-point.point-sw {
    left: -7px !important;
    bottom: -7px !important;
}

.cropper-container .cropper-point.point-se {
    right: -7px !important;
    bottom: -7px !important;
}


.cropper-bg {
    background-image: none;
    background-color: #1a1a1a;
}

.cropper-modal {
    background-color: #000;
    opacity: 0.8;
}

/* Back to Top Button */
.back-to-top-btn {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 38px;
    height: 200px;
    border-radius: 10px;
    background-color: var(--accent, #d4af37);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition);
    padding: 20px 0;
}

.back-to-top-btn .fas {
    margin-bottom: -4px;
    transition: var(--transition);
}

.back-to-top-btn .btn-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.back-to-top-btn .mobile-text {
    display: none;
}

.back-to-top-btn.visible {
    opacity: 0.7;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    opacity: 1 !important;
    box-shadow: var(--shadow-hover);

    .fas {
        transform: translateY(-4px);
        transition: var(--transition);
    }
}

@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: 90px;
        right: 20px;
        width: 38px;
        height: 85px;
        border-radius: 30px;
        font-size: 15px;
        padding: 10px 0;
        flex-direction: column;
        gap: 5px;
    }

    .back-to-top-btn .fas {
        margin-bottom: -2px;
        transition: var(--transition);
    }

    .back-to-top-btn .desktop-text,
    .back-to-top-btn .desktop-icon {
        display: none;
    }

    .back-to-top-btn .mobile-text {
        display: block;
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 12px;
        letter-spacing: 0.5px;
    }
}

/* --- LUXURY LOADING SCREEN --- */
/* --- LUXURY LOADING SCREEN --- */
#lux-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%);
    /* Deep luxury radial depth */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}

.loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    animation: loaderFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.loader-logo {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: 'Playfair Display', serif;
    animation: logoEntrance 1.5s ease-out;
}

.logo-phi {
    font-size: 4rem;
    color: var(--accent);
    font-style: italic;
    font-weight: 700;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    animation: phiBreathe 3s ease-in-out infinite;
}

.logo-text {
    font-size: 2.2rem;
    color: white;
    letter-spacing: 8px;
    font-weight: 300;
    opacity: 0.9;
}

.loader-visual {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watch-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Luxury Tick Marks */
.watch-circle::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.05);
}

.watch-circle::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
            var(--accent) 0%, var(--accent) 8%,
            transparent 8%, transparent 92%,
            var(--accent) 92%, var(--accent) 100%);
    opacity: 0.3;
}

.watch-hand {
    position: absolute;
    width: 2px;
    height: 50px;
    background: var(--accent);
    transform-origin: bottom center;
    top: 10px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    /* 1/60th intervals at 0.1s per interval = 6s total rotation */
    animation: watchTick 6s steps(60) infinite;
}

.loader-msg {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--accent);
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0.6;
    animation: msgPulse 2s ease-in-out infinite;
}

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

    to {
        transform: rotate(360deg);
    }
}

@keyframes phiBreathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
        text-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
    }
}

@keyframes logoEntrance {
    from {
        opacity: 0;
        letter-spacing: 20px;
        filter: blur(10px);
    }

    to {
        opacity: 1;
        letter-spacing: 8px;
        filter: blur(0);
    }
}

@keyframes msgPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes loaderFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#lux-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    /* Subtle "zoom into content" effect */
}

/* Initially hide the main content to avoid flash */
#customizerSections {
    opacity: 0;
    transition: opacity 1s ease;
}

#customizerSections.ready {
    opacity: 1;
}

/* Navigation Fade-in */
#mainNav {
    opacity: 0;
    transition: opacity 1s ease;
}

#mainNav.ready {
    opacity: 1;
}

/* --- DIAL SIZE OVERHAUL --- */
.dialsizes.active,
.dialsizes {
    flex-direction: column !important;
    align-items: center !important;
    width: 85% !important;
}

.dialsize {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 0 25px 0 !important;
    padding: 20px 25px !important;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start !important;
    text-align: left !important;
    align-self: center !important;
}

@media (max-width: 768px) {
    .dialsize {
        align-self: center !important;
        width: 95% !important;
        max-width: 95% !important;
    }

    .size-title {
        font-size: 1rem;
    }

    .size-subtitle {
        font-size: 0.75rem;
    }
}

.size-title {
    font-size: 1.1rem;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--text-dark);
}

.size-subtitle {
    font-size: 0.85rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.4;
}

.dialsize.selected .size-subtitle {
    color: var(--text-light);
}

/* Custom Size Section Luxury Overhaul */
.customSizeSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: -15px 0 20px 0;
    padding: 35px 30px;
    background: #0d0d0d;
    border-radius: 12px;
    position: relative;
    box-sizing: border-box;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    animation: slideDownIn 0.3s ease-out;
}

.customSizeSection::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 10px solid #0d0d0d;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    z-index: 2;
}

.customSizeSection::before {
    content: '';
    position: absolute;
    top: -11.5px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 11px solid rgba(212, 175, 55, 0.3);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    z-index: 1;
}

.custom-size-controls {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* Remove hover effects for dial diameter and additional requirements containers */
.custom-size-controls .lux-control-group:hover {
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: #161616 !important;
    transform: none !important;
    box-shadow: var(--shadow-soft) !important;
}

.custom-size-controls .font-size-controls:hover {
    transform: none !important;
    box-shadow: none !important;
}

@media screen and (max-width: 768px) {
    .custom-size-controls {
        flex-direction: column;
    }
}

.custom-diameter-input {
    width: 80px !important;
    font-size: 1.5rem !important;
    height: 40px !important;
    border: none !important;
    border-bottom: 2px solid var(--accent) !important;
    text-align: center;
}

.custom-diameter-input:focus {
    outline: none;
    border-bottom-color: var(--accent-dark) !important;
}

.lux-textarea {
    width: 100%;
    min-height: 150px;
    background: var(--bg-silver);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: var(--text-dark);
    resize: none;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.lux-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
}

/* ========================================= */
/* FREE DIGITAL MOCKUP POPUP STYLES          */
/* ========================================= */

.mockup-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mockup-popup-overlay.active {
    display: flex;
    opacity: 1;
}

.mockup-popup-overlay.closing {
    opacity: 0;
}

.mockup-popup-container {
    background: #0a0a0a;
    width: 90%;
    max-width: 800px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 175, 55, 0.1);
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    position: relative;
}

.mockup-popup-overlay.active .mockup-popup-container {
    transform: translateY(0) scale(1);
}

.mockup-popup-overlay.closing .mockup-popup-container {
    transform: translateY(30px) scale(0.95);
}

.mockup-popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 100;
    line-height: 1;
}

.mockup-popup-close:hover {
    color: var(--accent);
}

.mockup-popup-content {
    padding: 40px 40px 30px;
    text-align: center;
}

.mockup-popup-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark, #111);
    margin: 0 0 15px;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mockup-popup-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 30px;
    line-height: 1.5;
}

.mockup-popup-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.mockup-email-input {
    width: 100%;
    max-width: 400px;
    padding: 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    background: #111;
    color: var(--text-dark);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.mockup-email-input:focus {
    border-color: var(--accent, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
    background: #161616;
}

.mockup-email-input.error {
    border-color: #ff5757;
    background: #1a0a0a;
}

.mockup-email-error {
    color: #ff5757;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    height: 2.5em;
    /* Stable height for two lines */
    margin-top: 10px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    visibility: hidden;
    white-space: pre-line;
    line-height: 1.2;
}

.mockup-email-error.active {
    visibility: visible;
    animation: fadeIn 0.3s ease;
}

.mockup-popup-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    width: 100%;
    max-width: 400px;
}

.mockup-submit-btn,
.mockup-skip-btn {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mockup-submit-btn {
    background: var(--accent);
    color: #000;
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-soft);
}

.mockup-submit-btn:hover {
    background: var(--accent-dark);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.mockup-skip-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mockup-skip-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-dark);
}

/* Scrolling Image Gallery */
.mockup-gallery-wrapper {
    width: 100%;
    background: #060606;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Gradient boundaries to soften scroll edges */
.mockup-gallery-wrapper::before,
.mockup-gallery-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.mockup-gallery-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #060606, transparent);
}

.mockup-gallery-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #060606, transparent);
}

.mockup-gallery-scroll {
    display: flex;
    width: max-content;
    animation: infiniteScroll 25s linear infinite;
}

.mockup-gallery-scroll:hover {
    animation-play-state: paused;
}

.mockup-gallery-item {
    width: 200px;
    margin: 0 15px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-silver);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.1);
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mockup-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1), 0 0 15px rgba(212, 175, 55, 0.15);
}

.mockup-gallery-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mockup-gallery-text {
    padding: 12px;
    text-align: center;
}

.mockup-gallery-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 5px;
    color: var(--text-dark, #111);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.mockup-gallery-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.3;
}

@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 600px) {
    .mockup-popup-content {
        padding: 30px 20px 20px;
    }

    .mockup-popup-title {
        font-size: 1.5rem;
    }

    .mockup-popup-buttons {
        flex-direction: column;
    }

    .mockup-gallery-item {
        width: 160px;
        margin: 0 10px;
    }

    .mockup-gallery-item img {
        height: 110px;
    }
}