/* 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: #ffffff;
    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 */
}

#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('../../img/dialcolors/white.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url('../../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;
    background: #ffffff;
    overflow-y: auto;
    /* Allow scrolling if content overflows */
}


/* Dial Customization Section */

.dialmaterials,
.dialcolors,
.dialindicies,
.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,
.dialindiciestitle,
.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,
.dialindiciestitles,
.dialdesignstitles,
.diallogostitles {
    margin-top: 70vh;
    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: 15px;
    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(0, 0, 0, 0.1);
    background-color: #ffffff;
    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.04);
}


.dialsize.selected,
.dialmovement.selected,
.diallogo.selected {
    background-color: #fffbf5;
    color: var(--text-dark);
    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: #fafafa;
    color: var(--text-dark);
    border: 2px solid var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}


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

.customColorPicker {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 2px solid #240000;
    background-color: #ffffff;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

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

.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 */
}

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



.dialcolor.selected,
.dialindex.selected,
.dialdesign.selected {
    background-color: #fffbf5;
    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: #fafafa;
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

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


.dialmaterials,
.dialcolors,
.dialmovements,
.dialdesigns,
.dialindicies,
.dialsizes,
.diallogos,
.dialtexts {
    display: none;
}

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

.dialmaterials.active,
.dialcolors.active,
.dialdesigns.active,
.dialindicies.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 #240000;
    background-color: #ffffff;
    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(--text-dark);
    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, #d88040 0%, #804020 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: #fffbf5;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.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 {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

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


/* Dial Design & Index Colour Customization */

.colorOption {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px solid black;
    background-color: #ffffff;
    border-radius: 50%;
    /* Makes it a circle */
    margin: 10px;
    cursor: pointer;
    width: 80px;
    /* Set the width for the circle */
    height: 80px;
    /* Set the height equal to width */
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    /* Ensures padding is included in the width/height */
    color: black;
    /* Adjust text color if needed */
}

.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,
.dialincidiescolors,
.dialupperlogocolors,
.diallowerlogocolors {
    width: 100%;
    /* Or a max-width to match your layout */
    max-width: 350px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.design_color_title {
    color: var(--accent);
    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-dark);
    color: white;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid var(--accent-dark);
    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);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

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(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 1rem;
    background-color: #fff;
    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;
}


.resizable-image-container.show-controls .resize-handle,
.resizable-image-container.show-controls .remove-button {
    display: block;
    /* 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 */
}

.resize-handle {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    /* Hide by default */
}

/* 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: -5px;
    left: -5px;
    cursor: nwse-resize;
}

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

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

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

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

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

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

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








.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;
}

.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: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.2);
    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.03);
}

.text-line-item h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-dark);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 8px;
    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: 30px;
    margin-bottom: 10px;
    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;
}

#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;
    background: transparent;
    padding: 8px 0;
    border-radius: 0;
}

.styling-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 500;
}

/* 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: 10px;
    height: 10px;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
    background-color: white;
    margin-top: 5px;
}

.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 #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.font-displacement-input,
.font-size-input {
    width: 100% !important;
    min-width: 120px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.font-family-select,
.font-color-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    background-color: white;
    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.8);
    padding: 6px;
    border-radius: 8px;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.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-dark);
    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 {
    background-color: var(--accent);
    transform: translateY(-2px);
    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;
}







.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: 2px solid rgba(212, 175, 55, 0.3);
    background-color: rgba(255, 255, 255, 0.95);
    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: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 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: 2px solid rgba(0, 0, 0, 0.15);
    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: 2px solid #240000;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    background-color: white;
    color: #111111;
}

.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: #fff;
    }

    .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: #fff;
        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: #fff;
        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;
    }

    .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,
    .dialindiciestitles,
    .dialdesignstitles,
    .diallogostitles {
        margin-top: 45vh !important;
    }

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

    .dialmaterialstitles,
    .dialsizestitles,
    .dialmovementstitles,
    .dialcolorstitles,
    .dialindiciestitles,
    .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 {
    margin-bottom: 20px;
    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 */
.dialdesigns .diallogoupload,
.dialindicies .diallogoupload {
    margin-top: 30px;
}


.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(--bg-silver);
    color: var(--text-dark);
}

.shareBtn:hover {
    background-color: var(--accent-light);
    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;
}

/* 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(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    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: #111;
}

.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: #f0f0f0;
    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;
}

.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: white;
    border: none;
    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.02);
}

.share-option-btn i {
    font-size: 24px;
    color: #555;
    transition: all 0.3s ease;
}

.share-option-btn span {
    font-size: 11px;
    font-family: 'Gothic A1', sans-serif;
    font-weight: 500;
    color: #444;
    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: #FFF0E9;
}

.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: black;
    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: white;
    padding: 40px;
    border-radius: 20px;
    max-width: 550px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: popupFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid var(--accent-light);
}

@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(--primary);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.warning-popup-message {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    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(--primary);
    border: 1px solid #ddd;
    text-decoration: none;
    display: inline-block;
}

.warning-btn-colors:hover {
    border-color: var(--primary);
    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: 5px;
    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: linear-gradient(135deg, #ffffff 0%, #fffbf5 100%);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    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: #333;
    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: #666;
    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: #888;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.2s;
}

.color-forget-btn:hover {
    color: #333;
}

.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: var(--primary);
    backdrop-filter: blur(15px);
    -webkit-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;
    }
}