@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

/* === Main Layout === */

/* === Reset === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-size: 16px;
    overflow-x: hidden;
    font-family: Arial, sans-serif; /* optional global font */
    background-color: #fdfafd;
    color: #1F5E88;
}

#outer_block {
    min-width: 100%;
    min-height: 100vh;
}

#centered_block {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-bottom: 250px;
    width: 100%;
}

.landing-wrapper {
    width: 100%;
    min-width: 300px;
    max-width: 1000px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    padding-top: 2rem;
    gap: 0.5rem;
}

/*h1*/
#mainTitle {
    color: #037cc7;
    font-family: 'Titan One', sans-serif;
    padding: 10px 0;
    font-weight: bolder;
}

/* Cards */
.standard-card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px #007BA7;
    display: flex;
    flex-direction: column;
}

/* centered */
.standard-card2 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px #007BA7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.shipment-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f8f6;
    box-shadow: 0 10px 20px #007BA7;
}

/* === Sticky Side Navigation === */
.side-nav {
    position: fixed;
    top: 0;
    left: -250px;
    width: 220px;
    min-height: 100%;
    background: linear-gradient(90deg, #0e599d, #a8fbf8);
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    transition: left 0.3s ease;
    padding-top: 50px;
}
  
.side-nav.active {
    left: 0;
}

.side-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.side-logo-img {
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    margin-bottom: 0px;
    display: block;
    margin: auto;
    border-radius: 50%;
    object-fit: cover;
}

.side-brand {
    color: white;
    font-family: 'Titan One', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
}

.side-links {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;

}

.side-link {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    text-align: center;
    font-family: "Courier New", Courier, monospace;
    transition: all 0.2s ease;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: block;
}

.side-link:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* === Hamburger === */
.burger {
    display: block;
    position: fixed;
    top: 1rem;
    left: 1rem;
    font-size: 2rem;
    background: linear-gradient(90deg, #0e599d, #a8fbf8);
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    z-index: 1000;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.burger:hover {
    transform: scale(1.05);
}


@media screen and (max-width: 500px) {
    .side-nav {
        left: -250px;
    }

    .side-nav.active {
        left: 0;
    }

    .burger {
        display: block;
    }

}

/* === Footer === */
.footer-centered {
    background: linear-gradient(90deg, #a8fbf8, #0e599d);
    padding: 2.5rem 1rem;
    color: white;
    text-align: center;
    font-family: 'Helvetica Neue', sans-serif;
    width: 100%;
}

.footer-brand {
    font-family: 'Titan One', sans-serif;
    color: #f1f1f1;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.footer-tagline {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #f1f1f1;
    text-align: center;
}

.footer-links-wrap {
    margin: 1.2rem 0 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-link {
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    
}

.footer-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 0.9;
    text-decoration: none;
}

.footer-copy {
    font-size: 0.8rem;
    color: #e1e1e1;
    margin-top: 0.8rem;
    text-align: center;
}


.footer-socials {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.social-link {
    display: inline-block;
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-link:hover {
    opacity: 0.8;
    transform: scale(1.2);
}

.social-icon {
    width: 100%;
    height: auto;
    display: block;
}

/* === Hero Section === */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
}

.hero-section2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-logo {
    min-width: 300px;
    min-height: 300px;
    max-width: 300px;
    max-height: 300px;
    margin-bottom: 0px;
    display: block;
    margin: auto;
    border-radius: 50%;
    object-fit: cover;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: #037cc7;
}

/* SHIMMER */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 90%, 
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

.hero-section2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 90%, 
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

#createAccountFieldsPassword1 {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    transition: box-shadow 0.3s, border-color 0.3s;
}

input, select, textarea, number {
    box-shadow: 5px 5px 5px #09b1ac;
    width: 100%;
    padding: 12px;
    border: 2px solid #6EB1D6;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s;
    background: #F8F9FA;
    color: #333;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #1F5E88;
    box-shadow: 0 0 6px rgba(31, 94, 136, 0.5);
}

input[type=submit], input[type=button], button {
    background-color: #09b1ac;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    margin: auto;
    margin-bottom: 20px;
    width: 80%;
    border: none;
}

input[type=submit]:hover, input[type=button]:hover, button:hover {
    background-color: #1F5E88;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    margin: auto;
    margin-bottom: 20px;
    max-width: 80%;
    cursor: pointer;
    border: none
}

/* Center select menu */
select {
    text-align: center;
    text-align: --webkit-center;
}
option {
    text-align: center;
    text-align: --webkit-center;
}

input.delete-btn {
    background-color: red;
    width: 50%;
}

input.delete-btn:hover {
    background-color: lightcoral;
}

#delete_account_button {
    margin-top: 150px;
}

#togglePassword {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 0.7rem;
    user-select: none;
    color: #888;
}

#togglePassword:hover {
    color: #007bff;
}

/* === Product Page Styling === */
#colorGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    gap: 10px;
    justify-items: center;
    padding: 0;
    max-width: 240px;
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
    padding-bottom: 20px;
    padding-top: 20px;
}

/* Each color block */
#colorGrid li.color-square {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.color-square {
    position: relative;
}

/* Tooltip bubble */
.color-square::after {
    content: attr(data-color);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1F5E88;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
    z-index: 10;
}

/* Tooltip arrow */
.color-square::before {
    content: "";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1F5E88;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    z-index: 9;
}

/* Show on hover instantly */
.color-square:hover::after,
.color-square:hover::before {
    opacity: 1;
}

#colorGrid li.color-square:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.color-square.selected {
    outline: 2px solid #1F5E88;
    outline-offset: 2px;
}

#product_sizes {
    margin-top:10px;
    margin-bottom: 0;
}

/*$$$   Flipping Button   $$$ */
.flip-container {
    perspective: 1000px;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
    border-radius: 50px;
}

.flip-container:hover {
    transform: scale(1.05);
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: adds shadow for depth */
}

.front:hover {
    background: #0056b3;
}

.back:hover {
    background: #0056b3;
}

.flip-container, .front, .back {
    width: 200px;
    height: 100px;
    position: relative;
}
  
.front, .back {
    backface-visibility: hidden;
    transition: transform 1s;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: #FFFFFF;
    border-radius: 50px;
    padding: 10px;
}
  
.front {
    /*background: #09b1ac;*/
    background: #007BA7;
}

.back {
    /*background: #09b1ac;*/
    background: #007BA7;
    transform: rotateY(-180deg);
}

.flip-container.flipped .front {
    transform: rotateY(180deg);
}

.flip-container.flipped .back {
    transform: rotateY(0deg);
}

/* Links on Products Page */
.doc_a {
    text-decoration: none;
    color: #09b1ac; 
    /* color: #1d706d; */ 
}

.doc_a:hover {
    color: #003296;
    text-decoration: none;
    /*text-decoration: underline;*/
}

/* paragraph styling */
.doc_h3 {
    text-align: left;
    margin-top: 16px;
    margin-bottom: 16px;
}

.doc_p, .doc_p2 {
    text-align: left;
    margin-bottom: 0;
}

.doc_p_center {
    text-align: center;
}

/* IMAGES - Home Page Flexible Container */

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.art{
    width: 300px;
    height: 300px;
    object-fit: cover;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border: black;
    border-width: 2px;
    border-style: solid;
}

/* Styling for the product card */
.product-card {
    background-color: #ffffff; /* White background */
    border-radius: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    padding: 15px;
    margin-bottom: 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.product-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Creates two columns */
    gap: 10px 20px;  /* Space between rows and columns */
    background: #f8f8f8;  /* Light background for the grid */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);  /* Subtle shadow for depth */
    align-items: start;
}

.label-info {
    font-weight: bold;
    color: #333;  /* Dark color for labels to stand out */
    margin-right: 5px;  /* Space after label */

}
.product-info-grid div {
    padding: 5px 0;  /* Padding for each item for vertical alignment */
    text-align: left;
}

.button-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically if needed */
    height: 50px; /* Optional: Set a height for the container */
    margin-top: 20px;
    margin-bottom: 15px;
}

.purchase-button-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically if needed */
    height: 50px; /* Optional: Set a height for the container */
    min-width: 300px;
    padding-top: 50px;
    padding-bottom: 80px;
}

/* Table */
table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.order-id-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

#order_id_input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    background-color: #f9f9f9;
}

.copy-button {
    width: 32px;
    height: 32px;
    background: url('/static/icons/copy.png') no-repeat center center;
    background-size: 20px 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 0.5rem;
    outline: none;
    transition: transform 0.2s ease;
}

.copy-button:hover {
    transform: scale(1.1);
}

#design_unique {
    font-family: 'Anton', sans-serif; /* blocky uppercase style */
    /*font-size: 2.5rem;*/
    text-transform: uppercase;
    background: linear-gradient(90deg, #0e599d, #007BA7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5);
    margin: 20px 0;
    padding: 10px 0;
    width: 80%;
}

/* LOADER OVERLAY SECTION */
#global_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(30, 30, 30, 0.85); /* dark grey, semi-opaque */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
}

.loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 1s linear infinite;
}

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

/* Dashboard Edit Account Section=== */
.editable-settings input {
    max-width: unset !important;
    width: auto !important;
}

/* === Each editable row (input + button grouped) === */
.setting-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    width: 100%;
}

/* === Input and button wrap together, responsive === */
.input-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* === Input field styling === */
.setting-input {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 100%;
}

/* === Button styling === */
.setting-button {
    flex: 0 0 auto;
    min-width: 100px; /* 👈 Wider button */
    padding: 8px 16px;
    white-space: nowrap;
    background-color: #09b1ac;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);
    transition: background 0.3s ease;
}

.setting-button:hover {
    background-color: #0056b3;
}

/* === Responsive stacking on mobile === */
@media screen and (max-width: 600px) {
    .input-button-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .setting-input,
    .setting-button {
        width: 100%;
    }
}

/* IMAGES */
#productShowcaseImage {
    height:300px;
    width: 300px;
    border: none;
}

#productShowcaseMessage {
    padding-top: 5px;
    padding-bottom: 15px;
}

.parent {
    position: relative;
    margin: auto; /* This will work only if the width is set or content width is determinable */
    position: relative;
    /*width: fit-content;*/
    height: 300px;
    width: 300px;
}

.plainShirt {
    position: relative;
    top: 0;
    left: 0;
    height: 300px;
    width: 300px;
    border: black;
    border-width: 2px;
    border-style: solid;
}

#shirtImage {
    position: absolute;
    top: 80px;
    left: 115px;
    height: 75px;
    width: 75px;
    border: none;
}

#shirtImage2 {
    position: absolute;
    top: 80px;
    left: 115px;
    height: 75px;
    width: 75px;
    border: none;
}

.shirtImageOrders {
    position: absolute;
    top: 80px;
    left: 115px;
    height: 75px;
    width: 75px;
    border: none;
    object-fit: contain;
}

.shirtImage2Orders {
    position: absolute;
    top: 80px;
    left: 115px;
    height: 75px;
    width: 75px;
    border: none;
    object-fit: contain;
}

/* CREATE PRODUCT in design_studio and dashboard */
#createProductFormCol{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 0px;
}
.hiddenSubProduct {
    display: block;
}
.hiddenSize {
    display: block;
}
.hiddenColor {
    display: block;
}
.hiddenQuantity {
    display: block;
}
.hiddenCountry {
    display: block;
}
.hiddenShipping {
    display: none;
}
.hiddenPrice {
    display: block;
}
.hiddenSubProduct:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenSize:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenColor:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenQuantity:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenCountry:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenShipping:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hiddenPrice:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* DESIGN CONTAINER in design_studio and dashboard */
.design-container {
    display: flex;
    justify-content: center; /* Changed from space-between to center */
    align-items: flex-start; /* Vertically center all three columns */
    padding: 20px;
    margin: auto; /* Center the container on the page */
    max-width: 1080px; /* Adjust this based on your total width of canvas and tools */
    min-height: 600px; /* Ensure sufficient height for vertical centering */
}


/* Hide .design-container on screens narrower than 1080px */
@media (max-width: 1079px) {
    .design-container {
        min-height: auto; /* Remove fixed height on mobile */
        align-items: flex-start; /* Reset to top alignment on mobile */
        flex-direction: column; /* Stack vertically on mobile */
        align-items: center;
    }
    .canvas-container-main {
        display: none !important; /* Hide entire canvas container on mobile */
    }
    .canvas-container {
        display: none !important;
    }
    #c {
        display: none !important; /* Hide canvas element itself */
    }
    .tools-container {
        display: none !important;
    }
    .products-container {
        max-width: 100%; /* Full width on mobile */
        width: 100%;
        margin: 0 auto; /* Center the container */
        padding: 20px;
        box-shadow: none; /* Remove shadow on mobile */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
    }

    #productSelectionContainer {
        width: 100%; /* Full width */
        text-align: center; /* Center the button */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .designStudioDescription {
        display: none;
    }
    #fullsize_version_message {
        display: block;
    }
    #carousel-add-btn {
        display: inline;
    }

    #capture-btn-original {
        display: none;
    }
    #capture-btn3 {
        display: block;
    }
}

/* Optional: Explicitly define display for wider screens if needed for clarity */
@media (min-width: 1080px) {
    .design-container {
        display: flex; /* Reiterate display flex for clarity and maintenance */
    }
    #fullsize_version_message {
        display: none;
    }
    #carousel-add-btn {
        display: none;
    }
    #capture-btn-original {
        display: block;
    }
    #capture-btn3 {
        display: none;
    }
    /*#capture-btn-message {
        display: block;
    }*/
}

#capture-btn2 {
    margin-top: 15px;
}
#view-cart-btn {
    margin-bottom: 35px;
}

/* TOOLS CONTAINER in design_studio and dashboard */
.products-container {
    flex: 1 1 35%; /* Maintain smaller space for tools */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content (catalog button) */
    /*padding-right: 20px; /* Space between canvas and tools */
    max-width: 350px; /* Max width for tools */
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
}

/* Canvas container styling */
.canvas-container {
    flex: 1 1 50%; /* Adjusted proportions to give more space to canvas */
    position: relative; /* Relative positioning for fine control */
    display: flex;
    align-items: center; /* Vertically center the canvas */
    justify-content: center; /* Horizontally center the canvas */
}

#c {
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
}

/* Tools container styling */
.tools-container {
    flex: 1 1 35%; /* Match products-container proportions */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the tools */
    max-width: 350px;
    margin-left: 10px;
    margin-right: 10px;
}

.tools-container .tool input[type="range"] {
    width: 90%;
    background: #ddd;
    height: 15px;
    border-radius: 5px;
}

.tools-container .tool input[type="button"],
.tools-container .tool button {
    /*background-color: #f0f0f0;*/
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #09b1ac;
    color: white;
    width: 90%;
    transition: all 0.2s ease-out;
}

.tools-container .tool button:active {
    box-shadow: 0 1px #2980b9; /* Smaller shadow to simulate being pressed down */
    transform: translateY(3px); /* Slightly move the button down */
    transition: all 0.1s ease-in; /* Quick transition to simulate the press */
}

.tools-container .tool button:focus:not(:active) {
    animation: bounce-back 0.3s ease-out forwards; /* Animation to bounce the button back */
}

input:active {
    transform: translateY(1px); /* Slightly move the button down */
    transition: all 0.1s ease-in; /* Quick transition to simulate the press */
}

input:focus:not(:active) {
    animation: bounce-back 0.1s ease-out forwards; /* Animation to bounce the button back */
}

select:active {
    transform: translateY(1px); /* Slightly move the button down */
    transition: all 0.1s ease-in; /* Quick transition to simulate the press */
}

select:focus:not(:active) {
    animation: bounce-back 0.1s ease-out forwards; /* Animation to bounce the button back */
}


@keyframes bounce-back {
    0% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Basic styling for the tools container */
#tools-container {
    align-items: center;
    flex: 1 1 20%; /* Maintain smaller space for tools */
    position: fixed;       /* Fix its position to the right of the screen */
    right: 0;              /* Align to the right */
    top: 0;                /* Align to the top */
    background-color: #2c3e50; /* Dark background for the tools menu */
    color: #ecf0f1;       /* Light color for text for contrast */
    padding: 10px;        /* Padding around the container */
    box-shadow: -4px 0 6px rgba(0,0,0,0.1); /* Shadow to lift the panel off the page */
    display: flex;        /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center;  /* Center-align the items */
    gap: 10px;            /* Space between items */
    overflow-y: auto;     /* Allow scrolling for overflow */
    z-index: 1000;        /* Ensure it's above other content */
}

/* Styling for individual tool sections within the container */
.tool {
    padding-top: 5px;
    width: 100%;          /* Full width to align nicely */
    display: flex;        /* Use flexbox for alignment */
    flex-direction: column; /* Stack inputs and labels vertically */
    align-items: center;  /* Center-align the content */
    box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    margin-left: 10px;
    margin-right: 10px;
}

#text-color-picker, #text-font-size, #bg-color-picker {
    width: 90%;
    margin-bottom: 10px;
}

.toolLabel {
    text-transform: uppercase; /* Uppercase for a touch of design */
    padding-top: 10px;
    width: 100%;
    font-size: 12px; 
    color: black;
}

.toolButton, #font-family{
    margin-bottom: 10px;
    width: 100%;
    height: 50px;
}

.toolButton {
    width: 100%;
    height: 50px;
}
.toolButton:hover {
    background-color: #2980b9; /* Darker blue on hover for feedback */
}

/* Adjust the font family dropdown specifically */
select#font-family {
    width: 90%;           /* Consistent width with other inputs */
    box-shadow: 5px 5px 5px #09b1ac;
}

/* Optional: custom styles for specific buttons or inputs */
#bg-color-picker, #text-color-picker, #text-font-size {
    cursor: pointer;      /* Indicates these are clickable */
}

.gallery-container {

    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* IMAGE CAROUSELS */
#rightCarousel {
    position: relative; 
    max-width: 420px;
    min-width: 420px;
    min-height: 300px;
    max-height: 300px;
    margin: auto; 
    display: flex; 
    align-items: center;
    margin-bottom: 20px;
}

#leftCarousel {
    position: relative; 
    max-width: 420px;
    min-width: 420px;
    min-height: 300px;
    max-height: 300px;
    margin: auto; 
    display: flex; 
    align-items: center;
    margin-bottom: 20px;
}

.carouselImage {
    min-height: 300px;
    max-height: 300px;
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    margin: auto;
}

.galleryCols {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 5px;
    margin-right: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.9);
}

/* Smallest size screens */
@media (max-width: 600px) {

    #rightCarousel {
        position: relative;
        max-width: 320px;
        min-width: 320px;
        min-height: 300px;
        max-height: 300px;
        margin: auto;
        display: flex;
        align-items: center;
    }
    #leftCarousel {
        position: relative;
        max-width: 320px;
        min-width: 320px;
        min-height: 300px;
        max-height: 300px;
        margin: auto;
        display: flex;
        align-items: center;
    }
    
    #deleteCarouselImageDiv {
        margin-bottom: 20px;
    }

    .yourImagesHeader {
        padding-top: 20px;
    }

    .carouselImage {
        min-height: 200px;
        max-height: 200px;
        min-width: 200px;
        max-width: 200px;
        flex-shrink: 0;
        margin: auto;
    }

    .galleryCols {
        padding-top: 20px;
        padding-bottom: 20px;
        margin: auto;
        max-width: 350px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.9); /* Subtle shadow for a 'raised' effect */
    }

}

.carousel-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.carousel-control-prev, .carousel-control-next {
    font-size: 28px; /* Size of the arrows */
    color: black; /* Color of the arrows */
    cursor: pointer;
    padding: 10px; /* Padding for larger clickable area */
    text-decoration: none; /* Remove any underline */
    z-index: 10;
}

#rightCarousel .carousel-control-prev {
    margin-right: auto;
    color: black;
}

#rightCarousel  .carousel-control-next {
    margin-left: auto;
    color: black;
}

#leftCarousel .carousel-control-prev {
    margin-right: auto;
    color: black;
}

#leftCarousel  .carousel-control-next {
    margin-left: auto;
    color: black;
}

.canvas-container-main {
    display: block;
    justify-content: center;
    align-items: center;
}

.shirt-selection-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-wrap: wrap;
    width: 300px;
    margin: auto;
    margin-top: 0px;
}

.shirt-option {
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    padding: 10px;
    flex: 0 1 auto;
    opacity: 0.5;
}

.blank_display_shirt {
    width: 280px;
    height: 300px;
}

.shirt-option img {
    display: block;
    transition: transform 0.3s ease;
}

.shirt-option:focus, .shirt-option:hover {
    outline: none;
    background-color: #09b1ac;
    transform: scale(1.02);
}

.shirt-option.selected {
    opacity: 1.0;
}

.shirt-canvas-overlay-centered {
    position: absolute;
    top: 70px; /* Centers the overlay vertically on the shirt */
    left: 110px; /* Centers the overlay horizontally on the shirt */
    width: 80px; /* Specific width for overlay */
    height: 80px; /* Specific height for overlay */
    pointer-events: none; /* Allows clicking through the overlay to the button below */
    border: none;
}

.shirt-canvas-overlay-whole {
    position: absolute;
    top: 70px; /* Centers the overlay vertically on the shirt */
    left: 90px; /* Centers the overlay horizontally on the shirt */
    width: 120px; /* Specific width for overlay */
    height: 120px; /* Specific height for overlay */
    pointer-events: none; /* Allows clicking through the overlay to the button below */
    border: none;
}

#designStudioDescription {
    margin: 30px;
    font-size: large;
}

#h3_money_matters {
    text-align: center;
}

/* COLORS */
/* Black text on colored background */
#apple, #butter, #fuschia, #heatherGrey, #lightBlue, #lightPink, #pink, #babyBlue, #hotPink, #kelly, #orange, #arcticWhite, #fireRed, #kellyGreen, #skyBlue, #sunYellow, #ash, #azalea, #cardinal, #cornsilk, #daisy, #irishGreen, #purple, #silver, #sportGrey, #cottonPink, #ochre, #airforceBlue, #orangeCrush, #limeGreen, #hawaiianBlue, #sapphireBlue, #candyPink, #sunsetOrange, #ashHeather, #neonPink, #safetyPink, #mushroom, #brightBlue, #desertDust, #brightRed, #keyLime, #mandarinOrange, #greenApple, #charityPink, #stormGrey, #kiwi, #heliconia, #lime, #camel, #softCream, #creamHeatherGrey, #khaki, #midHeatherGrey, #darkHeatherIndigo, #heatherMint, #heatherIceBlue, #softPink, #freshGreen, #goldenYellow, #caribbeanBlue, #sage, #midHeatherBlue, #lavaGrey, #oatmealHeather, #turquoiseSurf, #canyonPink, #spectraYellow, #oceanDepth, #jade, #sand, #slate, #anthracite {
    color: #000000;
}

/* White text on colored background */
#asphalt, #black, #charcoal, #charcoalHeather, #denimHeather, #navy, #red, #royalBlue, #bottleGreen, #burgundy, #jetBlack, #oxfordNavy, #royal, #darkChocolate, #darkHeather, #darkHeatherGrey, #darkGrey, #darkGreyHeather, #militaryGreen, #britishKhaki, #majorelleBlue, #newFrenchNavy, #plum, #athleticNavy, #lake, #independenceRed, #cityGreen, #sapphire, #cherryRed, #moss, #varsityGreen, #forest, #teamPurple, #glazedGreen, #stargazer, #frenchNavy, #brown, #chocolate {
    color: #ffffff;
}

/* Borders with black text */
#white, #arcticWhite, #vintageWhite, #offWhite {
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    color: #000000;
}

/* Unique background colors */
#apple {background-color: #3bae48;}
#asphalt {background-color: #575956;}
#black {background-color: #101010;}
#butter {background-color: #fde8b0;}
#charcoal {background-color: #4d4b4c;}
#fuschia {background-color: #e71865;}
#heatherGrey {background-color: #8e8e92;}
#lightBlue {background-color: #b1d1ed;}
#lightPink {background-color: #fbc3d2;}
#navy {background-color: #121a2c;}
#pink {background-color: #f3bfc4;}
#red {background-color: #ce1d32;}
#royalBlue {background-color: #2a54a2;}
#white {background-color: #f5f4f8;}
#babyBlue {background-color: #a5c1da;}
#hotPink {background-color: #d1006c;}
#kelly {background-color: #02765a;}
#orange {background-color: #fa6d28;}
#arcticWhite {background-color: #f8f8fa;}
#bottleGreen {background-color: #245a3a;}
#burgundy {background-color: #5b0d3f;}
#fireRed {background-color: #bf0c19;}
#jetBlack {background-color: #111111;}
#kellyGreen {background-color: #02775a;}
#oxfordNavy {background-color: #20283a;}
#royal {background-color: #1c448e;}
#skyBlue {background-color: #afd6ff;}
#sunYellow {background-color: #fdc929;}
#ash {background-color: #dadada;}
#azalea {background-color: #fd79b3;}
#cardinal {background-color: #a00b34;}
#cornsilk {background-color: #eeeb70;}
#daisy {background-color: #fcd75f;}
#darkChocolate {background-color: #221e1b;}
#darkHeather {background-color: #3f424b;}
#irishGreen {background-color: #26a659;}
#maroon {background-color: #452127;}
#purple {background-color: #5d426d;}
#silver {background-color: #d2d1cd;}
#sportGrey {background-color: #a6a4aa;}
#darkHeatherGrey {background-color: #3d3b3c;}
#darkGrey {background-color: #272729;}
#darkGreyHeather {background-color: #454344;}
#gold {background-color: #fdaf2c;}
#militaryGreen {background-color: #515640;}
#natural {background-color: #fdf4de;}
#trueRoyal {background-color: #1c448f;}
#vintageRoyal {background-color: #1d448f;}
#denimHeather {background-color: #4c5366;}
#athleticHeather {background-color: #a6a4aa;}
#charcoalHeather {background-color: #464445;}
#army {background-color: #534424;}
#brown {background-color: #46332a;}
#chocolate {background-color: #302b28;}
#heatherPurple {background-color: #665582;}
#jade {background-color: #195d5c;}
#sand {background-color: #ddcfb7;}
#turquoiseSurf {background-color: #48d3e8;}
#stargazer {background-color: #275865;}
#oceanDepth {background-color: #005e70;}
#canyonPink {background-color: #f0ada8;}
#spectraYellow {background-color: #fab500;}
#berry {background-color: #7f2952;}
#sage {background-color: #c1ba9c;}
#caribbeanBlue {background-color: #add6d3;}
#anthracite {background-color: #4f5354;}
#frenchNavy {background-color: #1d2f3c;}
#midHeatherBlue {background-color: #7d9dc1;}
#lavaGrey {background-color: #8c8b98;}
#cottonPink {background-color: #f7c0cf;}
#vintageWhite {background-color: #f2ebe6;}
#ochre {background-color: #cd9a38;}
#britishKhaki {background-color: #625a3f;}
#majorelleBlue {background-color: #004d88;}
#airforceBlue {background-color: #4f758b;}
#redHotChilli {background-color: #7f0019;}
#orangeCrush {background-color: #e16c06;}
#limeGreen {background-color: #79c753;}
#hawaiianBlue {background-color: #00a9e0;}
#sapphireBlue {background-color: #006cb7;}
#newFrenchNavy {background-color: #20284e;}
#plum {background-color: #612c51;}
#candyPink {background-color: e782a9;}
#sunsetOrange {background-color: #e03c31;}
#ashHeather {background-color: #e8edee;}
#athleticNavy {background-color: #1b2849;}
#putty{background-color: #dcd0c0;}
#neonPink{background-color: #fd64a9;}
#slate {background-color: #5b7a93;}
#safetyPink {background-color: #fe63aa;}
#mushroom {background-color: #d6956c;}
#indiaInkGrey {background-color: #434f5b;}
#brightBlue {background-color: #567baa;}
#desertDust {background-color: #d1bca3;}
#brightRed {background-color: #e41f17;}
#glazedGreen {background-color: #214847;}
#midHeatherGreen {background-color: #87b1a8;}
#keyLime {background-color: #b7dd79;}
#mandarinOrange {background-color: #ff8f1c;}
#greenApple {background-color: #509e2f;}
#charityPink {background-color: #f8a3bc;}
#stormGrey {background-color: #898d8d;}
#lake {background-color: #4f758b;}
#independenceRed {background-color: #862633;}
#cityGreen {background-color: #3f4729;}
#kiwi {background-color: #90a94c;}
#sapphire {background-color: #0079b8;}
#heliconia {background-color: #db3e79;}
#cherryRed {background-color: #ac2b37;}
#lime {background-color: #92bf55;}
#moss {background-color: #00594c;}
#camel {background-color: #ac8669;}
#softCream {background-color: #d6bea6;}
#creamHeatherGrey {background-color: #dedede;}
#offWhite {background-color: #f5f1ed;}
#varsityGreen {background-color: #00744a;}
#khaki {background-color: #57564a;}
#midHeatherGrey {background-color: #898888;}
#darkHeatherIndigo {background-color: #5b6770;}
#heatherMint {background-color: #a6dbbf;}
#heatherIceBlue {background-color: #dbebeb;}
#teamPurple {background-color: #4d2d80;}
#softPink {background-color: #fae5ec;}
#forest {background-color: #214c30;}
#whiteBlue {background-color: #2865a3;}
#whiteEvergreen {background-color: #3c553c;}
#whiteNeonpink {background-color: #ed6995;}
#oatmealHeather {background-color: #e7e4de;}
#freshGreen {background-color: #009841;}
#goldenYellow {background-color: #ffd700;}

#ResetPasswordForm {
    max-width: 300px;
    width: 100%;
}

#loginForm {
    margin: 0;
}

#createItemForm {
    width: 90%;
    justify-content: center;
    align-items: center;
}
/* ========================================
   PRODUCT CATALOG MODAL STYLES
   ======================================== */

/* Modal Overlay */
.catalog-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.catalog-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10001;
}

/* Modal Content */
.catalog-modal-content {
    position: relative;
    background-color: white;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    z-index: 10002;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Modal Header */
.catalog-modal-header {
    padding: 1.5rem;
    border-bottom: 2px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #037cc7 0%, #1F5E88 100%);
    border-radius: 12px 12px 0 0;
}

.catalog-modal-header h2 {
    margin: 0;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Modal Body */
.catalog-modal-body {
    padding: 2rem;
    flex: 1;
    overflow-y: auto;
    min-height: 300px;
}

/* Modal Footer */
.catalog-modal-footer {
    padding: 1.5rem;
    border-top: 2px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Modal Footer Buttons */
.catalog-modal-footer button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#catalogBackBtn {
    background-color: #f5f5f5;
    color: #333;
    border: 2px solid #e0e0e0;
}

#catalogBackBtn:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

#catalogContinueBtn {
    background: linear-gradient(135deg, #037cc7 0%, #1F5E88 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(3, 124, 199, 0.3);
}

#catalogContinueBtn:hover {
    box-shadow: 0 4px 12px rgba(3, 124, 199, 0.4);
    filter: brightness(1.05);
}

#catalogAddToCartBtn {
    background: linear-gradient(135deg, #28a745 0%, #20833a 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

#catalogAddToCartBtn:hover {
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    filter: brightness(1.05);
}

/* Improved Close Button */
.catalog-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 1.75rem;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    line-height: 1;
    font-weight: 300;
}

.catalog-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

/* Loading State */
.catalog-loading {
    text-align: center;
    padding: 3rem;
    font-size: 1.2rem;
    color: #666;
}

.catalog-loading::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Error State */
.catalog-error {
    text-align: center;
    padding: 3rem;
    color: #d32f2f;
    font-size: 1.1rem;
}

/* Grid Layout for Categories/Product Types */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

/* Card for each item */
.catalog-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-align: center;
    min-height: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
}

.catalog-card:hover {
    border-color: #037cc7;
    box-shadow: 0 4px 12px rgba(3, 124, 199, 0.2);
    background-color: #f8fbff;
}

.catalog-card.selected {
    border-color: #037cc7;
    background-color: #e3f2fd;
    box-shadow: 0 0 0 3px rgba(3, 124, 199, 0.2);
}

.catalog-card-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.catalog-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1F5E88;
}

/* Variant Selection View */
.catalog-variant-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

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

.catalog-product-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 2rem;
    min-height: 400px;
}

.catalog-product-preview img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.catalog-attributes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.catalog-attribute-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.catalog-attribute-label {
    font-weight: 600;
    color: #1F5E88;
    font-size: 1.1rem;
}

.catalog-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.catalog-option-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.catalog-option-btn:hover {
    border-color: #037cc7;
    background-color: #f0f8ff;
}

.catalog-option-btn.selected {
    border-color: #037cc7;
    background-color: #037cc7;
    color: white;
    font-weight: 600;
}

/* Finalize View */
.catalog-finalize-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.catalog-product-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f5f5f5;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .catalog-product-summary {
        grid-template-columns: 1fr;
    }
}

.catalog-product-summary img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
}

.catalog-summary-details h3 {
    margin: 0 0 1rem 0;
    color: #1F5E88;
}

.catalog-summary-details p {
    margin: 0.5rem 0;
    color: #666;
}

.catalog-finalize-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.catalog-finalize-field label {
    font-weight: 600;
    color: #1F5E88;
}

.catalog-finalize-field select {
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
}

.catalog-finalize-field select:focus {
    outline: none;
    border-color: #037cc7;
}

/* Country Dropdown Container */
.country-dropdown-container {
    margin: 1rem 0;
}

.country-dropdown-container select {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    background-color: white;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.country-dropdown-container select:focus {
    outline: none;
    border-color: #037cc7;
    box-shadow: none;
}

.country-dropdown-container select:hover {
    border-color: #999;
}

/* Select Product Button */
#openCatalogBtn {
    background: linear-gradient(135deg, #037cc7 0%, #1F5E88 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: 600;
}

#openCatalogBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(3, 124, 199, 0.3);
}

#openCatalogBtn:active {
    transform: translateY(0);
}

/* ============================================================
   NEW PRODUCT SELECTION MODAL STYLES
   ============================================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Content */
.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-large {
    max-width: 1000px;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header */
.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-radius: 12px 12px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #333;
}

/* Modal Body */
.modal-body {
    padding: 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

/* Breadcrumb Navigation */
.breadcrumb {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #666;
}

.breadcrumb-item {
    cursor: pointer;
    transition: color 0.2s;
}

.breadcrumb-item:hover {
    color: #037cc7;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #999;
}

/* Country Grid */
.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.country-button {
    padding: 1rem;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
}

.country-button:hover {
    background: #037cc7;
    color: white;
    border-color: #037cc7;
    box-shadow: 0 4px 12px rgba(3, 124, 199, 0.2);
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.category-button {
    padding: 1.25rem;
    min-height: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-button:hover {
    background: linear-gradient(135deg, #037cc7 0%, #0261a0 100%);
    color: white;
    border-color: #037cc7;
    box-shadow: 0 6px 20px rgba(3, 124, 199, 0.25);
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.product-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}

.product-card:hover {
    border-color: #037cc7;
    box-shadow: 0 8px 25px rgba(3, 124, 199, 0.2);
    background-color: #f8fbff;
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #f5f5f5;
}

.product-card h4 {
    padding: 1rem 1rem 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.product-card p {
    padding: 0 1rem 1rem;
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

/* Product Detail View */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.product-image img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.product-info h3 {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    color: #333;
}

.product-info p {
    margin: 0 0 1.5rem;
    color: #666;
    line-height: 1.6;
}

/* Attribute Selection */
.attribute-selection {
    margin-bottom: 2rem;
}

.attribute-group {
    margin-bottom: 1.5rem;
}

.attribute-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.attribute-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s;
    background: white;
}

.attribute-select:hover {
    border-color: #037cc7;
}

.attribute-select:focus {
    outline: none;
    border-color: #037cc7;
    box-shadow: 0 0 0 3px rgba(3, 124, 199, 0.1);
}

/* Buttons */
.back-button {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #666;
    transition: all 0.2s;
}

.back-button:hover {
    background: #e9ecef;
    color: #333;
}



/* Responsive Design */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .modal-body {
        padding: 1rem;
    }

    .country-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .modal-header h2 {
        font-size: 1.2rem;
    }
}

/* ========================================
   LIGHTSPEED PRODUCT SELECTION STYLES
   Color buttons, compatibility filtering
   ======================================== */

/* Color Button Group */
.color-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.color-button {
    width: 40px;
    height: 40px;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.color-button:hover:not(.disabled) {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.color-button.selected {
    border-color: #037cc7;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #037cc7;
    transform: scale(1.05);
}

.color-button.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    position: relative;
}

.color-button.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 120%;
    background-color: rgba(255, 0, 0, 0.7);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Dimension info text */
.dimension-info {
    margin: 0.5rem 0;
    padding: 0.75rem;
    background-color: #f0f8ff;
    border-left: 4px solid #037cc7;
    border-radius: 4px;
    font-weight: 500;
    color: #1F5E88;
}

/* No options text */
.no-options-text {
    padding: 1rem;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* Dropdown disabled options */
.attribute-select option:disabled {
    color: #ccc;
    font-style: italic;
}


/* Attribute group spacing */
.attribute-group {
    margin-bottom: 1.25rem;
}

.attribute-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1F5E88;
    font-size: 0.95rem;
}

/* Responsive adjustments for color buttons */
@media (max-width: 768px) {
    .color-button {
        width: 36px;
        height: 36px;
    }

    .color-button-group {
        gap: 0.4rem;
    }
}






















/* INTRO SECTION */
.aip-intro-section {
    max-width: 800px;
    margin: 0 auto 70px;
    padding: 0 20px;
}

.aip-intro-card {
    background: linear-gradient(135deg, #09b1ac, #037cc7);
    padding: 50px 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(9, 177, 172, 0.2);
}

.aip-intro-headline {
    font-size: 2.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
}

.aip-intro-text {
    font-size: 1.15rem;
    color: white;
    margin-bottom: 30px;
    line-height: 1.7;
    opacity: 0.95;
}

.aip-btn-start {
    display: inline-block;
    background: white;
    color: #037cc7;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.aip-btn-start:hover {
    background: #a8fbf8;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* HOW IT WORKS */
.aip-how-section {
    max-width: 1000px;
    margin: 0 auto 70px;
    padding: 0 20px;
}

.aip-how-title {
    text-align: center;
    font-size: 2.2rem;
    color: #0e599d;
    margin-bottom: 40px;
    font-weight: 700;
}

.aip-steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.aip-step-box {
    background: #f7fafc;
    padding: 30px 25px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #a8fbf8;
    transition: all 0.3s ease;
}

.aip-step-box:hover {
    border-color: #09b1ac;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(9, 177, 172, 0.15);
}

.aip-step-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #09b1ac;
    margin-bottom: 10px;
}

.aip-step-title {
    font-size: 1.4rem;
    color: #007BA7;
    margin-bottom: 10px;
    font-weight: 600;
}

.aip-step-text {
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
}

/* GALLERY STRIP */
.aip-gallery-strip {
    margin-bottom: 60px;
    text-align: center;
    padding: 0 20px;
}

.aip-gallery-label {
    font-size: 0.9rem;
    color: #718096;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.aip-gallery-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.aip-thumb-box {
    width: 120px;
}

.aip-thumb-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.aip-thumb-img:hover {
    transform: scale(1.05);
}

/* FINAL CTA */
.aip-final-block {
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 60px;
}

.aip-final-title {
    font-size: 2rem;
    color: #0e599d;
    margin-bottom: 25px;
    font-weight: 700;
}

.aip-btn-action {
    display: inline-block;
    background: linear-gradient(135deg, #09b1ac, #037cc7);
    color: white;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(9, 177, 172, 0.2);
}

.aip-btn-action:hover {
    background: linear-gradient(135deg, #037cc7, #0e599d);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(9, 177, 172, 0.3);
}

/* TRANSITION SECTION */
.aip-transition-section {
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 40px 30px;
    background: #f7fafc;
    border-radius: 12px;
    text-align: center;
    border-left: 4px solid #09b1ac;
}

.aip-transition-title {
    font-size: 2rem;
    color: #0e599d;
    margin-bottom: 15px;
    font-weight: 700;
}

.aip-transition-text {
    font-size: 1.1rem;
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

/* CREATOR SECTION */
.aip-creator-block {
    background: linear-gradient(135deg, #1F5E88, #0e599d);
    color: white;
    padding: 50px 30px;
    border-radius: 15px;
    margin-bottom: 60px;
    text-align: center;
}

.aip-creator-title {
    font-size: 2.2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.aip-creator-intro {
    font-size: 1.1rem;
    margin-bottom: 40px;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.aip-perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    max-width: 900px;
    margin: 0 auto 40px;
}

.aip-perk-card {
    background: rgba(255,255,255,0.1);
    padding: 25px 20px;
    border-radius: 10px;
    transition: background 0.3s ease;
}

.aip-perk-card:hover {
    background: rgba(255,255,255,0.15);
}

.aip-perk-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.aip-perk-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.aip-perk-text {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.5;
    margin: 0;
}

.aip-btn-creator {
    display: inline-block;
    background: white;
    color: #0e599d;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aip-btn-creator:hover {
    background: #a8fbf8;
    transform: translateY(-2px);
}

/* STRIPE SECTION */
.aip-stripe-section {
    background-color: #a8fbf8;
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 60px;
    border-radius: 8px;
}

.aip-stripe-text {
    font-size: 0.95rem;
    margin: 0 0 10px 0;
    color: #718096;
}

.aip-stripe-logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: #6772E5;
    letter-spacing: 1px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .aip-intro-headline {
        font-size: 2rem;
    }
    
    .aip-intro-card {
        padding: 40px 25px;
    }
    
    .aip-how-title {
        font-size: 1.8rem;
    }
    
    .aip-steps-container {
        grid-template-columns: 1fr;
    }
    
    .aip-transition-title {
        font-size: 1.6rem;
    }
    
    .aip-creator-title {
        font-size: 1.8rem;
    }
    
    .aip-perks-grid {
        grid-template-columns: 1fr;
    }
    
    .aip-thumb-box {
        width: 100px;
    }
}





.aip-store-link-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    max-width: 100%;
}

.aip-link-code {
    background: #f7fafc;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: monospace;
    color: #037cc7;
    font-size: 14px;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

.aip-copy-btn {
    background: white;
    border: 1px solid #cbd5e0;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    min-width: auto;
    width: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

.aip-copy-btn img {
    width: 16px;
    height: 16px;
    display: block;
}







#submitBtnMoney {
    margin-top: 20px;
}


/* ===========================
   LEAF BUTTONS (NO SHRINK)
   =========================== */

/* Base state */
button.action-button-leaf {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: none !important;          /* overrides global hover max-width:80% */

  margin: 20px 0 !important;           /* overrides margin:auto */
  padding: 10px 20px !important;

  background-color: #007bff !important;
  color: #ffffff !important;

  border: none !important;
  border-radius: 4px !important;

  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;

  cursor: pointer !important;

  /* Don't animate size/layout changes */
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease !important;

  /* Prevent global styles from doing weird effects */
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

/* Hover / focus / active — LOCK geometry so it cannot shrink */
button.action-button-leaf:hover,
button.action-button-leaf:focus,
button.action-button-leaf:active,
button.action-button-leaf:focus-visible {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: none !important;          /* kills the 80% cap */
  margin: 20px 0 !important;           /* kills margin:auto */
  padding: 10px 20px !important;

  border: none !important;

  background-color: #006fe6 !important;
  color: #ffffff !important;

  /* Kill global hover effects */
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
  outline: none !important;
}

/* Disabled state */
button.action-button-leaf:disabled,
button.action-button-leaf[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;

  width: 100% !important;
  max-width: none !important;
  margin: 20px 0 !important;

  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

button.action-button-leaf:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}

button.action-button-leaf:active {
  transform: translateY(0px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.20) !important;
}



/* Your existing price display styles extracted too */
.price-display {
    display: none;
    margin: 20px 0;
    font-size: 1.2em;
    font-weight: bold;
    padding: 1rem;
    background-color: #f0f8ff;
    border-radius: 8px;
    text-align: center;
    border: 2px solid #037cc7;
}

.price-display #priceValue {
    color: #037cc7;
    font-size: 1.5em;
}