/* MITA Academy — Checkout page styles (matches the order/checkout design) */
.checkout-page{padding:48px 0 80px;min-height:70vh}
.checkout-page .container{max-width:1040px}
.checkout-logo{text-align:center;margin-bottom:24px}
.checkout-logo img{height:84px}

.checkout-p-none{
    display:none;
}
.co-banner{background:#FFF8E1;border:1px solid #F5C842;color:#B8860B;border-radius:12px;padding:13px 18px;margin-bottom:22px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px}

.checkout-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:28px;align-items:start;background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:0 10px 40px rgba(10,63,101,0.06)}

.checkout-customer{background:#EEF0F8;border-radius:14px;padding:22px}
.co-field{margin-bottom:16px;text-align:right}
.co-field:last-child{margin-bottom:0}
.co-field label{display:block;font-size:13px;font-weight:700;color:var(--text2);margin-bottom:7px}
.co-field label span{color:#DC2626}
.co-field input,.co-field textarea{width:100%;padding:12px 14px;border:1px solid #fff;background:#fff;border-radius:8px;font-family:'Cairo',sans-serif;font-size:14px;outline:none;color:var(--text);transition:box-shadow .15s,border-color .15s}
.co-field input:focus,.co-field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(27,127,194,.12)}
.co-field textarea{resize:vertical;min-height:84px}
.co-invalid{border-color:#DC2626 !important;box-shadow:0 0 0 3px rgba(220,38,38,.12) !important}

.co-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:24px}
.co-table thead th{background:var(--green-deeper);color:#fff;font-size:14px;font-weight:800;padding:14px 18px;text-align:right}
.co-table thead th:last-child{text-align:left}
.co-table tbody td,.co-table tfoot td{padding:14px 18px;border-top:1px solid var(--border);font-size:14px;color:var(--text)}
.co-table tbody td:last-child,.co-table tfoot td:last-child{text-align:left;font-weight:700}
.co-table tfoot td{font-weight:700;background:#F8FAFC}
.co-table .co-total td{font-size:16px;font-weight:900;color:var(--green-deeper)}
.co-qty{color:var(--muted);font-weight:400;font-size:13px}

.co-pay{display:grid;gap:14px}
.co-method{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:10px;padding:13px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.co-method .co-method-name{font-weight:700;font-size:14px;color:var(--text)}
.co-method .co-cards{margin-inline-start:auto;display:flex;gap:8px;font-size:26px;line-height:1}
.co-method .co-cards .ti-brand-visa{color:#1A1F71}
.co-method .co-cards .ti-brand-mastercard{color:#EB001B}
.co-method input{accent-color:var(--green);width:17px;height:17px}
.co-method-active{border-color:var(--green);background:var(--green-pale)}
.co-method-soft{opacity:.85}

.co-hint{display:block;font-size:12px;color:var(--green-dark);margin-top:6px;font-weight:600}
.co-note{font-size:13px;color:var(--text2);background:#F8FAFC;border:1px dashed var(--border);border-radius:8px;padding:11px 14px;line-height:1.7}
.co-note[hidden],.co-hint[hidden],.co-frame-wrap[hidden]{display:none}

.co-frame-wrap{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;min-height:420px}
.co-paymob-iframe{width:100%;height:560px;border:0;display:block}
@media(max-width:820px){.co-paymob-iframe{height:520px}}

.co-kiosk-ref{background:#FFF8E1;border:1px solid #F5C842;border-radius:12px;padding:16px 18px;margin-bottom:22px;text-align:center}
.co-kiosk-ref span{display:block;font-size:13px;color:#B8860B;margin-bottom:6px;font-weight:700}
.co-kiosk-ref strong{font-size:26px;letter-spacing:2px;color:var(--green-deeper);direction:ltr;display:inline-block}

.co-proceed{background:var(--green-deeper);color:#fff;justify-content:center;width:100%;font-size:16px;padding:15px;border-radius:10px;box-shadow:0 8px 20px rgba(10,63,101,.25)}
.co-proceed:hover:not(:disabled){background:var(--green-dark)}
.co-proceed:disabled{opacity:.55;cursor:not-allowed}
.co-message{font-size:14px;font-weight:600;text-align:center;min-height:18px}
.co-message-error{color:#DC2626}
.co-message-success{color:var(--accent)}
.co-message-info{color:var(--green-dark)}

.co-coupon{display:flex;gap:8px;margin:14px 0 4px}
.co-coupon input{flex:1;padding:11px 14px;border:1px solid var(--border);background:#fff;border-radius:8px;font-family:'Cairo',sans-serif;font-size:14px;outline:none;color:var(--text)}
.co-coupon input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(27,127,194,.12)}
.co-coupon .btn{background:var(--green);color:#fff;padding:0 22px;border-radius:8px;font-weight:700;white-space:nowrap;border:0;cursor:pointer}
.co-coupon .btn:hover{background:var(--green-dark)}
.co-coupon .btn:disabled{opacity:.55;cursor:not-allowed}
.co-coupon-msg{font-size:13px;font-weight:600;min-height:16px;margin-bottom:10px}
.co-coupon-msg.ok{color:#16a34a}
.co-coupon-msg.err{color:#DC2626}
#co-discount-row td{color:#16a34a;font-weight:700}

.checkout-result{display:flex;align-items:center}
.co-result-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:18px;padding:44px 36px;text-align:center;box-shadow:0 12px 40px rgba(10,63,101,.08)}
.co-result-icon{font-size:64px;line-height:1;margin-bottom:14px}
.co-result-success .co-result-icon{color:var(--accent)}
.co-result-pending .co-result-icon{color:var(--gold)}
.co-result-failed .co-result-icon{color:#DC2626}
.co-result-card h1{font-size:26px;font-weight:900;margin-bottom:12px;color:var(--text)}
.co-result-card p{font-size:15px;color:var(--text2);line-height:1.9;margin-bottom:22px}
.co-result-meta{display:grid;gap:8px;background:#F8FAFC;border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:24px;text-align:right}
.co-result-meta > div{display:flex;justify-content:space-between;font-size:14px}
.co-result-meta span{color:var(--muted)}
.co-result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:820px){
    .checkout-grid{grid-template-columns:1fr;padding:20px}
    /* Mobile order: customer details first, order/summary table second */
    .checkout-customer{order:1}
    .checkout-summary{order:2}
}


/* ===== Mobile fixes (max-width: 600px) ===== */
/* overflow-x:clip prevents horizontal scroll WITHOUT turning the element into a
   vertical scroll-container (which `overflow-x:hidden` does, per CSS spec, by
   forcing overflow-y to compute to `auto`). That stray scroll-container was the
   cause of the empty area / extra scrolling at the bottom of the page. */
html{overflow-x:clip}
body{overflow-x:clip}

/* Container fix for all screen sizes */
.checkout-page .container{width:100%;box-sizing:border-box;overflow-x:clip}
.checkout-grid{box-sizing:border-box;width:100%;overflow-x:clip}

@media(max-width:820px){
    .checkout-grid{grid-template-columns:1fr !important;padding:20px;width:100%;box-sizing:border-box}
    /* Mobile order: customer details first, order/summary table second */
    .checkout-customer{order:1}
    .checkout-summary{order:2}
}

@media(max-width:600px){
    nav{padding:0 12px}
    .checkout-page{padding:16px 0 32px;min-height:auto}
    .checkout-page .container{padding:0 12px}
    .checkout-grid{padding:12px !important;border-radius:10px;gap:14px;grid-template-columns:1fr !important;width:100% !important;box-sizing:border-box}
    .checkout-customer{padding:14px;order:1}
    .checkout-summary{order:2}
    .co-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;box-sizing:border-box}
    .co-table thead,.co-table tbody,.co-table tfoot{display:block}
    .co-table thead tr{display:flex;justify-content:space-between}
    .co-table thead th{flex:1;padding:10px 12px}
    .co-table tbody tr,.co-table tfoot tr{display:flex;justify-content:space-between;align-items:center}
    .co-table tbody td,.co-table tfoot td{flex:1;padding:10px 12px;font-size:13px}
    .co-coupon{flex-wrap:wrap;gap:8px}
    .co-coupon input{min-width:0;flex:1 1 100%}
    .co-frame-wrap{min-height:300px}
    .co-paymob-iframe{height:420px}
    .co-result-card{padding:24px 16px}
    .co-result-actions{flex-direction:column}
    .co-result-actions .btn{width:100%;justify-content:center}
    .iti{width:85%;box-sizing:border-box;font-size:12px;}
    .iti__flag-container{z-index:10}
    .co-proceed{font-size:15px;padding:13px}
}