/**
 * DevVN Frame Designer — frontend product page styles.
 * Flat aesthetic — teal accent, gradient CTA, dashed empty slots, pill
 * picker thumbs. Mobile-first.
 */
.devvn-fd-designer {
    --devvn-fd-accent: #2EC4B6;
    --devvn-fd-accent-dark: #1E8E84;
    --devvn-fd-cta-end: #1E3A8A;
    --devvn-fd-border: #E5E7EB;
    --devvn-fd-muted: #6B7280;
    --devvn-fd-bg-soft: #F9FAFB;
    --devvn-fd-radius: 10px;
    --devvn-fd-error: #B91C1C;

    margin: 0;
    font-size: 14px;
    color: #1f2937;
    display: block;
    width: 100%;
}

/* Mockup */
.devvn-fd-designer__mockup {
    position: relative;
    margin-bottom: 16px;
    border-radius: var(--devvn-fd-radius);
    overflow: hidden;
    background: var(--devvn-fd-bg-soft);
}
.devvn-fd-designer__mockup img {
    display: block;
    width: 100%;
    height: auto;
}
.devvn-fd-designer__hint {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--devvn-fd-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.devvn-fd-designer__empty {
    padding: 16px;
    background: var(--devvn-fd-bg-soft);
    border-radius: var(--devvn-fd-radius);
    color: var(--devvn-fd-muted);
}

/* Phase 2: canvas mode replaces the file-input list. */
.devvn-fd-designer--canvas .devvn-fd-designer__canvas-wrap {
    position: relative;
    margin-bottom: 16px;
    border-radius: var(--devvn-fd-radius);
    overflow: hidden;
    background: var(--devvn-fd-bg-soft);
}
.devvn-fd-designer__canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
}
.devvn-fd-designer__canvas-loader {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--devvn-fd-accent-dark);
    font-weight: 600;
    z-index: 5;
    transition: opacity .18s ease;
}
.devvn-fd-designer__canvas-loader[hidden] {
    display: none !important;
}

/* Image editor modal */
.devvn-fd-modal[hidden] { display: none !important; }
.devvn-fd-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.devvn-fd-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.devvn-fd-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: min(560px, 92vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.devvn-fd-modal__header {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--devvn-fd-border);
}
.devvn-fd-modal__title {
    margin: 0;
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}
.devvn-fd-modal__close {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--devvn-fd-muted);
    cursor: pointer;
    padding: 4px 10px;
}
.devvn-fd-modal__body {
    padding: 14px 18px;
    overflow-y: auto;
}
.devvn-fd-modal__stage {
    background: var(--devvn-fd-bg-soft);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}
.devvn-fd-modal__canvas {
    max-width: 100%;
    height: auto;
    background: #fff;
}
.devvn-fd-modal__controls {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.devvn-fd-modal__control {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--devvn-fd-muted);
}
.devvn-fd-modal__control input[type="range"] { width: 100%; }
.devvn-fd-modal__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.devvn-fd-modal__quick button {
    border: 1px solid var(--devvn-fd-border);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--devvn-fd-accent-dark);
    min-height: 36px;
}
.devvn-fd-modal__footer {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid var(--devvn-fd-border);
    gap: 8px;
}
.devvn-fd-modal__spacer { flex: 1; }
.devvn-fd-modal__btn {
    border: 1px solid var(--devvn-fd-border);
    background: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 600;
    min-height: 40px;
}
.devvn-fd-modal__btn--primary {
    background: linear-gradient(90deg, var(--devvn-fd-accent) 0%, var(--devvn-fd-cta-end) 100%);
    color: #fff;
    border-color: transparent;
}
.devvn-fd-modal__btn--ghost {
    color: var(--devvn-fd-muted);
}

@media (max-width: 600px) {
    .devvn-fd-modal__panel {
        width: 100vw;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }
    .devvn-fd-modal__quick button {
        flex: 1 1 calc(50% - 4px);
    }
}

/* Slot styling lives in dom-designer.css now (DOM frontend, Phase 3
   refactor). The pre-refactor grid + .is-filled border block was here
   and accidentally cascaded into the new absolutely-positioned slots
   — removed. */

/* Pickers */
.devvn-fd-picker {
    margin-bottom: 16px;
}
.devvn-fd-picker__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #1f2937;
}
.devvn-fd-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.devvn-fd-picker__item {
    margin: 0;
}
.devvn-fd-picker__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border: 2px solid #c3c3c3;
    border-radius: var(--devvn-fd-radius);
    background: var(--devvn-fd-bg-soft);
    cursor: pointer;
    transition: border-color .12s ease;
}
.devvn-fd-picker__label:hover {
    border-color: rgba(46, 196, 182, 0.5);
}
.devvn-fd-picker__label.is-selected {
    border-color: var(--devvn-fd-accent);
    background: #fff;
}
.devvn-fd-picker__label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.devvn-fd-picker__thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--devvn-fd-muted);
    border: 1px solid var(--devvn-fd-border);
}
.devvn-fd-picker__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.devvn-fd-picker__name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

/* Picker display mode — admin Settings tab toggles between
 *   .devvn-fd-picker--thumb-text  (default, current behaviour)
 *   .devvn-fd-picker--thumb       (icon-only, name kept in DOM for a11y
 *                                  + tooltip but visually hidden)
 * Both classes are also applied to the free-layout flow's pickers
 * since the templates are shared.
 */
.devvn-fd-picker--thumb .devvn-fd-picker__label {
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.devvn-fd-picker--thumb .devvn-fd-picker__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}
.devvn-fd-picker--thumb .devvn-fd-picker__thumb {
    width: 56px;
    height: 56px;
    border-radius: calc(var(--devvn-fd-radius) - 2px);
    border: 0;
}
/* Matt visualisation — only in thumb-only mode so the compact tile
 * conveys the same "has matt" cue the customer will see in-canvas.
 * The thumb wrapper becomes the matt colour and inset-pads the photo
 * with ~12% on each side (matches the visual feel of the runtime
 * 8% cap on actual slot photo borders, sized up so a 56px chip still
 * reads the matt clearly). In thumb+text mode the row already says
 * "Có viền" / "Không viền" so we leave the thumb alone.
 */
.devvn-fd-picker--thumb .devvn-fd-picker__thumb.has-photo-border {
    background: var(--devvn-fd-pthumb-border-color, #fff);
    padding: 12%;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.devvn-fd-picker--thumb .devvn-fd-picker__thumb.has-photo-border img {
    border-radius: 3px;
}

/* Summary */
.devvn-fd-summary {
    border: 1px solid var(--devvn-fd-border);
    border-radius: var(--devvn-fd-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #fff;
}
.devvn-fd-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
}
.devvn-fd-summary__row--total {
    border-top: 1px dashed var(--devvn-fd-border);
    margin-top: 6px;
    padding-top: 10px;
}
.devvn-fd-summary__label {
    color: var(--devvn-fd-muted);
}
.devvn-fd-summary__total {
    font-weight: 700;
    font-size: 16px;
    color: var(--devvn-fd-accent-dark);
}

/* Tweak the WC add-to-cart button to match flat / gradient look. Themes
   often override these — we only apply when our designer wraps the form. */
.devvn-fd-designer ~ button.single_add_to_cart_button,
form.cart:has(.devvn-fd-designer) button.single_add_to_cart_button {
    background-image: linear-gradient(90deg, var(--devvn-fd-accent) 0%, var(--devvn-fd-cta-end) 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}


/* Phase 3: Free layout shape palette + status. */
.devvn-fd-shape-palette {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}
.devvn-fd-shape-palette__label {
    font-size: 13px;
    color: #6B7280;
    font-weight: 600;
}
.devvn-fd-shape-palette__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.devvn-fd-shape-palette__btn {
    appearance: none;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--devvn-fd-accent-dark, #1E8E84);
    cursor: pointer;
    transition: all .12s ease;
}
.devvn-fd-shape-palette__btn:hover {
    border-color: var(--devvn-fd-accent, #2EC4B6);
    background: rgba(46, 196, 182, 0.08);
}
.devvn-fd-shape-palette__btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}
.devvn-fd-shape-palette__hint {
    flex: 1 1 100%;
    margin: 4px 0 0;
    font-size: 12px;
    color: #6B7280;
}
.devvn-fd-free-status {
    margin: 8px 0 0;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 6px;
    background: #F9FAFB;
    color: #1f2937;
}
.devvn-fd-free-status[data-state="below"] {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.devvn-fd-free-status[data-state="ok"] {
    background: rgba(46, 196, 182, 0.12);
    color: var(--devvn-fd-accent-dark, #1E8E84);
}
button.single_add_to_cart_button.devvn-fd-cart-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Force-hide the qty input while slots are still pending — themes
   sometimes set `display: inline-block !important` on .quantity which
   overrides the bare `[hidden]` HTML semantic. */
form.cart .quantity[hidden] {
    display: none !important;
}


/* Phase 3 fix — "Kích thước" toggle + dimension overlay. */
.devvn-fd-designer__canvas-wrap { position: relative; }

.devvn-fd-dim-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    appearance: none;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transition: all .12s ease;
}
.devvn-fd-dim-toggle:hover {
    border-color: var(--devvn-fd-accent, #2EC4B6);
    color: var(--devvn-fd-accent-dark, #1E8E84);
}
.devvn-fd-dim-toggle.is-active {
    background: var(--devvn-fd-accent-dark, #1E8E84);
    color: #fff;
    border-color: var(--devvn-fd-accent-dark, #1E8E84);
}
.devvn-fd-dim-toggle__icon {
    display: inline-flex;
    align-items: center;
}

.devvn-fd-dim-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
.devvn-fd-dim-overlay[hidden] { display: none; }

/* Outer width / height labels with arrow lines */
.devvn-fd-dim-overlay__width,
.devvn-fd-dim-overlay__height {
    position: absolute;
    background: var(--devvn-fd-accent-dark, #1E8E84);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    white-space: nowrap;
}
.devvn-fd-dim-overlay__width {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}
.devvn-fd-dim-overlay__width::before,
.devvn-fd-dim-overlay__width::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 36px;
    height: 1px;
    background: var(--devvn-fd-accent-dark, #1E8E84);
}
.devvn-fd-dim-overlay__width::before { right: 100%; margin-right: 4px; }
.devvn-fd-dim-overlay__width::after  { left: 100%; margin-left: 4px; }

.devvn-fd-dim-overlay__height {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
}

/* Per-slot text labels */
.devvn-fd-dim-overlay__slots {
    position: absolute;
    inset: 0;
}
.devvn-fd-dim-overlay__slot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    font-size: 12px;
}
.devvn-fd-dim-overlay__slot span {
    background: rgba(15, 23, 42, 0.55);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

/* ============= Phase 3 layout split: canvas-zone + cta overlay ============= */
.devvn-fd-canvas-zone {
    position: relative;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
/* Whole-canvas frame mode: the frame is a rectangular picture border, so
   the container's rounded corners would clip its square corners. Drop the
   radius so the frame sits flush. */
.devvn-fd-canvas-zone.frame-scope-canvas {
    border-radius: 0;
}
.devvn-fd-canvas-zone .devvn-fd-designer__canvas-wrap {
    position: relative;
    background: var(--devvn-fd-bg-soft, #F9FAFB);
}

/* (1) Top-left hint chip */
.devvn-fd-canvas-zone__hint {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    background: var(--devvn-fd-accent-dark, #1E8E84);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}

/* Floating toolbar at bottom of canvas: preview / upload / dim toggle */
.devvn-fd-canvas-zone__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    pointer-events: none;
}
.devvn-fd-canvas-zone__bar > * {
    pointer-events: auto;
}

.devvn-fd-canvas-btn {
    appearance: none;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #111827;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    transition: all .14s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.devvn-fd-canvas-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}
.devvn-fd-canvas-btn--icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #4B5563;
    margin: 0;
    padding: 8px;
    min-height: inherit;
}
.devvn-fd-canvas-btn--icon.is-active {
    background: var(--devvn-fd-accent-dark, #1E8E84);
    border-color: var(--devvn-fd-accent-dark, #1E8E84);
    color: #fff;
}
.devvn-fd-canvas-btn--icon.is-active svg, .devvn-fd-canvas-btn--icon.is-active svg * {
    fill: #fff;
}
.devvn-fd-canvas-btn--cta {
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 14px;
    color: #1f2937;
    gap: 6px;
    margin: 0;
}
.devvn-fd-canvas-btn--cta[hidden] {
    display: none !important;
}
.devvn-fd-canvas-btn__plus {
    color: var(--devvn-fd-accent-dark, #1E8E84);
    font-weight: 700;
    font-size: 16px;
}

/* ---------------------------------------------------------------------
 * Portal tooltip — JS appends a single `.devvn-fd-tooltip` to <body>
 * and moves it absolutely (page coords). Triggers carry
 * `data-fd-tooltip="text"` + optional `data-fd-tooltip-pos="top|bottom"`.
 * Living outside any clipping ancestor is what lets the tooltip escape
 * a parent's overflow:hidden — the canvas zone in particular.
 * ------------------------------------------------------------------ */
.devvn-fd-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
    max-width: 260px;
    white-space: normal;
    text-align: center;
    word-break: break-word;
}
/* Mid-measure: visible enough to read offsetWidth/Height but still
   invisible to the user, so we never flash at (0,0). */
.devvn-fd-tooltip.is-measuring {
    visibility: hidden;
    opacity: 0;
}
.devvn-fd-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.devvn-fd-tooltip__arrow {
    position: absolute;
    left: var(--devvn-fd-tooltip-arrow-x, 50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    transform: translateX(-50%);
}
.devvn-fd-tooltip[data-placement="top"] .devvn-fd-tooltip__arrow {
    top: 100%;
    border-top-color: #111827;
}
.devvn-fd-tooltip[data-placement="bottom"] .devvn-fd-tooltip__arrow {
    bottom: 100%;
    border-bottom-color: #111827;
}

/* (5) Big upload CTA overlay sitting on top of WC Add-to-Cart button */
.devvn-fd-cta-overlay {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 14px 24px;
    margin-top: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    background: linear-gradient(90deg, var(--devvn-fd-accent, #2EC4B6) 0%, var(--devvn-fd-cta-end, #1E3A8A) 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    transition: filter .14s ease;
}
.devvn-fd-cta-overlay:hover { filter: brightness(1.05); }
.devvn-fd-cta-overlay[hidden] { display: none !important; }
.devvn-fd-cta-overlay__plus {
    font-size: 20px;
    line-height: 1;
}

/* When uploads are pending the underlying WC button is dimmed but kept
   in the DOM so the CTA overlay can replace it visually. Scoped to forms
   that actually render the CTA overlay (Fixed flow only) — the Free
   layout has no overlay, so without this scope the button would disappear
   entirely and clicks would never reach the submit handler. */
form.cart:has(.devvn-fd-cta-overlay) button.single_add_to_cart_button.devvn-fd-cart-disabled {
    opacity: 0;
    pointer-events: none;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

/* ---- Variant pickers (material + size) ---- */
.devvn-fd-variant-zone {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Text-only chips (size labels — no thumbnail). Even in `thumb` display
 * mode the label text must stay visible, since the chip IS the text. */
.devvn-fd-picker__label--text {
    padding: 6px 14px;
}
.devvn-fd-picker--thumb .devvn-fd-picker__label--text .devvn-fd-picker__name,
.devvn-fd-picker--size .devvn-fd-picker__name {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    overflow: visible;
    white-space: nowrap;
}
/* Material picker in thumb-text mode without a thumbnail: keep the chip
 * compact instead of showing the empty-thumb dash. */
.devvn-fd-picker--material .devvn-fd-picker__label:not(:has(.devvn-fd-picker__thumb)) {
    padding: 6px 14px;
}
/* The size picker renders one list per material; only the active
 * material's list is shown. `display:flex` on the list would beat the
 * UA's [hidden] rule, so re-assert it. */
.devvn-fd-picker__list[hidden] {
    display: none;
}