/* =============================== CHECKOUT ===============================
   Reuses the cart's tokens (.ct_page is on the same wrapper), so only the
   step bar, the form and the order block are defined here. */

.co_page{ max-width: 1000px; }

/* -------------------------------- steps --------------------------------- */
.co_steps{
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 0 0 18px; margin-bottom: 22px;
    border-bottom: 1px solid var(--ct-line);
}
.co_step_list{ display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.co_step{
    display: flex; align-items: center; gap: 10px;
    list-style: none; font-size: 16px; color: var(--ct-muted);
}
.co_step + .co_step{ margin-left: 14px; padding-left: 40px; position: relative; }
.co_step + .co_step::before{
    content: ""; position: absolute; left: 0; top: 50%;
    width: 26px; height: 1px; background: var(--ct-line);
}
.co_step a{ color: inherit; text-decoration: none; }
.co_step a:hover{ color: var(--ct-ink); }

.co_step_dot{
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    border: 1px solid var(--ct-chip-line, var(--ct-line));
    font-size: 14px; font-weight: 700;
}
.co_step.is_done{ color: var(--ct-ink); }
.co_step.is_done .co_step_dot{ background: rgba(202,231,111,0.35); border-color: transparent; color: var(--ct-accent); }
.dark .co_step.is_done .co_step_dot{ background: rgba(202,231,111,0.20); }
.co_step.is_done .material-symbols-outlined{ font-size: 18px; }
.co_step.is_current{ color: var(--ct-ink); font-weight: 700; }
.co_step.is_current .co_step_dot{ background: var(--primary-color); border-color: var(--primary-color); color: var(--text-color); }

.co_step_note{ font-size: 15px; color: var(--ct-muted); padding: 0; }

/* --------------------------------- card --------------------------------- */
.co_card{
    border: 1px solid var(--ct-line); border-radius: 14px;
    background: var(--ct-card); padding: 26px 28px; margin-bottom: 22px;
}
.co_card h2{ font-size: 24px; letter-spacing: -0.02em; padding: 0; }
.co_card_sub{ font-size: 15px; color: var(--ct-muted); padding: 6px 0 22px; }

/* --------------------------------- form --------------------------------- */
.co_fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.co_field{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* an author display rule outranks the UA's [hidden]{display:none}, so the
   state/province fields stayed visible when hidden was set */
.co_field[hidden]{ display: none; }
.co_field label{
    font-size: 12px; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--ct-ink);
}
.co_hint{ font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ct-muted); }

.co_page .co_field input[type="text"],
.co_page .co_field input[type="password"],
.co_page .co_field select{
    height: 52px; padding: 0 18px; border-radius: 12px;
    border: 1px solid transparent; background: var(--light-grey2);
    color: var(--ct-ink); font-family: inherit; font-size: 16px; width: 100%;
    outline: 0; box-sizing: border-box;
}
.dark .co_page .co_field input[type="text"],
.dark .co_page .co_field input[type="password"],
.dark .co_page .co_field select{ background: rgba(255,255,255,0.07); }
.co_page .co_field input:focus, .co_page .co_field select:focus{ border-color: var(--primary-color); }

/* invoice switch */
.co_invoice_toggle{
    display: flex; align-items: flex-start; gap: 16px;
    margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--ct-line);
}
.co_switch{ flex: none; cursor: pointer; }
.co_switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.co_switch_track{
    display: block; width: 52px; height: 28px; border-radius: 14px;
    background: var(--ct-line); transition-duration: 0.2s; position: relative;
}
.co_switch_knob{
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: white; transition-duration: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.co_switch input:checked + .co_switch_track{ background: var(--primary-color); }
.co_switch input:checked + .co_switch_track .co_switch_knob{ transform: translateX(24px); }

.co_switch_text{ display: flex; flex-direction: column; gap: 4px; }
.co_switch_text strong{ font-size: 16px; }
.co_switch_text span{ font-size: 15px; color: var(--ct-muted); line-height: 1.45em; }

.co_billing{ padding-top: 22px; }
.co_billing[hidden]{ display: none; }
.co_account{ margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ct-line); }

/* -------------------------------- order --------------------------------- */
.co_order{ padding: 0; }
.co_line{
    display: flex; align-items: center; gap: 14px;
    padding: 18px 28px; border-bottom: 1px solid var(--ct-line);
}
.co_line_art{
    display: grid; place-items: center; flex: none;
    width: 56px; height: 44px; border-radius: 8px;
    background: var(--light-grey2) center/cover no-repeat;
}
.dark .co_line_art{ background-color: #333; }
.co_line_art .material-symbols-outlined{ font-size: 20px; opacity: 0.4; }
.co_line_text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co_line_text strong{ font-size: 17px; }
.co_line_sub{ font-size: 14px; color: var(--ct-muted); }

.co_order .co_rows{ border-top: 0; padding: 20px 28px 0; }
.co_order .ct_total{ margin: 0 28px; }
/* the cart's .ct_page .button.ct_continue is three classes deep and was
   winning with width:100%/margin:0, so the button ran to the card's edges.
   auto width plus margins keeps it flush with the rows above. */
.co_page .co_order .button.ct_continue{ width: auto; margin: 0 28px; gap: 10px; }
/* adapt-main pins .button span absolutely for icon buttons; here the icon
   belongs in the flow beside the label */
.co_page .co_order .button.ct_continue span{ position: static; transform: none; }
.co_arrow{ font-size: 20px; }
.co_order .ct_secure{ padding: 14px 28px 6px; }
/* shared with the payment page; defined there, positioned here */
.co_order .py_processor{
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 13px; color: var(--ct-muted); padding: 0 28px 24px;
}
.co_order .py_processor .material-symbols-outlined{ font-size: 16px; }

/* ------------------------------ responsive ------------------------------ */
@media(max-width: 760px){
    .co_fields{ grid-template-columns: 1fr; }
    .co_card{ padding: 20px; }
    .co_line, .co_order .co_rows{ padding-left: 20px; padding-right: 20px; }
    .co_order .ct_total{ margin-left: 20px; margin-right: 20px; }
    .co_page .co_order .button.ct_continue{ margin-left: 20px; margin-right: 20px; }
    .co_order .ct_secure, .co_order .py_processor{ padding-left: 20px; padding-right: 20px; }
    .co_step + .co_step{ padding-left: 24px; margin-left: 8px; }
    .co_step + .co_step::before{ width: 14px; }
}