/* =========================================================
   PERSONAILIT — DESIGN SYSTEM
   =========================================================
   Everything lives inside .personailit-box, with its own CSS
   variables. This lets any store override the palette/type
   without touching this file, for example:

   .personailit-box {
       --pi-accent: #7C4DFF;
       --pi-radius: 4px;
   }
========================================================= */

.personailit-box {
    --pi-ink: #23262b;
    --pi-ink-soft: #6b7178;
    --pi-surface: #ffffff;
    --pi-surface-alt: #faf7f6;
    --pi-border: #e7e2e0;
    --pi-accent: #c2185b;
    --pi-accent-soft: #fbe7ee;
    --pi-accent-ink: #ffffff;
    --pi-success: #2e7d5b;
    --pi-error: #c0392b;
    /* Color of the sale price (struck-through + new value) when a
       color/box or combo has an active sale_price — its own variable
       (doesn't reuse --pi-error) so it can be hooked up to an admin
       color option later without touching anything else. */
    --pi-sale-color: #c0392b;
    --pi-radius: 10px;
    --pi-radius-sm: 6px;
    --pi-box-padding: 22px;
    --pi-shadow: 0 1px 2px rgba(35, 38, 43, 0.04), 0 8px 24px -12px rgba(35, 38, 43, 0.18);
    --pi-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;
    box-sizing: border-box;
    clear: both;
    margin-top: 18px;
    margin-bottom: 22px;
    padding: var(--pi-box-padding) var(--pi-box-padding) calc(var(--pi-box-padding) + 2px);
    background: var(--pi-surface);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius);
    box-shadow: var(--pi-shadow);
    color: var(--pi-ink);
    font-size: 14px;
    line-height: 1.5;
}

/* Themes whose add-to-cart form is a flex or grid row (quantity + button
   side by side, as in Astra or Kadence): the box takes a full row of its
   own, as in any other theme. No effect when the form is a plain block. */
form.cart > .personailit-box {
    flex: 0 0 100%;
    grid-column: 1 / -1;
    max-width: 100%;
}

.personailit-box *,
.personailit-box *::before,
.personailit-box *::after {
    box-sizing: border-box;
}

/* Discreet signature stripe along the top of the card — the only
   "decorative" touch of color in the whole block. */
.personailit-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--pi-box-padding);
    right: var(--pi-box-padding);
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--pi-accent), color-mix(in srgb, var(--pi-accent) 40%, transparent));
}

.personailit-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 18px;
    font-size: var(--pi-title-font-size, 12px);
    font-weight: 700;
    color: var(--pi-ink-soft);
}

.personailit-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pi-accent);
    flex: none;
}

/* Spacing between elements when the product has more than one (text +
   image, two text fields, etc.) */
.personailit-field {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px dashed var(--pi-border);
}

.personailit-field:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.personailit-label {
    display: block;
    margin-bottom: 9px;
    font-weight: 600;
    color: var(--pi-ink);
}

/* "+ $1.00" note next to a field's label (text/image) with
   extra_price set in the admin — see each element's
   render_frontend(). Sits inline with the label, doesn't replace it. */
.personailit-extra-price-note {
    display: inline-block;
    margin-left: 6px;
    margin-bottom: 9px;
    font-weight: 600;
    font-size: 14px;
    color: var(--pi-accent, #2271b1);
}

/* Sale price (color/box with sale_price, or combo with sale_price) —
   written by PersoNailitPricing.render() in assets/js/pricing.js
   inside the native .woocommerce-Price-amount.amount span itself,
   without touching the theme's structure around it. The color comes
   from --pi-sale-color (defined above in .personailit-box), designed
   on purpose to allow hooking up an admin color option later, without
   needing to change this file. */
.personailit-original-price {
    text-decoration: line-through;
    opacity: 0.6;
    font-weight: 400;
    margin-right: 4px;
}

.personailit-sale-price {
    color: var(--pi-sale-color, #c0392b);
    font-weight: 700;
}

.personailit-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--pi-surface-alt);
    border: 1.5px solid var(--pi-border);
    border-radius: var(--pi-radius-sm);
    font-size: 14px;
    color: var(--pi-ink);
    transition: border-color var(--pi-transition), background var(--pi-transition), box-shadow var(--pi-transition);
}

.personailit-input::placeholder {
    color: var(--pi-ink-soft);
}

.personailit-input:hover {
    border-color: color-mix(in srgb, var(--pi-accent) 35%, var(--pi-border));
}

.personailit-input:focus {
    outline: none;
    background: var(--pi-surface);
    border-color: var(--pi-accent);
    box-shadow: 0 0 0 3px var(--pi-accent-soft);
}

.personailit-input:invalid:not(:placeholder-shown) {
    border-color: var(--pi-error);
}

.personailit-required {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: var(--pi-ink-soft);
    font-size: 12px;
}

.personailit-required::before {
    content: "•";
    color: var(--pi-accent);
    font-size: 16px;
    line-height: 0;
}

.personailit-required-mark {
    color: var(--pi-accent);
    font-weight: 700;
}

/* Validation error message (inserted via JS when the server rejects
   the add-to-cart, or used by future client-side validation). */
.personailit-field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--pi-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--pi-error) 25%, transparent);
    border-radius: var(--pi-radius-sm);
    color: var(--pi-error);
    font-size: 12.5px;
    animation: personailit-shake 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .personailit-box,
    .personailit-box * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

@keyframes personailit-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@media (max-width: 480px) {
    .personailit-box {
        padding: 18px 16px 20px;
    }
}

/* =========================================================
   Out of stock — mark (red X) over the swatch/box and
   blocking "Add to cart".

   The X is the same span (.personailit-swatch-stock-badge) on
   both elements (color/box) — shown by one of two triggers,
   both using the same rule below:
   - data-stock-status="outofstock" (simple mode: static mark,
     applied once by color/frontend.js and box/frontend.js);
   - .personailit-swatch-outofstock class (Combinations mode:
     applied/removed dynamically by pricing.js on every
     selection, see updateComboSwatchMarks()).
   ========================================================= */

.personailit-swatch-stock-badge {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.personailit-swatch-stock-badge::before {
    content: "\2715";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    color: var(--pi-error, #c0392b);
    /* White outline around the X, so it stays visible both over dark
       colors and over the light background of text boxes. */
    text-shadow:
        0 1px 0 #fff, 0 -1px 0 #fff,
        1px 0 0 #fff, -1px 0 0 #fff,
        1px 1px 0 #fff, -1px -1px 0 #fff,
        1px -1px 0 #fff, -1px 1px 0 #fff;
}

.personailit-box[data-has-combinations="0"] .personailit-color-swatch[data-stock-status="outofstock"] .personailit-swatch-stock-badge,
.personailit-box[data-has-combinations="0"] .personailit-box-swatch[data-stock-status="outofstock"] .personailit-swatch-stock-badge,
.personailit-color-swatch.personailit-swatch-outofstock .personailit-swatch-stock-badge,
.personailit-box-swatch.personailit-swatch-outofstock .personailit-swatch-stock-badge {
    display: flex;
}

/* "Out of stock" message (PersoNailit_Frontend::render_stock_message()),
   hidden by default, shown by pricing.js right after WooCommerce's
   native "Add to cart" button — so it lives outside .personailit-box,
   without depending on the --pi-* variables (uses its own
   fallbacks). */
.personailit-stock-message {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    color: var(--pi-error, #c0392b);
    font-size: 13px;
    font-weight: 600;
}

.single_add_to_cart_button.personailit-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}