3dealer/resources/css/checkout.css

/*
 * 3dealer theme for the cart + checkout module (.bbk-* classes).
 *
 * Sits on top of boboko-core's generic checkout.css, which loads first (its
 * own @vite entry). Rules here are deliberately plain and unlayered: the base
 * file is unlayered too, and an unlayered rule beats any rule inside
 * @layer components/utilities. Don't wrap this file in a layer.
 *
 * Everything maps onto an existing 3dealer pattern (x-ui.input, x-ui.button,
 * x-ui.checkbox, x-ui.quantity, account-page headings). Square everywhere:
 * no border-radius.
 */

/* ═══════════════════════════════════════════════════════════════════
   TOKENS — the module's own variables, pointed at ours
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --bbk-font: var(--font-sans);

    --bbk-color-text: var(--color-black);
    --bbk-color-muted: var(--color-neutral-500);
    --bbk-color-bg: var(--color-neutral-200);
    --bbk-color-bg-muted: var(--color-neutral-300);
    --bbk-color-border: var(--color-black);
    --bbk-color-accent: var(--color-black);
    --bbk-color-accent-text: var(--color-neutral-200);
    --bbk-color-danger: var(--color-red-600);

    --bbk-radius: 0;
    --bbk-radius-sm: 0;
    --bbk-shadow: none;
}

.bbk-cart,
.bbk-checkout-page,
.bbk-confirmation {
    font-size: inherit;
    line-height: inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED CONTROLS
   ═══════════════════════════════════════════════════════════════════ */

/* Primary CTA — x-ui.button "primary". The offset black block is a
   box-shadow here rather than .btn-primary's ::before/::after, because the
   module's buttons have no inner <span> to lift the label above a
   positioned ::before. Same look, same easing. No `uppercase`: the module
   markup can't carry the class strip-accents.js needs for Greek. */
.bbk-cart-checkout,
.bbk-checkout-continue {
    @apply border-black bg-neutral-200 px-6 py-3.5 text-base font-bold italic text-black;
    box-shadow: 10px 10px 0 var(--color-black);
    transition: box-shadow 0.35s cubic-bezier(0.2, 0.78, 0.12, 0.86);
}

.bbk-checkout-continue {
    @apply px-[46px] py-5 text-[19px];
}

.bbk-cart-checkout:hover,
.bbk-checkout-continue:hover {
    opacity: 1;
}

.bbk-cart-checkout:not(:disabled):hover,
.bbk-checkout-continue:not(:disabled):hover {
    box-shadow: 0 0 0 var(--color-black);
}

.bbk-cart-checkout:disabled,
.bbk-checkout-continue:disabled {
    @apply opacity-50;
}

/* Secondary button — x-ui.button "secondary", size sm */
.bbk-cart-coupon-submit {
    @apply border-black bg-transparent px-6 py-2 text-sm font-semibold transition-colors hover:bg-black hover:text-neutral-200;
}

/* Text inputs — x-ui.input: bottom border only, transparent */
.bbk-field-input,
.bbk-cart-coupon-input,
.bbk-checkout-box-now-locker-search {
    @apply border-0 border-b border-black bg-transparent px-0 py-2 placeholder:text-neutral-400;
}

.bbk-field-input:focus,
.bbk-field-input:focus-visible,
.bbk-cart-coupon-input:focus-visible,
.bbk-checkout-box-now-locker-search:focus {
    @apply outline-none;
}

.bbk-field-input:disabled {
    @apply cursor-not-allowed bg-transparent text-black opacity-50;
}

.bbk-field-input--error {
    @apply border-red-600;
}

/* x-ui.select — native arrow off, arrow-down icon in its place */
select.bbk-field-input {
    @apply cursor-pointer appearance-none pr-10;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black'%3E%3Cpath fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M12 5V19M12 19L6 13M12 19L18 13'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
}

/* x-ui.textarea */
textarea.bbk-field-input {
    @apply resize-none;
}

/* Read-only value (the store's single country) — x-ui.input read-only */
.bbk-field-static {
    @apply border-0 border-b border-black bg-transparent px-0 py-2 text-black opacity-60;
}

/* x-ui.field */
.bbk-field {
    @apply gap-2;
}

.bbk-field-row {
    @apply gap-8;
}

.bbk-field-label {
    @apply text-black;
    font-size: inherit;
    font-weight: inherit;
}

.bbk-field-error {
    @apply text-sm;
}

/* x-ui.checkbox — square box, brand fill when ticked. Radios in the
   shipping/payment cards use the same box (square design, no circles). */
.bbk-checkbox {
    @apply gap-3;
    font-size: inherit;
}

.bbk-checkbox--stacked {
    @apply mt-0 text-sm;
}

.bbk-checkbox--stacked a,
.bbk-checkout-withdrawal a,
.bbk-checkout-login-prompt a,
.bbk-checkout-note a {
    @apply underline hover:no-underline;
}

.bbk-checkbox input[type="checkbox"],
.bbk-checkout-shipping-option input[type="radio"],
.bbk-checkout-payment-option input[type="radio"] {
    @apply relative size-4 shrink-0 cursor-pointer appearance-none border border-current bg-transparent;
}

.bbk-checkbox input[type="checkbox"]:checked::after,
.bbk-checkout-shipping-option input[type="radio"]:checked::after,
.bbk-checkout-payment-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--color-brand);
}

.bbk-checkbox input[type="checkbox"]:focus-visible,
.bbk-checkout-shipping-option input[type="radio"]:focus-visible,
.bbk-checkout-payment-option input[type="radio"]:focus-visible {
    @apply outline-2 outline-offset-2 outline-current;
}

/* ═══════════════════════════════════════════════════════════════════
   CART DRAWER
   ═══════════════════════════════════════════════════════════════════ */
.bbk-cart-panel {
    @apply border-l border-black;
}

.bbk-cart-panel-header {
    @apply px-8 py-6;
}

.bbk-cart-heading {
    @apply font-display text-h4 font-extrabold;
}

/* Icon buttons — same as the header's icons */
.bbk-cart-dismiss,
.bbk-cart-item-remove {
    @apply text-black transition-opacity hover:bg-transparent hover:text-black hover:opacity-70;
}

.bbk-cart-panel-body {
    @apply p-8;
}

.bbk-cart-error {
    @apply px-8;
}

.bbk-cart-items {
    @apply mb-8 gap-6;
}

.bbk-cart-item-media img,
.bbk-confirmation-line .bbk-cart-item-media img {
    @apply border border-black;
}

.bbk-cart-item-title {
    @apply font-bold;
}

.bbk-cart-item-variant,
.bbk-cart-item-unit,
.bbk-line-fields {
    @apply text-sm;
}

.bbk-cart-item-total {
    @apply font-display font-bold;
}

/* Quantity stepper — x-ui.quantity */
.bbk-cart-qty-btn {
    @apply size-8 bg-transparent text-xl font-bold text-black transition-colors hover:bg-black hover:text-neutral-200;
}

.bbk-cart-qty-input {
    @apply h-8 w-10 bg-transparent font-display font-bold;
}

.bbk-cart-qty-btn:focus-visible,
.bbk-cart-qty-input:focus-visible {
    @apply outline-2 outline-offset-0 outline-black;
}

/* Summary */
.bbk-cart-summary {
    @apply gap-3 pt-6;
}

.bbk-cart-coupon {
    @apply mb-3;
}

.bbk-cart-coupon-form {
    @apply items-end gap-4;
}

/* Applied coupon — x-ui.status box */
.bbk-cart-coupon-applied {
    @apply border-black bg-brand px-6 py-3 text-black;
}

.bbk-cart-coupon-remove {
    @apply text-sm text-black underline hover:text-black hover:no-underline;
}

.bbk-cart-summary-row--total {
    @apply mt-3 pt-4 font-display text-xl font-extrabold;
}

.bbk-cart-summary .bbk-cart-checkout {
    @apply mt-6;
}

.bbk-cart-empty {
    @apply py-10;
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════════════ */
.bbk-checkout-page {
    @apply max-w-6xl px-8 py-16 lg:px-16;
}

.bbk-checkout-heading {
    @apply mb-12 font-display text-h3 font-black tracking-tight sm:text-h2;
}

.bbk-checkout {
    @apply gap-16;
}

.bbk-checkout-main {
    @apply gap-10;
}

.bbk-checkout-section {
    @apply gap-8 pb-10;
}

.bbk-checkout-section-heading,
.bbk-checkout-summary-heading {
    @apply font-display text-h4 font-extrabold;
}

.bbk-checkout-note,
.bbk-checkout-status,
.bbk-checkout-withdrawal,
.bbk-checkout-error {
    @apply text-sm;
}

.bbk-checkout-login-prompt a {
    @apply font-bold;
}

.bbk-invoice,
.bbk-checkout-shipping-fields {
    @apply gap-8;
}

/* Shipping / payment choices — bordered cards that fill black when picked,
   like x-ui.option-buttons' pressed state. */
.bbk-checkout-shipping-option,
.bbk-checkout-payment-option,
.bbk-checkout-shipping-confirmed {
    @apply gap-4 px-6 py-4;
}

.bbk-checkout-shipping-option,
.bbk-checkout-payment-option {
    @apply transition-colors;
}

.bbk-checkout-shipping-option:has(input:checked),
.bbk-checkout-payment-option:has(input:checked) {
    @apply bg-black text-neutral-200;
}

.bbk-checkout-shipping-option-name,
.bbk-checkout-payment-option-name {
    @apply font-bold;
}

.bbk-checkout-shipping-option-description {
    @apply text-sm;
}

.bbk-checkout-shipping-option:has(input:checked) .bbk-checkout-shipping-option-description {
    @apply text-neutral-400;
}

.bbk-checkout-shipping-option-price {
    @apply font-display font-bold;
}

/* Box Now locker picker. Leaflet's own CSS arrives in a lazy chunk (after
   this file), so its selectors are scoped under the picker to outrank it. */
.bbk-checkout-box-now-locker {
    @apply mt-4 gap-4 p-6;
}

.bbk-checkout-box-now-locker-label {
    @apply text-base font-bold;
}

.bbk-checkout-box-now-locker-map {
    @apply border border-black;
}

.bbk-checkout-box-now-locker-chosen {
    @apply text-sm font-bold;
}

.bbk-checkout-box-now-locker .leaflet-popup-content-wrapper,
.bbk-box-now-popup-image,
.bbk-box-now-popup-name::before {
    border-radius: 0;
}

.bbk-checkout-box-now-locker .leaflet-popup-content-wrapper {
    @apply border border-black bg-neutral-200 shadow-none;
}

.bbk-checkout-box-now-locker .leaflet-popup-tip {
    @apply bg-neutral-200;
}

.bbk-box-now-popup-name::before {
    @apply bg-brand;
}

.bbk-box-now-popup-note {
    @apply bg-neutral-300;
}

.bbk-box-now-popup-select {
    @apply border border-black bg-black text-sm text-neutral-200 transition-colors hover:bg-neutral-200 hover:text-black;
}

.bbk-box-now-popup-select:hover {
    transform: none;
}

.bbk-box-now-popup-select--selected,
.bbk-box-now-popup-select--selected:hover {
    @apply border-neutral-500 bg-neutral-500 text-neutral-200;
}

/* Order summary column. The header is sticky too (lg:h-26), so the
   aside sticks below it rather than behind it. */
.bbk-checkout-aside {
    @apply top-32;
}

.bbk-checkout-summary {
    @apply bg-transparent p-8;
}

.bbk-checkout-summary-heading {
    @apply mb-6;
}

/* Payment */
.bbk-payment-element {
    @apply my-2;
}

/* Processing overlay — square spinner, no radius */
.bbk-spinner {
    @apply size-8;
    border-color: var(--color-neutral-300);
    border-top-color: var(--color-black);
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CONFIRMATION PAGE — same shape as account/orders/show
   ═══════════════════════════════════════════════════════════════════ */
.bbk-confirmation {
    @apply max-w-4xl px-8 py-16 lg:px-16;
}

.bbk-confirmation-heading {
    @apply mb-12 font-display text-h3 font-black tracking-tight sm:text-h2;
}

.bbk-confirmation-meta {
    @apply mb-6 gap-3 border-y border-black py-6;
}

.bbk-confirmation-meta-row {
    font-size: inherit;
}

.bbk-confirmation-meta-row dt {
    @apply text-sm;
}

.bbk-confirmation-meta-row dd {
    @apply font-bold;
}

.bbk-confirmation .bbk-checkout-note + .bbk-checkout-note {
    @apply mt-2;
}

.bbk-confirmation-body {
    @apply my-12 gap-12;
}

.bbk-confirmation-lines {
    @apply gap-6;
}

.bbk-confirmation-line-name {
    @apply font-bold;
}

.bbk-confirmation-line-qty {
    @apply font-normal;
}

.bbk-confirmation-line-total {
    @apply font-display font-bold;
}

.bbk-confirmation-lines .bbk-cart-summary {
    @apply mt-6;
}

.bbk-confirmation-addresses {
    @apply gap-8;
}

.bbk-confirmation-address-heading {
    @apply mb-3 font-display text-xl font-extrabold;
}

.bbk-address-lines {
    @apply text-base text-black;
}