/* Checkout — single-column form + order summary (Shopify one-page layout, Baymard field guidance). */

.ck {
    --ck-primary: var(--themecolor, var(--primary-color, #224229));
    --ck-text: #1f2430;
    --ck-muted: #6b7280;
    --ck-border: #e3e5ea;
    --ck-bg: #f6f7f9;
    --ck-radius: 12px;
    --ck-danger: #d92d20;
    --ck-success: #1f7a4d;
    background: var(--ck-bg);
    padding: 24px 0 56px;
    color: var(--ck-text);
}

.ck__container { max-width: 1160px; }

.ck__steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    font-size: .92rem;
}
.ck__steps .fa-chevron-left,
.ck__steps .fa-chevron-right { font-size: .7rem; color: var(--ck-muted); }
.ck__step { color: var(--ck-muted); text-decoration: none; }
.ck__step.is-done { color: var(--ck-primary); }
.ck__step.is-current { color: var(--ck-text); font-weight: 700; }
.ck__secure { margin-inline-start: auto; color: var(--ck-success); font-weight: 600; font-size: .85rem; }

.ck__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 28px;
    align-items: start;
}
.ck-main { grid-column: 1; grid-row: 1; min-width: 0; }
.ck-summary { grid-column: 2; grid-row: 1; position: sticky; top: 100px; }

/* ── Sections ── */
.ck-section {
    background: #fff;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 22px 22px 20px;
    margin-bottom: 16px;
}
.ck-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 16px;
}
.ck-section__head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}
.ck-num {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ck-primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}
.ck-section__aside { font-size: .88rem; color: var(--ck-muted); }
.ck-section__aside a { color: var(--ck-primary); font-weight: 600; }

/* ── Fields ── */
.ck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ck-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ck-field label { font-size: .9rem; font-weight: 600; }
.ck-req { color: var(--ck-danger); }
.ck-opt { color: var(--ck-muted); font-weight: 400; font-size: .82rem; }
.ck-hint { color: var(--ck-muted); font-size: .8rem; line-height: 1.5; }
.ck-error { color: var(--ck-danger); font-size: .82rem; }

.ck-input {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #cfd3da;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 1rem; /* 16px avoids iOS zoom on focus */
    color: var(--ck-text);
    transition: border-color .15s, box-shadow .15s;
}
textarea.ck-input { min-height: 0; resize: vertical; line-height: 1.6; }
select.ck-input { appearance: auto; }
.ck-input:focus { outline: none; border-color: var(--ck-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-primary) 18%, transparent); }
.ck-input:disabled { background: #f3f4f6; color: #9ca3af; }
.ck-input.is-invalid { border-color: var(--ck-danger); box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
.ck-input::placeholder { color: #a0a6b1; }

.ck-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Map ── */
.ck-map { margin-bottom: 14px; }
.ck-map__open {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px dashed #c5cad3;
    border-radius: var(--ck-radius);
    background: #fafbfc;
    color: var(--ck-text);
    text-align: start;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ck-map__open:hover { border-color: var(--ck-primary); background: #fff; }
.ck-map__open.is-invalid { border-color: var(--ck-danger); }
.ck-map__open > i { font-size: 1.4rem; color: var(--ck-primary); }
.ck-map__open span { display: flex; flex-direction: column; gap: 2px; }
.ck-map__open small { color: var(--ck-muted); }
.ck-map__panel { border: 1px solid var(--ck-border); border-radius: var(--ck-radius); padding: 12px; background: #fafbfc; }
.ck-map__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ck-map__canvas { height: 320px; border-radius: 10px; overflow: hidden; z-index: 0; }
.ck-map__status { min-height: 1.4em; margin: 8px 2px; font-size: .86rem; color: var(--ck-muted); }
.ck-map__chosen {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #b7e1c8;
    border-radius: var(--ck-radius);
    background: #f1faf4;
}
.ck-map__chosen > i { color: var(--ck-success); font-size: 1.2rem; }
.ck-map__chosen span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ck-map__chosen small { color: var(--ck-muted); overflow-wrap: anywhere; }

.ck-note summary { cursor: pointer; color: var(--ck-primary); font-weight: 600; font-size: .9rem; margin-bottom: 8px; }

/* ── Radio rows: delivery options & payment ── */
.ck-options, .ck-pay { border: 1px solid var(--ck-border); border-radius: var(--ck-radius); overflow: hidden; }
.ck-options:empty { display: none; }
.ck-placeholder { margin: 0; padding: 16px; color: var(--ck-muted); font-size: .92rem; background: #fafbfc; }
.ck-placeholder.is-warning { color: #8a4f00; background: #fff8eb; }
.ck-options[aria-busy="true"] { opacity: .6; }

.ck-option, .ck-pay__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid var(--ck-border);
    background: #fff;
    transition: background .15s;
}
.ck-option:last-child, .ck-pay__row:last-of-type { border-bottom: 0; }
.ck-option.is-selected, .ck-pay__row.is-selected { background: color-mix(in srgb, var(--ck-primary) 6%, #fff); box-shadow: inset 0 0 0 1.5px var(--ck-primary); }
.ck-option input, .ck-pay__row input { position: absolute; opacity: 0; pointer-events: none; }
.ck-radio {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #b8bec8;
    display: grid;
    place-items: center;
}
.ck-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
input:checked + .ck-radio { border-color: var(--ck-primary); }
input:checked + .ck-radio::after { background: var(--ck-primary); }
input:focus-visible + .ck-radio { outline: 3px solid color-mix(in srgb, var(--ck-primary) 35%, transparent); outline-offset: 2px; }

.ck-option__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ck-option__name { font-weight: 600; }
.ck-option__eta { color: var(--ck-success); font-size: .84rem; }
.ck-option__hint { color: var(--ck-muted); font-size: .8rem; }
.ck-option__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck-option__price .is-free { color: var(--ck-success); }
.ck-option__price s { color: var(--ck-muted); font-size: .85em; margin-inline-start: 4px; }

.ck-pay__name { flex: 1; font-weight: 600; }
.ck-pay__logo { height: 26px; width: auto; max-width: 92px; object-fit: contain; }
.ck-pay__details {
    padding: 14px 16px 16px 50px;
    background: #fafbfc;
    border-bottom: 1px solid var(--ck-border);
    font-size: .9rem;
    color: #4b5563;
}
[dir="rtl"] .ck-pay__details { padding: 14px 50px 16px 16px; }
.ck-pay__details p { margin: 0 0 10px; }
.ck-banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.ck-bank { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #fff; border: 1px solid var(--ck-border); border-radius: 10px; }
.ck-bank bdi { font-weight: 700; letter-spacing: .3px; font-variant-numeric: tabular-nums; }

/* ── Submit ── */
.ck-submit { margin-top: 8px; text-align: center; }
.ck-submit__terms { display: block; margin: 10px 0; }
.ck-submit__back { display: inline-flex; align-items: center; gap: 6px; }
.ck-submit__total { opacity: .9; font-variant-numeric: tabular-nums; }

/* ── Buttons & links ── */
.ck-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none !important;
    transition: filter .15s, background .15s, border-color .15s;
}
.ck-btn--primary { background: var(--ck-primary); color: #fff !important; }
.ck-btn--primary:hover { filter: brightness(1.08); }
.ck-btn--primary:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.ck-btn--ghost { background: #fff; border-color: #cfd3da; color: var(--ck-text) !important; }
.ck-btn--ghost:hover { border-color: var(--ck-primary); color: var(--ck-primary) !important; }
.ck-btn--sm { min-height: 36px; padding: 6px 12px; font-size: .85rem; }
.ck-btn--lg { min-height: 56px; font-size: 1.08rem; }
.ck-btn--block { width: 100%; }
.ck-link { background: none; border: 0; padding: 0; color: var(--ck-primary); font-weight: 600; cursor: pointer; text-decoration: none; }
.ck-link:hover { text-decoration: underline; }
.ck-link--muted { color: var(--ck-muted); }

/* ── Alerts ── */
.ck-alert {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--ck-radius);
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #912018;
    font-size: .92rem;
}
.ck-alert ul { margin: 6px 0 0; padding-inline-start: 18px; }
.ck-alert a { color: inherit; font-weight: 700; text-decoration: underline; }
.ck-alert:focus { outline: none; }

/* ── Summary ── */
.ck-summary {
    background: #fff;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
}
.ck-summary__toggle { display: none; }
.ck-summary__body { padding: 24px; }
/* The title sits on its own row, divided from the items, so the first product never touches it */
.ck-summary__title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--ck-border); font-size: 1.1rem; font-weight: 700; }
.ck-summary__title small { padding: 3px 12px; border-radius: 999px; background: #f3f4f6; color: var(--ck-muted); font-weight: 500; font-size: .8rem; }

/* Padding keeps the quantity badge from being cut off by the scrolling list */
.ck-items { list-style: none; margin: 0 0 20px; padding: 10px 10px 2px; display: grid; gap: 20px; max-height: 360px; overflow-y: auto; }
.ck-item { display: flex; align-items: center; gap: 14px; }
.ck-item__img { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--ck-border); background: #f3f4f6; }
.ck-item__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.ck-item__qty {
    position: absolute;
    top: -9px;
    inset-inline-end: -9px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    border: 2px solid #fff;
    background: #1f2430;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
}
.ck-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ck-item__name { font-weight: 600; font-size: .95rem; line-height: 1.4; }
.ck-item__meta { color: var(--ck-muted); font-size: .8rem; }
.ck-item__warn { color: var(--ck-danger); font-size: .8rem; font-weight: 600; }
.ck-item.is-soldout { opacity: .55; }
.ck-item__price { font-weight: 600; font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ck-coupon { padding: 20px 0; border-top: 1px solid var(--ck-border); border-bottom: 1px solid var(--ck-border); }
.ck-coupon__row { display: flex; gap: 8px; }
.ck-coupon__row .ck-input { min-height: 44px; }
.ck-coupon__applied { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: #f1faf4; color: var(--ck-success); font-weight: 600; }
.ck-coupon__msg { margin: 6px 0 0; font-size: .82rem; min-height: 0; }
.ck-coupon__msg:empty { display: none; }
.ck-coupon__msg.is-ok { color: var(--ck-success); }
.ck-coupon__msg.is-error { color: var(--ck-danger); }

.ck-totals { margin: 20px 0 0; display: grid; gap: 14px; }
.ck-totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; }
.ck-totals dt { font-weight: 400; color: #4b5563; }
.ck-totals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.ck-totals dd.is-muted { color: var(--ck-muted); font-weight: 400; font-size: .86rem; }
.ck-totals dd.is-free, .ck-totals dd.is-discount { color: var(--ck-success); }
.ck-totals .is-total { align-items: baseline; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--ck-border); font-size: 1.2rem; }
.ck-totals .is-total dt { color: var(--ck-text); font-weight: 700; }
.ck-totals .is-total dd { font-weight: 800; }
.ck-totals .is-total small { color: var(--ck-muted); font-weight: 400; font-size: .75rem; }

/* ── Empty ── */
.ck-empty { text-align: center; padding: 60px 20px; background: #fff; border-radius: var(--ck-radius); border: 1px solid var(--ck-border); }
.ck-empty i { font-size: 3rem; color: #d1d5db; }
.ck-empty h1 { font-size: 1.4rem; margin: 16px 0 20px; }

/* ── Tablet & mobile: single column, summary collapses at the top ── */
@media (max-width: 991.98px) {
    .ck { padding-top: 12px; }
    .ck__layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ck-summary { grid-column: 1; grid-row: 1; position: static; }
    .ck-main { grid-column: 1; grid-row: 2; }
    .ck-summary__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 16px;
        border: 0;
        background: none;
        color: var(--ck-primary);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
    .ck-summary__toggle > span { display: inline-flex; align-items: center; gap: 8px; }
    .ck-summary__toggle strong { color: var(--ck-text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
    .ck-summary__chev { font-size: .75rem; transition: transform .2s; }
    .ck-summary.is-open .ck-summary__chev { transform: rotate(180deg); }
    .ck-summary__body { display: none; padding-top: 0; }
    .ck-summary.is-open .ck-summary__body { display: block; }
    .ck-summary__title { display: none; }
}

@media (max-width: 575.98px) {
    .ck-section { padding: 18px 14px 16px; border-radius: 10px; }
    .ck-grid { grid-template-columns: 1fr; }
    .ck__secure { width: 100%; margin-inline-start: 0; }
    .ck-map__canvas { height: 280px; }
    .ck-pay__details, [dir="rtl"] .ck-pay__details { padding-inline-start: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ck * { transition: none !important; }
}