/* ============================================================
   assets/receipt-certificate.css
   Resi Pembayaran Digital & Sertifikat Pembeli Setia — Perkasa Hosting Indonesia.
   Dipakai bersama design system utama (includes/style.php); file ini hanya
   menambah komponen khusus resi/sertifikat, tidak menimpa token global.
   ============================================================ */

/* ---------------- RESI (invoice document, ala sertifikat resmi monokrom) ---------------- */
.receipt-wrap{ max-width:520px; margin:0 auto; }

.rhinv-card{
    --rh-black:#15171b;
    background:#fff; border:1.5px solid #15171b; border-radius:20px;
    box-shadow:var(--shadow-lg); padding:0; position:relative; overflow:hidden;
    animation:receiptIn .5s var(--ease) both; isolation:isolate;
}
@keyframes receiptIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }

/* sudut hitam diagonal, kiri-atas & kanan-bawah, ala kop sertifikat */
.rhinv-corner{ position:absolute; width:150px; height:150px; background:var(--rh-black); z-index:0; }
.rhinv-corner-tl{ top:0; left:0; clip-path:polygon(0 0, 62% 0, 0 62%); }
.rhinv-corner-br{ bottom:0; right:0; clip-path:polygon(100% 100%, 38% 100%, 100% 38%); }
.rhinv-corner-tl::after, .rhinv-corner-br::after{
    content:""; position:absolute; width:100%; height:100%;
    background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 9px);
}

.rhinv-dots{ position:absolute; width:70px; height:70px; z-index:0; pointer-events:none;
    background-image:radial-gradient(circle, rgba(21,23,27,.28) 1.6px, transparent 1.6px);
    background-size:11px 11px; }
.rhinv-dots-tl{ top:18px; right:18px; }
.rhinv-dots-br{ bottom:18px; left:18px; }

.rhinv-header{ position:relative; z-index:1; text-align:center; padding:28px 20px 18px; }
.rhinv-logo{ width:56px; height:56px; object-fit:contain; margin:0 auto 8px; display:block; }
.rhinv-brand{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.02em; color:var(--rh-black); }
.rhinv-tagline{ font-size:10px; color:var(--ink-soft); letter-spacing:.06em; margin-top:2px; }
.rhinv-badge-pill{
    display:inline-block; margin-top:14px; background:var(--rh-black); color:#fff;
    font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
    padding:7px 16px; border-radius:20px;
}

.rhinv-body{ position:relative; z-index:1; padding:4px 20px 22px; display:flex; flex-direction:column; gap:14px; }

.rhinv-section{
    background:#fff; border:1px solid var(--grey-dark); border-radius:14px; padding:14px 16px;
}
.rhinv-section-dark{ background:var(--paper); }
.rhinv-section-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rhinv-section-icon{
    width:32px; height:32px; min-width:32px; border-radius:9px; background:var(--rh-black); color:#fff;
    display:flex; align-items:center; justify-content:center;
}
.rhinv-section-icon svg{ width:17px; height:17px; }
.rhinv-section-title{ font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--rh-black); }

.rhinv-section-split{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.rhinv-section-split .rhinv-rows{ flex:1; min-width:170px; }

.rhinv-rows{ display:flex; flex-direction:column; gap:7px; }
.rhinv-row{ display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.rhinv-row .k{ color:var(--ink-soft); }
.rhinv-row .v{ font-weight:700; text-align:right; color:var(--ink); }

.rhinv-status-box{ text-align:center; min-width:120px; }
.rhinv-status-check{
    width:40px; height:40px; border-radius:50%; background:var(--rh-black); color:#fff;
    display:flex; align-items:center; justify-content:center; margin:0 auto 6px;
}
.rhinv-status-check svg{ width:20px; height:20px; }
.rhinv-status-text{ font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:.03em; color:var(--rh-black); }
.rhinv-status-sub{ font-size:9.5px; color:var(--ink-soft); margin-top:2px; line-height:1.4; max-width:130px; margin-left:auto; margin-right:auto; }

.rhinv-total-row{
    display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px;
    border-top:2px solid var(--rh-black);
}
.rhinv-total-row .k{ font-weight:800; font-size:12.5px; color:var(--rh-black); }
.rhinv-total-row .v{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--rh-black); }
.rhinv-ref{ font-size:10px; color:var(--ink-soft); margin-top:8px; word-break:break-all; }

.rhinv-warranty{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1.5px dashed var(--rh-black);
    border-radius:14px; padding:12px 16px;
}
.rhinv-warranty-icon{
    width:34px; height:34px; min-width:34px; border-radius:9px; background:var(--rh-black); color:#fff;
    display:flex; align-items:center; justify-content:center;
}
.rhinv-warranty-icon svg{ width:18px; height:18px; }
.rhinv-warranty-title{ font-family:var(--font-display); font-weight:800; font-size:12.5px; text-transform:uppercase; color:var(--rh-black); }
.rhinv-warranty-days{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.rhinv-warranty-range{
    display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft);
    padding-left:12px; border-left:1px solid var(--grey-dark); flex:1; min-width:180px;
}
.rhinv-warranty-range svg{ width:15px; height:15px; flex-shrink:0; }

.rhinv-authbar{
    display:flex; align-items:center; gap:12px; background:var(--rh-black); color:#fff;
    border-radius:14px; padding:14px 16px;
}
.rhinv-authbar-icon{
    width:34px; height:34px; min-width:34px; border-radius:50%; background:#fff; color:var(--rh-black);
    display:flex; align-items:center; justify-content:center;
}
.rhinv-authbar-icon svg{ width:18px; height:18px; }
.rhinv-authbar-title{ font-weight:800; font-size:12.5px; }
.rhinv-authbar-sub{ font-size:10.5px; opacity:.8; margin-top:2px; }

.rhinv-verify{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; padding-top:4px; }
.rhinv-verify-qr{ background:#fff; padding:6px; border-radius:12px; box-shadow:var(--shadow-sm); border:var(--border); }
.rhinv-verify-info{ flex:1; min-width:180px; }
.rhinv-verify-label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.rhinv-verify-code{ font-family:monospace; font-size:11px; margin-top:3px; color:var(--ink); }
.rhinv-verify-help{ font-size:10px; color:var(--ink-soft); margin-top:4px; line-height:1.5; }

.rhinv-footer2{ text-align:center; font-size:10px; color:var(--ink-soft); line-height:1.7; padding-top:6px; border-top:1px dashed var(--grey-dark); }

.receipt-rows{ display:flex; flex-direction:column; gap:9px; }
.receipt-row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; }
.receipt-row .k{ color:var(--ink-soft); }
.receipt-row .v{ font-weight:700; text-align:right; }

.receipt-actions{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.receipt-actions .btn{ width:100%; justify-content:center; }

.receipt-footer{ text-align:center; margin-top:16px; padding-top:12px; border-top:1px solid var(--grey-dark); font-size:10px; color:var(--ink-soft); line-height:1.6; }

/* ---------------- SERTIFIKAT ---------------- */
.cert-progress-card{ padding:18px; }
.cert-progress-bar-track{ background:var(--grey); border-radius:20px; height:14px; overflow:hidden; box-shadow:var(--shadow-inset-sm); margin:10px 0 6px; }
.cert-progress-bar-fill{
    height:100%; border-radius:20px; background:linear-gradient(90deg, var(--lime), var(--green));
    width:0%; transition:width 1s var(--ease); box-shadow:0 0 10px rgba(14,165,233,.5);
}
.cert-progress-label{ font-size:12px; font-weight:700; text-align:center; }
.cert-progress-sub{ font-size:11px; color:var(--ink-soft); text-align:center; margin-top:2px; }
.cert-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.cert-stat-box{ text-align:center; background:var(--glass-bg-soft); border-radius:12px; padding:10px 6px; box-shadow:var(--shadow-inset-sm); }
.cert-stat-box .n{ font-family:var(--font-display); font-weight:800; font-size:17px; }
.cert-stat-box .l{ font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }

.cert-eligible-banner{
    display:flex; align-items:center; gap:12px; background:linear-gradient(135deg, var(--lime-soft), var(--green-soft));
    border-radius:16px; padding:14px; margin-top:14px; animation:certPulse 2.4s ease-in-out infinite;
}
@keyframes certPulse{ 0%,100%{ box-shadow:0 0 0 rgba(14,165,233,.25);} 50%{ box-shadow:0 0 0 8px rgba(14,165,233,0);} }
.cert-eligible-banner .icon-wrap{ width:38px; height:38px; min-width:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }

/* ---- kartu sertifikat (landscape, tema hitam-emas) ---- */
.cert-wrap{ max-width:820px; margin:0 auto; }
.cert-card{
    position:relative; background:linear-gradient(155deg, #FFFFFF 0%, #F7F5EF 100%);
    border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden;
    aspect-ratio:1.4142; display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center; animation:receiptIn .6s var(--ease) both;
}
.cert-wave{ position:absolute; width:56%; height:52%; pointer-events:none; z-index:1; }
.cert-wave svg{ width:100%; height:100%; display:block; }
.cert-wave-tr{ top:0; right:0; }
.cert-wave-bl{ bottom:0; left:0; transform:rotate(180deg); }
.cert-frame{
    position:absolute; inset:16px; border:1.5px solid #C9A24B; border-radius:2px; pointer-events:none; z-index:2;
}
.cert-medal{
    position:absolute; top:clamp(14px,4vw,34px); left:clamp(14px,4vw,34px); width:clamp(52px,9vw,84px); z-index:3;
}
.cert-medal svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cert-medal-icon{ position:absolute; top:20%; left:50%; width:38%; transform:translateX(-50%); color:#fff8e6; }
.cert-medal-icon .icon{ width:100%; height:100%; stroke-width:2.4; }
.cert-content{ position:relative; z-index:2; padding:clamp(20px,4.5vw,48px) clamp(24px,6vw,64px); max-width:640px; }
.cert-title-en{
    font-family:var(--font-display); font-weight:700; font-size:clamp(26px,5vw,46px); letter-spacing:.12em;
    color:#161616;
}
.cert-subtitle-en{
    font-size:clamp(11px,1.6vw,15px); letter-spacing:.28em; color:#3a3a3a; margin-top:6px; line-height:1.7;
}
.cert-presented{ font-size:clamp(10.5px,1.3vw,13px); color:var(--ink-soft); margin-top:16px; }
.cert-name{
    font-family:var(--font-display); font-weight:700; font-size:clamp(20px,3.6vw,32px); margin:14px auto 0;
    color:#161616; display:inline-block; padding:0 6px 8px; position:relative;
}
.cert-name::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:#161616;
}
.cert-desc{ font-size:clamp(10.5px,1.2vw,13px); color:#3a3a3a; max-width:520px; margin:22px auto 0; line-height:1.65; }
.cert-footer-row{
    display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-top:clamp(20px,4vw,40px);
    flex-wrap:wrap;
}
.cert-sign{ text-align:left; }
.cert-sign .line{ width:130px; border-bottom:1.2px solid #161616; margin:0 0 6px; }
.cert-sign-name{ font-family:var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.03em; color:#B8860B; }
.cert-sign-role{ font-size:9.5px; color:#3a3a3a; letter-spacing:.05em; margin-top:1px; }
.cert-meta-col{ font-size:9.5px; color:var(--ink-soft); text-align:right; line-height:1.6; }
.cert-meta-col strong{ display:block; font-size:11px; color:var(--ink); }
.cert-qr-mini{ background:#fff; padding:5px; border-radius:8px; box-shadow:var(--shadow-sm); }

.cert-actions{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; justify-content:center; }

/* ---------------- Verifikasi (resi & sertifikat) ---------------- */
.verify-hero{ text-align:center; padding:8px 0 18px; }
.verify-result-card{ text-align:center; padding:22px; }
.verify-icon-badge{
    width:64px; height:64px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-sm);
}
.verify-icon-badge.is-valid{ background:var(--green-soft); color:var(--green); }
.verify-icon-badge.is-invalid{ background:var(--danger-soft); color:var(--danger); }
.verify-icon-badge svg{ width:30px; height:30px; }
.verify-result-title{ font-family:var(--font-display); font-weight:800; font-size:18px; }
.verify-result-title.is-valid{ color:var(--green); }
.verify-result-title.is-invalid{ color:var(--danger); }
.verify-detail-list{ text-align:left; margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.verify-detail-list .row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:8px 0; border-bottom:1px solid var(--grey-dark); }
.verify-detail-list .row:last-child{ border-bottom:none; }
.verify-detail-list .k{ color:var(--ink-soft); }
.verify-detail-list .v{ font-weight:700; text-align:right; }

/* ---------------- Skeleton loading ---------------- */
.skel{ position:relative; overflow:hidden; background:var(--grey); border-radius:10px; }
.skel::after{
    content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation:skelShine 1.4s infinite;
}
@keyframes skelShine{ 100%{ transform:translateX(100%); } }

/* ---------------- Cetak (Resi & Sertifikat) ---------------- */
@media print{
    .navbar, .premium-sidebar, .sidebar-overlay, footer, .no-print, .skip-link,
    .receipt-actions, .cert-actions, .back-to-top, .wa-float, .pwa-toast{
        display:none !important;
    }
    body{ background:#fff !important; }
    main{ padding:0 !important; margin:0 !important; }
    .container{ max-width:100% !important; padding:0 !important; }
    *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
    .rhinv-card{
        box-shadow:none !important; border:1.5px solid #15171b !important;
        animation:none !important; background:#fff !important; width:100%;
    }
    .cert-card{
        box-shadow:none !important; border:1px solid #ccc !important; animation:none !important;
        width:100%; aspect-ratio:auto; page-break-inside:avoid;
    }
}
/* Default cetak: portrait (cocok untuk Resi). Halaman /certificate menambahkan override
   landscape sendiri lewat <style> inline di certificate.php (lihat @page di sana),
   supaya tidak memaksa halaman lain yang memuat CSS ini ikut landscape saat dicetak. */
@page{ size:A4 portrait; margin:10mm; }