/*=============================================
  CSS CUSTOM PROPERTIES (VARIABLES)
=============================================*/
:root {
    /* Brand Colors */
    --color-primary: rgb(225, 159, 78);
    --color-primary-rgb: 225, 159, 78;
    --color-primary-transparent: rgba(225, 159, 78, 0.5);
    --color-secondary: rgb(102, 103, 105);
    --color-secondary-rgb: 102, 103, 105;

    /* Color Variants */
    --color-primary-light: #fbf0df;
    --color-primary-dark: #88501b;
    --color-secondary-light: rgb(72, 73, 75);
    --color-secondary-dark: rgb(60, 60, 62);

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-border: #deddd8;
    --color-border-secondary: #e7e6e1;
    --color-bg-body: #f6f5f2;
    --color-surface: #ffffff;
    --color-text: #27272a;
    --color-muted: #656560;
    /* One step further back than --color-muted, for rows that are still
       readable but deliberately out of the way (stock rows with nothing
       available). Not for body copy -- it is below AA against white. */
    --color-muted-light: #9a9a94;
    /* Status tones in the site's own palette (owner, 2026-10-20: success,
       info and warnings "should look like the rest of the site"). ok is a
       quiet green; wait is the brand amber, for anything that takes time or
       care (made to order, the next batch, offcuts, a warning); stop is a
       warm red; note is neutral, for plain information. */
    --color-ok: #3d6b4f;
    --color-ok-light: #e8f0ea;
    --color-ok-border: #c7dacd;
    --color-wait: #88501b;
    --color-wait-light: #fbf0df;
    --color-wait-border: #e9d3b3;
    --color-stop: #7a2e2e;
    --color-stop-light: #f6e3e3;
    --color-stop-border: #e6c3c3;
    --color-note-light: #f1efe9;
    --color-nav: #292c2c;

    /* Spacing Scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 2.5rem;

    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(30, 32, 30, 0.04);
    --shadow-md: 0 4px 16px rgba(30, 32, 30, 0.07);
    --shadow-lg: 0 12px 32px rgba(30, 32, 30, 0.1);
    --shadow-sm-primary: 0 2px 4px rgba(225, 159, 78, 0.1);
    --shadow-md-primary: 0 4px 8px rgba(225, 159, 78, 0.15);
    --shadow-lg-primary: 0 8px 16px rgba(225, 159, 78, 0.2);
    --shadow-focus: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease;

    /* Border Radius */
    --radius-xsm: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;

    /* Bootstrap Overrides */
    --bs-body-color: var(--color-text);
    /* Noto Sans Georgian first (owner, 2026-10-20: "titles look better on my
       phone"). With Segoe UI first, Windows set every Georgian word in
       Segoe's Georgian and uppercased titles lost their Mtavruli capitals,
       while a phone, having no Segoe, fell to the Noto the site loads --
       so the same page looked different on the two. Noto now leads on
       every device; Russian has no Noto glyphs here and still falls to
       Segoe or the system font. */
    --bs-body-font-family: "Noto Sans Georgian", "Segoe UI", "Noto Sans", system-ui, sans-serif;
    --bs-link-color: var(--color-primary-dark);
    --bs-link-hover-color: #623710;
    --bs-border-color: var(--color-border);
}

/*=============================================
  BASE STYLES
=============================================*/
html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-body);
    color: var(--color-text);
    line-height: 1.6;
}

/*=============================================
  LAYOUT COMPONENTS
=============================================*/
#content-wrapper {
    flex: 1;
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
}

footer {
    background-color: var(--color-nav);
    color: var(--color-white);
    text-align: left;
    padding: var(--spacing-md) 0;
}

/*=============================================
  UTILITY CLASSES
=============================================*/
/* Background utilities */
.bg-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-text) !important;
    border-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-secondary) !important;
}

.bg-secondary-light,
.btn.bg-secondary-light,
.btn.btn-secondary-light {
    background-color: var(--color-secondary-light) !important;
    color: var(--color-white) !important;
}

/* Text utilities */
.text-primary {
    color: var(--color-primary-dark) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-secondary-light {
    color: var(--color-secondary-light) !important;
}

/*=============================================
  NAVIGATION COMPONENTS
=============================================*/
.navbar {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

/* Option A: dark navbar background, orange used only as an accent
   (active link, badges, hover highlights) instead of the full bar —
   avoids the low-contrast white-on-orange text problem. */
.bg-navbar-dark {
    background-color: var(--color-nav) !important;
}

/* Logo */
.navbar-logo {
    height: 2.5rem;
    width: auto;
    margin-right: var(--spacing-sm);
}

/* Nav links */
.navbar .nav-link {
    padding: 0.5rem 0.8rem !important;
    margin: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar .nav-link.active {
    /*background-color: var(--color-white);*/
    /*color: var(--color-primary) !important;*/
    background-color: rgba(var(--color-primary-rgb), 0.16);
    color: var(--color-primary) !important;
}

#cart_qty {
    font-size: var(--font-size-xs);
    vertical-align: text-top;
}

/* Language switcher (owner, 2026-10-01: "should be with the rest of the navbar
   items, and should match them in size and paddings and such").

   It used to carry its own translucent box, its own padding and its own
   margin, which is exactly what made it look like a control parked beside the
   menu rather than a part of it. All of that is gone; `.navbar .nav-link`
   above now gives it the same padding, radius, hover and colour as Home, Shop
   and the rest.

   The one thing left is a reset. This toggle is a <button>, because it submits
   the language form, and Bootstrap's bare `.nav-link` only clears a button's
   background and border inside .nav-tabs / .nav-pills -- not in a navbar. */
#language-switcher .nav-link {
    background: none;
    border: 0;
}

/* Mobile toggler */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-brand-text {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-white);
    text-decoration: none;
}

.navbar-brand-text:hover {
    color: var(--color-white);
}

/* Capitals in the navbar (owner, 2026-10-20: "on the navbar too, all
   languages"): the menu links and the brand name, in every language;
   georgian_capitals.js makes the Georgian ones Mtavruli. Dropdown items are
   left alone -- a menu of capitals is a wall. */
.navbar .nav-link,
.navbar-brand-text {
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* The main action of a page in capitals (owner, 2026-10-20: "all three"):
   Explore materials, Add to cart, Continue to designer, Place order, the
   console's Save and Upload. Secondary and small buttons stay as they are --
   a page of capital buttons shouts, and Georgian capitals are wide. */
.btn-primary {
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Dropdown */
/* Scoped to .navbar (language switcher, user/profile menu) — this used to be
   a bare `.dropdown-toggle` rule, which forced white text + no border onto
   ANY dropdown toggle anywhere on the site, not just the navbar's own dark
   background it was written for. That silently made the Order PDF export
   dropdown (Orders/order_detail.html, a Bootstrap .btn-outline-secondary on
   a light card-header) render as white-on-white — invisible, though present
   in the DOM and fully functional. Found via screenshot: the button's text
   was visible only as a faint ghost, not via any console/JS error. */
.navbar .dropdown-toggle {
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    border: none;
}

.list-group-item .dropdown-toggle{
    font-weight: var(--font-weight-normal);
    color: var(--color-secondary);
    border: none;
}

.list-group-item .dropdown {
    border: none;
}

.dropdown-item {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
}

.dropdown-item:hover {
    background-color: var(--color-primary-light);
    color: var(--color-text);
}

.dropdown-item.active,
.dropdown-item:focus {
    background-color: var(--color-primary);
    color: var(--color-text);
}

.list-group-item .dropdown-item svg {
    width: 54px;
    height: 34px;
}

/*=============================================
  CARD COMPONENTS
=============================================*/
.card {
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-img-top {
    width: 100%;
    height: 15rem;
    object-fit: cover;
    border-radius: 0;
    border: 0;
    aspect-ratio: 2 / 1;
}

.card-img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    /*border-radius: 0;*/
    border: 1px solid var(--color-secondary);
    aspect-ratio: 2 / 1;
    /*margin-top: var(--spacing-sm);*/
}

.card-img-row {
    height: 5rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-secondary);
    aspect-ratio: 3 / 1;
}

/*=============================================
  LIST COMPONENTS
=============================================*/
.list-group-item {
    align-items: center;
    transition: background-color var(--transition-normal);
    color: var(--color-secondary);
}

.list-group-item-action:hover {
    background-color: var(--color-primary-light);
}

.list-group-item.active {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* .availability-link is the shop sidebar's availability filter. It has its own
   class because a test asserts every .category-link carries the current search
   and tag, and these carry a different set -- but it is the same control to
   look at, so it takes the same base rule. Splitting the class without this
   left the links underlined (owner, 2026-10-01). */
.category-link,
.availability-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.category-link.active,
.availability-link.active {
    color: var(--color-primary-dark);
}

.shape-item {
    cursor: pointer;
    display: block;
    /*color: inherit;*/
}

.shape-item:hover {
    color: var(--color-white);
}

/*=============================================
  ACCORDION COMPONENTS
=============================================*/
.accordion {
    --bs-accordion-btn-color: var(--color-secondary);
}

.accordion-button {
    background-color: transparent;
    color: var(--color-secondary);
    transition: background-color var(--transition-normal);
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-primary-light);
    color: var(--color-text);
}

.accordion-button:hover {
    background-color: #f4f3ef;
    color: var(--color-text);
}

.accordion-button:focus {
    box-shadow: var(--shadow-focus);
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23666769' stroke-width='2' viewBox='0 0 16 16'%3e%3cpath d='M1.5 10L8 4l6.5 6'/%3e%3c/svg%3e");
    background-size: 1rem;
    transition: background-image var(--transition-normal);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2388501b' stroke-width='2' viewBox='0 0 16 16'%3e%3cpath d='M1.5 10L8 4l6.5 6'/%3e%3c/svg%3e");
}

.accordion-body {
    padding: var(--spacing-sm);
}

/*=============================================
  FORM COMPONENTS
=============================================*/
.dimension-input{
    width: 40%;
}

.form-control:focus {
    box-shadow: var(--shadow-focus);
    border-color: var(--color-primary-dark);
}

.form-check-input:checked {
    box-shadow: var(--shadow-focus);
    background-color: var(--color-primary);
    border-color: transparent;
}

.form-check-input:focus {
    box-shadow: var(--shadow-focus);
    border-color: transparent;
}

/*=============================================
  WORKTOP COMPONENTS
=============================================*/

/* Image and labels wrapper */
.image-and-labels-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}

/* Details wrapper */
.image-details-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
}

/* Image wrapper */
.image-wrapper {
    position: relative;
    display: flex;
}

/* Dimension labels */
.length-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    white-space: nowrap;
    text-align: center;
    width: 100%;
    border: 1px dashed var(--color-secondary);
    border-bottom: none;
}

.width-label {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    text-align: center;
    white-space: nowrap;
    writing-mode: vertical-rl;
    height: 100%;
    border: 1px dashed var(--color-secondary);
    border-left: none;
}
/*=============================================
  CART & ORDER COMPONENTS
=============================================*/
#inputQuantity {
    max-width: 5rem;
}

#addToCart {
    background-color: var(--color-primary);
    color: var(--color-text);
    border: 1px solid var(--color-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-fast);
}

#addToCart:hover {
    background-color: #d8913e;
}

/*=============================================
  CANVAS CONTAINER
=============================================*/

/* Canvas wrapper */
.drawing-canvas-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
}

/* Drawing container */
#drawing-container {
    border: 1px solid var(--color-border);
    width: 100%;
    aspect-ratio: 5 / 2;
    /* Fallback for browsers without aspect-ratio support (Appendix M/#48) —
       drawing_tool.js sets an explicit inline height on resize/init and
       normally overrides this, but this keeps the container from collapsing
       to 0 height if that JS hasn't run yet or throws before reaching it. */
    min-height: 300px;
    margin: auto;
    /*background-image: radial-gradient(var(--color-border) 1px, transparent 1px);*/
    /*background-size: 20px 20px;*/
    background-color: var(--color-white);
    border-bottom-left-radius: var(--radius-xsm);
    border-bottom-right-radius: var(--radius-xsm);
}

/*=============================================
  DRAWING TOOLBAR
=============================================*/

/* Shape toolbar */
#shape-toolbar {
    display: flex;
    justify-content: center;
    margin: auto;
    padding: var(--spacing-sm) 0;
}

/*=============================================
  IMAGE ICON STYLES
=============================================*/

/* Target the src img icon directly for scaling */
.shape-action img {
    height: 3rem;
    width: auto;
    cursor: pointer;
    transition: transform var(--transition-fast);
    margin: var(--spacing-sm);
}

.shape-action img:hover {
    transform: scale(1.2);
}

/* Target the Bootstrap icon directly for scaling */
.icon-action i {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.icon-action button:hover i {
    transform: scale(1.2);
}

/* Make the icons behave like buttons on hover */
.icon-action button {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-action button:hover {
    box-shadow: var(--shadow-md);
}


/*=============================================
  CANVAS HEADER STYLES
=============================================*/
.canvas-header {
    color: var(--color-secondary);
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    font-weight: var(--font-weight-bold);
    border-top-left-radius: var(--radius-xsm);
    border-top-right-radius: var(--radius-xsm);
}

/*=============================================
  CANVAS FOOTER STYLES
=============================================*/
.canvas-footer {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-xsm);
    text-align: center;
    font-weight: var(--font-weight-normal);
    box-shadow: var(--shadow-sm);
    margin-top: var(--spacing-sm);
}


/*=============================================
  ACCESSIBILITY & INTERACTION
=============================================*/
/* Focus visible for better keyboard navigation */
.card:focus-visible,
.dropdown-item:focus-visible,
.list-group-item:focus-visible,
.accordion-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*=============================================
  SHAPE GRID STYLING (from standalone configurator)
=============================================*/

/* Shape grid layout */
.shape-grid {
    padding: 0;
}

/* Shape button styling */
.shape-btn,
.cutOut-btn {
    aspect-ratio: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--spacing-sm);
    background: var(--color-white);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--color-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

.shape-btn:focus,
.shape-btn:hover,
.cutOut-btn:focus,
.cutOut-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm-primary);
}

.shape-btn.active,
.cutOut-btn.active {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-md-primary);
}


.shape-btn svg,
.cutOut-btn svg {
    width: 34px;
    height: 34px;
    display: block;
    transition: transform var(--transition-fast);
}

.shape-btn:hover svg,
.cutOut-btn:hover svg{
    transform: scale(1.08);
}

/*=============================================
  VARIANT FILTER SIDEBAR
=============================================*/
#filter-sidebar .toggle-group {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-secondary);
    text-decoration: none;
    pointer-events: all;
}

#filter-sidebar .toggle-group:hover {
    text-decoration: underline;
}

#filter-sidebar .filter-count {
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
}

.shape-btn.active svg,
.cutOut-btn.active svg{
    transform: scale(1.2);
}