/*
 * Simple Multi-Step Checkout v3 — Stylesheet
 * Design inspired by evit.gr: system-ui · green #6FE169 · slate text · flat
 * Language: Greek
 * ============================================================= */

/* ── Design tokens ── */
:root {
    --smc-font:           -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --smc-text:           #334155;
    --smc-text-secondary: #64748b;
    --smc-text-light:     #94a3b8;
    --smc-heading:        #1e293b;
    --smc-green:          #6fe169;
    --smc-green-dark:     #23a455;
    --smc-green-light:    #e6f2e8;
    --smc-border:         rgba(51, 65, 85, 0.2);
    --smc-border-strong:  rgba(51, 65, 85, 0.5);
    --smc-bg:             #ffffff;
    --smc-bg-alt:         #f8fafc;
    --smc-input-height:   52px;
    --smc-btn-height:     52px;
    --smc-radius:         4px;
}

/* ── Base ── */
#smc-checkout,
#smc-checkout * { box-sizing: border-box; }

#smc-checkout {
    font-family: var(--smc-font);
    font-weight: 400;
    color: var(--smc-text);
    -webkit-font-smoothing: antialiased;
    max-width: 700px;
    margin: 0 auto;
    padding: 32px 0 80px;
    text-align: left;
}

/* ── Panel show/hide ── */
.smc-panel { display: none; }
.smc-panel.smc-panel--active {
    display: block;
    animation: smc-in .15s ease forwards;
}

@keyframes smc-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Stripe Express Checkout (Apple Pay / Google Pay)
   ============================================================ */

/* Container injected by Stripe WC plugin */
#wc-stripe-payment-request-button,
#wc-stripe-express-checkout-element,
.wc-stripe-payment-request-button-wrapper {
    margin-bottom: 24px;
}

/* Separator "Or pay using card" */
#wc-stripe-payment-request-button-separator-container,
.wc-stripe-payment-request-button-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--smc-text-secondary);
    font-family: var(--smc-font);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#wc-stripe-payment-request-button-separator-container::before,
#wc-stripe-payment-request-button-separator-container::after,
.wc-stripe-payment-request-button-separator::before,
.wc-stripe-payment-request-button-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--smc-border);
}

/* Hide if Stripe has no express methods available */
#wc-stripe-payment-request-button:empty,
#wc-stripe-express-checkout-element:empty {
    display: none;
}

/* ── Stripe Express Checkout container ── */
#smc-express-checkout {
    margin-bottom: 24px;
}

/* Hide the container entirely if Stripe injects nothing into it */
#smc-express-checkout:empty { display: none; }

/* ── Step indicator ── */
.smc-steps {
    display: flex;
    align-items: center;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--smc-green-light);
}

.smc-line {
    flex: 1;
    height: 2px;
    background: var(--smc-green-light);
    margin: 0 4px;
    transition: background .3s;
}

.smc-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.smc-dot__num {
    width: 26px;
    height: 26px;
    border: 2px solid var(--smc-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--smc-text-light);
    background: #fff;
    transition: all .2s;
    flex-shrink: 0;
    font-family: var(--smc-font);
}

.smc-dot__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--smc-text-light);
    letter-spacing: 0;
    font-family: var(--smc-font);
    white-space: nowrap;
}

/* Active step */
.smc-dot.smc-dot--active .smc-dot__num {
    background: var(--smc-green);
    border-color: var(--smc-green);
    color: #000;
}
.smc-dot.smc-dot--active .smc-dot__label {
    color: var(--smc-heading);
    font-weight: 600;
}

/* Completed step */
.smc-dot.smc-dot--done .smc-dot__num {
    background: var(--smc-green-light);
    border-color: var(--smc-green-dark);
    color: var(--smc-green-dark);
}
.smc-dot.smc-dot--done .smc-dot__label {
    color: var(--smc-green-dark);
}

/* Line turns green when both sides are done */
.smc-dot.smc-dot--done + .smc-line {
    background: var(--smc-green);
}

/* ── Panel title ── */
.smc-panel__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--smc-heading);
    margin: 0 0 24px;
    font-family: var(--smc-font);
    text-align: left;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--smc-green-light);
}

/* ============================================================
   WooCommerce billing field overrides
   ============================================================ */

#smc-checkout .form-row {
    margin-bottom: 18px;
    padding: 0 !important;
    text-align: left;
}

#smc-checkout .form-row label {
    font-family: var(--smc-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--smc-heading) !important;
    margin-bottom: 6px !important;
    letter-spacing: 0;
    text-align: left !important;
    display: block;
    text-transform: uppercase;
}

#smc-checkout .form-row .required { color: #dc2626; }

#smc-checkout .form-row .input-text,
#smc-checkout .form-row input[type="text"],
#smc-checkout .form-row input[type="email"],
#smc-checkout .form-row input[type="tel"],
#smc-checkout .form-row input[type="number"],
#smc-checkout .form-row input[type="password"],
#smc-checkout .form-row select {
    width: 100% !important;
    height: var(--smc-input-height) !important;
    padding: 0 14px !important;
    font-family: var(--smc-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--smc-heading) !important;
    background: #fff !important;
    border: 1.5px solid var(--smc-border) !important;
    border-radius: var(--smc-radius) !important;
    outline: none;
    box-shadow: none !important;
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}

#smc-checkout .form-row textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    font-family: var(--smc-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--smc-heading) !important;
    background: #fff !important;
    border: 1.5px solid var(--smc-border) !important;
    border-radius: var(--smc-radius) !important;
    box-shadow: none !important;
    resize: vertical;
    min-height: 90px;
    text-align: left;
}

#smc-checkout .form-row .input-text:focus,
#smc-checkout .form-row input:focus,
#smc-checkout .form-row select:focus,
#smc-checkout .form-row textarea:focus {
    border-color: var(--smc-green-dark) !important;
    box-shadow: 0 0 0 3px rgba(111, 225, 105, 0.2) !important;
    outline: none;
}

/* WC validation state */
#smc-checkout .form-row.woocommerce-invalid .input-text,
#smc-checkout .form-row.woocommerce-invalid input,
#smc-checkout .form-row.woocommerce-invalid select,
#smc-checkout .form-row.woocommerce-invalid textarea {
    border-color: #dc2626 !important;
}

#smc-checkout .woocommerce-input-wrapper {
    display: block;
    width: 100%;
    position: relative;
}

/* Select arrow */
#smc-checkout .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}

/* ── Shipping methods ── */
.smc-shipping-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.smc-method {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px 16px 48px;
    border: 1.5px solid var(--smc-border);
    border-radius: var(--smc-radius);
    cursor: pointer;
    background: #fff;
    position: relative;
    transition: all .15s;
}

.smc-method:hover {
    border-color: var(--smc-green-dark);
    background: var(--smc-green-light);
}

.smc-method.smc-method--selected {
    border-color: var(--smc-green-dark);
    background: var(--smc-green-light);
    box-shadow: 0 0 0 1px var(--smc-green-dark);
}

.smc-method input[type="radio"] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    accent-color: var(--smc-green-dark);
    cursor: pointer;
    margin: 0;
}

.smc-method__label {
    flex: 1;
    font-family: var(--smc-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--smc-heading);
    text-align: left;
}

.smc-method__cost {
    font-family: var(--smc-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--smc-green-dark);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.smc-method__vat {
    font-size: 11px;
    font-weight: 400;
    color: var(--smc-text-secondary);
    letter-spacing: 0;
}

.smc-no-shipping,
.smc-info-msg {
    font-family: var(--smc-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--smc-text-secondary);
    padding: 20px;
    text-align: left;
    background: var(--smc-green-light);
    border-radius: var(--smc-radius);
    border-left: 4px solid var(--smc-green-dark);
}

/* ============================================================
   WooCommerce payment section
   ============================================================ */

#smc-checkout #payment {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Hide WC's "Choose a Payment Gateway" heading */
#smc-checkout #payment > h3,
#smc-checkout #payment .payment_methods_heading {
    display: none !important;
}

/* Hide WC's place-order button in panel 4 */
#smc-panel-5 .form-row.place-order,
#smc-panel-5 #payment .terms {
    display: none !important;
}

/* Hide WC info/shipping zone notices throughout our checkout.
   Errors (.woocommerce-error) remain visible for validation feedback. */
#smc-checkout .woocommerce-shipping-destination,
#smc-checkout .shipping-calculator-container,
#smc-checkout .woocommerce-info,
#smc-checkout .woocommerce-notices-wrapper .woocommerce-info,
#smc-checkout .woocommerce-notices-wrapper .woocommerce-message:not(.woocommerce-error) {
    display: none !important;
}

/* Gateway list */
#smc-checkout #payment .payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    border: none !important;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#smc-checkout #payment .payment_methods > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 1.5px solid var(--smc-border);
    border-radius: var(--smc-radius);
    overflow: hidden;
    background: #fff;
    transition: border-color .15s;
    position: relative; /* anchor the radio button */
}

#smc-checkout #payment .payment_methods > li:has(input:checked) {
    border-color: var(--smc-green-dark);
    box-shadow: 0 0 0 1px var(--smc-green-dark);
}

/* Gateway label */
#smc-checkout #payment .payment_methods > li > label {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 16px 16px 48px !important;
    cursor: pointer;
    font-family: var(--smc-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--smc-heading) !important;
    position: relative;
    margin: 0 !important;
    background: transparent;
    text-align: left !important;
}

/* Gateway radio — fixed top offset so it stays in the label row
   even when the payment description box is expanded beneath it.
   Label padding-top: 16px + ~half line-height (11px) = 27px */
#smc-checkout #payment .payment_methods > li input[type="radio"] {
    position: absolute !important;
    left: 16px !important;
    top: 27px !important;
    transform: none !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--smc-green-dark);
    margin: 0 !important;
}

/* Gateway description box */
#smc-checkout #payment .payment_methods > li .payment_box {
    background: var(--smc-green-light) !important;
    border-top: 1px solid rgba(35, 164, 85, 0.2) !important;
    padding: 14px 16px 14px 48px !important;
    font-family: var(--smc-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--smc-text-secondary) !important;
    text-align: left !important;
}

#smc-checkout #payment .payment_methods > li .payment_box p {
    margin: 0 !important;
}

/* ============================================================
   Panel 5: Order review table
   ============================================================ */

/* Hide the "customer has matched zone" WC notice on review step */
#smc-panel-5 .woocommerce-shipping-destination,
#smc-panel-5 .woocommerce-info { display: none !important; }

/* WooCommerce blockUI overlay must never get stuck over the payment panel.
   We stop WC replacing the payment fragment (to protect Stripe's card
   iframe), which also stops WC clearing its own overlay. */
#smc-checkout #payment > .blockUI,
#smc-checkout #payment > .blockOverlay,
#smc-panel-3 .blockUI.blockOverlay {
    display: none !important;
}

/* ── Order review (step 4) — styles are inline in PHP; only keep
   the rule hiding WC's own review table if it ever appears. ── */
#smc-checkout .woocommerce-checkout-review-order-table,
#smc-checkout #order_review_heading {
    display: none !important;
}


/* ── Place Order button ── */
#smc-checkout .smc-btn-place-order,
#smc-checkout button.smc-btn-place-order {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 48px !important;
    font-family: var(--smc-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    background: var(--smc-green) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: var(--smc-radius) !important;
    cursor: pointer;
    transition: background .15s, transform .1s;
    text-align: center;
    box-shadow: none !important;
}

#smc-checkout .smc-btn-place-order:hover {
    background: var(--smc-green-dark) !important;
    color: #fff !important;
}

/* Hidden WC #place_order — kept in DOM for gateway JS compatibility */
#smc-checkout #place_order { display: none !important; }

/* ── Nav buttons ── */
.smc-nav {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.smc-nav--split { justify-content: space-between; }

/* Continue / next */
#smc-checkout .smc-btn-next,
#smc-checkout button.smc-btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--smc-btn-height);
    padding: 0 36px;
    font-family: var(--smc-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    background: var(--smc-green) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: var(--smc-radius) !important;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    margin: 0;
    box-shadow: none !important;
    text-align: center;
}

#smc-checkout .smc-btn-next:hover {
    background: var(--smc-green-dark) !important;
    color: #fff !important;
}

/* Back */
#smc-checkout .smc-btn-prev,
#smc-checkout button.smc-btn-prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    font-family: var(--smc-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    color: var(--smc-text-secondary) !important;
    border: 1.5px solid var(--smc-border) !important;
    border-radius: var(--smc-radius) !important;
    cursor: pointer;
    transition: all .15s;
    margin: 0;
    box-shadow: none !important;
    text-align: center;
}

#smc-checkout .smc-btn-prev:hover {
    border-color: var(--smc-green-dark) !important;
    color: var(--smc-green-dark) !important;
    background: var(--smc-green-light) !important;
}

/* ── Validation error ── */
.smc-error {
    font-family: var(--smc-font);
    font-size: 13px;
    font-weight: 500;
    color: #dc2626;
    margin-bottom: 12px;
    text-align: left;
    padding: 8px 12px;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    border-radius: 2px;
}

/* ── WC notices ── */
#smc-checkout .woocommerce-notices-wrapper { margin-bottom: 20px; }

#smc-checkout .woocommerce-error,
#smc-checkout .woocommerce-message,
#smc-checkout .woocommerce-info {
    font-family: var(--smc-font);
    font-size: 14px;
    font-weight: 400;
    border-radius: var(--smc-radius);
    list-style: none;
    padding: 12px 16px;
    margin: 0 0 10px;
    text-align: left;
}

/* ============================================================
   Geoapify address autocomplete dropdown
   ============================================================ */

.woocommerce-input-wrapper { position: relative; }

.smc-ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1.5px solid var(--smc-green-dark);
    border-top: none;
    border-radius: 0 0 var(--smc-radius) var(--smc-radius);
    box-shadow: 0 8px 24px rgba(35, 164, 85, 0.12);
    max-height: 280px;
    overflow-y: auto;
    display: none;
}

.smc-ac-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--smc-green-light);
    transition: background .1s;
}

.smc-ac-item:last-child { border-bottom: none; }

.smc-ac-item:hover,
.smc-ac-item.smc-ac-item--active {
    background: var(--smc-green-light);
}

.smc-ac-main {
    font-family: var(--smc-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--smc-heading);
}

.smc-ac-sub {
    font-family: var(--smc-font);
    font-size: 12px;
    font-weight: 400;
    color: var(--smc-text-secondary);
}

/* ============================================================
   Step indicator — completed line
   ============================================================ */

.smc-line--done {
    background: var(--smc-green-dark);
}

/* ============================================================
   Panel 6: Thank-you / order received
   ============================================================ */

/* Hero confirmation block */
.smc-thankyou-hero {
    text-align: center;
    padding: 32px 20px 28px;
    background: var(--smc-green-light);
    border-radius: var(--smc-radius);
    border: 1.5px solid rgba(35, 164, 85, 0.25);
    margin-bottom: 28px;
}

.smc-thankyou-hero__icon {
    width: 56px;
    height: 56px;
    background: var(--smc-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #000;
    font-weight: 700;
    margin: 0 auto 16px;
}

.smc-thankyou-hero__title {
    font-family: var(--smc-font);
    font-size: 24px;
    font-weight: 700;
    color: var(--smc-heading);
    margin: 0 0 8px;
}

.smc-thankyou-hero__sub {
    font-family: var(--smc-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--smc-text);
    margin: 0;
}

/* WooCommerce thank-you page inner content */
#smc-panel-6 .woocommerce-order { font-family: var(--smc-font); }

/* Hide WC's own "Thank you" heading — we render our own */
#smc-panel-6 .woocommerce-order > .woocommerce-thankyou-order-received,
#smc-panel-6 h2.woocommerce-thankyou-order-received { display: none; }

/* Order details list */
#smc-panel-6 .woocommerce-order-overview {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#smc-panel-6 .woocommerce-order-overview li {
    flex: 1 1 calc(50% - 6px);
    background: #fff;
    border: 1.5px solid var(--smc-border);
    border-radius: var(--smc-radius);
    padding: 14px 16px;
    font-family: var(--smc-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--smc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#smc-panel-6 .woocommerce-order-overview li strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--smc-heading);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
}

/* Order details table */
#smc-panel-6 .woocommerce-order-details,
#smc-panel-6 .woocommerce-customer-details {
    margin-top: 28px;
}

#smc-panel-6 .woocommerce-order-details h2,
#smc-panel-6 .woocommerce-customer-details h2 {
    font-family: var(--smc-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--smc-heading);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--smc-green-light);
}

#smc-panel-6 .shop_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--smc-font);
    font-size: 14px;
    color: var(--smc-text);
    table-layout: fixed;
}

#smc-panel-6 .shop_table th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--smc-text-secondary);
    border-bottom: 2px solid var(--smc-green-light);
    padding: 8px 8px 8px 0;
    text-align: left;
}

#smc-panel-6 .shop_table td {
    padding: 12px 8px 12px 0;
    border-bottom: 1px solid var(--smc-green-light);
    vertical-align: middle;
    text-align: left;
}

#smc-panel-6 .shop_table tfoot tr th,
#smc-panel-6 .shop_table tfoot tr td {
    padding: 10px 0;
    border-top: 1px solid var(--smc-green-light);
    font-size: 14px;
}
#smc-panel-6 .shop_table tfoot tr td { text-align: right; font-weight: 500; }

#smc-panel-6 .shop_table tfoot .order-total th,
#smc-panel-6 .shop_table tfoot .order-total td {
    font-weight: 700;
    font-size: 17px;
    color: var(--smc-heading);
    border-top: 2px solid var(--smc-green-dark);
    padding-top: 14px;
}

/* Continue shopping link */
#smc-panel-6 .woocommerce-order .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    margin-top: 24px;
    font-family: var(--smc-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background: var(--smc-green) !important;
    color: #000 !important;
    border: none !important;
    border-radius: var(--smc-radius) !important;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

#smc-panel-6 .woocommerce-order .button:hover {
    background: var(--smc-green-dark) !important;
    color: #fff !important;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .smc-dot__label { display: none; }
    .smc-nav--split { flex-direction: column-reverse; gap: 8px; }

    #smc-checkout .smc-btn-next,
    #smc-checkout .smc-btn-place-order {
        width: 100%;
    }

    #smc-panel-6 .woocommerce-order-overview li {
        flex: 1 1 100%;
    }
}