/**
 * VendMizer Pro — Multiple Shipping Addresses (split shipping), storefront styles.
 *
 * Scoped to the .vmz-sf-ms-* classes the split-checkout UI
 * (vmzp-checkout-multiship.js) emits inside the core checkout's shipping card.
 * Uses the storefront theme tokens the core checkout already defines
 * (--sf-accent, --sf-border, --sf-text, --sf-text-muted, --sf-bg-*), so it
 * inherits light/dark automatically. Logical properties throughout so it mirrors
 * cleanly under [dir="rtl"].
 *
 * @package VendMizer_Pro
 */

/* ── Toggle ── */
.vmz-sf-ms-toggle {
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: 10px;
    background: var(--sf-bg-subtle, rgba(0, 0, 0, 0.02));
}
.vmz-sf-ms-toggle__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-text, #111827);
    cursor: pointer;
}
.vmz-sf-ms-toggle__label span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vmz-sf-ms-toggle__label input[type="checkbox"] {
    inline-size: 18px;
    block-size: 18px;
    accent-color: var(--sf-accent, #00a4ff);
    cursor: pointer;
    flex-shrink: 0;
}
.vmz-sf-ms-toggle__hint {
    margin-block-start: 6px;
    font-size: 12px;
    color: var(--sf-text-muted, #6b7280);
    padding-inline-start: 28px;
}

/* ── Panel ── */
.vmz-sf-ms-panel {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vmz-sf-ms-assign__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sf-text-muted, #6b7280);
    margin-block-end: 8px;
}

/* ── Per-line assignment rows ── */
.vmz-sf-ms-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-block-start: 1px solid var(--sf-border, #e5e7eb);
}
.vmz-sf-ms-line:first-of-type {
    border-block-start: 0;
}
.vmz-sf-ms-line__thumb {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--sf-bg-subtle, #f3f4f6);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-text-muted, #9ca3af);
}
.vmz-sf-ms-line__info {
    flex: 1;
    min-inline-size: 0;
}
.vmz-sf-ms-line__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vmz-sf-ms-line__qty {
    font-size: 11px;
    color: var(--sf-text-muted, #6b7280);
    margin-block-start: 1px;
}
.vmz-sf-ms-dest,
.vmz-sf-ms-method {
    max-inline-size: 46%;
    padding: 7px 10px;
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: 8px;
    background: var(--sf-bg, #fff);
    color: var(--sf-text, #111827);
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.vmz-sf-ms-dest:focus,
.vmz-sf-ms-method:focus {
    outline: none;
    border-color: var(--sf-accent, #00a4ff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent, #00a4ff) 22%, transparent);
}

/* ── Per-destination method blocks ── */
.vmz-sf-ms-methods {
    padding-block-start: 4px;
}
.vmz-sf-ms-dest-block {
    padding: 10px 12px;
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: 10px;
    margin-block-end: 8px;
    background: var(--sf-bg-subtle, rgba(0, 0, 0, 0.015));
}
.vmz-sf-ms-dest-block:last-child {
    margin-block-end: 0;
}
.vmz-sf-ms-dest-block__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sf-text, #111827);
    margin-block-end: 8px;
    flex-wrap: wrap;
}
.vmz-sf-ms-dest-block__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--sf-text-muted, #6b7280);
    background: var(--sf-bg, #fff);
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: 999px;
    padding: 1px 8px;
}
.vmz-sf-ms-dest-block .vmz-sf-ms-method {
    max-inline-size: 100%;
    inline-size: 100%;
}

/* ── Notes ── */
.vmz-sf-ms-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sf-text-muted, #6b7280);
    padding: 6px 0;
}
.vmz-sf-ms-note--warn {
    color: var(--sf-danger, #dc2626);
}

/* ── Order-summary per-destination breakdown ── */
.vmz-sf-ms-summary {
    margin: 6px 0;
    padding-block: 8px;
    border-block: 1px dashed var(--sf-border, #e5e7eb);
}
.vmz-sf-ms-summary__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sf-text-muted, #6b7280);
    margin-block-end: 6px;
}
.vmz-sf-ms-summary__row {
    font-size: 12px;
    color: var(--sf-text-muted, #6b7280);
}

@media (max-width: 520px) {
    .vmz-sf-ms-dest,
    .vmz-sf-ms-method {
        max-inline-size: 42%;
    }
    .vmz-sf-ms-line__name {
        max-inline-size: 40vw;
    }
}

/* Edit link on a new (ad-hoc) destination block */
.vmz-sf-ms-edit {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-accent, #00a4ff);
    text-decoration: none;
    cursor: pointer;
}
.vmz-sf-ms-edit:hover { text-decoration: underline; }

/* ── Inline add/edit-address modal ───────────────────────────────────────────
 * Styled entirely through the storefront design tokens (--sf-*) and mounted
 * inside the .vmz-sf root, so it inherits the platform font (var(--sf-font) /
 * DM Sans, Outfit for headings), light/dark theming, radii and colours exactly
 * like the checkout's own fields — no bespoke palette. The var() fallbacks are
 * the platform's own default values, used only if a token is ever absent. */
.vmz-sf-ms-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 11, 0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--sf-font, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    color: var(--sf-text, #18181B);
}
.vmz-sf-ms-modal {
    background: var(--sf-bg-card, #fff);
    color: var(--sf-text, #18181B);
    border: 1px solid var(--sf-border, #E4E4E7);
    border-radius: var(--sf-radius-lg, 16px);
    inline-size: 100%;
    max-inline-size: 460px;
    max-block-size: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(9, 9, 11, 0.28);
    margin: auto;
}
.vmz-sf-ms-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    border-block-end: 1px solid var(--sf-border, #E4E4E7);
}
.vmz-sf-ms-modal__title {
    font-family: var(--sf-font-heading, 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--sf-heading, #09090B);
}
.vmz-sf-ms-modal__x {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--sf-text-muted, #6B6B6B);
    display: inline-flex;
    border-radius: var(--sf-radius-sm, 8px);
    flex-shrink: 0;
}
.vmz-sf-ms-modal__x:hover { background: var(--sf-bg-hover, #F4F4F5); color: var(--sf-text, #18181B); }
.vmz-sf-ms-modal__body {
    padding: 20px;
    overflow-y: auto;
}
.vmz-sf-ms-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-block-start: 1px solid var(--sf-border, #E4E4E7);
}
.vmz-sf-ms-btn {
    font-family: var(--sf-font, sans-serif);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 20px;
    border-radius: var(--sf-radius-sm, 8px);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--sf-transition-fast, 0.15s ease), border-color var(--sf-transition-fast, 0.15s ease);
}
.vmz-sf-ms-btn--ghost {
    background: transparent;
    border-color: var(--sf-border, #E4E4E7);
    color: var(--sf-text, #18181B);
}
.vmz-sf-ms-btn--ghost:hover { background: var(--sf-bg-hover, #F4F4F5); }
.vmz-sf-ms-btn--primary {
    background: var(--sf-accent, #18181B);
    color: var(--sf-accent-text, #fff);
}
.vmz-sf-ms-btn--primary:hover { filter: brightness(0.93); }
.vmz-sf-ms-btn[disabled] { opacity: 0.6; cursor: default; }

/* ── Address form — mirrors .vmz-sf-co-field (the checkout's own inputs) ── */
.vmz-sf-ms-form { display: flex; flex-direction: column; gap: 14px; }
.vmz-sf-ms-form__row { display: flex; gap: 12px; }
.vmz-sf-ms-form__row > .vmz-sf-ms-ff { flex: 1; min-inline-size: 0; }
.vmz-sf-ms-ff { display: flex; flex-direction: column; gap: 6px; }
.vmz-sf-ms-ff label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text-secondary, #52525B);
}
.vmz-sf-ms-req { color: var(--sf-danger, #DC2626); }
.vmz-sf-ms-input {
    font-family: var(--sf-font, sans-serif);
    font-size: 14px;
    block-size: 48px;
    padding: 0 14px;
    border: 1px solid var(--sf-border, #E4E4E7);
    border-radius: var(--sf-radius-sm, 8px);
    background: var(--sf-bg-card, #fff);
    color: var(--sf-text, #18181B);
    inline-size: 100%;
    box-sizing: border-box;
    transition: border-color var(--sf-transition-fast, 0.15s ease), box-shadow var(--sf-transition-fast, 0.15s ease);
}
.vmz-sf-ms-input::placeholder { color: var(--sf-text-muted, #6B6B6B); }
.vmz-sf-ms-input:focus {
    outline: none;
    border-color: var(--sf-accent, #18181B);
    box-shadow: 0 0 0 3px var(--sf-accent-soft, rgba(24, 24, 27, 0.12));
}
/* Country select — same custom chevron the checkout's own selects use. */
select.vmz-sf-ms-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-inline-end: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352525B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
[dir="rtl"] select.vmz-sf-ms-input { background-position: left 12px center; }
.vmz-sf-dark select.vmz-sf-ms-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.vmz-sf-ms-savebook {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--sf-text, #18181B);
    cursor: pointer;
    margin-block-start: 2px;
}
.vmz-sf-ms-savebook input { inline-size: 17px; block-size: 17px; accent-color: var(--sf-accent, #18181B); flex-shrink: 0; }
.vmz-sf-ms-form__err {
    font-size: 13px;
    font-weight: 500;
    color: var(--sf-danger, #DC2626);
    background: var(--sf-danger-soft, rgba(220, 38, 38, 0.1));
    border-radius: var(--sf-radius-sm, 8px);
    padding: 10px 12px;
}