/*
 * frontend.css — small always-on stylesheet for enabled product pages.
 *
 * Styles the "Personalize" button, the closed overlay skeleton, and the
 * loading state. The heavy editor UI CSS (`editor.css`) is injected only
 * on button click by loader.js, so shoppers who never open the designer
 * pay zero page-weight cost for it.
 *
 * Uses the customizer design tokens for the accent — merchants can
 * override `--pc-accent` / `--pc-accent-contrast` in their theme.
 */

:root {
    --pc-accent: #6B4EE6;
    --pc-accent-hover: #5A3FD6;
    --pc-accent-contrast: #FFFFFF;
    --pc-ink: #1D1731;
    --pc-ink-muted: #6E6781;
    --pc-surface: #FFFFFF;
    --pc-surface-alt: #F4F2FA;
    --pc-border: rgba(29, 23, 49, 0.12);
    --pc-shadow: 0 10px 40px rgba(29, 23, 49, 0.14);
    --pc-radius: 12px;
}

/* ---------- Personalize row ---------- */

.pcstm-personalize-row {
    display: block;
    margin: 20px 0 16px;
    padding: 0;
    box-sizing: border-box;
}

.pcstm-personalize-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 0;
    border-radius: var(--pc-radius);
    background: var(--pc-accent);
    color: var(--pc-accent-contrast);
    font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(107, 78, 230, 0.28);
    transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.pcstm-personalize-btn:hover,
.pcstm-personalize-btn:focus-visible {
    background: var(--pc-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(107, 78, 230, 0.36);
    outline: none;
}

.pcstm-personalize-btn:focus-visible {
    outline: 3px solid rgba(107, 78, 230, 0.45);
    outline-offset: 2px;
}

.pcstm-personalize-btn:active {
    transform: translateY(0);
}

.pcstm-personalize-btn__icon {
    flex-shrink: 0;
    display: inline-flex;
}

.pcstm-personalize-btn__label {
    display: inline-block;
}

.pcstm-personalize-row__hint {
    margin: 8px 0 0;
    padding: 0;
    color: var(--pc-ink-muted);
    font: 400 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Overlay ---------- */

.pcstm-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.pcstm-editor-overlay[data-open="true"] {
    display: flex;
}

.pcstm-editor-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(29, 23, 49, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.pcstm-editor-overlay__dialog {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--pc-surface);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* N11: hidden until React signals ready, then revealed in one paint.
       visibility keeps layout reserved so the reveal doesn't itself
       cause a shift. Desktop reveals instantly (editor mounts fast);
       mobile reveals once double-rAF + document.fonts.ready settle. */
    visibility: hidden;
}

.pcstm-editor-overlay[data-editor-ready="true"] .pcstm-editor-overlay__dialog {
    visibility: visible;
}

.pcstm-editor-overlay[data-editor-ready="true"] .pcstm-editor-overlay__loading {
    display: none;
}

/* N11: overlay-level loading affordance. Absolutely positioned inside
   the overlay so it stays visible while the dialog is
   visibility:hidden. Sits on top of the dark blurred backdrop, so text
   is white for contrast (--pc-ink-muted would disappear against the
   backdrop). Stacked column: prominent spinner on top, caption below. */
.pcstm-editor-overlay__loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #ffffff;
    font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.pcstm-editor-overlay__loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--pc-accent);
    border-radius: 50%;
    animation: pcstm-spin 800ms linear infinite;
}

.pcstm-editor-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--pc-border);
    background: var(--pc-surface);
}

.pcstm-editor-overlay__title {
    margin: 0;
    padding: 0;
    color: var(--pc-ink);
    font: 600 18px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pcstm-editor-overlay__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pc-ink);
    cursor: pointer;
    transition: background-color 120ms ease;
}

.pcstm-editor-overlay__close:hover,
.pcstm-editor-overlay__close:focus-visible {
    background: var(--pc-surface-alt);
    outline: none;
}

.pcstm-editor-overlay__close:focus-visible {
    outline: 3px solid rgba(107, 78, 230, 0.45);
    outline-offset: -1px;
}

.pcstm-editor-overlay__body {
    flex: 1 1 auto;
    min-height: 0;
    /*
      v0.12.4: dropped `overflow: auto`. The overlay is a fixed-height
      modal — its content must FIT (Bootstrap / Carbon guidance) so no
      inner scrollbar appears. Every shrinkable region inside the shell
      now uses `min-height: 0` + flex sizing to accommodate.
    */
    overflow: hidden;
    background: var(--pc-surface-alt);
    display: flex;
    flex-direction: column;
}

/*
  v0.12.5-hotfix: `.pcstm-editor-root` is the React mount wrapper the
  adapter injects between `.pcstm-editor-overlay__body` and `.pc-
  editor` (see `packages/adapter-woocommerce/src/editor.tsx` →
  `mount()`). Without CSS the wrapper defaults to `display: block;
  height: auto`, and `.pc-editor { height: 100 %; max-height: 100 %
  }` inside it resolves against the wrapper's intrinsic content
  height — so on the Clipart tab the shell grew to ~1400 px and the
  canvas visibly resized as the shopper switched tool tabs. Give
  the wrapper the same flex-column constraints as its parent so
  `.pc-editor` gets a definite 100 % of the overlay body's height.
*/
.pcstm-editor-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pcstm-editor-overlay__body .pcstm-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 420px;
    color: var(--pc-ink-muted);
    font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pcstm-editor-overlay__body .pcstm-editor-loading::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border: 2px solid rgba(107, 78, 230, 0.3);
    border-top-color: var(--pc-accent);
    border-radius: 50%;
    animation: pcstm-spin 800ms linear infinite;
}

@keyframes pcstm-spin {
    to {
        transform: rotate(360deg);
    }
}

.pcstm-editor-overlay__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--pc-border);
    background: var(--pc-surface);
}

.pcstm-editor-overlay__cancel,
.pcstm-editor-overlay__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 10px;
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
    border: 1px solid transparent;
}

.pcstm-editor-overlay__cancel {
    background: transparent;
    color: var(--pc-ink-muted);
    border-color: var(--pc-border);
}

.pcstm-editor-overlay__cancel:hover,
.pcstm-editor-overlay__cancel:focus-visible {
    color: var(--pc-ink);
    background: var(--pc-surface-alt);
    outline: none;
}

.pcstm-editor-overlay__submit {
    background: var(--pc-accent);
    color: var(--pc-accent-contrast);
    border-color: var(--pc-accent);
    box-shadow: 0 6px 18px rgba(107, 78, 230, 0.28);
}

.pcstm-editor-overlay__submit:hover,
.pcstm-editor-overlay__submit:focus-visible {
    background: var(--pc-accent-hover);
    border-color: var(--pc-accent-hover);
    outline: none;
    transform: translateY(-1px);
}

.pcstm-editor-overlay__submit[disabled],
.pcstm-editor-overlay__submit[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
    transform: none;
}

/*
 * Variation gate — the CTA is aria-disabled, NOT disabled, so it stays
 * focusable and keeps announcing its `aria-describedby` reason. A real
 * `disabled` attribute would drop it out of the tab order and leave a
 * keyboard or screen-reader shopper with no way to discover why they
 * cannot continue. The click handler is what actually refuses.
 */
.pcstm-editor-overlay__submit[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pcstm-editor-overlay__submit[aria-disabled="true"]:hover {
    background: var(--pc-accent);
    border-color: var(--pc-accent);
    transform: none;
}

.pcstm-editor-overlay__notice {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    text-align: left;
    font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--pc-ink-muted);
}

.pcstm-editor-overlay__choose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 10px;
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
    background: var(--pc-surface-alt);
    color: var(--pc-ink);
    border: 1px solid var(--pc-border);
}

.pcstm-editor-overlay__choose:hover,
.pcstm-editor-overlay__choose:focus-visible {
    background: var(--pc-surface);
    border-color: var(--pc-accent);
    outline: none;
}

.pcstm-editor-overlay__choose:focus-visible {
    outline: 3px solid rgba(107, 78, 230, 0.45);
    outline-offset: 2px;
}

.pcstm-editor-overlay__cancel:focus-visible,
.pcstm-editor-overlay__submit:focus-visible {
    outline: 3px solid rgba(107, 78, 230, 0.45);
    outline-offset: 2px;
}

/* Body scroll lock while overlay is open. */
body.pcstm-overlay-open {
    overflow: hidden;
}

/* ---------- Toast (post-add confirmation) ---------- */

.pcstm-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 999998;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--pc-ink);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(29, 23, 49, 0.28);
    font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.pcstm-toast[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(-4px);
}

.pcstm-toast__link {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.pcstm-toast--error {
    background: #B4213B;
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
    .pcstm-editor-overlay {
        padding: 0;
    }
    .pcstm-editor-overlay__dialog {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .pcstm-personalize-btn {
        width: 100%;
        justify-content: center;
    }
    /*
     * The footer is a single flex row on desktop. At phone width the
     * variation notice needs its own line above the buttons, or it
     * squeezes "Choose options" / "Cancel" / "Add to cart" into
     * unreadable slivers.
     */
    .pcstm-editor-overlay__footer {
        flex-wrap: wrap;
    }
    .pcstm-editor-overlay__notice {
        flex: 1 0 100%;
        text-align: center;
    }
}