/* ===================== STATE: WALLET SELECT ===================== */
#state-wallet-select .section-title {
    font-size: 14px;
    color: #555;
    margin-bottom: 14px;
    text-align: center;
}

.wallet-options:after {
    content: '';
    display: table;
    clear: both;
}

.wallet-option {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    background: #fff;
    text-align: left;
    -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    font-family: inherit;
    font-size: inherit;
}

.wallet-option:hover {
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.wallet-option.ep { border-color: #00a651; }
.wallet-option.jc { border-color: #EE1C25; }

.wallet-option-inner:after {
    content: '';
    display: table;
    clear: both;
}

.wallet-icon {
    float: left;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    margin-right: 12px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.wallet-icon.ep { background: #00a651; }
.wallet-icon.jc { background: #EE1C25; }

.wallet-info {
    overflow: hidden;
    padding-top: 3px;
}

.wallet-name {
    font-size: 15px;
    font-weight: bold;
    color: #222;
}

.wallet-name.ep { color: #00a651; }
.wallet-name.jc { color: #EE1C25; }

.wallet-desc {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.wallet-arrow {
    float: right;
    line-height: 44px;
    color: #bbb;
    font-size: 18px;
}

/* ===================== STATE: FORM ===================== */
.form-wallet-badge {
    display: -webkit-box;
    display: -ms-flexbox;
    display: table;
    width: 100%;
    margin-bottom: 18px;
}

.form-wallet-badge-inner {
    display: table-cell;
    vertical-align: middle;
}

.badge-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    vertical-align: middle;
    margin-right: 8px;
}

.badge-icon.ep { background: #00a651; }
.badge-icon.jc { background: #EE1C25; }

.badge-name {
    font-size: 15px;
    font-weight: bold;
    vertical-align: middle;
}

.badge-name.ep { color: #00a651; }
.badge-name.jc { color: #EE1C25; }

.btn-back {
    float: right;
    background: #f5f5f5;
    border: 1.5px solid #bbb;
    border-radius: 6px;
    color: #555;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 6px 14px;
    font-family: inherit;
    outline: none;
    text-decoration: none;
    letter-spacing: 0.3px;
    -webkit-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}

.btn-back:hover {
    background: #e8e8e8;
    color: #222;
    border-color: #999;
}

.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 12px;
    color: #555;
    margin-bottom: 5px;
}

.form-label-ur {
    display: block;
    font-size: 12px;
    color: #888;
    direction: rtl;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 3px;
}

.form-input {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    color: #222;
    background: #fafafa;
    outline: none;
    font-family: inherit;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.form-input:focus {
    border-color: #1a237e;
    background: #fff;
}

.form-input.error { border-color: #EE1C25; }

.form-error-msg {
    display: none;
    color: #EE1C25;
    font-size: 11px;
    margin-top: 4px;
}

.form-error-msg.show { display: block; }

/* ===================== PAY BUTTON ===================== */
.btn-pay {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.btn-pay.ep { background: #00a651; }
.btn-pay.jc { background: #EE1C25; }

.btn-pay:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-pay .btn-text { display: block; }

.btn-pay .btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

.btn-pay.loading .btn-text { display: none; }
.btn-pay.loading .btn-spinner { display: block; }

.alert-warn {
    display: none;
    background: #fffde7;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 10px 12px;
    color: #e65100;
    font-size: 12px;
    margin-bottom: 14px;
}

.alert-warn.show { display: block; }

.alert-error {
    display: none;
    background: #fff3f3;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    padding: 10px 12px;
    color: #c62828;
    font-size: 12px;
    margin-bottom: 14px;
}

.alert-error.show { display: block; }

/* ===================== STATE: WAITING ===================== */
#state-waiting {
    text-align: center;
    padding: 8px 0 8px;
}

.waiting-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e8f5e9;
    line-height: 64px;
    text-align: center;
    font-size: 32px;
    margin: 0 auto 14px;
}

.waiting-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
}

.waiting-subtitle {
    font-size: 12px;
    color: #888;
    margin-bottom: 18px;
}

.countdown-wrap {
    display: inline-block;
    width: 80px;
    height: 80px;
    position: relative;
    margin-bottom: 14px;
}

.countdown-svg {
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.countdown-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 6;
}

.countdown-fg {
    fill: none;
    stroke: #1a237e;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 0;
    -webkit-transition: stroke-dashoffset 1s linear;
    transition: stroke-dashoffset 1s linear;
}

.countdown-num {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: bold;
    color: #1a237e;
}

.waiting-hint {
    font-size: 12px;
    color: #777;
    margin-bottom: 10px;
}

.btn-open-app {
    display: inline-block;
    padding: 11px 28px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    margin-bottom: 6px;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.btn-open-app.ep { background: #00a651; }
.btn-open-app.jc { background: #EE1C25; }
.btn-open-app:hover { opacity: 0.88; }

.timeout-badge {
    display: none;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 8px 12px;
    color: #f57f17;
    font-size: 12px;
    margin: 10px 0 0;
}

.timeout-badge.show { display: block; }

/* ===================== STATE: RESULT ===================== */
#state-result {
    text-align: center;
    padding: 24px 0 8px;
}

.result-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    line-height: 72px;
    text-align: center;
    font-size: 36px;
    margin: 0 auto 16px;
}

.result-icon.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.result-icon.fail {
    background: #ffebee;
    color: #c62828;
}

.result-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
}

.result-title.success { color: #2e7d32; }
.result-title.fail { color: #c62828; }

.result-subtitle {
    font-size: 13px;
    color: #888;
}

/* ===================== INSTRUCTIONS ===================== */
.instructions {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 20px;
}

.instructions-title {
    font-size: 12px;
    font-weight: bold;
    color: #e65100;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.instr-list {
    list-style: none;
    margin-bottom: 14px;
}

.instr-list li {
    font-size: 12px;
    color: #555;
    padding: 4px 0 4px 20px;
    position: relative;
    line-height: 1.5;
}

.instr-list li:before {
    content: attr(data-step);
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background: #1a237e;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
}

.instr-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 10px 0;
}

.instr-ur-title {
    font-size: 13px;
    font-weight: bold;
    color: #e65100;
    direction: rtl;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 8px;
}

.instr-ur-list { list-style: none; }

.instr-ur-list li {
    font-size: 13px;
    color: #555;
    direction: rtl;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    padding: 3px 0;
    line-height: 1.8;
}

/* ===================== CONFIRM MODAL ===================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
}

.modal-overlay.show { display: block; }

.modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 14px;
    width: 88%;
    max-width: 360px;
    padding: 24px 20px 20px;
    -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.modal-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.modal-title-en {
    font-size: 16px;
    font-weight: bold;
    color: #c62828;
    margin-bottom: 4px;
}

.modal-title-ur {
    font-size: 15px;
    font-weight: bold;
    color: #c62828;
    direction: rtl;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 14px;
}

.modal-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
    text-align: left;
}

.modal-info-row {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.modal-info-row:last-child { margin-bottom: 0; }

.modal-info-label {
    font-size: 11px;
    color: #999;
    display: block;
    margin-bottom: 2px;
}

.modal-info-val {
    font-size: 15px;
    font-weight: bold;
    color: #222;
}

.modal-desc-en {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.modal-desc-ur {
    font-size: 13px;
    color: #777;
    direction: rtl;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 16px;
}

.modal-btns {
    display: table;
    width: 100%;
    border-spacing: 8px 0;
}

.modal-btn {
    display: table-cell;
    width: 50%;
    padding: 11px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.modal-btn:hover { opacity: 0.85; }
.modal-btn-cancel { background: #f0f0f0; color: #555; }
.modal-btn-confirm { background: #c62828; color: #fff; }

/* ===================== FORM PAY HINTS ===================== */
.form-pay-hints {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.form-hint-en {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 6px;
}

.form-hint-ur {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    direction: rtl;
    margin-bottom: 10px;
}

.form-hint-ur:last-child {
    margin-bottom: 0;
}

/* ===================== ACCOUNT HISTORY SELECT ===================== */
.account-history-select {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 9px 10px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    background: #fafafa;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* ===================== PROCESSING TOAST ===================== */
.processing-toast {
    position: fixed;
    top: 12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1100;
    width: 92%;
    max-width: 420px;
    background: #2e7d32;
    color: #fff;
    border-radius: 8px;
    padding: 12px 36px 12px 14px;
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-size: 12px;
    line-height: 1.4;
}

.processing-toast-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    margin-right: 8px;
    vertical-align: middle;
    font-size: 12px;
}

.processing-toast-text {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 36px);
}

.processing-toast-ur {
    direction: rtl;
    display: inline;
}

.processing-toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    padding: 0;
}

/* ===================== INSTRUCTIONS MODAL (dark) ===================== */
.instr-modal-overlay .instr-modal-box {
    background: #1a1f2e;
    color: #e8e8e8;
    text-align: left;
    max-width: 400px;
    padding: 20px 18px 18px;
}

.instr-modal-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 12px;
}

.instr-modal-alert {
    background: #243b6b;
    color: #cfe0ff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    margin-bottom: 14px;
    line-height: 1.5;
}

.instr-modal-alert-icon {
    margin-right: 6px;
}

.instr-modal-list-en,
.instr-modal-list-ur {
    margin: 0 0 14px 18px;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #ddd;
}

.instr-modal-list-ur {
    direction: rtl;
    text-align: right;
    margin-right: 18px;
    margin-left: 0;
    list-style-position: inside;
}

.btn-instr-understand {
    display: block;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 8px;
    background: #1976d2;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
}

.btn-instr-understand:hover {
    opacity: 0.92;
}

/* ===================== WAITING PHASES ===================== */
.waiting-phase {
    text-align: center;
}

/* ===================== QR CODE MODE ===================== */
#state-qrcode {
    text-align: center;
    padding: 8px 0 4px;
}

.qrcode-title {
    font-size: 16px;
    font-weight: bold;
    color: #1a237e;
    margin-bottom: 4px;
}

.qrcode-title-ur {
    font-size: 13px;
    color: #666;
    direction: rtl;
    margin-bottom: 16px;
}

.qrcode-wrap {
    display: inline-block;
    padding: 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    margin-bottom: 14px;
    line-height: 0;
}

.qrcode-img {
    display: block;
    width: 220px;
    height: 220px;
    max-width: 100%;
    object-fit: contain;
    background: #fff;
}

.qrcode-hint {
    font-size: 13px;
    color: #555;
    line-height: 1.45;
    margin-bottom: 6px;
    padding: 0 8px;
}

.qrcode-hint-ur {
    font-size: 12px;
    color: #888;
    direction: rtl;
    line-height: 1.5;
    margin-bottom: 18px;
    padding: 0 8px;
}

.qrcode-waiting {
    font-size: 12px;
    color: #888;
}

.qrcode-waiting .processing-inline-spinner {
    width: 22px;
    height: 22px;
    border-width: 3px;
    margin-bottom: 8px;
    vertical-align: middle;
}

.waiting-subtitle-ur {
    font-size: 12px;
    color: #888;
    direction: rtl;
    margin-top: 4px;
    margin-bottom: 8px;
}

.processing-inline-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #1a237e;
    border-radius: 50%;
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
    margin-bottom: 14px;
}

@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}