/* =============================================
   JustImagine – Modern UI Stylesheet
   Brand: #a78871  Dark: #8c6e58  Light: #f7f0eb
   ============================================= */

:root {
    --ji: #a78871;
    --ji-dark: #8c6e58;
    --ji-darker: #6e5345;
    --ji-light: #f7f0eb;
    --ji-border: #e4d5c9;
    --ji-shadow: rgba(167,136,113,.18);
    --ji-gradient: linear-gradient(135deg, #a78871 0%, #8c6e58 100%);
    --ji-gradient-rev: linear-gradient(135deg, #8c6e58 0%, #a78871 100%);
}

/* ── Utility ── */
.ji-text      { color: var(--ji) !important; }
.ji-bg        { background: var(--ji-gradient) !important; color: #fff !important; }
.ji-border    { border-color: var(--ji) !important; }

/* ─────────────────────────────────────────────
   PAYMENT PAGE
───────────────────────────────────────────── */
.pay-page {
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.pay-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px var(--ji-shadow);
    padding: 48px 40px 40px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

.pay-logo-ring {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--ji-light);
    border: 3px solid var(--ji-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    position: relative;
}
.pay-logo-ring img { width: 52px; height: 52px; object-fit: contain; }

.pay-spinner {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid var(--ji-border);
    border-top-color: var(--ji);
    animation: paySpinner 1s linear infinite;
}
@keyframes paySpinner { to { transform: rotate(360deg); } }

.pay-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.pay-subtitle {
    font-size: 14px;
    color: #888;
    margin-bottom: 28px;
    line-height: 1.6;
}

.pay-amount-box {
    background: var(--ji-light);
    border: 1px solid var(--ji-border);
    border-radius: 12px;
    padding: 18px 20px;
    text-align: center;
    margin-bottom: 28px;
}
.pay-amount-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.pay-amount-value { font-size: 32px; font-weight: 900; color: var(--ji-dark); line-height: 1.1; margin-bottom: 4px; }
.pay-order-no { font-size: 12px; color: #bbb; }

.pay-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #aaa;
    margin-top: 20px;
}
.pay-secure-badge i { color: #4caf50; font-size: 14px; }

/* ─────────────────────────────────────────────
   ORDER SUCCESS PAGE
───────────────────────────────────────────── */
.success-page {
    min-height: 72vh;
    display: flex;
    align-items: center;
    padding: 40px 16px;
}

.success-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 48px var(--ji-shadow);
    overflow: hidden;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

/* confetti ribbon at top */
.success-ribbon {
    background: var(--ji-gradient);
    padding: 36px 32px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.success-ribbon::before,
.success-ribbon::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.success-ribbon::before { top: -80px; left: -60px; }
.success-ribbon::after  { bottom: -100px; right: -40px; }

.success-check-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 3px solid rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 34px;
    color: #fff;
}

.success-ribbon h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 6px;
}
.success-ribbon p {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    margin: 0;
}

.success-body {
    padding: 32px;
}

.success-order-ref {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ji-light);
    border: 1px solid var(--ji-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
}
.success-order-ref i { font-size: 22px; color: var(--ji); }
.success-order-ref .or-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .5px; }
.success-order-ref .or-value { font-size: 15px; font-weight: 700; color: #333; }
.success-order-ref a { color: var(--ji-dark); text-decoration: underline; }

/* Credits earned section */
.credits-earned-box {
    background: linear-gradient(135deg, #fffbf7 0%, #f7f0eb 100%);
    border: 2px solid var(--ji-border);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.credits-earned-box::before {
    content: '★';
    position: absolute;
    right: 16px;
    top: 10px;
    font-size: 64px;
    color: var(--ji-border);
    line-height: 1;
}
.credits-earned-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.credits-earned-header i { font-size: 20px; color: var(--ji); }
.credits-earned-header span {
    font-size: 13px;
    font-weight: 700;
    color: var(--ji-dark);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.credits-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.credits-total-label { font-size: 13px; color: #777; }
.credits-total-amount {
    font-size: 28px;
    font-weight: 900;
    color: var(--ji);
}

.credits-breakdown {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px dashed var(--ji-border);
    padding-top: 12px;
}
.credits-breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}
.credits-breakdown li .cb-name { color: #555; }
.credits-breakdown li .cb-amt { font-weight: 700; color: var(--ji-dark); }

.success-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.ji-btn-primary {
    flex: 1;
    background: var(--ji-gradient);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s;
    white-space: nowrap;
}
.ji-btn-primary:hover { opacity: .88; color: #fff; }
.ji-btn-outline {
    flex: 1;
    background: #fff;
    color: var(--ji-dark);
    border: 2px solid var(--ji-border);
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.ji-btn-outline:hover { border-color: var(--ji); color: var(--ji); }

/* Fail state */
.fail-ribbon { background: linear-gradient(135deg, #e57373 0%, #c62828 100%); }
.fail-check-ring { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }

/* ─────────────────────────────────────────────
   PROFILE PAGE
───────────────────────────────────────────── */

/* Hero strip */
.profile-hero {
    background: var(--ji-gradient);
    padding: 40px 0 100px;
    position: relative;
    overflow: hidden;
}
.profile-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: #f8f4f1;
    border-radius: 50% 50% 0 0 / 20px 20px 0 0;
}

.profile-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
}
.profile-hero-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: 3px solid rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.profile-hero-name { font-size: 20px; font-weight: 700; margin: 0 0 2px; }
.profile-hero-email { font-size: 13px; opacity: .8; margin: 0; }

/* Credits strip */
.profile-credits-strip {
    position: relative;
    z-index: 3;
    margin-top: -52px;
    margin-bottom: 28px;
}
.profile-credits-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px var(--ji-shadow);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.pcr-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--ji-light);
    border: 1px solid var(--ji-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--ji);
    flex-shrink: 0;
}
.pcr-body { flex: 1; min-width: 0; }
.pcr-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .5px; }
.pcr-amount { font-size: 26px; font-weight: 900; color: var(--ji-dark); line-height: 1.1; }
.pcr-tier  { font-size: 12px; color: #888; margin-top: 2px; }
.pcr-link  { flex-shrink: 0; }

/* Tabs */
.ji-tabs {
    border-bottom: 2px solid var(--ji-border);
    gap: 4px;
    flex-wrap: wrap;
}
.ji-tabs .nav-link {
    color: #888;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    transition: all .2s;
    background: none;
    margin-bottom: -2px;
    white-space: nowrap;
}
.ji-tabs .nav-link:hover { color: var(--ji); }
.ji-tabs .nav-link.active {
    color: var(--ji-dark);
    border-bottom-color: var(--ji);
    background: none;
}
.ji-tabs .nav-link i { margin-right: 6px; opacity: .75; }

.ji-tab-content {
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 20px var(--ji-shadow);
    padding: 28px;
}

/* Form section label */
.ji-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ji);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ji-border);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Form controls */
.ji-form-group { margin-bottom: 20px; }
.ji-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    display: block;
}
.ji-input {
    width: 100%;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    transition: border-color .2s, box-shadow .2s;
    background: #fafafa;
}
.ji-input:focus {
    border-color: var(--ji);
    box-shadow: 0 0 0 3px var(--ji-shadow);
    background: #fff;
    outline: none;
}

.ji-save-btn {
    background: var(--ji-gradient);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 28px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: opacity .2s;
}
.ji-save-btn:hover { opacity: .88; }

/* Credit History */
.credits-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.credits-stat-card {
    background: var(--ji-light);
    border: 1px solid var(--ji-border);
    border-radius: 12px;
    padding: 16px 18px;
    text-align: center;
}
.csc-value { font-size: 22px; font-weight: 800; color: var(--ji-dark); }
.csc-label { font-size: 11px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }

.ji-txn-table { width: 100%; border-collapse: collapse; }
.ji-txn-table thead tr { border-bottom: 2px solid var(--ji-border); }
.ji-txn-table thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #aaa; padding: 8px 12px; text-align: left; }
.ji-txn-table tbody tr { border-bottom: 1px solid #f3ede8; transition: background .15s; }
.ji-txn-table tbody tr:hover { background: #fdf8f5; }
.ji-txn-table tbody td { padding: 12px; font-size: 13px; color: #444; vertical-align: middle; }

.txn-badge-earn    { display:inline-flex; align-items:center; gap:4px; background:#e8f5e9; color:#2e7d32; border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; }
.txn-badge-deduct  { display:inline-flex; align-items:center; gap:4px; background:#fce4e4; color:#c62828; border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; }
.txn-badge-adjust  { display:inline-flex; align-items:center; gap:4px; background:#e3f2fd; color:#1565c0; border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; }

.txn-amt-earn   { font-weight: 700; color: #2e7d32; }
.txn-amt-deduct { font-weight: 700; color: #c62828; }
.txn-amt-adjust { font-weight: 700; color: #1565c0; }

/* Order history overrides */
.ji-order-table { width:100%; border-collapse:collapse; }
.ji-order-table thead tr { border-bottom: 2px solid var(--ji-border); }
.ji-order-table thead th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#aaa; padding:8px 12px; }
.ji-order-table tbody tr { border-bottom:1px solid #f3ede8; }
.ji-order-table tbody td { padding:12px; font-size:13px; color:#444; vertical-align:middle; }

/* Responsive */
@media (max-width: 576px) {
    .success-body { padding: 20px; }
    .pay-card { padding: 32px 20px 28px; }
    .credits-stat-row { grid-template-columns: 1fr 1fr; }
    .success-actions { flex-direction: column; }
    .profile-credits-card { flex-wrap: wrap; }
    .ji-tab-content { padding: 18px; }
    .ji-tabs .nav-link { padding: 8px 12px; font-size: 13px; }
}

/* ─────────────────────────────────────────────
   BOOKING MODAL — Frontend
───────────────────────────────────────────── */

/* Modal overrides */
.ji-booking-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.ji-booking-modal .modal-header {
    background: var(--ji-gradient);
    padding: 18px 24px;
    border: none;
    border-radius: 0;
}
.ji-booking-modal .modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
}
.ji-booking-modal .btn-close {
    filter: brightness(0) invert(1);
    opacity: .8;
}
.ji-booking-modal .btn-close:hover { opacity: 1; }

.ji-booking-modal .modal-body {
    padding: 24px 28px 28px;
    background: #fff;
}

/* Description line */
.bk-desc {
    font-size: 13.5px;
    color: #888;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ji-border);
    display: flex;
    align-items: center;
    gap: 7px;
}
.bk-desc i { color: var(--ji); }

/* Field groups */
.bk-field-group {
    margin-bottom: 18px;
}
.bk-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 7px;
}
.bk-label .req-star {
    color: #e74c3c;
    margin-left: 2px;
}
.bk-input,
.bk-select,
.bk-textarea {
    width: 100%;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
}
.bk-input:focus,
.bk-select:focus,
.bk-textarea:focus {
    border-color: var(--ji);
    box-shadow: 0 0 0 3px rgba(167,136,113,.16);
    background: #fff;
}
.bk-textarea { resize: vertical; min-height: 90px; }
.bk-select { cursor: pointer; }

/* Inline error state */
.bk-input.is-invalid,
.bk-select.is-invalid,
.bk-textarea.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,.12) !important;
    background: #fff8f8 !important;
}
.bk-error-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #dc3545;
    margin-top: 5px;
    font-weight: 500;
}
.bk-error-text i { font-size: 13px; }

/* Radio / Checkbox */
.bk-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #444;
    padding: 6px 0;
    cursor: pointer;
}
.bk-check-label input[type=radio],
.bk-check-label input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: var(--ji);
    cursor: pointer;
    flex-shrink: 0;
}

/* File input */
.bk-file-wrap .bk-input[type=file] {
    padding: 8px 14px;
    cursor: pointer;
}
.bk-file-note {
    font-size: 11.5px;
    color: #aaa;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Submit button */
.bk-submit-btn {
    width: 100%;
    background: var(--ji-gradient);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}
.bk-submit-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.bk-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Success state */
.bk-success-state {
    text-align: center;
    padding: 32px 16px;
}
.bk-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78871, #8c6e58);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 38px;
    color: #fff;
    line-height: 1;
}
.bk-success-icon i,
.bk-success-icon .la {
    font-size: 38px;
    color: #fff;
    line-height: 1;
}
.bk-success-title { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 8px; }
.bk-success-sub   { font-size: 14px; color: #888; line-height: 1.6; }

/* Global form error */
.bk-form-error {
    background: #fff5f5;
    border: 1px solid #fcc;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #c62828;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
}
.bk-form-error i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   Program Detail — Booking CTA Section  (split layout, no card)
   ═══════════════════════════════════════════════════════════════ */
.program-booking-section {
    position: relative;
    padding: 90px 0;
    background: linear-gradient(120deg, #2c1a0e 0%, #4a2e1a 40%, #3b2211 100%);
    overflow: hidden;
}

/* Background texture rings */
.program-booking-section::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(201,162,39,.12);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.program-booking-section::after {
    content: '';
    position: absolute;
    width: 900px; height: 900px;
    border-radius: 50%;
    border: 1px solid rgba(201,162,39,.07);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Decorative glow blob */
.pbs-glow {
    position: absolute;
    width: 350px; height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,136,113,.22) 0%, transparent 70%);
    top: -80px; right: -60px;
    pointer-events: none;
}
.pbs-glow-2 {
    position: absolute;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,162,39,.14) 0%, transparent 70%);
    bottom: -60px; left: 8%;
    pointer-events: none;
}

/* Split layout */
.pbs-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* Left: text content */
.pbs-left { flex: 1; }

.pbs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c9a227;
    margin-bottom: 16px;
}
.pbs-eyebrow::before {
    content: '';
    width: 24px; height: 2px;
    background: #c9a227;
    border-radius: 2px;
    display: inline-block;
}

.pbs-title {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin-bottom: 16px;
}

.pbs-desc {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    line-height: 1.75;
    margin-bottom: 0;
    max-width: 440px;
}

/* Right: action panel */
.pbs-right {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* Date/credits info items */
.pbs-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.pbs-info-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: #c9a785;
    flex-shrink: 0;
}
.pbs-info-text { display: flex; flex-direction: column; }
.pbs-info-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.4); letter-spacing: 1.2px; text-transform: uppercase; }
.pbs-info-value { font-size: 14px; font-weight: 700; color: #fff; }

/* Credits item special */
.pbs-info-item.pbs-credits .pbs-info-icon {
    background: rgba(201,162,39,.15);
    border-color: rgba(201,162,39,.3);
    color: #c9a227;
}
.pbs-info-item.pbs-credits .pbs-info-value { color: #fde68a; }

/* Divider */
.pbs-hr {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.1);
    margin: 4px 0;
}

/* CTA button */
.pbs-btn-book {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #c9a227, #a07d10);
    color: #1a0f00;
    border: none;
    border-radius: 50px;
    padding: 15px 36px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(201,162,39,.4);
    transition: transform .2s, box-shadow .2s;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}
.pbs-btn-book:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(201,162,39,.55);
    color: #1a0f00;
}
.pbs-btn-book i { font-size: 19px; }

/* Disabled states */
.pbs-btn-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.45);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50px;
    padding: 14px 36px;
    font-size: 14px;
    font-weight: 600;
    cursor: not-allowed;
    width: 100%;
}

.pbs-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255,255,255,.35);
    width: 100%;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .pbs-inner   { flex-direction: column; gap: 40px; }
    .pbs-right   { flex: unset; width: 100%; align-items: stretch; }
    .pbs-title   { font-size: 26px; }
    .program-booking-section { padding: 60px 0; }
}

/* ═══════════════════════════════════════════
   Direct Checkout Page  (.dco-*)
   ═══════════════════════════════════════════ */
.dco-wrap {
    padding: 60px 0 90px;
    background: #fff;
    min-height: 75vh;
}

/* Page heading */
.dco-page-head {
    text-align: center;
    margin-bottom: 36px;
}
.dco-page-title {
    font-size: 26px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.dco-page-title i { color: #a78871; }
.dco-page-sub {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* Section micro-label */
.dco-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #a78871;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── LEFT: Form submission card ── */
.dco-sub-card {
    background: #fff;
    border: 1px solid #e8e0d8;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(139,100,72,.08);
    height: 100%;
}
.dco-sub-head {
    background: linear-gradient(120deg, #1e0f05, #3d2010);
    padding: 18px 26px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.dco-sub-head i { color: #c9a785; font-size: 20px; flex-shrink: 0; }
.dco-sub-head-title { color: #fff; font-size: 14px; font-weight: 700; margin: 0; }
.dco-sub-head-sub   { color: rgba(255,255,255,.45); font-size: 11px; margin-top: 1px; }
.dco-sub-verified {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    background: rgba(22,163,74,.2);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.3);
    border-radius: 50px;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dco-sub-row {
    display: flex;
    align-items: flex-start;
    padding: 12px 26px;
    border-bottom: 1px solid #f5f0eb;
    gap: 16px;
}
.dco-sub-row:nth-child(even) { background: #fdf9f7; }
.dco-sub-row:last-child       { border-bottom: none; }
.dco-sub-key {
    flex: 0 0 140px;
    font-size: 10px;
    font-weight: 800;
    color: #b0bec5;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding-top: 2px;
}
.dco-sub-val {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
}

/* File link inside form submission */
.dco-sub-file-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dco-sub-file-link:hover { text-decoration: underline; }

/* Submission timestamp footer */
.dco-sub-footer {
    padding: 10px 26px;
    font-size: 11px;
    color: #94a3b8;
    background: #fdf9f7;
    border-top: 1px solid #f0ece6;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* No-form notice */
.dco-no-sub {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: #92400e;
}
.dco-no-sub i { font-size: 20px; flex-shrink: 0; color: #d97706; }

/* ── RIGHT: Order summary card ── */
.dco-order-card {
    background: #fff;
    border: 1px solid #e8e0d8;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(139,100,72,.08);
    position: sticky;
    top: 24px;
}

/* Card header */
.dco-order-head {
    background: linear-gradient(135deg, #2c1a0e, #4a2e1a);
    padding: 20px 26px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.dco-order-head-badge {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(201,167,133,.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #c9a785;
    margin-top: 1px;
}
.dco-order-head-title {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 4px;
}
.dco-order-head-sub {
    color: rgba(255,255,255,.5);
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Price rows inside order card */
.dco-order-body { padding: 0 26px; }
.dco-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid #f1ece6;
    font-size: 13px;
    color: #64748b;
}
.dco-order-row:last-child { border-bottom: none; }
.dco-order-row.total {
    padding: 16px 0;
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
    border-top: 2px solid #e8e0d8;
    border-bottom: none;
    margin-top: 2px;
}
.dco-order-row.total .dco-order-val { color: #16a34a; font-size: 20px; }
.dco-order-key { font-weight: 500; }
.dco-order-val { font-weight: 700; }

/* GST details chip */
.dco-gst-chip {
    background: #f8f6f3;
    border: 1px solid #e8e0d8;
    border-radius: 10px;
    padding: 10px 16px;
    margin: 0 26px 20px;
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dco-gst-chip i { color: #a78871; }

/* Token section divider label */
.dco-token-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 26px 10px;
    margin-top: 4px;
}
.dco-token-section-label i { font-size: 13px; color: #d97706; }

/* Top-up link inside warning */
.dco-topup-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: #92400e;
    font-weight: 700;
    text-decoration: none;
    font-size: 12px;
    transition: color .15s;
}
.dco-topup-link:hover { color: #78350f; text-decoration: underline; }

/* ══ Token breakdown box ══ */
.dco-token-box {
    margin: 0 26px 18px;
    background: #fffbf2;
    border: 1.5px solid #f0d9b5;
    border-radius: 14px;
    overflow: hidden;
}
.dco-token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #f5e8cf;
    gap: 10px;
}
.dco-token-row:last-child { border-bottom: none; }
.dco-token-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
}
.dco-token-label i { font-size: 14px; color: #d97706; }
.dco-token-val {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.dco-token-required {
    font-size: 17px;
    font-weight: 900;
    color: #b45309;
    letter-spacing: -.3px;
}
.dco-token-balance-row { background: transparent; transition: background .2s; }
.dco-token-ok  { background: #f0fdf4; }
.dco-token-ok  .dco-token-val { color: #16a34a; font-size: 14px; }
.dco-token-short { background: #fff1f2; }
.dco-token-short .dco-token-val { color: #dc2626; font-size: 14px; }

/* ══ Insufficient tokens warning ══ */
.dco-token-warn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 26px 18px;
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 12.5px;
    color: #78350f;
    line-height: 1.6;
}
.dco-token-warn > i {
    font-size: 22px;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Amount pill */
.dco-amount-pill {
    background: linear-gradient(135deg, #1e293b, #334155);
    margin: 0 26px 22px;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dco-amount-pill-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dco-amount-pill-value {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.5px;
    margin-top: 4px;
}
.dco-amount-pill i { font-size: 36px; color: rgba(255,255,255,.1); }

/* Pay button */
.dco-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 52px);
    margin: 0 26px 14px;
    background: #A78871;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 15px 24px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .5px;
    box-shadow: 0 6px 20px rgba(167,136,113,.35);
    transition: background .2s, transform .2s, box-shadow .2s;
    white-space: nowrap;
}
.dco-pay-btn:hover    { background: #967563; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(167,136,113,.45); }
.dco-pay-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Footer notes */
.dco-order-footer {
    padding: 0 26px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.dco-secure-note {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dco-rp-note {
    font-size: 10px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Responsive */
@media (max-width: 991px) {
    .dco-order-card { position: static; }
}

/* Membership tier Buy button */
.mbr-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #1a2340, #2c3a5e);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .3px;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 12px rgba(26,35,64,.25);
    white-space: nowrap;
}
.mbr-buy-btn:hover    { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,35,64,.35); }
.mbr-buy-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════
   Membership Tier Cards  (.mbr-*)
═══════════════════════════════════════════ */

/* Section heading */
.mbr-section-head {
    margin: 40px 0 20px;
}
.mbr-section-head .section-title   { font-size: 22px; font-weight: 800; color: #1e293b; margin-bottom: 4px; }
.mbr-section-head .section-subtitle{ font-size: 13px; color: #94a3b8; }

/* Card grid */
.mbr-tier-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin-bottom: 36px;
}

/* Individual card */
.mbr-tier-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(30,41,59,.08);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.mbr-tier-card:hover           { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(30,41,59,.13); }
.mbr-tier-card.mbr-tier-active { border-color: #a78871; box-shadow: 0 6px 28px rgba(167,136,113,.25); }

/* Card header (colored gradient) */
.mbr-tier-header {
    padding: 22px 20px 18px;
    color: #fff;
    position: relative;
    min-height: 120px;
    background: linear-gradient(135deg, var(--tier-color, #2c3a5e), #1a2340);
}

/* "Your Current Plan" badge */
.mbr-tier-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

/* Tier badge label (SILVER / GOLD …) */
.mbr-tier-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 4px;
}

/* Tier name */
.mbr-tier-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.3px;
    margin-bottom: 6px;
}

/* Price display */
.mbr-tier-price {
    font-size: 26px;
    font-weight: 900;
    display: flex;
    align-items: baseline;
    gap: 3px;
}
.mbr-price-currency { font-size: 14px; font-weight: 700; opacity: .8; }
.mbr-price-note     { font-size: 10px; opacity: .65; margin-top: 2px; }

/* WOW Credits pill inside header */
.mbr-credits-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 10px;
}
.mbr-credits-pill i { font-size: 12px; color: #fcd34d; }

.mbr-validity-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    margin-left: 0;
}
.mbr-validity-pill i { font-size: 12px; opacity: .85; }

.mbr-expiry-note {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    margin: 4px 0 8px;
}
.mbr-expiry-note i { color: #a78871; }

/* Feature rows */
.mbr-tier-features {
    padding: 14px 18px 4px;
    flex: 1;
}
.mbr-feat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f1ece6;
    font-size: 12px;
}
.mbr-feat-row:last-child { border-bottom: none; }
.mbr-feat-label { color: #64748b; font-weight: 500; }
.mbr-feat-val   { color: #1e293b; font-weight: 700; text-align: right; }

/* CTA area */
.mbr-tier-cta {
    padding: 14px 18px 18px;
}

/* Subscribe / buy button */
.mbr-cta-btn,
.mbr-cta-btn:link,
.mbr-cta-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--tier-color, #2c3a5e), #1a2340) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    text-decoration: none !important;
    transition: opacity .2s, transform .2s;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    font-family: 'Montserrat' !important;
}
.mbr-cta-btn:hover,
.mbr-cta-btn:focus  { opacity: .88; transform: translateY(-1px); color: #fff !important; text-decoration: none !important; }
.mbr-cta-btn i      { font-size: 14px; }

/* Active plan indicator */
.mbr-cta-active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 50px;
    padding: 11px 16px;
    color: #16a34a;
    font-size: 13px;
    font-weight: 800;
}

/* N/A pricing text */
.mbr-cta-na {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    padding: 10px 0;
}

/* Responsive: stack on small screens */
@media (max-width: 575px) {
    .mbr-tier-cards { grid-template-columns: 1fr; }
}

/* Checkout subscription detail — feature rows */
.dco-feat-block {
    padding: 14px 26px 6px;
}
.dco-feat-heading {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.dco-feat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f8f3ef;
    font-size: 13px;
}
.dco-feat-row:last-child { border-bottom: none; }
.dco-feat-label { color: #475569; font-weight: 500; }
.dco-feat-val   { color: #1e293b; font-weight: 700; text-align: right; }

/* ══════════════════════════════════════════
   Membership Purchase Detail Page (.mbr-detail-*)
   Re-subscribe & Action links (.mbr-renew-btn, .mbr-action-link)
═══════════════════════════════════════════ */

/* Re-subscribe link below Active Plan badge */
.mbr-renew-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 14px;
    border-radius: 50px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #64748b !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: border-color .2s, color .2s;
}
.mbr-renew-btn:hover { border-color: #a78871; color: #a78871 !important; }

/* Inline action links in history table */
.mbr-action-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #a78871 !important;
    text-decoration: none !important;
    transition: opacity .15s;
}
.mbr-action-link:hover { opacity: .75; }

/* Purchase detail page wrapper */
.mbr-detail-wrap { max-width: 860px; margin: 0 auto; }

/* Header bar */
.mbr-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(30,41,59,.07);
    flex-wrap: wrap;
    gap: 14px;
}
.mbr-detail-pno   { font-size: 11px; color: #94a3b8; font-family: monospace; margin-bottom: 4px; }
.mbr-detail-tier  { font-size: 18px; color: #1e293b; display: flex; align-items: center; gap: 10px; }
.mbr-detail-badge {
    font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    background: #1a2340; color: #fff; border-radius: 50px; padding: 3px 10px;
}
.mbr-detail-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Status pills */
.mbr-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; border-radius: 50px; padding: 5px 14px;
}
.mbr-status-paid    { background: #f0fdf4; color: #16a34a; border: 1.5px solid #86efac; }
.mbr-status-pending { background: #fffbeb; color: #d97706; border: 1.5px solid #fcd34d; }
.mbr-status-failed  { background: #fef2f2; color: #dc2626; border: 1.5px solid #fca5a5; }

/* Download button */
.mbr-dl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #A78871; color: #fff !important; border: none; border-radius: 50px;
    padding: 8px 18px; font-size: 12px; font-weight: 700;
    text-decoration: none !important; transition: opacity .2s;
}
.mbr-dl-btn:hover { opacity: .85; }

/* Two-col grid */
.mbr-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}
@media (max-width: 640px) { .mbr-detail-grid { grid-template-columns: 1fr; } }

/* Detail cards */
.mbr-detail-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(30,41,59,.07);
}
.mbr-detail-card-title {
    font-size: 12px; font-weight: 800; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .8px;
    margin-bottom: 16px; display: flex; align-items: center; gap: 6px;
}
.mbr-detail-table { width: 100%; border-collapse: collapse; }
.mbr-detail-table td {
    padding: 9px 0; font-size: 13px; border-bottom: 1px solid #f1ece6; color: #64748b;
}
.mbr-detail-table tr:last-child td { border-bottom: none; }
.mbr-detail-table .text-end { text-align: right; color: #1e293b; font-weight: 600; }
.mbr-detail-total td { font-size: 15px; color: #1e293b; padding-top: 13px; }

/* WOW credits awarded box */
.mbr-credits-awarded-box {
    display: flex; align-items: center; gap: 14px;
    background: #fffbf0; border: 1.5px solid #fcd34d; border-radius: 10px;
    padding: 14px 16px; margin-top: 18px;
}
.mbr-credits-awarded-box i { font-size: 26px; color: #d97706; }
.mbr-credits-awarded-label { font-size: 10px; font-weight: 800; color: #92400e; text-transform: uppercase; letter-spacing: .5px; }
.mbr-credits-awarded-val   { font-size: 20px; font-weight: 900; color: #1e293b; }

/* Back/forward action row */
.mbr-detail-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   Membership Purchase History List (.mbr-hist-*)
═══════════════════════════════════════════ */
.mbr-hist-list { display: flex; flex-direction: column; gap: 10px; }

.mbr-hist-row {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid #f0ece8;
    border-radius: 12px;
    padding: 14px 20px;
    transition: box-shadow .15s;
}
.mbr-hist-row:hover { box-shadow: 0 4px 16px rgba(167,136,113,.12); }

.mbr-hist-col { padding: 0 10px; }
.mbr-hist-col:first-child { padding-left: 0; }
.mbr-hist-col:last-child  { padding-right: 0; }

/* Column widths */
.mbr-hist-col-tier    { flex: 2; min-width: 0; }
.mbr-hist-col-amt     { flex: 1.2; text-align: center; }
.mbr-hist-col-credits { flex: 1; text-align: center; }
.mbr-hist-col-date    { flex: 1.2; text-align: center; }
.mbr-hist-col-expiry  { flex: 1.3; text-align: center; }
.mbr-hist-col-status  { flex: 1; text-align: center; }
.mbr-hist-col-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }

/* Tier name & purchase no */
.mbr-hist-tier-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mbr-hist-pno {
    font-size: 10px;
    color: #94a3b8;
    font-family: monospace;
    margin-top: 2px;
}

/* Column label + value */
.mbr-hist-label {
    font-size: 10px;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}
.mbr-hist-val        { font-size: 13px; font-weight: 700; color: #1e293b; }
.mbr-hist-credits    { color: #16a34a; }
.mbr-hist-date-val   { color: #64748b; font-weight: 500; white-space: nowrap; }

/* Status badges */
.mbr-hist-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; border-radius: 50px; padding: 4px 12px;
    white-space: nowrap;
}
.mbr-hist-badge-paid    { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; }
.mbr-hist-badge-pending { background: #fffbeb; color: #d97706; border: 1px solid #fcd34d; }
.mbr-hist-badge-failed  { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.mbr-hist-badge-expired { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; font-size: 10px; margin-left: 4px; padding: 2px 6px; }

/* Action buttons */
.mbr-hist-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50px;
    padding: 6px 14px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: opacity .15s, transform .15s;
    border: 1.5px solid transparent;
}
.mbr-hist-btn:hover { opacity: .85; transform: translateY(-1px); }

.mbr-hist-btn-view {
    background: #f1ece6;
    color: #a78871 !important;
    border-color: #e4d5c9;
}
.mbr-hist-btn-dl {
    background: #f0fdf4;
    color: #16a34a !important;
    border-color: #86efac;
}

/* Responsive: stack on mobile */
@media (max-width: 700px) {
    .mbr-hist-row { flex-wrap: wrap; gap: 10px; }
    .mbr-hist-col-tier    { flex: 1 1 100%; padding: 0; border-bottom: 1px solid #f0ece8; padding-bottom: 8px; }
    .mbr-hist-col-actions { flex: 1 1 100%; justify-content: flex-start; padding: 0; }
    .mbr-hist-col-amt, .mbr-hist-col-credits,
    .mbr-hist-col-date, .mbr-hist-col-status { flex: 1 1 40%; text-align: left; }
    .mbr-hist-label { display: block; }
}