/* =========================================================================
   AURAANIX Design Studio — functional layer styles
   Additive only: these styles enable interactivity (canvas overlay, placement
   menu, text controls, editable quantity) while matching the existing dark
   premium design. No existing studio styles are overridden visually.
   ========================================================================= */

/* Fabric canvas sits above the jersey image, below the floating controls.
   IMPORTANT: do NOT transform/offset the .canvas-container — Fabric maps pointer
   events on the upper-canvas via getBoundingClientRect; any centering transform
   desyncs the visible canvas from the hit area and breaks the handles. We size
   the canvas to the preview box in JS, so plain top/left:0 fills it exactly. */
.ax-preview .canvas-container {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 2;
}
.ax-preview .canvas-container .lower-canvas,
.ax-preview .canvas-container .upper-canvas {
    border-radius: inherit;
}
/* Mobile: Fabric traps touches on the canvas so the page can't scroll past the
   studio. Make the canvas display-only on phones/tablets — pointer-events:none
   means every touch passes straight through to the page, so it scrolls exactly
   like normal content. (The design still renders; editing is desktop-only, and
   zoom uses the on-screen +/- buttons.) The .ax-preview__controls sit outside
   .canvas-container, so the zoom/fullscreen buttons keep working. */
@media (max-width: 991.98px) {
    .ax-preview .canvas-container {
        pointer-events: none !important;
        touch-action: pan-y !important;
    }
}
.ax-preview__jersey { z-index: 1; }
.ax-preview.is-loading .canvas-container { opacity: 0; }

/* Preview control icons (rotate / zoom / fullscreen) — force pure white. */
.ax-preview__controls button { color: #fff; }
/* Print-area editor toggle — highlighted (gold) while the box is being set. */
.ax-preview__controls #axEditArea.is-active {
    background: #c9a24b;
    border-color: #c9a24b;
    color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.3);
}
.ax-preview__controls #axEditArea.is-active svg { stroke: #1a1a1a; }
.ax-preview__controls img {
    filter: brightness(0) invert(1);
    opacity: 1;
}
.ax-preview__controls svg { color: #fff; stroke: #fff; }

/* Fullscreen: fill the viewport and let JS resize the canvas to match. */
.ax-preview.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1080;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    background: radial-gradient(circle at 50% 42%, #181818 0%, #000 80%);
}
body.ax-fs-lock { overflow: hidden; }

/* ---- Placement dropdown ---- */
.ax-placement-menu {
    position: fixed;
    z-index: 1090;
    min-width: 190px;
    padding: 6px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.ax-placement-menu[hidden] { display: none; }
.ax-placement-menu__item {
    display: block; width: 100%;
    padding: 9px 12px;
    text-align: left;
    background: transparent;
    border: 0; border-radius: 8px;
    color: #d6d6d6; font-size: 13px; font-weight: 500;
    cursor: pointer;
}
.ax-placement-menu__item:hover,
.ax-placement-menu__item.is-active { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Active states for selectable controls */
.ax-font.is-active { border-color: var(--ax-gold, #c8a24b); }
.ax-cust.is-active { border-color: rgba(255, 255, 255, 0.35); }

/* Editable quantity keeps the exact look of the static number. */
.ax-qty__val {
    outline: none;
    cursor: text;
    min-width: 28px;
    padding: 0 2px;
}
.ax-qty__val:focus { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); border-radius: 4px; }

/* Busy state for the add-to-cart button */
.ax-summary__btn.is-busy { opacity: 0.6; pointer-events: none; }

/* Lightweight toast for studio feedback */
.ax-toast {
    position: fixed;
    left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
    z-index: 1100;
    padding: 12px 22px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    color: #fff; font-size: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.ax-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ax-toast.is-error { border-color: rgba(210, 59, 59, 0.5); }

/* ---- Selected colour name + HEX/RGB (Task 034) ---- */
.ax-colorinfo {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0 2px; padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}
.ax-colorinfo[hidden] { display: none; }
.ax-colorinfo__sw { width: 26px; height: 26px; border-radius: 6px; flex: none; border: 1px solid rgba(255,255,255,.25); }
.ax-colorinfo__meta { display: flex; flex-direction: column; min-width: 0; }
.ax-colorinfo__name { color: #fff; font-size: 13px; font-weight: 600; }
.ax-colorinfo__code { color: #9a9a9a; font-size: 11px; letter-spacing: .2px; }

/* ---- Text tool (Tasks 035 / 037) ---- */
.ax-texttool { display: flex; flex-direction: column; gap: 10px; }
.ax-texttool__add { display: flex; gap: 8px; }
.ax-textinput {
    flex: 1; min-width: 0; height: 38px; padding: 0 12px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px; color: #fff; font-size: 13px; outline: none;
}
.ax-textinput:focus { border-color: var(--ax-gold, #c8a24b); }
.ax-select {
    height: 38px; padding: 0 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px; color: #fff; font-size: 13px; cursor: pointer; outline: none;
}
.ax-select--sm { flex: 0 0 96px; }
.ax-select:focus { border-color: var(--ax-gold, #c8a24b); }
/* Make the opened dropdown list readable (was white text on white bg). */
.ax-select option { background: #1a1a1a; color: #fff; }
.ax-textadd {
    height: 40px; border: 0; border-radius: 9px; cursor: pointer;
    background: var(--ax-gold, #c8a24b); color: #1a1206; font-size: 13px; font-weight: 700;
}
.ax-textadd:hover { filter: brightness(1.06); }
.ax-ctl { display: flex; flex-direction: column; gap: 6px; }
.ax-ctl__label { font-size: 11px; font-weight: 600; letter-spacing: .4px; color: #9a9a9a; text-transform: uppercase; }
.ax-ctl__label b { color: var(--ax-gold, #c8a24b); font-weight: 700; }
.ax-range { width: 100%; accent-color: var(--ax-gold, #c8a24b); cursor: pointer; }
.ax-textstyle { display: flex; align-items: center; gap: 8px; }
.ax-styletoggle {
    width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    color: #fff; font-size: 15px;
}
.ax-styletoggle.is-active { background: var(--ax-gold, #c8a24b); color: #1a1206; border-color: var(--ax-gold, #c8a24b); }
.ax-colorpick {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 10px; border-radius: 9px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    color: #cfcfcf; font-size: 12px; cursor: pointer;
}
.ax-colorpick input[type="color"] { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.ax-texttool__hint { margin: 2px 0 0; font-size: 11.5px; color: #8a8a8a; line-height: 1.4; }
.ax-toast.is-success { border-color: rgba(31, 138, 95, 0.6); }

/* ---- Text colour palette (left panel) ---- */
.ax-palette {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 8px 0 6px;
}
.ax-palette__dot {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.18); position: relative;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.ax-palette__dot:hover { transform: scale(1.12); }
.ax-palette__dot.is-active { border-color: var(--ax-gold, #c8a24b); box-shadow: 0 0 0 2px rgba(200, 162, 75, 0.35); }
.ax-palette__dot--custom {
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
    background: conic-gradient(#f00, #ff8a00, #ffe600, #4dff00, #00ffe0, #0066ff, #d400ff, #f00);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.ax-palette__dot--custom input[type="color"] {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.ax-palette.is-locked { opacity: 0.4; pointer-events: none; filter: grayscale(0.5); }
.ax-palette__hint { margin: 2px 0 0; font-size: 11.5px; color: #8a8a8a; line-height: 1.4; }