/**
 * Claue V2 — Checkout page styles
 *
 * The checkout is the STANDARD Magento one-page checkout (a Knockout component
 * tree). These rules restyle Magento's own checkout markup to the Claue look:
 * two-column layout, progress bar, clean form fields, primary-colour buttons,
 * order-summary sidebar.
 *
 * Everything is scoped under the `.cl-page-checkout` body class so it cannot
 * leak onto other pages. Selectors target Magento classes (.opc-progress-bar,
 * .opc-wrapper, .opc-sidebar, .opc-block-summary, …) — NOT bespoke .cl-checkout-*
 * classes, which Magento's checkout never emits.
 */

/* ── Two-column layout ── */
.cl-page-checkout .checkout-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-column-gap: var(--cl-space-2xl);
    align-items: start;
}

.cl-page-checkout .opc-progress-bar,
.cl-page-checkout .opc-estimated-wrapper,
.cl-page-checkout .authentication-wrapper,
.cl-page-checkout .checkout-header {
    grid-column: 1 / -1;
}

.cl-page-checkout .opc-wrapper {
    grid-column: 1;
    width: auto;
    margin: 0;
    float: none;
}

.cl-page-checkout .opc-sidebar {
    grid-column: 2;
    width: auto;
    margin: 0;
    float: none;
}

/* ── Progress bar ── */
.cl-page-checkout .opc-progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    counter-reset: step;
    margin: 0 0 var(--cl-space-2xl);
    padding: var(--cl-space-xl) 0;
    border-bottom: 1px solid var(--cl-border-light);
}

.cl-page-checkout .opc-progress-bar-item {
    display: flex;
    align-items: center;
    gap: var(--cl-space-sm);
    margin: 0;
    width: auto;
}

.cl-page-checkout .opc-progress-bar-item::after {
    content: "";
    width: 80px;
    height: 1px;
    background: var(--cl-border);
    margin: 0 var(--cl-space-md);
    position: static;
}

.cl-page-checkout .opc-progress-bar-item:last-child::after {
    display: none;
}

.cl-page-checkout .opc-progress-bar-item > span {
    display: flex;
    align-items: center;
    gap: var(--cl-space-sm);
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--cl-text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cl-page-checkout .opc-progress-bar-item > span::before {
    counter-increment: step;
    content: counter(step);
    position: static;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--cl-border);
    background: var(--cl-bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-text-light);
    margin: 0;
}

.cl-page-checkout .opc-progress-bar-item > span::after {
    display: none;
}

.cl-page-checkout .opc-progress-bar-item._active > span {
    color: var(--cl-heading);
    font-weight: 600;
}

.cl-page-checkout .opc-progress-bar-item._active > span::before {
    border-color: var(--cl-primary);
    background: var(--cl-primary);
    color: var(--cl-bg);
}

.cl-page-checkout .opc-progress-bar-item._complete > span {
    color: var(--cl-text-dark);
    cursor: pointer;
}

.cl-page-checkout .opc-progress-bar-item._complete > span::before {
    border-color: var(--cl-success);
    background: var(--cl-success);
    color: var(--cl-bg);
}

/* ── Step titles ── */
.cl-page-checkout .opc-wrapper .step-title,
.cl-page-checkout .opc-block-summary > .title,
.cl-page-checkout .checkout-shipping-method .step-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cl-heading);
    text-transform: uppercase;
    border-bottom: 1px solid var(--cl-border-light);
    padding-bottom: var(--cl-space-sm);
    margin-bottom: var(--cl-space-lg);
}

/* ── Form fields ── */
.cl-page-checkout .opc-wrapper .fieldset > .field {
    margin-bottom: var(--cl-space-md);
}

.cl-page-checkout .opc-wrapper .fieldset > .field > .label,
.cl-page-checkout .opc-wrapper .fieldset > .field .label {
    font-size: 13px;
    font-weight: 500;
    color: var(--cl-text-dark);
    margin-bottom: var(--cl-space-xs);
}

.cl-page-checkout .opc-wrapper input[type="text"],
.cl-page-checkout .opc-wrapper input[type="email"],
.cl-page-checkout .opc-wrapper input[type="password"],
.cl-page-checkout .opc-wrapper input[type="number"],
.cl-page-checkout .opc-wrapper input[type="tel"],
.cl-page-checkout .opc-wrapper select,
.cl-page-checkout .opc-wrapper textarea {
    width: 100%;
    height: 44px;
    padding: 0 var(--cl-space-md);
    border: 1px solid var(--cl-border);
    border-radius: 0;
    font-size: 13px;
    font-family: var(--cl-font);
    color: var(--cl-text-dark);
    background: var(--cl-bg);
    box-shadow: none;
    transition: border-color var(--cl-transition);
}

.cl-page-checkout .opc-wrapper textarea {
    height: auto;
    padding: var(--cl-space-md);
}

.cl-page-checkout .opc-wrapper input:focus,
.cl-page-checkout .opc-wrapper select:focus,
.cl-page-checkout .opc-wrapper textarea:focus {
    border-color: var(--cl-primary);
    box-shadow: none;
}

.cl-page-checkout .opc-wrapper input::placeholder {
    color: var(--cl-text-light);
}

/* ── Shipping methods table ── */
.cl-page-checkout .table-checkout-shipping-method {
    width: 100%;
    border-collapse: collapse;
}

.cl-page-checkout .table-checkout-shipping-method tbody td {
    border-top: 1px solid var(--cl-border-light);
    padding: var(--cl-space-md) var(--cl-space-sm);
    font-size: 13px;
    color: var(--cl-text-dark);
}

.cl-page-checkout .table-checkout-shipping-method tbody tr:hover {
    background: var(--cl-bg-light);
}

.cl-page-checkout .table-checkout-shipping-method .col-price {
    font-weight: 600;
    color: var(--cl-heading);
}

.cl-page-checkout input[type="radio"],
.cl-page-checkout input[type="checkbox"] {
    accent-color: var(--cl-primary);
}

/* ── Payment methods ── */
.cl-page-checkout .payment-group .payment-method {
    border: 1px solid var(--cl-border);
    margin-bottom: var(--cl-space-sm);
    padding: 0;
}

.cl-page-checkout .payment-group .payment-method._active {
    border-color: var(--cl-primary);
}

.cl-page-checkout .payment-method-title {
    padding: var(--cl-space-md);
    margin: 0;
}

.cl-page-checkout .payment-method-title .label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-heading);
    text-transform: uppercase;
}

.cl-page-checkout .payment-method-content {
    padding: 0 var(--cl-space-md) var(--cl-space-md);
}

/* ── Buttons (Place Order, Next, Apply) ── */
.cl-page-checkout .checkout-container .action.primary,
.cl-page-checkout .checkout-container button.action.primary {
    background: var(--cl-primary);
    border: none;
    border-radius: 0;
    color: var(--cl-bg);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 var(--cl-space-xl);
    height: 48px;
    transition: background var(--cl-transition);
}

.cl-page-checkout .checkout-container .action.primary:hover {
    background: var(--cl-primary-light);
}

.cl-page-checkout .checkout-payment-method .actions-toolbar .action.primary.checkout {
    width: 100%;
}

/* ── Order summary sidebar ── */
.cl-page-checkout .opc-sidebar .opc-block-summary {
    background: var(--cl-bg-light);
    padding: var(--cl-space-xl);
    margin: 0;
    position: sticky;
    top: 100px;
}

.cl-page-checkout .opc-block-summary .table-totals {
    width: 100%;
}

.cl-page-checkout .opc-block-summary .table-totals th,
.cl-page-checkout .opc-block-summary .table-totals td {
    font-size: 13px;
    color: var(--cl-text);
    padding: var(--cl-space-xs) 0;
}

.cl-page-checkout .opc-block-summary .grand.totals th,
.cl-page-checkout .opc-block-summary .grand.totals td {
    font-size: 16px;
    font-weight: 700;
    color: var(--cl-heading);
    border-top: 1px solid var(--cl-border);
    padding-top: var(--cl-space-md);
}

.cl-page-checkout .opc-block-summary .minicart-items .product-item {
    padding: var(--cl-space-sm) 0;
    border: none;
}

.cl-page-checkout .opc-block-summary .product-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--cl-text-dark);
}

.cl-page-checkout .opc-block-summary .product-item .price {
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-heading);
}

.cl-page-checkout .opc-block-summary .product-item .product-item-inner .subtotal .price-including-tax,
.cl-page-checkout .opc-block-summary .product-item .details-qty .value {
    color: var(--cl-text-dark);
}

/* ── Coupon / discount in summary ── */
.cl-page-checkout .opc-payment-additional .payment-option-title {
    border-top: 1px solid var(--cl-border-light);
    padding-top: var(--cl-space-md);
}

.cl-page-checkout .opc-payment-additional .payment-option-content input[type="text"] {
    height: 40px;
    border: 1px solid var(--cl-border);
    font-size: 13px;
    padding: 0 var(--cl-space-sm);
}

/* ── Agreements ── */
.cl-page-checkout .checkout-agreements .action-show {
    color: var(--cl-primary);
    text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .cl-page-checkout .checkout-container {
        display: block;
    }

    .cl-page-checkout .opc-wrapper,
    .cl-page-checkout .opc-sidebar {
        width: 100%;
    }

    .cl-page-checkout .opc-sidebar .opc-block-summary {
        position: static;
    }
}

@media (max-width: 768px) {
    .cl-page-checkout .opc-progress-bar-item::after {
        width: 40px;
        margin: 0 var(--cl-space-sm);
    }

    .cl-page-checkout .opc-progress-bar-item > span::before {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .cl-page-checkout .opc-progress-bar-item > span {
        font-size: 11px;
    }
}