/**
 * @file    checkout.css
 * @version 2.0.0 — V3 design tokens, no legacy --color-* deps
 * @desc    Checkout billing form styles. Embedded in pricing.php for both
 *          B2C PWYW and B2B flows. Now uses --ds-* tokens for full
 *          design-system consistency.
 *
 *          Pattern:
 *           - Form sections vertically spaced with --ds-space-5 (24px)
 *           - Inputs follow .ds-input style (padding, border, focus ring)
 *           - Type toggle (person/company) is a pill (matches .pr-toggle)
 *           - Order summary is a clean table with hairline divider
 */

/* ═══════════════════════════════════════════════════════════
   Billing form container
   ═══════════════════════════════════════════════════════════ */
.co-billing {
    margin: var(--ds-space-4) 0;
}

/* "Want invoice" toggle — only shown in B2C optional flow */
.co-billing__toggle-wrap {
    margin-bottom: var(--ds-space-3);
}
.co-billing__want-invoice {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    cursor: pointer;
    user-select: none;
    padding: var(--ds-space-3) var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-soft);
    border: 1px solid var(--ds-border);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.co-billing__want-invoice:hover {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
}

/* ── Custom checkbox (reused for save-profile + want-invoice) ── */
.co-billing__checkbox { display: none; }
.co-billing__checkbox-mark {
    width: 20px;
    height: 20px;
    border-radius: var(--ds-radius-xs);
    flex-shrink: 0;
    border: 2px solid var(--ds-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-bg-card);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.co-billing__checkbox:checked + .co-billing__checkbox-mark {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
}
.co-billing__checkbox:checked + .co-billing__checkbox-mark::after {
    content: '✓';
    color: var(--ds-accent-text);
    font-size: var(--ds-fs-sm);
    font-weight: 700;
    line-height: 1;
}
.co-billing__checkbox-text {
    font-size: var(--ds-fs-sm);
    font-weight: 600;
    color: var(--ds-text);
}

/* ═══════════════════════════════════════════════════════════
   Billing form (collapsible for B2C, always visible for B2B)
   ═══════════════════════════════════════════════════════════ */
.co-billing__form {
    display: none;
    padding: var(--ds-space-5);
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    animation: coBillingIn 0.25s ease-out;
}
.co-billing__form--visible { display: block; }

@keyframes coBillingIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   Type toggle — pill matching .pr-toggle aesthetic
   ═══════════════════════════════════════════════════════════ */
.co-billing__type-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: var(--ds-space-5);
    background: var(--ds-bg-page);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    padding: 4px;
}
.co-billing__type-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px var(--ds-space-4);
    border: none;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: var(--ds-fs-sm);
    font-weight: 600;
    color: var(--ds-text-soft);
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.co-billing__type-btn:hover { color: var(--ds-text); }
.co-billing__type-btn--on {
    background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-dark));
    color: var(--ds-accent-text);
    box-shadow: 0 2px 8px rgba(var(--ds-accent-rgb), 0.25);
}
.co-billing__type-btn--on svg { opacity: 1; }
.co-billing__type-btn svg { opacity: 0.6; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   Form fields — DS-input style
   ═══════════════════════════════════════════════════════════ */
.co-billing__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-4);
}
.co-billing__row:last-of-type { margin-bottom: 0; }
.co-billing__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.co-billing__field--wide   { grid-column: 1 / -1; }
.co-billing__field--postal { max-width: 160px; }

.co-billing__label {
    font-size: var(--ds-fs-sm);
    font-weight: 600;
    color: var(--ds-text);
    line-height: 1.3;
}
.co-billing__req { color: var(--ds-danger); font-weight: 700; margin-left: 1px; }
.co-billing__opt {
    color: var(--ds-text-muted);
    font-weight: 400;
    font-size: var(--ds-fs-xs);
    margin-left: 4px;
}

.co-billing__input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font: inherit;
    font-size: var(--ds-fs-base);
    color: var(--ds-text);
    background: var(--ds-bg-card);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.co-billing__input::placeholder { color: var(--ds-text-muted); }
.co-billing__input:hover:not(:focus) { border-color: var(--ds-border-strong); }
.co-billing__input:focus {
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 3px rgba(var(--ds-accent-rgb), 0.15);
}
.co-billing__input--error {
    border-color: var(--ds-danger);
    background: var(--ds-danger-soft);
}
.co-billing__input--valid {
    border-color: var(--ds-success);
    background: var(--ds-success-soft);
}
[data-theme="dark"] .co-billing__input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

.co-billing__hint {
    font-size: var(--ds-fs-xs);
    color: var(--ds-text-muted);
    margin-top: 2px;
}

/* NIP input with status indicator */
.co-billing__input-wrap { position: relative; }
.co-billing__input--nip {
    padding-right: 40px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.co-billing__nip-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--ds-fs-md);
    font-weight: 700;
    pointer-events: none;
    transition: color 0.15s ease;
}
.co-billing__nip-status--ok  { color: var(--ds-success); }
.co-billing__nip-status--err { color: var(--ds-danger); }

/* Company fields (collapsible) */
.co-billing__company-fields {
    display: none;
    margin-bottom: var(--ds-space-2);
}
.co-billing__company-fields--visible { display: block; }

/* Error messages */
.co-billing__errors {
    font-size: var(--ds-fs-sm);
    color: var(--ds-danger);
    font-weight: 600;
    margin: var(--ds-space-2) 0;
    min-height: 0;
}
.co-billing__errors:empty { display: none; }

/* Save profile toggle */
.co-billing__save-profile {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-4);
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ds-border);
    cursor: pointer;
    user-select: none;
}
.co-billing__save-profile .co-billing__checkbox-mark {
    width: 18px;
    height: 18px;
    border-radius: var(--ds-radius-xs);
}
.co-billing__save-profile .co-billing__checkbox-text {
    font-size: var(--ds-fs-sm);
    color: var(--ds-text-soft);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   Order summary (VAT breakdown)
   ═══════════════════════════════════════════════════════════ */
.co-summary {
    background: var(--ds-bg-page);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-4) var(--ds-space-5);
    margin: var(--ds-space-4) 0;
}

.co-summary__title {
    font-size: var(--ds-fs-xs);
    font-weight: 800;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--ds-space-3);
    padding-bottom: var(--ds-space-2);
    border-bottom: 1px solid var(--ds-border);
}

.co-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--ds-fs-sm);
    padding: 5px 0;
    gap: var(--ds-space-3);
}
.co-summary__row-label { color: var(--ds-text-soft); }
.co-summary__row-value {
    font-weight: 600;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}

.co-summary__row--total {
    border-top: 1.5px solid var(--ds-border-strong);
    margin-top: var(--ds-space-2);
    padding-top: var(--ds-space-3);
}
.co-summary__row--total .co-summary__row-label {
    font-weight: 700;
    color: var(--ds-text);
    font-size: var(--ds-fs-base);
}
.co-summary__row--total .co-summary__row-value {
    font-size: var(--ds-fs-lg);
    font-weight: 800;
    color: var(--ds-accent-dark);
}

/* ═══════════════════════════════════════════════════════════
   Discount code block (inline input + Apply button)
   ═══════════════════════════════════════════════════════════ */
.dc-block {
    margin: var(--ds-space-4) 0;
}
.dc-block__label {
    display: block;
    font-size: var(--ds-fs-sm);
    font-weight: 600;
    color: var(--ds-text);
    margin-bottom: 6px;
}
.dc-block__row {
    display: flex;
    gap: var(--ds-space-2);
}
.dc-block__input {
    flex: 1;
    padding: 11px 14px;
    border: 1.5px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font: inherit;
    font-size: var(--ds-fs-base);
    color: var(--ds-text);
    background: var(--ds-bg-card);
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dc-block__input::placeholder {
    color: var(--ds-text-muted);
    text-transform: none;
    letter-spacing: normal;
}
.dc-block__input:focus {
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 3px rgba(var(--ds-accent-rgb), 0.15);
}
.dc-block__btn {
    flex-shrink: 0;
    padding: 11px var(--ds-space-5);
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-accent);
    color: var(--ds-accent-text);
    font: inherit;
    font-size: var(--ds-fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.dc-block__btn:hover:not(:disabled) {
    background: var(--ds-accent-dark);
    box-shadow: 0 4px 12px rgba(var(--ds-accent-rgb), 0.25);
}
.dc-block__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Applied state — input greyed, button becomes "Remove" (danger color) */
.dc-block__input--applied {
    opacity: 0.7;
    background: var(--ds-bg-soft);
}
.dc-block__btn--remove {
    background: var(--ds-danger);
}
.dc-block__btn--remove:hover:not(:disabled) {
    background: var(--ds-brand-red-dark);
    box-shadow: 0 4px 12px rgba(var(--ds-brand-red-rgb), 0.25);
}
.dc-block__feedback {
    margin-top: var(--ds-space-2);
    font-size: var(--ds-fs-sm);
    line-height: 1.5;
}
.dc-block__feedback--ok    { color: var(--ds-success); font-weight: 600; }
.dc-block__feedback--err   { color: var(--ds-danger); }
.dc-block__applied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--ds-space-3);
    background: var(--ds-success-soft);
    color: var(--ds-success);
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-fs-sm);
    font-weight: 600;
    margin-top: var(--ds-space-2);
}
.dc-block__remove {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 0 0 4px;
}
.dc-block__remove:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   Legal consents in checkout
   ═══════════════════════════════════════════════════════════ */
.co-consents {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    margin: var(--ds-space-4) 0;
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-bg-soft);
    border-radius: var(--ds-radius-md);
}
.co-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
    cursor: pointer;
    user-select: none;
}
.co-consent input { display: none; }
.co-consent__mark {
    width: 18px;
    height: 18px;
    border-radius: var(--ds-radius-xs);
    flex-shrink: 0;
    margin-top: 1px;
    border: 2px solid var(--ds-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-bg-card);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.co-consent input:checked + .co-consent__mark {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
}
.co-consent input:checked + .co-consent__mark::after {
    content: '✓';
    color: var(--ds-accent-text);
    font-size: var(--ds-fs-xs);
    font-weight: 700;
}
.co-consent__text {
    font-size: var(--ds-fs-sm);
    color: var(--ds-text-soft);
    line-height: 1.45;
}
.co-consent__text a {
    color: var(--ds-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.co-consent__text--required::after {
    content: ' *';
    color: var(--ds-danger);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
    .co-billing__row { grid-template-columns: 1fr; gap: var(--ds-space-3); }
    .co-billing__field--postal { max-width: 100%; }
    .co-billing__type-btn { font-size: var(--ds-fs-sm); padding: 9px var(--ds-space-3); }
    .co-billing__type-btn svg { display: none; }
    .dc-block__row { flex-direction: column; }
    .dc-block__btn { width: 100%; }
}