/* Ruk-Com bank-transfer notification page (payment.tpl, rendered by custom /payment.php). Scoped to .rk-payment. */
.rk-payment {
    --rk-blue-50:#F0F6FF;--rk-blue-100:#DBE8FF;--rk-blue-200:#BFD4FF;--rk-blue-600:#2356E8;--rk-blue-700:#1B43BD;--rk-blue-800:#1A3691;
    --rk-paper-100:#F4F7FD;--rk-line:#E5ECF7;--rk-line-strong:#CFD9EC;--rk-ink:#0B1730;--rk-text:#1E2A4A;--rk-muted:#54618A;
    box-sizing:border-box;max-width:960px;margin:16px auto 64px;color:var(--rk-text);font-family:'Anuphan','Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;line-height:1.65
}
.rk-payment *,.rk-payment *::before,.rk-payment *::after {box-sizing:border-box}
.rk-payment .hidden,#payment-modal .hidden {display:none!important}
.rk-payment .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rk-payment-head {text-align:center;max-width:640px;margin:0 auto 28px}
.rk-payment-eyebrow {display:inline-flex;padding:6px 14px;border:1px solid var(--rk-blue-100);border-radius:999px;background:var(--rk-blue-50);color:var(--rk-blue-700);font-size:12px;font-weight:600;letter-spacing:1.2px}
.rk-payment .rk-payment-title {margin:16px 0 0;font-size:clamp(28px,3vw,38px);line-height:1.35;font-weight:700;color:var(--rk-ink)}
.rk-payment-lead {margin:12px 0 0;color:var(--rk-muted)}
.rk-payment-card {margin:0 0 16px;padding:24px;border:1px solid var(--rk-line);border-radius:20px;background:#fff;box-shadow:0 1px 2px rgba(20,43,115,.06),0 2px 4px rgba(20,43,115,.05)}
.rk-payment .rk-payment-card-title {margin:0 0 14px;font-size:18px;line-height:1.45;font-weight:700;color:var(--rk-ink)}
.rk-payment-table {width:100%;margin:0;border-collapse:separate;border-spacing:0}
.rk-payment-table th {padding:10px 12px;border-bottom:1px solid var(--rk-line);background:var(--rk-paper-100);color:var(--rk-muted);font-size:13px;font-weight:600;text-align:left}
.rk-payment-table td {padding:14px 12px;border-bottom:1px solid var(--rk-line);vertical-align:middle;font-size:15px}
.rk-payment-table img {display:block;border-radius:8px}
.rk-payment-account-no {font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;color:var(--rk-ink);letter-spacing:.02em}
.rk-payment-notice ul {margin:0;padding-left:20px;color:var(--rk-text)}
.rk-payment-notice li {margin:0 0 6px}
.rk-payment-notice strong {color:#B42335}
.rk-payment-notice a {font-weight:600;color:var(--rk-blue-600)}
.rk-payment-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.rk-payment-wide {grid-column:1/-1}
.rk-payment .rk-payment-field {margin:0;min-width:0}
.rk-payment .rk-payment-field>label,.rk-payment-label {display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--rk-ink)}
.rk-payment .form-control {min-height:48px;padding:10px 14px;border:1px solid var(--rk-line-strong);border-radius:12px;font:inherit;font-size:15px;color:var(--rk-ink);box-shadow:none}
.rk-payment .form-control:focus {border-color:var(--rk-blue-600);box-shadow:0 0 0 3px rgba(35,86,232,.18);outline:0}
.rk-payment .form-control[readonly],.rk-payment .form-control.disabled {background:var(--rk-paper-100);color:var(--rk-muted)}
.rk-payment-datetime {display:flex;align-items:center;gap:8px}
.rk-payment-datetime input {flex:1 1 auto;min-width:0}
.rk-payment-datetime select {flex:0 0 76px;width:76px}
.rk-payment-banks {margin:0;padding:0}
.rk-payment-banks label {display:flex;align-items:center;gap:10px;min-height:48px;margin:0;padding:10px 14px;border:1px solid var(--rk-blue-200);border-radius:12px;background:var(--rk-blue-50);font-weight:600;cursor:pointer}
.rk-payment-banks input {accent-color:var(--rk-blue-700)}
.rk-payment-invoices {margin:0;padding:0;list-style:none;border:1px solid var(--rk-line);border-radius:14px;min-height:56px}
.rk-payment-invoices:empty::before {content:'กรอกอีเมลเพื่อดูใบแจ้งหนี้ที่ค้างชำระ';display:block;padding:16px;color:var(--rk-muted);font-size:14px}
.rk-payment-invoices>li {padding:12px 16px;border-bottom:1px solid var(--rk-line)}
.rk-payment-invoices>li:last-child {border-bottom:0}
.rk-payment-invoices select {display:inline-block;width:auto;min-height:36px;margin-left:8px;border-radius:10px}
.rk-payment-actions {display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin-top:20px}
.rk-payment-actions .alert {align-self:stretch;margin:0;border-radius:12px}
.rk-payment .rk-payment-submit {min-height:48px;padding:12px 28px;border:0;border-radius:999px;background:var(--rk-blue-600);color:#fff;font-weight:700;box-shadow:0 8px 24px -6px rgba(35,86,232,.28)}
.rk-payment .rk-payment-submit:hover {background:var(--rk-blue-700)}
.rk-payment .rk-payment-submit:focus-visible {outline:3px solid var(--rk-blue-600);outline-offset:3px}
.rk-payment-cheque {margin:18px 0 0;padding-top:16px;border-top:1px dashed var(--rk-line-strong);font-size:14px;color:var(--rk-muted)}
.rk-payment-cheque a {font-weight:600;color:var(--rk-blue-600)}
.rk-payment-modal .modal-content {border:0;border-radius:20px;text-align:center}
.rk-payment-modal .modal-body {padding:28px 24px}
.rk-payment-modal #alert-message {font-size:17px;line-height:1.6;color:#0B1730}
@media(max-width:767px) {
 .rk-payment-card {padding:18px 16px;border-radius:16px}
 .rk-payment-grid {grid-template-columns:1fr}
 .rk-payment-table thead {display:none}
 .rk-payment-table tr {display:block;padding:8px 0}
 .rk-payment-table td {display:flex;justify-content:space-between;gap:12px;padding:8px 4px;border:0}
 .rk-payment-table td[data-label]:not([data-label=""])::before {content:attr(data-label);color:var(--rk-muted);font-size:13px}
 .rk-payment-actions {align-items:stretch}
 .rk-payment .form-control {font-size:16px}
}
/* company-payment.tpl: attachment hint under the file input. */
.rk-payment-hint {margin:6px 0 0;font-size:13px;color:var(--rk-muted)}
.rk-payment input[type=file].form-control {padding:10px 12px;background:#fff}