/* Step indicator */
    .checkout-steps { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 0 24px; }
    .checkout-steps .step-node { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-light); }
    .checkout-steps .step-node.done { color: var(--badge-green); }
    .checkout-steps .step-node.current { color: var(--primary); }
    .checkout-steps .step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--border-light); color: var(--text-light); }
    .checkout-steps .step-node.done .step-dot { background: var(--badge-green); color: #fff; }
    .checkout-steps .step-node.current .step-dot { background: var(--primary); color: #fff; }
    .checkout-steps .step-line { width: 50px; height: 2px; background: var(--border-color); }
    .checkout-steps .step-line.done { background: var(--badge-green); }
    @media (max-width: 560px) { .checkout-steps .step-node span:last-child { display: none; } .checkout-steps .step-line { width: 28px; } }

    .checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; padding-bottom: 60px; max-width: 1200px; margin: 0 auto; }
    @media (max-width: 1024px) { .checkout-layout { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 640px; } }

    .checkout-section { background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; margin-bottom: 16px; }
    .checkout-section h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-title); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
    .checkout-section h2 .step-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

    /* Address cards */
    .address-card { position: relative; border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; margin-bottom: 12px; }
    .address-edit-link { position: absolute; right: 12px; bottom: 10px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 13px; transition: opacity 0.15s ease; }
    .address-edit-link:hover { opacity: 0.7; }
    .address-card:hover { border-color: var(--primary); }
    .address-card.selected { border-color: var(--primary); background: var(--primary-light); }
    .address-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .address-card-header h4 { font-size: 14px; font-weight: 700; color: var(--text-title); }
    .address-card-header .radio { width: 20px; height: 20px; border: 2px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color 0.18s ease; flex-shrink: 0; }
    .address-card.selected .radio { border-color: var(--primary); }
    .address-card.selected .radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
    .address-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
    .add-address-btn { border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 18px; text-align: center; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease; color: var(--text-light); font-size: 14px; }
    .add-address-btn:hover { border-color: var(--primary); color: var(--primary); }
    .checkout-mode-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
    .checkout-mode-option { position:relative; min-width:0; display:flex; align-items:center; gap:12px; min-height:72px; padding:13px 15px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-white); color:var(--text-title); text-decoration:none; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease; }
    .checkout-mode-option:hover { border-color:var(--primary); transform:translateY(-1px); }
    .checkout-mode-option:has(.checkout-mode-radio:checked) { border-color:var(--primary); background:#fff3e8; box-shadow:0 0 0 3px rgba(255,122,26,.10),0 8px 22px rgba(255,122,26,.14),inset 0 0 20px rgba(255,122,26,.045); }
    .checkout-mode-option:has(.checkout-mode-radio:checked)::after { content:'✓'; display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; margin-left:auto; border-radius:7px; background:var(--primary); color:#fff; font-size:13px; font-weight:800; }
    .checkout-mode-option:focus-within { outline:2px solid rgba(255,122,26,.45); outline-offset:3px; }
    .checkout-mode-radio { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .checkout-mode-icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:11px; background:#fff3e8; color:var(--primary); font-size:16px; }
    .checkout-mode-copy { display:grid; gap:3px; min-width:0; }
    .checkout-mode-copy strong { color:inherit; font-size:13px; line-height:1.3; }
    .checkout-mode-copy small { color:var(--text-muted); font-size:11px; font-weight:400; line-height:1.35; }
    .checkout-mode-option:has(.checkout-mode-radio:checked) .checkout-mode-icon { background:#fff; box-shadow:0 2px 8px rgba(255,122,26,.12); }
    .checkout-mode-login > i:last-child { margin-left:auto; color:var(--text-light); font-size:13px; }
    @media (max-width:560px) { .checkout-mode-options { grid-template-columns:1fr; gap:9px; } .checkout-mode-option { min-height:64px; padding:11px 13px; } }
    @media (prefers-reduced-motion:reduce) { .checkout-mode-option { transition:none; } .checkout-mode-option:hover { transform:none; } }
    .guest-checkout-note { margin:-6px 0 18px; color:var(--text-muted); font-size:13px; line-height:1.6; }
    .guest-checkout-note a { color:var(--primary); font-weight:600; }
    .guest-checkout-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .guest-checkout-fields .full { grid-column:1 / -1; }
    .guest-data-note { margin:14px 0 0; color:var(--text-light); font-size:12px; line-height:1.6; }
    @media (max-width:560px) { .guest-checkout-fields { grid-template-columns:1fr; } .guest-checkout-fields .full { grid-column:auto; } }

    /* Payment method tiles */
    .payment-method { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
    .payment-option { position: relative; flex: 1; min-width: 140px; border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; text-align: center; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; }
    .payment-option:hover { border-color: var(--primary); }
    .payment-option.disabled { cursor: not-allowed; background: #fbfbfb; opacity: .78; }
    .payment-option.disabled:hover { border-color: var(--border-color); }
    .payment-option.selected { border-color: var(--primary); background: var(--primary-light); }
    .payment-option i { font-size: 22px; color: var(--text-muted); margin-bottom: 8px; display: block; }
    .payment-option.selected i { color: var(--primary); }
    .payment-option-title { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 24px; }
    .payment-option-title .payment-option-label { grid-column: 2; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
    .payment-option.selected .payment-option-label { color: var(--text-title); }
    .payment-option .payment-coming-soon { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; margin-top: 0; color: var(--primary); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
    @media (max-width: 560px) {
      .checkout-layout > *, .checkout-section, .checkout-summary { min-width: 0; width: 100%; }
      .payment-method { width: 100%; }
      .payment-option { min-width: 0; padding: 30px 12px 16px; }
      .payment-option .payment-coming-soon { top: 10px; right: 10px; }
      .form-group select { font-size: 12.5px; padding-left: 10px; padding-right: 8px; }
    }

    /* Credit card form */
    .card-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .card-form .full { grid-column: 1 / -1; }
    .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-title); margin-bottom: 6px; }
    .form-group input, .form-group select { width: 100%; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: #fafafa; transition: border-color 0.18s ease; }
    .form-group select { cursor: pointer; }
    .form-group select:disabled { cursor: not-allowed; background: #f6f6f6; color: var(--text-light); }
    .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); background: var(--bg-white); }

    /* Installment table */
    .installment-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
    .installment-table th, .installment-table td { padding: 12px; font-size: 13px; text-align: left; border-bottom: 1px solid var(--border-light); }
    .installment-table th { background: var(--border-light); font-weight: 700; color: var(--text-title); }
    .installment-table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    .installment-table th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
    .installment-table tr:hover td { background: var(--primary-light); }
    .installment-table input[type=radio] { accent-color: var(--primary); }

    /* Agreements */
    .checkout-agreement { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
    .checkout-agreement input { margin-top: 2px; accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
    .checkout-agreement a { color: var(--primary); font-weight: 600; }

    /* Order summary sidebar */
    .checkout-summary { background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px; position: sticky; top: 120px; }
    .checkout-summary h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-title); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
    .checkout-summary .summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; color: var(--text-muted); }
    .checkout-summary .summary-row .discount { color: var(--badge-green); font-weight: 600; }
    .checkout-summary .summary-row.total { font-size: 17px; font-weight: 800; color: var(--primary); padding-top: 12px; border-top: 2px solid var(--border-color); margin-top: 14px; }
    .coupon-box { display: flex; gap: 8px; margin: 4px 0 12px; }
    .coupon-box input { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 12.5px; font-family: inherit; outline: none; transition: border-color 0.18s ease; }
    .coupon-box input:focus { border-color: var(--primary); }
    .coupon-box button { height: 32px; align-self: center; padding: 0 16px; background: var(--primary); color: #fff; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 700; transition: background 0.18s ease; }
    .coupon-box button:hover { background: var(--primary-hover); }
    .btn-checkout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; background: var(--primary); color: #fff; font-size: 14.5px; font-weight: 700; border-radius: var(--radius-md); margin-top: 18px; transition: background 0.18s ease; }
    .btn-checkout:hover { background: var(--primary-hover); }
    .checkout-payment-icons { display: flex; justify-content: center; gap: 8px; margin: 16px 0 10px; }
    .checkout-payment-icon { width: 44px; height: 26px; background: var(--border-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--text-muted); }
    .ssl-note { font-size: 11px; color: var(--text-light); text-align: center; }
    .paytr-secure-note { display:flex; align-items:center; gap:10px; padding:13px 15px; border:1px solid #f2e9e1; border-radius:var(--radius-md); background:#fffaf5; color:var(--text-muted); font-size:12.5px; line-height:1.5; }
    .paytr-secure-note i { color:var(--badge-green); flex:0 0 auto; }
    .checkout-section.paytr-payment-active .payment-method,
    .checkout-section.paytr-payment-active #creditCardForm { display:none !important; }
    #paytrFrameContainer { display:none; margin-top:16px; overflow:hidden; border:1px solid #eee2d8; border-radius:var(--radius-lg); background:#fff; scroll-margin-top:24px; }
    #paytrFrameContainer.is-visible { display:block; }
    .paytr-frame-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 18px; border-top:4px solid var(--primary); border-bottom:1px solid #f1e8e0; background:#fffaf5; }
    .paytr-frame-heading-copy { display:flex; align-items:center; gap:11px; min-width:0; }
    .paytr-frame-icon { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:11px; background:#fff0e4; color:var(--primary); }
    .paytr-frame-heading-text { display:grid; gap:3px; min-width:0; }
    .paytr-frame-heading-text strong { color:var(--text-title); font-size:14px; line-height:1.3; }
    .paytr-frame-heading-text small { color:var(--text-muted); font-size:11.5px; line-height:1.4; }
    .paytr-frame-secure { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 10px; border:1px solid #f0e3d7; border-radius:999px; color:#586257; background:#fff; font-size:10.5px; font-weight:700; white-space:nowrap; }
    .paytr-frame-secure i { color:var(--badge-green); }
    #paytrIframe { display:block; width:100%; min-height:650px; border:0; background:#fff; }
    @media (max-width:560px) {
      #paytrFrameContainer { margin-top:12px; border-radius:var(--radius-md); scroll-margin-top:12px; }
      .paytr-frame-heading { align-items:flex-start; padding:13px 12px; }
      .paytr-frame-heading-copy { gap:9px; }
      .paytr-frame-icon { flex-basis:32px; width:32px; height:32px; border-radius:9px; }
      .paytr-frame-heading-text strong { font-size:12.5px; }
      .paytr-frame-heading-text small { font-size:10.5px; }
      .paytr-frame-secure { gap:4px; padding:6px 7px; font-size:9px; }
    }