/* ================= THEME ================ */
:root{
    --bg1:#9edcff;
    --bg2:#6cc4f6;
    --bg3:#4fb3ef;
    --ink:#0d2548;
    --muted:#5f6f8d;
    --card:#ffffff;
    --glass:rgba(255,255,255,.85);
    --shadow:0 18px 40px rgba(7,26,56,.18);
    --accent:#0fb5a8;
    --accent-2:#078e84;
    --ring:#2bd7c7;
    --radius:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    color:var(--ink);
    background:
        radial-gradient(1200px 520px at 50% -120px, rgba(255,255,255,.35), transparent 60%) no-repeat,
        linear-gradient(var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
    overflow-x:hidden;
}
.wrap{width:100%; max-width:1200px; margin:0 auto; padding:28px 18px 90px}

/* ============== HEADER ============== */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:52px; height:52px; flex:0 0 auto}
.brand h1{margin:0; font-weight:1000; letter-spacing:.4px; font-size:clamp(22px,4.2vw,40px); text-shadow:0 2px 0 rgba(0,0,0,.06)}
.pill{background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8); padding:8px 12px; border-radius:999px; font-weight:900; color:#153a64; backdrop-filter:saturate(140%) blur(6px)}
.warn{background:#fff7e8; border-color:#ffe1a8; color:#7a4a00}
.stats{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#31e6bf; margin-right:8px; box-shadow:0 0 10px rgba(49,230,191,.85)}

.tagline{max-width:820px; margin:10px 0 8px; color:var(--muted)}
.cta{display:flex; gap:10px; flex-wrap:wrap}
.btn{
    appearance:none; border:0; padding:14px 22px; border-radius:16px; font-weight:1000; cursor:pointer;
    background:var(--accent); color:#fff; box-shadow:0 18px 34px rgba(6,122,113,.28), inset 0 -2px 0 var(--accent-2);
    transition:.18s transform ease, .18s background ease, .18s box-shadow ease;
}
.btn:hover{transform:translateY(-1px); background:#12c5b7}
.btn.secondary{background:#edf4ff; color:#133a62; box-shadow:none; border:1px solid #d9e7ff}
.btn:disabled{opacity:.6; transform:none; box-shadow:none; cursor:not-allowed}

/* ============== SECTION ============== */
.section-title{text-align:center; font-size:clamp(22px,3.6vw,34px); margin:22px 0 8px; font-weight:1000}
.sub{text-align:center; margin:0 0 18px; color:var(--muted); font-weight:800; letter-spacing:.35px}

/* ============== GRID ============== */
.grid{
    display:grid; gap:18px; margin:0 auto; max-width:980px;
    grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
    justify-content:center; align-items:stretch;
}
@media (max-width:1024px){ .grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:860px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:580px){ .grid{grid-template-columns:repeat(2,1fr)} }

.card{overflow:hidden; 
    position:relative; padding:14px 12px 16px; border-radius:var(--radius);
    background:var(--glass); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow);
    backdrop-filter: blur(8px) saturate(140%); display:flex; flex-direction:column; align-items:center; gap:10px;
    cursor:pointer; transition:.2s transform ease, .2s box-shadow ease, .2s border ease; min-height:clamp(120px, 24vw, 168px);
}
.card:hover{transform:translateY(-3px)}
.card.selected{border-color:#a9fff4; box-shadow:0 18px 40px rgba(14,180,160,.35)}
.amount{word-break:break-word; text-align:center; font-size:clamp(18px,2.6vw,26px); font-weight:1000; letter-spacing:.45px; text-align:center}
.diamond{width:72px; height:72px; filter:drop-shadow(0 7px 12px rgba(0,0,0,.18))}
/* non-overlapping ribbon: sits OUTSIDE the card */
.ribbon{
    position:absolute; left:50%; top:8px; transform:translateX(-50%);
    background:#0e223b; color:#fff; border-radius:999px; padding:4px 10px;
    font-weight:900; font-size:12px; letter-spacing:.2px; line-height:1;
    box-shadow:0 8px 16px rgba(0,0,0,.25); z-index:3; pointer-events:none;
}

.continue{display:flex; flex-direction:column; align-items:center; gap:8px; margin:18px 0 6px}

/* ============== HOW IT WORKS (compact) ============== */
.how{margin:26px auto 0; max-width:980px; display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){ .how{grid-template-columns:1fr} }
.step{background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.85); border-radius:16px; box-shadow:var(--shadow); padding:14px}
.step strong{display:block; margin-bottom:6px}
.em{color:#0f3d6a}

.foot{margin-top:28px; text-align:center; font-size:12.5px; color:#0b2e57; opacity:.85}

/* ============== MODALS ============== */
.overlay{
    position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:40;
    background:rgba(0,0,0,.35); backdrop-filter: blur(6px);
}
.overlay.show{display:flex}
.modal{
    width:min(94vw,600px); background:#fff; border-radius:24px; box-shadow:0 24px 60px rgba(0,0,0,.28);
    padding:22px 22px 20px; text-align:center; position:relative
}
.modal h3{margin:6px 0 8px; font-size:26px}
.modal p{margin:0 0 16px; color:var(--muted)}
.input{width:100%; padding:14px 16px; border-radius:12px; border:2px solid #e3eaf4; outline:none; font-size:16px; background:#f7fafd}
.close-x{position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:26px; cursor:pointer; color:#96a7c3}

.spinner{width:50px; height:50px; border-radius:50%; border:6px solid #e6f1ff; border-top-color:var(--accent); margin:6px auto 8px; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{height:10px; width:100%; background:#eef4fc; border-radius:999px; overflow:hidden; margin-top:10px}
.bar{height:100%; width:0%; background:linear-gradient(90deg,#27e0d1,#1aa8ff); border-radius:999px; transition:width .35s ease}

.modal-list{margin:12px 0 0; text-align:left; max-height:260px; overflow:auto}
.itemrow{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f6fafb; border:1px solid #e7f1f0; padding:12px 14px; border-radius:12px; margin:8px 0}
.ok-dot{width:11px; height:11px; border-radius:50%; background:#cad7e6}
.done{background:#17b49d !important; box-shadow:0 0 0 2px #c9efe9 inset}

.check{width:64px; height:64px; border-radius:50%; border:3px solid #c7efea; display:grid; place-items:center; margin:6px auto 4px; color:#17b49d}
.check svg{width:34px; height:34px}

/* ============== BACKGROUND MOUNTAINS ============== */
.mountains{position:fixed; left:0; right:0; bottom:0; height:36vh; pointer-events:none; z-index:-1}
.m{position:absolute; left:0; right:0; bottom:0}
.m svg{width:140%; transform:translateX(-10%)}
.m1{opacity:.28}
.m2{opacity:.22; bottom:4vh}
.m3{opacity:.18; bottom:8vh}
@media (max-width:700px){ .m svg{width:200%; transform:translateX(-25%)} }

/* decorative outlines (subtle) */
.scat{position:fixed; inset:0; pointer-events:none; z-index:0}
.scat svg{position:absolute; width:22px; height:22px; opacity:.18}
/* selection enhancements */
.diamond-wrap{position:relative; transition:transform .18s ease; width:clamp(72px,14vw,132px); height:clamp(72px,14vw,132px); display:grid; place-items:center}
.card.selected .diamond-wrap{position:relative; transition:transform .18s ease; width:clamp(72px,14vw,132px); height:clamp(72px,14vw,132px); display:grid; place-items:center}
.select-check{position:absolute; right:12px; top:12px; width:26px; height:26px; border-radius:50%; background:#11b8aa; color:#fff; font-weight:900; display:none; align-items:center; justify-content:center; box-shadow:0 8px 16px rgba(17,184,170,.35)}
.card.selected .select-check{display:flex; animation:pop .18s ease-out}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
.diamond-wrap::after{content:''; position:absolute; inset:0; transform:skewX(-20deg) translateX(-120%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); border-radius:14px}
.card.selected .diamond-wrap::after{animation:shine 900ms ease forwards}
@keyframes shine{to{transform:skewX(-20deg) translateX(120%)}}
.selection-info{display:none; justify-content:center; align-items:center; gap:8px; padding:6px 10px; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.9); border-radius:999px; font-weight:900; color:#103a64}

/* ============== CLASSES GRID ============== */
.grid-classes{
    display:grid; gap:18px; margin:0 auto; max-width:980px;
    grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
    justify-content:center; align-items:stretch;
}
.class-card{
    position:relative; padding:14px 12px 16px; border-radius:var(--radius);
    background:var(--glass); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow);
    backdrop-filter: blur(8px) saturate(140%); display:flex; flex-direction:column; align-items:center; gap:10px;
    cursor:pointer; transition:.2s transform ease, .2s box-shadow ease, .2s border ease; min-height:clamp(120px, 24vw, 168px);
}
.class-card:hover{transform:translateY(-3px)}
.class-card.selected{border-color:#a9fff4; box-shadow:0 18px 40px rgba(14,180,160,.35)}
.class-img-wrap{position:relative; width:clamp(72px,14vw,132px); height:clamp(72px,14vw,132px); display:grid; place-items:center; overflow:visible}
.class-img-wrap img{max-width:100%; max-height:100%; display:block}
/* Watermark */
.class-img-wrap::after{
    content:''; position:absolute; inset:-8px; display:block; pointer-events:none;
    font-weight:1000; font-size:16px; letter-spacing:.12em; text-transform:lowercase;
    color:rgba(255,255,255,.38); text-shadow:0 1px 3px rgba(0,0,0,.35); transform:rotate(-24deg); display:grid; place-items:center;
}
.class-label{font-size:clamp(16px,2.4vw,22px); font-weight:1000; text-align:center}

/* Center the Diamonds grid (exactly 3 columns) */
#grid{
    display:grid; gap:18px; margin:0 auto; max-width:980px;
    grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
    justify-content:center; align-items:stretch;
}

/* Class selection visual parity with Diamonds */
.class-card .select-check{position:absolute; right:12px; top:12px; width:26px; height:26px; border-radius:999px;
    background:#11b8aa; color:#fff; font-weight:900; display:none; align-items:center; justify-content:center;
    box-shadow:0 8px 16px rgba(17,184,170,.35)}
.class-card.selected .select-check{display:flex; animation:pop .18s ease-out}
.class-card .class-img-wrap{transition:transform .18s ease}
.class-card.selected .class-img-wrap{transform:translateY(-2px) scale(1.05)}

.continue{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap}
.selection-info{background:#eaf7ff; color:#274d75; padding:6px 10px; border-radius:999px; display:none; font-weight:800; font-size:14px}
@media (max-width:420px){
    .continue{flex-direction:column; gap:8px}
    .selection-info{font-size:13px}
}

@media (max-width:420px){
    .section-title{margin:16px 0 6px}
    .sub{margin-bottom:12px}
}

/* Make diamond SVG responsive */
.diamond{width:clamp(56px, 10vw, 86px); height:auto; display:block}

@media (max-width:360px){
    #grid{
    display:grid; gap:18px; margin:0 auto; max-width:980px;
    grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
    justify-content:center; align-items:stretch;
}
}

@media (max-width:380px){
    .card{ padding:14px 12px 16px }
    .amount{ font-size:clamp(14px, 4.2vw, 22px) }
}

@media (max-width:480px){
    .grid{ gap:14px }
}

@media (max-width:380px){
    .ribbon{ top:6px; padding:3px 8px; font-size:11px }
}

/* ============== CONTENT LOCKER STYLES ============== */
.content-locker {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    border: none;
    margin: 0;
    padding: 0;
}

.content-locker iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
}