/* Custom styles for T-Shirt Design Tool */

/* Import Google Fonts for canvas text rendering */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@400;700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Dancing+Script:wght@400;700&family=Pacifico&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Bebas+Neue&family=Anton&family=Lobster&family=Great+Vibes&family=Righteous&display=swap');

/* Font face declarations for Microsoft fonts (fallbacks) */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: url('/static/images/background-sky.png') no-repeat center center fixed !important;
    background-size: cover !important;
    min-height: 100vh;
}

/* Background-Aware Color Theme - Azure Blue on Dark, Navy on Light */

/* Dark background elements - use azure soft blue */
body.bg-dark {
    color: #87CEEB !important; /* azure soft blue for text on dark backgrounds */
}

.bg-dark, .navbar-dark, .bg-secondary, .bg-primary {
    color: #87CEEB !important; /* azure soft blue for text on dark backgrounds */
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.navbar-dark h1, .navbar-dark h2, .navbar-dark h3, .navbar-dark h4, .navbar-dark h5, .navbar-dark h6 {
    color: #87CEEB !important; /* azure soft blue for headings on dark backgrounds */
}

.bg-dark .fas, .bg-dark .fa-solid, .bg-dark .fa, .bg-dark i[class*="fa-"],
.navbar-dark .fas, .navbar-dark .fa-solid, .navbar-dark .fa, .navbar-dark i[class*="fa-"] {
    color: #87CEEB !important; /* azure soft blue for icons on dark backgrounds */
}

.bg-dark .btn, .navbar-dark .btn {
    color: #87CEEB !important; /* azure soft blue for buttons on dark backgrounds */
}

/* Light background elements - use lighter navy blue */
.bg-light, .bg-white, .card, .accordion-item, .alert, .modal-content, .dropdown-menu, 
.table, .table-light, .form-control, .form-select, .list-group-item {
    color: #4a6fa5 !important; /* lighter navy blue for text on light backgrounds */
}

.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6,
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.accordion-item h1, .accordion-item h2, .accordion-item h3, .accordion-item h4, .accordion-item h5, .accordion-item h6 {
    color: #4a6fa5 !important; /* lighter navy blue for headings on light backgrounds */
}

.bg-light .fas, .bg-light .fa-solid, .bg-light .fa, .bg-light i[class*="fa-"],
.bg-white .fas, .bg-white .fa-solid, .bg-white .fa, .bg-white i[class*="fa-"],
.card .fas, .card .fa-solid, .card .fa, .card i[class*="fa-"],
.accordion-item .fas, .accordion-item .fa-solid, .accordion-item .fa, .accordion-item i[class*="fa-"],
.alert .fas, .alert .fa-solid, .alert .fa, .alert i[class*="fa-"] {
    color: #4a6fa5 !important; /* lighter navy blue for icons on light backgrounds */
}

.bg-light .btn, .bg-white .btn, .card .btn, .accordion-item .btn, .alert .btn {
    color: #4a6fa5 !important; /* lighter navy blue for buttons on light backgrounds */
}

/* Navigation buttons - active state with white background */
.navbar .btn-light {
    background-color: white !important; /* white background */
    background-image: none !important; /* remove any gradient */
    background: white !important; /* solid background override */
    border-color: white !important;
    color: #4a6fa5 !important; /* navy blue text for contrast on white */
    box-shadow: none !important; /* remove any shadow effects */
}

.navbar .btn-light .fas, .navbar .btn-light .fa-solid, .navbar .btn-light .fa, .navbar .btn-light i[class*="fa-"] {
    color: #4a6fa5 !important; /* navy blue icons to match other icons */
}

.navbar .btn-light:hover {
    background-color: white !important; /* maintain white background on hover */
    background-image: none !important; /* remove any gradient on hover */
    background: white !important; /* solid background override on hover */
    border-color: white !important;
    color: #4a6fa5 !important; /* maintain navy blue text on hover */
    box-shadow: none !important; /* remove any shadow effects on hover */
}

/* Navigation buttons hover - 15% opaque white highlight */
.navbar .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-color: white !important;
}

.navbar .btn-outline-light:hover .fas, .navbar .btn-outline-light:hover .fa-solid, .navbar .btn-outline-light:hover .fa, .navbar .btn-outline-light:hover i[class*="fa-"] {
    color: white !important;
}

.navbar .btn-light:hover .fas, .navbar .btn-light:hover .fa-solid, .navbar .btn-light:hover .fa, .navbar .btn-light:hover i[class*="fa-"] {
    color: #4a6fa5 !important; /* maintain navy blue icons on hover */
}

.navbar .btn-light:focus, .navbar .btn-light:active {
    background-color: white !important; /* white background on focus/active */
    background-image: none !important; /* remove any gradient on focus/active */
    background: white !important; /* solid background override on focus/active */
    border-color: white !important;
    color: #4a6fa5 !important; /* navy blue text on focus/active */
    box-shadow: none !important; /* remove any shadow effects on focus/active */
}

/* Force navy blue text for active buttons in all states - highest specificity */
html body .navbar .btn-light,
html body .navbar .btn-light:hover,
html body .navbar .btn-light:focus,
html body .navbar .btn-light:active,
html body .navbar .btn-light:visited,
html body .navbar .btn-light.active {
    color: #4a6fa5 !important;
}

/* Global fallbacks for elements not in specific backgrounds */
.text-light {
    color: white !important; /* solid white for text-light class */
}

.text-white {
    color: white !important; /* solid white for text-white class */
}

.text-dark {
    color: #4a6fa5 !important; /* lighter navy blue for text-dark class */
}

/* General headings default to azure on dark body */
h1, h2, h3, h4, h5, h6 {
    color: white !important; /* solid white for general headings */
}

/* General icons default to solid white on dark body */
.fas, .fa-solid, .fa, i[class*="fa-"] {
    color: white !important; /* solid white for general icons */
}

/* Bootstrap components */
.lead {
    color: inherit !important; /* inherit from parent background context */
}

.card-text, .card-body, .card-title, .card-subtitle {
    color: #4a6fa5 !important; /* lighter navy blue for card text (cards are light) */
}

/* Additional text elements on light backgrounds */
p, span, div, li, td, th, label, small {
    color: inherit !important; /* inherit from parent context */
}

/* Specific overrides for light background containers */
.bg-light p, .bg-light span, .bg-light div, .bg-light li, .bg-light td, .bg-light th, .bg-light label, .bg-light small,
.bg-white p, .bg-white span, .bg-white div, .bg-white li, .bg-white td, .bg-white th, .bg-white label, .bg-white small,
.card p, .card span, .card div, .card li, .card td, .card th, .card label, .card small,
.accordion-item p, .accordion-item span, .accordion-item div, .accordion-item li, .accordion-item td, .accordion-item th, .accordion-item label, .accordion-item small,
.alert p, .alert span, .alert div, .alert li, .alert td, .alert th, .alert label, .alert small {
    color: #4a6fa5 !important; /* lighter navy blue for all text elements on light backgrounds */
}

/* Button styles */
.btn {
    color: inherit !important; /* inherit from parent background context */
}

.btn-outline-light {
    color: white !important; /* solid white for outline buttons */
    border-color: white !important;
}

/* Fixed navbar button sizes - override Bootstrap responsive behavior */
.navbar .btn,
.navbar a.btn {
    font-size: 1.1rem !important;
    padding: 0.5rem 0.75rem !important;
    line-height: 1.5 !important;
}

/* Prevent any responsive scaling on navbar buttons */
@media (max-width: 576px), (max-width: 768px), (max-width: 992px), (max-width: 1200px), (max-width: 1400px) {
    .navbar .btn,
    .navbar a.btn {
        font-size: 1.1rem !important;
        padding: 0.5rem 0.75rem !important;
        line-height: 1.5 !important;
    }
    
    .navbar .btn i,
    .navbar .btn .fas,
    .navbar .btn .fa-solid,
    .navbar .btn .fa,
    .navbar .btn [class*="fa-"] {
        font-size: 1.1rem !important;
    }
}

/* General outline-light buttons - but not navbar buttons */
html body .btn-outline-light:hover:not(.navbar .btn-outline-light) {
    color: #4682B4 !important; /* stormy sky blue text on hover */
    background-color: transparent !important; /* keep transparent background */
    border-color: #4682B4 !important; /* stormy sky blue outline on hover */
}

html body .btn-outline-light:hover:not(.navbar .btn-outline-light) .fas, 
html body .btn-outline-light:hover:not(.navbar .btn-outline-light) .fa-solid, 
html body .btn-outline-light:hover:not(.navbar .btn-outline-light) .fa, 
html body .btn-outline-light:hover:not(.navbar .btn-outline-light) i[class*="fa-"] {
    color: #4682B4 !important; /* stormy sky blue icons on hover */
}

.btn-outline-primary {
    color: #4a6fa5 !important; /* soft navy blue for outline primary buttons */
    border-color: #4a6fa5 !important;
}

.btn-outline-primary:hover {
    color: white !important;
    background-color: #4a6fa5 !important;
    border-color: #4a6fa5 !important;
}

.btn-outline-primary:hover .fas, .btn-outline-primary:hover .fa-solid, .btn-outline-primary:hover .fa, .btn-outline-primary:hover i[class*="fa-"] {
    color: white !important; /* match text color on hover */
}

/* Submit Design button hover - white text and icons */
#submitBtn:hover {
    color: white !important;
    background-color: #4a6fa5 !important;
    border-color: #4a6fa5 !important;
}

#submitBtn:hover .fas, #submitBtn:hover .fa-solid, #submitBtn:hover .fa, #submitBtn:hover i[class*="fa-"] {
    color: white !important;
}

/* Design Tools Box - Comprehensive Button State Management */
/* All design tool buttons - normal state colors */
#addText, #toggleBold, #toggleItalic, #bringForward, #sendBackward, #deleteSelected, #clearCanvas, #transparentCanvas {
    color: inherit !important;
}

#addText .fas, #addText .fa-solid, #addText .fa, #addText i[class*="fa-"],
#toggleBold .fas, #toggleBold .fa-solid, #toggleBold .fa, #toggleBold i[class*="fa-"],
#toggleItalic .fas, #toggleItalic .fa-solid, #toggleItalic .fa, #toggleItalic i[class*="fa-"],
#bringForward .fas, #bringForward .fa-solid, #bringForward .fa, #bringForward i[class*="fa-"],
#sendBackward .fas, #sendBackward .fa-solid, #sendBackward .fa, #sendBackward i[class*="fa-"],
#deleteSelected .fas, #deleteSelected .fa-solid, #deleteSelected .fa, #deleteSelected i[class*="fa-"],
#clearCanvas .fas, #clearCanvas .fa-solid, #clearCanvas .fa, #clearCanvas i[class*="fa-"],
#transparentCanvas .fas, #transparentCanvas .fa-solid, #transparentCanvas .fa, #transparentCanvas i[class*="fa-"] {
    color: inherit !important;
}

/* Hover states - white text and icons */
#addText:hover, #toggleBold:hover, #toggleItalic:hover, #bringForward:hover, #sendBackward:hover, #deleteSelected:hover, #clearCanvas:hover, #transparentCanvas:hover {
    color: white !important;
}

#addText:hover .fas, #addText:hover .fa-solid, #addText:hover .fa, #addText:hover i[class*="fa-"],
#toggleBold:hover .fas, #toggleBold:hover .fa-solid, #toggleBold:hover .fa, #toggleBold:hover i[class*="fa-"],
#toggleItalic:hover .fas, #toggleItalic:hover .fa-solid, #toggleItalic:hover .fa, #toggleItalic:hover i[class*="fa-"],
#bringForward:hover .fas, #bringForward:hover .fa-solid, #bringForward:hover .fa, #bringForward:hover i[class*="fa-"],
#sendBackward:hover .fas, #sendBackward:hover .fa-solid, #sendBackward:hover .fa, #sendBackward:hover i[class*="fa-"],
#deleteSelected:hover .fas, #deleteSelected:hover .fa-solid, #deleteSelected:hover .fa, #deleteSelected:hover i[class*="fa-"],
#clearCanvas:hover .fas, #clearCanvas:hover .fa-solid, #clearCanvas:hover .fa, #clearCanvas:hover i[class*="fa-"],
#transparentCanvas:hover .fas, #transparentCanvas:hover .fa-solid, #transparentCanvas:hover .fa, #transparentCanvas:hover i[class*="fa-"] {
    color: white !important;
}

/* Focus, active, and visited states - force back to normal colors */
#addText:focus, #addText:active, #addText:visited, #addText.active,
#toggleBold:focus, #toggleBold:active, #toggleBold:visited, #toggleBold.active,
#toggleItalic:focus, #toggleItalic:active, #toggleItalic:visited, #toggleItalic.active,
#bringForward:focus, #bringForward:active, #bringForward:visited, #bringForward.active,
#sendBackward:focus, #sendBackward:active, #sendBackward:visited, #sendBackward.active,
#deleteSelected:focus, #deleteSelected:active, #deleteSelected:visited, #deleteSelected.active,
#clearCanvas:focus, #clearCanvas:active, #clearCanvas:visited, #clearCanvas.active,
#transparentCanvas:focus, #transparentCanvas:active, #transparentCanvas:visited, #transparentCanvas.active {
    color: inherit !important;
}

#addText:focus .fas, #addText:focus .fa-solid, #addText:focus .fa, #addText:focus i[class*="fa-"],
#addText:active .fas, #addText:active .fa-solid, #addText:active .fa, #addText:active i[class*="fa-"],
#addText:visited .fas, #addText:visited .fa-solid, #addText:visited .fa, #addText:visited i[class*="fa-"],
#addText.active .fas, #addText.active .fa-solid, #addText.active .fa, #addText.active i[class*="fa-"],
#toggleBold:focus .fas, #toggleBold:focus .fa-solid, #toggleBold:focus .fa, #toggleBold:focus i[class*="fa-"],
#toggleBold:active .fas, #toggleBold:active .fa-solid, #toggleBold:active .fa, #toggleBold:active i[class*="fa-"],
#toggleBold:visited .fas, #toggleBold:visited .fa-solid, #toggleBold:visited .fa, #toggleBold:visited i[class*="fa-"],
#toggleBold.active .fas, #toggleBold.active .fa-solid, #toggleBold.active .fa, #toggleBold.active i[class*="fa-"],
#toggleItalic:focus .fas, #toggleItalic:focus .fa-solid, #toggleItalic:focus .fa, #toggleItalic:focus i[class*="fa-"],
#toggleItalic:active .fas, #toggleItalic:active .fa-solid, #toggleItalic:active .fa, #toggleItalic:active i[class*="fa-"],
#toggleItalic:visited .fas, #toggleItalic:visited .fa-solid, #toggleItalic:visited .fa, #toggleItalic:visited i[class*="fa-"],
#toggleItalic.active .fas, #toggleItalic.active .fa-solid, #toggleItalic.active .fa, #toggleItalic.active i[class*="fa-"],
#bringForward:focus .fas, #bringForward:focus .fa-solid, #bringForward:focus .fa, #bringForward:focus i[class*="fa-"],
#bringForward:active .fas, #bringForward:active .fa-solid, #bringForward:active .fa, #bringForward:active i[class*="fa-"],
#bringForward:visited .fas, #bringForward:visited .fa-solid, #bringForward:visited .fa, #bringForward:visited i[class*="fa-"],
#bringForward.active .fas, #bringForward.active .fa-solid, #bringForward.active .fa, #bringForward.active i[class*="fa-"],
#sendBackward:focus .fas, #sendBackward:focus .fa-solid, #sendBackward:focus .fa, #sendBackward:focus i[class*="fa-"],
#sendBackward:active .fas, #sendBackward:active .fa-solid, #sendBackward:active .fa, #sendBackward:active i[class*="fa-"],
#sendBackward:visited .fas, #sendBackward:visited .fa-solid, #sendBackward:visited .fa, #sendBackward:visited i[class*="fa-"],
#sendBackward.active .fas, #sendBackward.active .fa-solid, #sendBackward.active .fa, #sendBackward.active i[class*="fa-"],
#deleteSelected:focus .fas, #deleteSelected:focus .fa-solid, #deleteSelected:focus .fa, #deleteSelected:focus i[class*="fa-"],
#deleteSelected:active .fas, #deleteSelected:active .fa-solid, #deleteSelected:active .fa, #deleteSelected:active i[class*="fa-"],
#deleteSelected:visited .fas, #deleteSelected:visited .fa-solid, #deleteSelected:visited .fa, #deleteSelected:visited i[class*="fa-"],
#deleteSelected.active .fas, #deleteSelected.active .fa-solid, #deleteSelected.active .fa, #deleteSelected.active i[class*="fa-"],
#clearCanvas:focus .fas, #clearCanvas:focus .fa-solid, #clearCanvas:focus .fa, #clearCanvas:focus i[class*="fa-"],
#clearCanvas:active .fas, #clearCanvas:active .fa-solid, #clearCanvas:active .fa, #clearCanvas:active i[class*="fa-"],
#clearCanvas:visited .fas, #clearCanvas:visited .fa-solid, #clearCanvas:visited .fa, #clearCanvas:visited i[class*="fa-"],
#clearCanvas.active .fas, #clearCanvas.active .fa-solid, #clearCanvas.active .fa, #clearCanvas.active i[class*="fa-"],
#transparentCanvas:focus .fas, #transparentCanvas:focus .fa-solid, #transparentCanvas:focus .fa, #transparentCanvas:focus i[class*="fa-"],
#transparentCanvas:active .fas, #transparentCanvas:active .fa-solid, #transparentCanvas:active .fa, #transparentCanvas:active i[class*="fa-"],
#transparentCanvas:visited .fas, #transparentCanvas:visited .fa-solid, #transparentCanvas:visited .fa, #transparentCanvas:visited i[class*="fa-"],
#transparentCanvas.active .fas, #transparentCanvas.active .fa-solid, #transparentCanvas.active .fa, #transparentCanvas.active i[class*="fa-"] {
    color: inherit !important;
}

/* Highlighted buttons on light backgrounds - preserve existing styling for non-navbar buttons */
.btn-light, .btn-outline-secondary, .btn-secondary {
    color: #4a6fa5 !important; /* navy blue for highlighted buttons */
}

.btn-light:hover, .btn-outline-secondary:hover {
    color: #4a6fa5 !important; /* navy blue for highlighted button hovers */
}

.btn-light:hover .fas, .btn-light:hover .fa-solid, .btn-light:hover .fa, .btn-light:hover i[class*="fa-"],
.btn-outline-secondary:hover .fas, .btn-outline-secondary:hover .fa-solid, .btn-outline-secondary:hover .fa, .btn-outline-secondary:hover i[class*="fa-"] {
    color: #4a6fa5 !important; /* match text color on hover */
}

/* Additional button hover icon styles for all button types */
.btn:hover .fas, .btn:hover .fa-solid, .btn:hover .fa, .btn:hover i[class*="fa-"] {
    color: inherit !important; /* icons inherit text color on hover */
}

/* Start Designing button and Email Us button hover - 15% opaque white background, preserve white text/border */
html body .btn-outline-light.btn-start-designing:hover, 
html body .btn-outline-light.btn-email-us:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #87CEEB !important; /* preserve original light blue text */
    border-color: #87CEEB !important; /* preserve original light blue border */
}

html body .btn-outline-light.btn-start-designing:hover .fas,
html body .btn-outline-light.btn-start-designing:hover .fa-solid,
html body .btn-outline-light.btn-start-designing:hover .fa,
html body .btn-outline-light.btn-start-designing:hover i[class*="fa-"],
html body .btn-outline-light.btn-email-us:hover .fas,
html body .btn-outline-light.btn-email-us:hover .fa-solid,
html body .btn-outline-light.btn-email-us:hover .fa,
html body .btn-outline-light.btn-email-us:hover i[class*="fa-"] {
    color: #87CEEB !important; /* preserve original light blue icon color */
}

.btn-outline-warning:hover .fas, .btn-outline-warning:hover .fa-solid, .btn-outline-warning:hover .fa, .btn-outline-warning:hover i[class*="fa-"] {
    color: inherit !important; /* match text color on hover */
}

.btn-outline-danger:hover .fas, .btn-outline-danger:hover .fa-solid, .btn-outline-danger:hover .fa, .btn-outline-danger:hover i[class*="fa-"] {
    color: inherit !important; /* match text color on hover */
}

.btn-outline-success:hover .fas, .btn-outline-success:hover .fa-solid, .btn-outline-success:hover .fa, .btn-outline-success:hover i[class*="fa-"] {
    color: inherit !important; /* match text color on hover */
}

.btn-outline-info:hover .fas, .btn-outline-info:hover .fa-solid, .btn-outline-info:hover .fa, .btn-outline-info:hover i[class*="fa-"] {
    color: inherit !important; /* match text color on hover */
}

/* Accordion styles - accordions are typically light background */
.accordion-button {
    color: #4a6fa5 !important; /* lighter navy blue for accordion buttons */
    background-color: rgba(255, 255, 255, 0.5) !important; /* 50% opacity for collapsed questions */
    border: none !important; /* remove border */
    outline: none !important; /* remove focus outline */
    box-shadow: none !important; /* remove focus shadow */
}

.accordion-button:not(.collapsed) {
    color: white !important; /* white text for expanded accordion buttons */
    background-color: #4a6fa5 !important; /* same color as icons */
    border: none !important; /* remove border */
    outline: none !important; /* remove focus outline */
    box-shadow: none !important; /* remove focus shadow */
}

.accordion-button:focus {
    border: none !important; /* remove focus border */
    outline: none !important; /* remove focus outline */
    box-shadow: none !important; /* remove focus shadow */
    background-color: rgba(255, 255, 255, 0.5) !important; /* 35% opacity for focus */
}

.accordion-button:hover {
    border: none !important; /* remove hover border */
    outline: none !important; /* remove hover outline */
    box-shadow: none !important; /* remove hover shadow */
    background-color: rgba(255, 255, 255, 0.5) !important; /* 35% opacity for hover */
}

/* Make icons white when accordion is expanded */
.accordion-button:not(.collapsed) .fas,
.accordion-button:not(.collapsed) .fa-solid {
    color: white !important; /* white icons for expanded questions */
}

/* Keep expanded questions highlighted even on hover */
.accordion-button:not(.collapsed):hover {
    background-color: #4a6fa5 !important; /* maintain navy blue background for expanded questions on hover */
    color: white !important; /* maintain white text for expanded questions on hover */
}

.accordion-button:not(.collapsed):focus {
    background-color: #4a6fa5 !important; /* maintain navy blue background for expanded questions on focus */
    color: white !important; /* maintain white text for expanded questions on focus */
}

.accordion-button:not(.collapsed):hover .fas,
.accordion-button:not(.collapsed):hover .fa-solid {
    color: white !important; /* maintain white icons for expanded questions on hover */
}

.accordion-button:not(.collapsed):focus .fas,
.accordion-button:not(.collapsed):focus .fa-solid {
    color: white !important; /* maintain white icons for expanded questions on focus */
}

/* Comprehensive override to ensure white text in all expanded states */
.accordion-button:not(.collapsed),
.accordion-button:not(.collapsed):hover,
.accordion-button:not(.collapsed):focus,
.accordion-button:not(.collapsed):active,
.accordion-button:not(.collapsed):visited,
.accordion-button:not(.collapsed):link,
.accordion-button[aria-expanded="true"],
.accordion-button[aria-expanded="true"]:hover,
.accordion-button[aria-expanded="true"]:focus,
.accordion-button[aria-expanded="true"]:active {
    color: white !important; /* force white text in all expanded states */
}

/* Additional override using higher specificity */
.accordion .accordion-item .accordion-button:not(.collapsed) {
    color: white !important; /* force white text with higher specificity */
}

/* ULTIMATE OVERRIDE: Force 50% transparency on collapsed questions - GLOBAL */
/* Use every possible selector and property to force transparency */
.accordion-button[aria-expanded="false"],
.accordion-button[aria-expanded="false"]:hover,
.accordion-button[aria-expanded="false"]:focus,
.accordion-button[aria-expanded="false"]:active,
.accordion-button.collapsed,
.accordion-button.collapsed:hover,
.accordion-button.collapsed:focus,
.accordion-button.collapsed:active,
.accordion-item .accordion-button[aria-expanded="false"],
.accordion-item .accordion-button[aria-expanded="false"]:hover,
.accordion-item .accordion-button[aria-expanded="false"]:focus,
.accordion-item .accordion-button.collapsed,
.accordion-item .accordion-button.collapsed:hover,
.accordion-item .accordion-button.collapsed:focus {
    background-color: rgba(255, 255, 255, 0.5) !important;
    background-image: none !important;
    background: rgba(255, 255, 255, 0.5) !important;
    color: #4a6fa5 !important;
}

/* Maximum specificity override - GLOBAL FOR ALL PAGES */
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-button[aria-expanded="false"],
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-button[aria-expanded="false"]:hover,
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-button[aria-expanded="false"]:focus,
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-button[aria-expanded="false"]:active,
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-button.collapsed,
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-button.collapsed:hover,
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-button.collapsed:focus,
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-button.collapsed:active {
    background-color: rgba(255, 255, 255, 0.5) !important;
    background-image: none !important;
    background: rgba(255, 255, 255, 0.5) !important;
    color: #4a6fa5 !important;
}

/* Alternative approach using pseudo-elements - GLOBAL */
.accordion-button[aria-expanded="false"]::before,
.accordion-button.collapsed::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    z-index: -1 !important;
}

/* Force override with inline-style level specificity simulation - GLOBAL */
.accordion-button[aria-expanded="false"][style],
.accordion-button.collapsed[style] {
    background-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.accordion-body {
    color: #4a6fa5 !important; /* lighter navy blue for accordion content */
    background-color: rgba(255, 255, 255, 0.5) !important; /* make answer sections 50% transparent */
}

/* Additional override for accordion body to ensure 50% transparency - GLOBAL */
.accordion-item .accordion-collapse .accordion-body,
html body .container .row .col-lg-8 .accordion .accordion-item .accordion-collapse .accordion-body {
    background-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Alert components - alerts are typically light background */
.alert {
    color: #4a6fa5 !important; /* lighter navy blue for alert text */
}

/* Front and back print alert - 100% opaque */
.alert-info {
    background-color: rgba(214, 242, 255, 1) !important; /* 100% opaque info alert background */
}

.alert-heading {
    color: #4a6fa5 !important; /* lighter navy blue for alert headings */
}

/* Form elements */
.form-label {
    color: inherit !important; /* inherit from parent background context */
}

/* Navbar overrides - navbar is dark */
.navbar-brand {
    color: white !important; /* solid white for navbar brand */
}

.navbar-brand i {
    color: white !important; /* solid white for navbar brand icon */
}

/* Footer - footer is dark */
footer {
    color: white !important; /* solid white for footer text */
}

footer * {
    color: white !important; /* solid white for all footer elements */
}

/* Cloud9 Logo Positioning - Below Submit Button */
.cloud9-logo-container {
    position: relative;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.cloud9-logo {
    position: absolute; /* Absolute positioning relative to parent container */
    height: 8.86875rem; /* 141.9px = 14% smaller (165px * 0.86) */
    max-width: 22.171875rem; /* 354.75px = 14% smaller (412.5px * 0.86) */
    object-fit: contain;
    z-index: 10;
    cursor: default; /* Remove move cursor */
    pointer-events: none; /* Disable all pointer events to prevent interaction */
    transform-origin: center;
    /* Initial positioning - will be updated by JavaScript */
    right: 1.25rem; /* 20px = 1.25rem */
    top: calc(50vh + 70px); /* Moved 70px lower total (55px + 15px additional) */
}

/* No responsive sizing - maintain exact desktop dimensions on all screen sizes */

/* Use default Bootstrap navbar sizing - matches pricing page */
.navbar-brand {
    /* Using Bootstrap defaults for consistency across pages */
    color: #ffffff !important;
    font-weight: 500 !important;
}

.navbar-brand i {
    /* Using Bootstrap defaults for consistency across pages */
    position: relative;
    top: -2px; /* Move icon 2px higher */
    color: #ffffff !important;
}

/* Notes textarea - prevent resizing that affects logo position */
#notes {
    resize: none !important; /* Disable manual resizing to prevent layout shifts */
    height: 214px !important; /* Fixed height - 1 row shorter (238px - 24px = 214px) */
    overflow-y: auto;
    transition: none !important; /* Prevent any transition effects */
}

/* Add 15px spacing between delete button and Canvas Background section */
.canvas-controls-higher {
    margin-top: 15px !important; /* Add 15px spacing above Canvas Background section */
}

/* Canvas container styling - frames the t-shirt image */
#canvasContainer {
    /* Container for the design canvas */
    position: relative;
    width: 700px;
    height: 632px;
    max-width: 100%;
    box-sizing: content-box; /* Keep content-box sizing */
    border: 2px solid #4a6fa5 !important; /* Navy blue border matching icons */
    border-radius: 0.375rem; /* Slightly rounded corners */
    width: 700px !important;
    min-width: 700px !important;
    height: 632px !important;
    max-width: 700px !important;
    max-height: 632px !important;
    margin: 0 auto;
    overflow: hidden; /* Hide overflow to prevent scrollbars */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: 0 !important;
}

/* Canvas styling - transparent to show t-shirt background */
#designCanvas {
    background-color: transparent !important;
    /* Removed border as it can interfere with Fabric.js positioning */
}

/* Ensure Fabric.js canvas containers work properly */
.canvas-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    border: none !important;
}

#previewCanvas {
    background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), 
                linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f8f9fa 75%), 
                linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

/* Desktop layout - center all 4 boxes as one unit */
@media (min-width: 992px) {
    /* Center the entire container holding all 4 boxes */
    .container {
        max-width: 1400px !important; /* Set a reasonable max width */
        margin: 0 auto !important; /* Center the container */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Center the row containing all boxes as one unit */
    .row.justify-content-center {
        justify-content: center !important;
        margin: 0 auto !important;
        max-width: fit-content !important; /* Size to content */
        padding: 0 !important;
    }
    
    .canvas-wider {
        flex: 0 0 auto !important; /* Fixed width, don't grow or shrink */
        width: 745px !important; /* Adjusted width to fit canvas without scrollbar */
        max-width: 745px !important; /* Prevent expansion */
        min-width: 745px !important; /* Prevent compression */
        margin: 0; /* Remove margins - handled by gap */
    }
    
    /* Center and optimize the row container for 3 boxes as one cohesive unit */
    .canvas-wider-row {
        display: flex !important; /* Force flexbox to prevent wrapping */
        flex-wrap: nowrap !important; /* Prevent wrapping on large screens */
        justify-content: center !important; /* Center all three cards as one unit */
        align-items: stretch !important; /* Make all cards same height */
        margin: 0 auto; /* Center the entire row */
        width: 100%; /* Full width within the constraint */
        gap: 25px !important; /* Consistent 25px spacing between all boxes */
        column-gap: 25px !important; /* Ensure horizontal gap is applied */
        row-gap: 25px !important; /* Ensure vertical gap is also applied */
        padding: 0 20px; /* Side padding for better centering */
        min-width: fit-content; /* Allow container to size based on content */
    }
    
    /* Customer info box - 4% wider for better content space */
    .customer-info-wider {
        flex: 0 0 auto !important; /* Fixed width, don't grow or shrink */
        width: 291px !important; /* Fixed width for consistency */
        max-width: 291px !important; /* Override Bootstrap */
        min-width: 291px !important; /* Prevent compression */
        display: flex !important; /* Make card container flex */
        flex-direction: column !important; /* Stack card content vertically */
        margin: 0; /* Remove margins - handled by gap */
    }
    
    /* Design tools box - narrower but still fits single line file format text */
    .col-lg-3 {
        flex: 0 0 auto !important;
        width: 315px !important; /* Fixed width for consistency */
        max-width: 315px !important; /* Override Bootstrap */
        min-width: 315px !important; /* Prevent compression */
        display: flex !important; /* Make card container flex */
        flex-direction: column !important; /* Stack card content vertically */
        margin: 0; /* Remove margins - handled by gap */
    }
    
    /* Make canvas column flex as well */
    .canvas-column {
        display: flex !important;
        flex-direction: column !important;
    }
    

    
    /* Ensure all cards have matching heights - reduced by 11px */
    .canvas-wider-row .card {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100% - 11px) !important; /* Make all cards same height, 11px shorter */
    }
    
    /* Shift design tools box content 1px lower without moving the box itself */
    .col-lg-3 .card-body {
        padding-top: calc(1.5rem + 1px) !important; /* Add 1px to top padding */
    }
    
    /* Make card bodies fill remaining space without scrollbars */
    .canvas-wider-row .card-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important; /* No internal scrollbars */
    }
}

/* Text controls styling */
.form-control-color {
    width: 100% !important;
    height: 31px !important;
    padding: 1px 2px !important;
}

/* Quality analysis text styling - match card text appearance */
.quality-analysis-text {
    color: #000000 !important;
    font-weight: normal !important;
    font-size: inherit !important;
    font-family: inherit !important;
}

/* Font preview in dropdown */
#fontFamily option[value="Arial"] { font-family: Arial, sans-serif; }
#fontFamily option[value="Times New Roman"] { font-family: "Times New Roman", serif; }
#fontFamily option[value="Calibri"] { font-family: Calibri, sans-serif; }
#fontFamily option[value="Helvetica"] { font-family: Helvetica, sans-serif; }
#fontFamily option[value="Georgia"] { font-family: Georgia, serif; }
#fontFamily option[value="Verdana"] { font-family: Verdana, sans-serif; }
#fontFamily option[value="Tahoma"] { font-family: Tahoma, sans-serif; }
#fontFamily option[value="Trebuchet MS"] { font-family: "Trebuchet MS", sans-serif; }
#fontFamily option[value="Comic Sans MS"] { font-family: "Comic Sans MS", cursive; }
#fontFamily option[value="Impact"] { font-family: Impact, sans-serif; }
#fontFamily option[value="Courier New"] { font-family: "Courier New", monospace; }
#fontFamily option[value="Segoe UI"] { font-family: "Segoe UI", sans-serif; }
#fontFamily option[value="Roboto"] { font-family: "Roboto", sans-serif; }
#fontFamily option[value="Open Sans"] { font-family: "Open Sans", sans-serif; }
#fontFamily option[value="Lato"] { font-family: "Lato", sans-serif; }
#fontFamily option[value="Montserrat"] { font-family: "Montserrat", sans-serif; }
#fontFamily option[value="Poppins"] { font-family: "Poppins", sans-serif; }
#fontFamily option[value="Nunito"] { font-family: "Nunito", sans-serif; }
#fontFamily option[value="Inter"] { font-family: "Inter", sans-serif; }
#fontFamily option[value="Playfair Display"] { font-family: "Playfair Display", serif; }
#fontFamily option[value="Oswald"] { font-family: "Oswald", sans-serif; }
#fontFamily option[value="Merriweather"] { font-family: "Merriweather", serif; }
#fontFamily option[value="Dancing Script"] { font-family: "Dancing Script", cursive; }
#fontFamily option[value="Pacifico"] { font-family: "Pacifico", cursive; }
#fontFamily option[value="Century Gothic"] { font-family: "Century Gothic", sans-serif; }
#fontFamily option[value="Franklin Gothic Medium"] { font-family: "Franklin Gothic Medium", sans-serif; }
#fontFamily option[value="Lucida Sans Unicode"] { font-family: "Lucida Sans Unicode", sans-serif; }
#fontFamily option[value="Book Antiqua"] { font-family: "Book Antiqua", serif; }
#fontFamily option[value="Palatino Linotype"] { font-family: "Palatino Linotype", serif; }
#fontFamily option[value="Source Sans Pro"] { font-family: "Source Sans Pro", sans-serif; }
#fontFamily option[value="Raleway"] { font-family: "Raleway", sans-serif; }
#fontFamily option[value="Ubuntu"] { font-family: "Ubuntu", sans-serif; }
#fontFamily option[value="Work Sans"] { font-family: "Work Sans", sans-serif; }
#fontFamily option[value="Libre Baskerville"] { font-family: "Libre Baskerville", serif; }
#fontFamily option[value="PT Sans"] { font-family: "PT Sans", sans-serif; }
#fontFamily option[value="Quicksand"] { font-family: "Quicksand", sans-serif; }
#fontFamily option[value="Crimson Text"] { font-family: "Crimson Text", serif; }
#fontFamily option[value="Fira Sans"] { font-family: "Fira Sans", sans-serif; }
#fontFamily option[value="Bebas Neue"] { font-family: "Bebas Neue", cursive; }
#fontFamily option[value="Anton"] { font-family: "Anton", sans-serif; }
#fontFamily option[value="Lobster"] { font-family: "Lobster", cursive; }
#fontFamily option[value="Great Vibes"] { font-family: "Great Vibes", cursive; }
#fontFamily option[value="Righteous"] { font-family: "Righteous", cursive; }

/* File upload styling */
#imageUpload {
    cursor: pointer;
}

#imageUpload:hover {
    border-color: var(--bs-primary);
}

/* Progress bar animation */
.progress-bar {
    transition: width 0.3s ease;
}

/* Loading spinner */
.fa-spin {
    animation: fa-spin 2s infinite linear;
}

/* Card hover effects - shadows removed */
.card {
    transition: none;
    background-color: rgba(255, 255, 255, 0.5) !important; /* 65% transparency to show background */
    box-shadow: none !important; /* Remove any default shadow */
    transform: none !important; /* Prevent any transform effects */
}

.card:hover {
    box-shadow: none !important; /* No shadow on hover */
    transform: none !important; /* Prevent any transform effects on hover */
    transition: none !important; /* Disable all transitions */
}

/* Specifically target feature cards to prevent hover movement */
.feature-card, .feature-card:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
}

/* Comprehensive prevention of all hover effects on cards */
.card, .card:hover, .card:focus, .card:active,
.feature-card, .feature-card:hover, .feature-card:focus, .feature-card:active {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

/* Comprehensive shadow removal for all boxes and cards */
.card, .card:hover, .card:focus, .card:active,
.design-box, .design-box:hover, .design-box:focus, .design-box:active,
.design-tools-box, .design-tools-box:hover, .design-tools-box:focus, .design-tools-box:active,
.design-canvas-box, .design-canvas-box:hover, .design-canvas-box:focus, .design-canvas-box:active,
.customer-info-box, .customer-info-box:hover, .customer-info-box:focus, .customer-info-box:active,
.accordion-item, .accordion-item:hover, .accordion-item:focus, .accordion-item:active,
.pricing-card, .pricing-card:hover, .pricing-card:focus, .pricing-card:active {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Remove shadows from nested cards inside boxes */
.design-box .card, .design-box .card:hover,
.design-tools-box .card, .design-tools-box .card:hover,
.design-canvas-box .card, .design-canvas-box .card:hover,
.customer-info-box .card, .customer-info-box .card:hover {
    box-shadow: none !important;
}

/* Override Bootstrap shadow utilities if applied */
.shadow-sm, .shadow, .shadow-lg, .shadow-none,
.shadow-sm:hover, .shadow:hover, .shadow-lg:hover {
    box-shadow: none !important;
}

/* Mobile specific - ensure no shadows on any viewport size */
@media (max-width: 576px), (max-width: 768px), (max-width: 992px), (max-width: 1200px) {
    .card, .card:hover, .card:focus, .card:active,
    .design-box, .design-box:hover,
    .design-tools-box, .design-tools-box:hover,
    .design-canvas-box, .design-canvas-box:hover,
    .customer-info-box, .customer-info-box:hover,
    .accordion-item, .accordion-item:hover,
    .pricing-card, .pricing-card:hover {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
    }
}

/* Button group styling */
.btn-group-vertical .btn {
    margin-bottom: 0.25rem;
}

.btn-group-vertical .btn:last-child {
    margin-bottom: 0;
}

/* Canvas has fixed dimensions - no scaling */
#designCanvas {
    /* Fixed dimensions set in JavaScript */
}

/* Mobile responsive adjustments - COMPLETELY DISABLED */
/* No media queries - maintain exact desktop dimensions on all screen sizes */

/* Success and error states */
.alert {
    border-radius: 0.375rem;
}

/* Modal enhancements */
.modal-content {
    border-radius: 0.5rem;
}

/* Tool button states */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Instructions section */
.fa-2x {
    margin-bottom: 0.5rem;
}

/* Ensure Fabric.js control handles are visible and properly positioned */
.canvas-container {
    transform: none !important; /* Prevent any transforms that could affect control points */
    display: block !important;
}

/* Ensure canvas layers are properly aligned within container */
.canvas-container canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Fix for control corners visibility */
.canvas-container {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Fabric.js control styling adjustments */
.canvas-container .upper-canvas {
    border-radius: 0.375rem;
}

/* Drag and drop styling */
.dragover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.5);
}

/* SOLID TEXT AND ICONS FOR ALL TRANSPARENT CONTAINERS */
/* Ensure all navbar elements are solid white */
.navbar *, .navbar .btn *, .navbar .btn, .navbar a, .navbar span, .navbar div {
    color: white !important;
}

.navbar .fas, .navbar .fa-solid, .navbar .fa, .navbar i[class*="fa-"] {
    color: white !important;
}

/* Ensure all footer elements are solid white */
footer *, footer .btn *, footer .btn, footer a, footer span, footer div, footer p {
    color: white !important;
}

footer .fas, footer .fa-solid, footer .fa, footer i[class*="fa-"] {
    color: white !important;
}

/* Ensure all card text is solid navy blue */
.card *, .card .btn, .card a, .card span, .card div, .card p, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: #4a6fa5 !important;
}

.card .fas, .card .fa-solid, .card .fa, .card i[class*="fa-"] {
    color: #4a6fa5 !important;
}

/* Ensure all accordion text is solid navy blue */
.accordion *, .accordion .btn, .accordion a, .accordion span, .accordion div, .accordion p, .accordion li, .accordion ol, .accordion ul {
    color: #4a6fa5 !important;
}

.accordion .fas, .accordion .fa-solid, .accordion .fa, .accordion i[class*="fa-"] {
    color: #4a6fa5 !important;
}

/* Override any remaining text transparency */
.bg-light *, .bg-white *, .alert *, .modal-content * {
    color: #4a6fa5 !important;
}

/* Upload progress styling */
#uploadProgress .progress {
    height: 0.5rem;
}

/* Form validation states */
.was-validated .form-control:valid {
    border-color: var(--bs-success);
    background-image: none;
}

.was-validated .form-control:invalid {
    border-color: var(--bs-danger);
    background-image: none;
}

/* Custom scrollbar for tools panel */
.card-body {
    overflow-y: auto;
}

.card-body::-webkit-scrollbar {
    width: 6px;
}

.card-body::-webkit-scrollbar-track {
    background: transparent;
}

.card-body::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: 3px;
}

.card-body::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

/* Customer Info Box - Made significantly narrower */
@media (min-width: 992px) {
    .customer-info-wider {
        flex: 0 0 auto !important;
        width: 250px !important; /* Fixed width */
        min-width: 250px !important; /* Fixed minimum */
        max-width: 250px !important; /* Fixed maximum */
    }
    
    /* Canvas column with fixed dimensions */
    .canvas-column {
        flex: 0 0 auto !important;
        width: 745px !important; /* Fixed width without scrollbar */
        min-width: 745px !important;
        max-width: 745px !important;
    }
}

/* Mobile responsive layout - stack boxes vertically */
@media (max-width: 991px) {
    /* Make the design interface container stack vertically */
    .design-interface-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    /* Make all design boxes full width on mobile */
    .design-box,
    .design-tools-box,
    .customer-info-box {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 10 !important; /* Lower z-index than canvas */
    }
    
    .design-canvas-box {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 1140px !important; /* Match How to Use box max-width */
        min-width: auto !important;
        margin: 0 auto !important;
        height: auto !important; /* Allow natural height */
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Give canvas box higher z-index to ensure it's interactive when stacked */
    .design-canvas-box {
        position: relative !important;
        z-index: 100 !important;
    }
    
    /* Canvas box card should have auto height */
    .design-canvas-box .card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Adjust canvas container for mobile */
    #canvasContainer {
        width: 100% !important;
        max-width: 700px !important;
        min-width: auto !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 101 !important;
    }
    
    /* Ensure canvas-container is properly positioned with high z-index */
    .canvas-container {
        position: absolute !important;
        z-index: 102 !important;
        pointer-events: auto !important;
    }
    
    /* Ensure upper canvas (interaction layer) is on top */
    .canvas-container .upper-canvas {
        z-index: 103 !important;
        pointer-events: auto !important;
    }
    
    /* Remove scrollbars on canvas card body on mobile */
    .design-canvas-box .card-body {
        overflow: visible !important;
        position: relative !important;
        z-index: 100 !important;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
    /* Further reduce padding on very small screens */
    .design-interface-container {
        padding: 0 10px !important;
    }
    
    /* Reduce card padding on mobile */
    .card-body {
        padding: 1rem !important;
    }
    
    /* Canvas box should have its own natural height, not match other boxes */
    .design-canvas-box {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    .design-canvas-box .card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    .design-canvas-box .card-body {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 1rem !important;
    }
    
    /* Adjust canvas container for phones - maintain aspect ratio */
    #canvasContainer {
        height: auto !important;
        aspect-ratio: 700 / 632 !important;
        width: 100% !important;
        max-width: 400px !important; /* Reasonable max width for phones */
        margin: 0 auto !important;
    }
    
    /* Add vertical spacing between pricing cards when they stack */
    .row.g-4 > [class*="col-"] {
        margin-bottom: 20px !important;
    }
    
    /* Ensure row gap for stacked cards */
    .row.g-4 {
        row-gap: 20px !important;
    }
}

/* Pricing cards specific spacing */
.pricing-cards-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -12px;
    margin-right: -12px;
}

.pricing-cards-row > [class*="col-"] {
    padding-left: 10.5px;
    padding-right: 10.5px;
    margin-bottom: 24px;
}

/* Ensure proper spacing on small and medium devices too */
@media (max-width: 991px) {
    /* Add vertical spacing between all pricing cards when they stack */
    .pricing-cards-row > [class*="col-"] {
        margin-bottom: 24px !important;
    }
}

/* Gallery Section Styles */
.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.2; /* Make images 20% taller (1:1.2 ratio instead of 1:1) */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Removed hover transform effect as requested */


/* Force cache refresh Sat Aug  9 07:03:28 PM UTC 2025 */