/* ============================================================
   checkout_v2.css — styles for order_step1_v2.php
   ============================================================ */

/* Step visibility */
.v2-step { display: none; }
.v2-step--cart { display: block; }

.bg-black { background: #000; }
/* ── Secure checkout header bar ── */
.v2-checkout-header {
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}
.v2-checkout-header__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 2rem;
}
.v2-checkout-header__back {
    position: absolute;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    text-decoration: none;
}
.v2-checkout-header__back:hover { color: #555; text-decoration: none; }
.v2-checkout-header__title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
@media (max-width: 575px) {
    .v2-checkout-header__back { position: static; margin-bottom: 0.5rem; }
    .v2-checkout-header__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Section spacing ── */
.chk-details-section { padding: 2rem 0 3rem; }

/* ── Column titles ── */
.chk-details-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: #111;
}

/* ── Vertical divider — hidden ── */
.chk-details-divider-col { display: none !important; }

/* ── Order summary right panel ── */
#v2-confirm-view .basketNav { justify-content: flex-end; }

#v2-summary-target {
    background: #fafafa;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    padding: 1.25rem;
    min-height: 60px;
}

/* card logos */
.prefooter-logo { max-height: 48px; }


/* ============================================================
   Re-skin display_orderForm() output
   ============================================================ */

/* Each formCol is moved by JS into its own col-md-5 wrapper,
   so override Bootstrap's col-sm-6 to fill the full column. */
.v2-step--form .formCol.col-sm-6 {
    /* override Bootstrap col-sm-6 — each formCol fills its own
       outer col-md-5 wrapper completely */
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Section titles */
.v2-step--form h4.title-2,
.v2-step--form .formDiv_title h4,
.v2-step--form .formDiv_title h3 {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    margin-bottom: 1rem !important;
    color: #111 !important;
}

/* Strip formDiv chrome */
.v2-step--form .formDiv,
.v2-step--form .formDivNoF {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 1.75rem !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ── Input fields ── */
.v2-step--form .form-control {
    padding: 0.65rem 0.9rem !important;
    font-size: 0.88rem !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
    height: auto !important;
    margin-bottom: 0 !important;
    transition: border-color 0.2s;
}
.v2-step--form .form-control:focus {
    border-color: #000 !important;
    box-shadow: none !important;
    outline: none !important;
}
.v2-step--form .form-control.cartField1_error,
.v2-step--form .form-control.cartField2_error,
.v2-step--form .form-control.cartSelect1_error,
.v2-step--form .form-control.cartSelect2_error,
.v2-step--form .form-control.cartField1_error:focus,
.v2-step--form .form-control.cartField2_error:focus {
    border-color: #c00 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(200,0,0,0.15) !important;
}

/* input-item wrapper — remove icon padding since icons aren't loaded */
.v2-step--form .input-item { position: relative; margin-bottom: 0; }
.v2-step--form .input-item input { padding-left: 0.9rem !important; }
.v2-step--form .ltn__custom-icon::before { display: none !important; }

/* ── Table rows → flex pairs ──
   Each <tr> with two <td>s becomes a flex row with a gap.
   Single-td rows (labels, full-width selects) stay block. */
.v2-step--form .formDiv table {
    display: block;
    width: 100%;
}
.v2-step--form .formDiv table tbody { display: block; }
.v2-step--form .formDiv table tr {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.v2-step--form .formDiv table td {
    flex: 1;
    padding: 0 !important;
    border: none !important;
    min-width: 0; /* prevent overflow */
}
/* Single-td rows (colspan or lone td) go full width */
.v2-step--form .formDiv table td[colspan] {
    flex: 0 0 100%;
}

/* ── Payment method list — styled as a native select ── */
.v2-step--form #pms {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    overflow: hidden;
}
.v2-step--form #pms li {
    display: flex;
    align-items: stretch;
    padding: 0 5px;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    transition: background 0.12s;
}
.v2-step--form #pms li:last-child { border-bottom: none; }
.v2-step--form #pms li:hover:not(.pmDisabled) { background: #f5f5f5; }
.v2-step--form #pms li:has(input:checked) {
    background: #f0f0f0;
    font-weight: 600;
}
.v2-step--form #pms li.pmDisabled { opacity: 0.4; }
.v2-step--form #pms input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
    align-self: center;
    padding: 0 0 0 0.9rem;
    cursor: pointer;
}
.v2-step--form #pms label {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.9rem;
    margin: 0;
    font-size: 0.88rem;
    cursor: pointer;
}

/* ── Delivery method cards ── */
.v2-step--form #form3 .card {
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    margin-bottom: 0.5rem !important;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
}
.v2-step--form #form3 .card:has(.pmtCh) { border-color: #000 !important; }
.v2-step--form .ltn__card-title.pmt {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    line-height: 1.4 !important;
    background: transparent;
}
.v2-step--form .ltn__card-title.pmtCh { background: #f5f5f5; }
/* Card body text hidden by default; JS adds .v2-selected when card is active */
.v2-step--form #form3 .card-body {
    display: none;
    padding: 0.4rem 1rem 0.75rem !important;
    font-size: 0.82rem;
    color: #666;
}
.v2-step--form #form3 .card.v2-selected .card-body { display: block; }

/* ── Shipping address radio options — flat list, no table ── */
/* Target only the sameAddress radio table, not form2tbl */
.v2-step--form #form2 table:not(#form2tbl),
.v2-step--form #form2 table:not(#form2tbl) tbody,
.v2-step--form #form2 table:not(#form2tbl) tr,
.v2-step--form #form2 table:not(#form2tbl) td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
}
/* Allow form2tbl to be hidden by jQuery */
.v2-step--form #form2tbl[style*="display: none"],
.v2-step--form #form2tbl[style*="display:none"] {
    display: none !important;
}
.v2-step--form #form2 table:not(#form2tbl) tr {
    display: flex !important;
    align-items: center;
    gap: 0;
    margin-bottom: 0.35rem;
}
/* Radio td: shrink to content, no gap after */
.v2-step--form #form2 table:not(#form2tbl) td:first-child {
    flex: 0 0 auto;
    padding-right: 0.45rem !important;
}
.v2-step--form #form2 table:not(#form2tbl) td:last-child { flex: 1; }
.v2-step--form #form2 table:not(#form2tbl) td label { font-size: 0.88rem; margin: 0; cursor: pointer; }
.v2-step--form #form2 input[type="radio"] { cursor: pointer; }
.v2-step--form .sameAddressDisabled { opacity: 0.45; }

/* ── Comments & terms ── */
.v2-step--form .cartComent {
    min-height: 80px;
    resize: vertical;
    margin-bottom: 0.75rem !important;
}
.v2-step--form #form4 label { font-size: 0.82rem; color: #555; }

/* ── Invoice toggle form ── */
.v2-step--form .timologioForm { margin-bottom: 1rem; }
.v2-step--form .v_selector { margin-right: 0.3rem; }

/* ── Confirm view ── */
#v2-confirm-view .chk-details-title { margin-bottom: 1rem; }

/* Product list table */
#v2-confirm-prodlist .table { font-size: 0.85rem; margin-bottom: 0; }
#v2-confirm-prodlist .table th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-top: none; }

/* Flatten the boxaki-shadowed summary boxes */
#v2-confirm-view .boxaki-shadowed {
    border: 1px solid #e8e8e8 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
}
#v2-confirm-view .formDiv_title h4 {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    margin-bottom: 0.5rem !important;
}
#v2-confirm-view .finalForm_data_body {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #333;
}
#v2-confirm-view .selected_pw {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    display: inline-block;
    min-width: 7rem;
}

/* Totals row */
#v2-confirm-view .ordTolat_pricetd,
#v2-confirm-view .ordTolat_totaltd {
    font-size: 0.82rem;
    padding: 0.4rem 0;
    text-align: left !important;
}
#v2-confirm-view .ordTotal2_price { font-weight: 600; }
#v2-confirm-view .ordTotal2_total {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
}
#v2-confirm-view #grandTotal .row { flex-direction: column; }
#v2-confirm-view #grandTotal [class*="col-sm"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding: 0.35rem 0;
}
#v2-confirm-view #grandTotal [class*="col-sm"]:last-child {
    border-bottom: none;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

/* Totals below product table in confirm view */
#v2-confirm-prodlist #grandTotal {
    border-top: 2px solid #e8e8e8;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}
#v2-confirm-prodlist #grandTotal .container { padding: 0; }
#v2-confirm-prodlist #grandTotal .row { flex-direction: column; margin: 0; }
#v2-confirm-prodlist #grandTotal [class*="col-sm"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: space-between;
    text-align: left !important;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
}
#v2-confirm-prodlist #grandTotal [class*="col-sm"]:last-child {
    border-bottom: none;
    font-weight: 700;
    font-size: 0.95rem;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}
#v2-confirm-prodlist #grandTotal .ordTotal2_total { font-size: 1rem; font-weight: 700; }

/* Cart step nav — single button aligned right */
.v2-step--cart .basketNav { justify-content: flex-end; }

/* ── Confirm view userdata: match payment box layout ── */
#v2-confirm-left .container,
#v2-confirm-left .card-body {
    padding: 0 !important;
}
#v2-confirm-left .container.mt-10 { margin-top: 0 !important; }
#v2-confirm-left .row { margin: 0; }
#v2-confirm-left .finalForm_data,
#v2-confirm-left .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0.75rem;
}