/* ============================================
   Premium Membership QRIS - v4.0
   ============================================ */

:root {
    --pmq-bg1: #0f0f1a; --pmq-bg2: #1a1a2e; --pmq-bg3: #16213e;
    --pmq-border: rgba(255,255,255,0.08); --pmq-border-h: rgba(255,255,255,0.15);
    --pmq-t1: #e8e8f0; --pmq-t2: #9a9ab0; --pmq-t3: #6b6b80;
    --pmq-accent: #6366f1; --pmq-accent2: #818cf8; --pmq-gold: #fbbf24;
    --pmq-green: #34d399; --pmq-red: #f87171;
    --pmq-grad-accent: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
    --pmq-grad-gold: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    --pmq-grad-green: linear-gradient(135deg, #34d399, #10b981, #059669);
    --pmq-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --pmq-r: 16px; --pmq-rs: 10px;
    --pmq-tr: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

@keyframes pmq-fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pmq-pulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes pmq-crown { 0%,100%{transform:rotate(-5deg) scale(1)} 50%{transform:rotate(5deg) scale(1.1)} }

/* Container */
.pmq-container { max-width:860px; margin:0 auto; padding:40px; background:var(--pmq-bg1); border-radius:var(--pmq-r); box-shadow:var(--pmq-shadow); font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--pmq-t1); position:relative; overflow:hidden; animation:pmq-fadeUp .6s ease; }
.pmq-container::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--pmq-grad-gold); border-radius:var(--pmq-r) var(--pmq-r) 0 0; }
.pmq-container::after { content:''; position:absolute; top:-50%; right:-20%; width:400px; height:400px; background:radial-gradient(circle,rgba(99,102,241,0.06) 0%,transparent 70%); pointer-events:none; }

/* Header */
.premium-header { text-align:center; margin-bottom:40px; padding-bottom:30px; border-bottom:1px solid var(--pmq-border); position:relative; animation:pmq-fadeUp .6s ease; }
.premium-header h1 { font-size:32px; margin-bottom:12px; font-weight:800; letter-spacing:-0.5px; background:var(--pmq-grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.premium-header h1 i { -webkit-text-fill-color:initial; color:var(--pmq-gold); margin-right:10px; display:inline-block; animation:pmq-crown 3s ease-in-out infinite; }
.premium-header .subtitle { color:var(--pmq-t2); font-size:16px; margin:0; }

/* Login Required */
.login-required { background:rgba(255,255,255,0.03); padding:24px; border-radius:var(--pmq-rs); text-align:center; margin:30px 0; border:1px solid var(--pmq-border); }
.login-required p { font-size:16px; margin:0; color:var(--pmq-t2); }
.login-required i { color:var(--pmq-accent); margin-right:8px; }
.login-link { color:var(--pmq-accent2); font-weight:600; text-decoration:none; }
.login-link:hover { color:var(--pmq-gold); }

/* Benefits */
.benefits-section { margin-bottom:45px; animation:pmq-fadeUp .6s ease .2s both; }
.benefits-section h2, .plans-section h2 { font-size:22px; color:var(--pmq-t1); margin-bottom:20px; font-weight:700; }
.benefits-section h2 i, .plans-section h2 i { color:var(--pmq-gold); margin-right:10px; }
.benefits-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.benefits-list li { padding:14px 18px; font-size:15px; color:#ffffff; background:rgba(255,255,255,0.03); border:1px solid var(--pmq-border); border-radius:var(--pmq-rs); transition:var(--pmq-tr); display:flex; align-items:center; }
.benefits-list li:hover { border-color:var(--pmq-border-h); transform:translateX(4px); }
.benefits-list li i { color:var(--pmq-green); margin-right:12px; flex-shrink:0; }

/* Plans */
.plans-section { animation:pmq-fadeUp .6s ease .3s both; }
.premium-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:40px; }

/* Plan Card */
.plan-card { padding:28px 20px; background:var(--pmq-bg2); border:1px solid var(--pmq-border); border-radius:var(--pmq-r); text-align:center; cursor:pointer; transition:var(--pmq-tr); position:relative; overflow:hidden; }
.plan-card:hover { border-color:var(--pmq-accent); transform:translateY(-6px); box-shadow:0 12px 40px rgba(99,102,241,0.15); }
.plan-card.selected { border-color:var(--pmq-accent); background:var(--pmq-bg3); box-shadow:0 0 0 1px var(--pmq-accent),0 12px 40px rgba(99,102,241,0.2); transform:translateY(-4px); }
.plan-card.popular { border-color:var(--pmq-gold); box-shadow:0 8px 30px rgba(251,191,36,0.1); }
.popular-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--pmq-grad-gold); color:#111; padding:5px 18px; border-radius:0 0 12px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.plan-duration { font-size:18px; font-weight:700; color:var(--pmq-t1); margin-bottom:12px; margin-top:8px; }
.plan-price { font-size:24px; font-weight:800; margin-bottom:12px; color:#ffffff; }
.plan-card.popular .plan-price { background:var(--pmq-grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.plan-savings { height:40px; font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:18px; display:flex; flex-direction:column; justify-content:center; }
.savings-amount { font-weight:700; color:var(--pmq-green); margin-top:4px; font-size:12px; }
.plan-select-btn { background:var(--pmq-grad-accent); color:white; padding:10px 20px; border-radius:8px; font-weight:600; font-size:14px; transition:var(--pmq-tr); }
.plan-card.popular .plan-select-btn { background:var(--pmq-grad-gold); color:#111; }
.plan-login-prompt { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(15,15,26,0.95); backdrop-filter:blur(4px); display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:var(--pmq-r); padding:20px; text-align:center; opacity:0; visibility:hidden; transition:var(--pmq-tr); z-index:2; }
.plan-card:hover .plan-login-prompt { opacity:1; visibility:visible; }
.plan-login-prompt i { font-size:28px; color:var(--pmq-gold); margin-bottom:12px; }
.plan-login-prompt p { color:var(--pmq-t2); font-size:13px; margin-bottom:14px; }
.plan-login-btn { background:var(--pmq-grad-accent); color:white; border:none; padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }

/* Order Form */
.order-form-section { background:var(--pmq-bg2); padding:32px; border-radius:var(--pmq-r); margin-top:40px; border:1px solid var(--pmq-border); animation:pmq-fadeUp .4s ease; }
.order-form-section h2 { font-size:22px; color:var(--pmq-t1); margin-bottom:24px; font-weight:700; }
.order-form-section h2 i { color:var(--pmq-gold); margin-right:10px; }
.selected-plan-info { margin-bottom:28px; text-align:center; }
.plan-card-small { display:inline-block; background:var(--pmq-bg3); border:1px solid var(--pmq-accent); border-radius:var(--pmq-rs); padding:18px 30px; }
#pmq-order-form { text-align:center; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.order-submit-btn { background:var(--pmq-grad-green); color:white; border:none; padding:14px 28px; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer; transition:var(--pmq-tr); }
.order-submit-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(52,211,153,0.3); }
.order-cancel-btn { background:transparent; color:var(--pmq-t2); border:1px solid var(--pmq-border); padding:14px 28px; border-radius:10px; font-weight:600; font-size:15px; cursor:pointer; transition:var(--pmq-tr); }
.order-cancel-btn:hover { background:rgba(248,113,113,0.1); border-color:var(--pmq-red); color:var(--pmq-red); }

/* Order Result */
.order-result-section { background:var(--pmq-bg2); padding:36px; border-radius:var(--pmq-r); margin-top:40px; text-align:center; border:1px solid var(--pmq-border); animation:pmq-fadeUp .4s ease; }
.order-success-icon { font-size:64px; margin-bottom:20px; animation:pmq-pulse 2s ease-in-out infinite; }
.order-success-icon i { background:var(--pmq-grad-green); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.order-result-section h2 { font-size:24px; color:var(--pmq-t1); margin-bottom:24px; font-weight:700; }
.order-details { background:var(--pmq-bg1); border-radius:var(--pmq-rs); padding:24px; margin-bottom:28px; text-align:left; border:1px solid var(--pmq-border); }
.order-info-item { padding:10px 0; display:flex; justify-content:space-between; border-bottom:1px solid var(--pmq-border); }
.order-info-item:last-child { border-bottom:none; }
.order-label { font-weight:600; color:var(--pmq-t2); font-size:14px; }
.order-value { color:var(--pmq-t1); font-weight:500; }

/* QRIS Payment */
.qris-payment-section { background:var(--pmq-bg1); border:1px solid var(--pmq-border); border-radius:var(--pmq-rs); padding:32px 24px; margin-bottom:24px; text-align:center; }
.qris-header { margin-bottom:24px; }
.qris-header i { font-size:32px; color:var(--pmq-gold); margin-bottom:12px; display:block; }
.qris-header h3 { color:var(--pmq-t1); font-size:20px; margin:0 0 8px; font-weight:700; }
.qris-header p { color:var(--pmq-t2); font-size:14px; margin:0; }
.qris-qr-wrapper { margin-bottom:24px; }
.qris-qr-frame { display:inline-block; background:#fff; padding:16px; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,0.2); margin-bottom:16px; position:relative; }
.qris-qr-frame::before { content:'QRIS'; position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--pmq-grad-gold); color:#111; padding:3px 14px; border-radius:12px; font-size:10px; font-weight:800; letter-spacing:1.5px; }
.qris-qr-frame img, .qris-qr-frame canvas { display:block !important; }
.qris-amount-display { display:flex; flex-direction:column; align-items:center; gap:4px; }
.qris-amount-label { font-size:13px; color:var(--pmq-t3); text-transform:uppercase; letter-spacing:0.5px; }
.qris-amount-value { font-size:28px; font-weight:800; background:var(--pmq-grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.qris-unique-note { display:none; align-items:center; justify-content:center; gap:6px; margin-top:10px; padding:8px 14px; background:rgba(99,102,241,0.06); border:1px solid rgba(99,102,241,0.12); border-radius:8px; font-size:12px; color:var(--pmq-t2); }
.qris-unique-note i { color:var(--pmq-accent2); flex-shrink:0; }
.qris-unique-note[style*="display: block"],.qris-unique-note:not([style*="display: none"]):not(:empty) { display:flex; }
.qris-timer { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--pmq-t2); font-size:14px; padding:10px 16px; background:rgba(251,191,36,0.06); border-radius:8px; border:1px solid rgba(251,191,36,0.12); margin-bottom:16px; }
.qris-timer i { color:var(--pmq-gold); }
.qris-timer .timer-value { font-weight:700; color:var(--pmq-gold); font-variant-numeric:tabular-nums; }
.qris-status-area { margin-bottom:20px; }
.qris-status-indicator { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; background:rgba(99,102,241,0.06); border:1px solid rgba(99,102,241,0.12); border-radius:8px; color:var(--pmq-t2); font-size:13px; }
.qris-status-indicator.checking { background:rgba(251,191,36,0.08); border-color:rgba(251,191,36,0.15); }
.qris-pulse-dot { width:10px; height:10px; border-radius:50%; background:var(--pmq-accent); animation:pmq-pulse 2s ease-in-out infinite; flex-shrink:0; }
.qris-pulse-dot.active { background:var(--pmq-gold); }

/* QRIS Actions - side by side */
.qris-actions { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.qris-check-btn { background:var(--pmq-grad-green); color:white; border:none; padding:14px 28px; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer; transition:var(--pmq-tr); display:inline-flex; align-items:center; gap:8px; }
.qris-check-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(52,211,153,0.3); }
.qris-check-btn:disabled { opacity:0.7; cursor:not-allowed; transform:none; }
.qris-cancel-btn { background:rgba(248,113,113,0.08); color:var(--pmq-red); border:1px solid rgba(248,113,113,0.2); padding:14px 28px; border-radius:10px; font-weight:600; font-size:15px; cursor:pointer; transition:var(--pmq-tr); display:inline-flex; align-items:center; gap:8px; }
.qris-cancel-btn:hover { background:rgba(248,113,113,0.15); border-color:var(--pmq-red); transform:translateY(-2px); box-shadow:0 4px 16px rgba(248,113,113,0.15); }
.qris-cancel-btn i { font-size:14px; }

.qris-warning { display:flex; align-items:flex-start; gap:10px; padding:14px 18px; background:rgba(251,191,36,0.06); border:1px solid rgba(251,191,36,0.12); border-radius:8px; text-align:left; }
.qris-warning i { color:var(--pmq-gold); margin-top:2px; flex-shrink:0; }
.qris-warning span { color:var(--pmq-t2); font-size:13px; line-height:1.5; }

/* Active Premium */
.premium-active { padding:32px; background:var(--pmq-bg2); border-radius:var(--pmq-r); margin:30px 0; border:1px solid var(--pmq-border); position:relative; overflow:hidden; animation:pmq-fadeUp .6s ease .1s both; }
.premium-active::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--pmq-grad-green); }
.premium-badge { text-align:center; margin-bottom:24px; }
.premium-badge i { font-size:48px; display:block; margin-bottom:12px; background:var(--pmq-grad-green); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.premium-badge span { background:var(--pmq-grad-green); color:white; padding:8px 24px; border-radius:30px; font-weight:700; display:inline-block; font-size:14px; }
.premium-info { background:var(--pmq-bg1); padding:24px; border-radius:var(--pmq-rs); margin-bottom:24px; border:1px solid var(--pmq-border); }
.premium-info p { margin:10px 0; font-size:15px; color:var(--pmq-t1); display:flex; justify-content:space-between; }
.renewal-section { text-align:center; margin-top:24px; }
.renewal-section h3 { font-size:18px; margin-bottom:10px; color:var(--pmq-t1); }
.renewal-section h3 i { color:var(--pmq-accent2); margin-right:8px; }
.renewal-note { background:var(--pmq-bg1); padding:14px 20px; border-radius:var(--pmq-rs); border-left:3px solid var(--pmq-green); font-size:14px; text-align:left; color:var(--pmq-t2); }
.premium-expired-notice { background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.2); border-radius:var(--pmq-rs); padding:18px 24px; margin-bottom:28px; color:var(--pmq-red); text-align:center; display:flex; align-items:center; justify-content:center; gap:12px; }
.premium-expired-notice i { font-size:24px; flex-shrink:0; }
.premium-expired-notice p { margin:0; font-size:15px; }

/* Login Modal */
.pmq-login-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); z-index:9999; justify-content:center; align-items:center; }
.pmq-login-modal.show { display:flex; animation:pmq-fadeUp .3s ease; }
.login-modal-content { background:var(--pmq-bg2); border-radius:var(--pmq-r); width:90%; max-width:440px; padding:36px; box-shadow:0 20px 60px rgba(0,0,0,0.5); border:1px solid var(--pmq-border); position:relative; }
.login-modal-header { text-align:center; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--pmq-border); }
.login-modal-header i { font-size:48px; margin-bottom:16px; display:block; background:var(--pmq-grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.login-modal-header h2 { font-size:24px; margin:0 0 10px; font-weight:700; background:var(--pmq-grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.login-modal-header p { color:var(--pmq-t2); font-size:15px; margin:0; }
.login-modal-buttons { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.login-modal-btn { display:flex; align-items:center; justify-content:center; padding:14px; border-radius:10px; font-size:15px; font-weight:600; text-decoration:none; transition:var(--pmq-tr); border:none; cursor:pointer; }
.login-modal-btn i { margin-right:10px; }
.login-btn { background:var(--pmq-grad-accent); color:white; }
.register-btn { background:var(--pmq-grad-green); color:white; }
.close-modal-btn { background:transparent; color:var(--pmq-t2); border:1px solid var(--pmq-border); }
.close-modal-btn:hover { background:rgba(248,113,113,0.1); border-color:var(--pmq-red); color:var(--pmq-red); }
.login-modal-close { position:absolute; top:16px; right:16px; background:none; border:none; color:var(--pmq-t3); font-size:20px; cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.login-modal-close:hover { color:var(--pmq-t1); background:rgba(255,255,255,0.08); }

/* Notification */
.pmq-notification { position:fixed; top:24px; right:24px; padding:16px 24px; border-radius:var(--pmq-rs); font-weight:600; color:white; z-index:99999; box-shadow:0 8px 30px rgba(0,0,0,0.4); transform:translateX(110%); transition:transform .4s cubic-bezier(.4,0,.2,1); max-width:360px; font-size:14px; }
.pmq-notification i { margin-right:10px; }
.pmq-notification.show { transform:translateX(0); }
.pmq-notification-success { background:linear-gradient(135deg,rgba(52,211,153,0.95),rgba(5,150,105,0.95)); border:1px solid rgba(52,211,153,0.3); }
.pmq-notification-error { background:linear-gradient(135deg,rgba(248,113,113,0.95),rgba(220,38,38,0.95)); border:1px solid rgba(248,113,113,0.3); }

/* Responsive */
@media (max-width:768px) {
    .pmq-container { padding:24px 16px; border-radius:12px; }
    .premium-header h1 { font-size:24px; }
    .premium-plans { grid-template-columns:1fr 1fr; gap:12px; }
    .plan-card { padding:20px 14px; }
    .plan-price { font-size:20px; }
    #pmq-order-form { flex-direction:column; }
    .qris-actions { flex-direction:column; }
    .qris-check-btn, .qris-cancel-btn { width:100%; justify-content:center; }
    .pmq-notification { left:16px; right:16px; max-width:unset; }
    .login-modal-content { padding:24px 18px; }
    .qris-payment-section { padding:20px; }
}
@media (max-width:480px) {
    .premium-plans { grid-template-columns:1fr; }
    .pmq-container { padding:20px 14px; }
    .premium-header h1 { font-size:20px; }
}

/* ============================================
   COLOR THEMES (10 options)
   ============================================ */
/* Emerald & Gold — dark forest bg, emerald accent, warm gold highlights */
.pmq-color-emerald { --pmq-bg1:#0a1a14; --pmq-bg2:#0f2a1f; --pmq-bg3:#133527; --pmq-border:rgba(52,211,153,0.1); --pmq-border-h:rgba(52,211,153,0.2); --pmq-t1:#e0f5ec; --pmq-t2:#8abfa8; --pmq-t3:#5a8a73; --pmq-accent:#10b981; --pmq-accent2:#34d399; --pmq-gold:#fbbf24; --pmq-grad-accent:linear-gradient(135deg,#10b981,#059669,#047857); --pmq-grad-gold:linear-gradient(135deg,#fbbf24,#f59e0b,#d97706); }
/* Sunset & Teal — warm dark bg, orange accent, teal highlights */
.pmq-color-sunset { --pmq-bg1:#1a0f0a; --pmq-bg2:#2a1810; --pmq-bg3:#352015; --pmq-border:rgba(251,146,60,0.1); --pmq-border-h:rgba(251,146,60,0.2); --pmq-t1:#f5ebe0; --pmq-t2:#bf9a7a; --pmq-t3:#8a6a50; --pmq-accent:#f97316; --pmq-accent2:#fb923c; --pmq-gold:#2dd4bf; --pmq-grad-accent:linear-gradient(135deg,#f97316,#ea580c,#c2410c); --pmq-grad-gold:linear-gradient(135deg,#2dd4bf,#14b8a6,#0d9488); }
/* Royal & Rose — deep purple bg, violet accent, rose pink highlights */
.pmq-color-royal { --pmq-bg1:#120f1a; --pmq-bg2:#1e1730; --pmq-bg3:#271e40; --pmq-border:rgba(167,139,250,0.1); --pmq-border-h:rgba(167,139,250,0.2); --pmq-t1:#ede9fe; --pmq-t2:#a78bfa; --pmq-t3:#7c6aad; --pmq-accent:#8b5cf6; --pmq-accent2:#c4b5fd; --pmq-gold:#fb7185; --pmq-grad-accent:linear-gradient(135deg,#a78bfa,#8b5cf6,#7c3aed); --pmq-grad-gold:linear-gradient(135deg,#fb7185,#f43f5e,#e11d48); }
/* Ocean & Amber — navy bg, sky blue accent, amber gold highlights */
.pmq-color-ocean { --pmq-bg1:#0a1628; --pmq-bg2:#0f2040; --pmq-bg3:#132a52; --pmq-border:rgba(56,189,248,0.1); --pmq-border-h:rgba(56,189,248,0.2); --pmq-t1:#e0f2fe; --pmq-t2:#7dd3fc; --pmq-t3:#4a90b5; --pmq-accent:#0ea5e9; --pmq-accent2:#38bdf8; --pmq-gold:#fbbf24; --pmq-grad-accent:linear-gradient(135deg,#0ea5e9,#0284c7,#0369a1); --pmq-grad-gold:linear-gradient(135deg,#fbbf24,#f59e0b,#d97706); }
/* Crimson & Cyan — dark red-tinted bg, red accent, cyan highlights */
.pmq-color-rose { --pmq-bg1:#1a0f12; --pmq-bg2:#2a1520; --pmq-bg3:#35192a; --pmq-border:rgba(244,63,94,0.1); --pmq-border-h:rgba(244,63,94,0.2); --pmq-t1:#fce7f3; --pmq-t2:#f9a8d4; --pmq-t3:#a8607a; --pmq-accent:#f43f5e; --pmq-accent2:#fb7185; --pmq-gold:#22d3ee; --pmq-grad-accent:linear-gradient(135deg,#f43f5e,#e11d48,#be123c); --pmq-grad-gold:linear-gradient(135deg,#22d3ee,#06b6d4,#0891b2); }
/* Amber & Indigo — warm dark bg, amber accent, indigo highlights */
.pmq-color-amber { --pmq-bg1:#1a150a; --pmq-bg2:#2a2010; --pmq-bg3:#352a15; --pmq-border:rgba(245,158,11,0.1); --pmq-border-h:rgba(245,158,11,0.2); --pmq-t1:#fef3c7; --pmq-t2:#fcd34d; --pmq-t3:#92700a; --pmq-accent:#f59e0b; --pmq-accent2:#fbbf24; --pmq-gold:#818cf8; --pmq-grad-accent:linear-gradient(135deg,#f59e0b,#d97706,#b45309); --pmq-grad-gold:linear-gradient(135deg,#818cf8,#6366f1,#4f46e5); }
/* Cyan & Orange — dark teal bg, cyan accent, warm orange highlights */
.pmq-color-cyan { --pmq-bg1:#0a1a1a; --pmq-bg2:#0f2a2a; --pmq-bg3:#133535; --pmq-border:rgba(6,182,212,0.1); --pmq-border-h:rgba(6,182,212,0.2); --pmq-t1:#e0fffe; --pmq-t2:#67e8f9; --pmq-t3:#4a9a9a; --pmq-accent:#06b6d4; --pmq-accent2:#22d3ee; --pmq-gold:#fb923c; --pmq-grad-accent:linear-gradient(135deg,#06b6d4,#0891b2,#0e7490); --pmq-grad-gold:linear-gradient(135deg,#fb923c,#f97316,#ea580c); }
/* Lime & Purple — dark green bg, lime accent, purple highlights */
.pmq-color-lime { --pmq-bg1:#0f1a0a; --pmq-bg2:#1a2a0f; --pmq-bg3:#223513; --pmq-border:rgba(132,204,22,0.1); --pmq-border-h:rgba(132,204,22,0.2); --pmq-t1:#ecfccb; --pmq-t2:#a3e635; --pmq-t3:#5a8a20; --pmq-accent:#84cc16; --pmq-accent2:#a3e635; --pmq-gold:#c084fc; --pmq-grad-accent:linear-gradient(135deg,#84cc16,#65a30d,#4d7c0f); --pmq-grad-gold:linear-gradient(135deg,#c084fc,#a855f7,#9333ea); }
/* Slate & Red — neutral dark bg, slate accent, red highlights */
.pmq-color-slate { --pmq-bg1:#111318; --pmq-bg2:#1e2028; --pmq-bg3:#282a35; --pmq-border:rgba(100,116,139,0.15); --pmq-border-h:rgba(100,116,139,0.25); --pmq-t1:#e2e8f0; --pmq-t2:#94a3b8; --pmq-t3:#64748b; --pmq-accent:#64748b; --pmq-accent2:#94a3b8; --pmq-gold:#f87171; --pmq-grad-accent:linear-gradient(135deg,#64748b,#475569,#334155); --pmq-grad-gold:linear-gradient(135deg,#f87171,#ef4444,#dc2626); }

/* ============================================
   LAYOUT THEMES (10 options)
   ============================================ */

/* horizontal: plan cards as rows */
.pmq-layout-horizontal .premium-plans { grid-template-columns:1fr; gap:10px; }
.pmq-layout-horizontal .plan-card { display:flex; align-items:center; justify-content:space-between; text-align:left; padding:18px 24px; gap:16px; }
.pmq-layout-horizontal .plan-card .popular-badge { position:static; transform:none; border-radius:20px; padding:3px 12px; font-size:10px; order:-1; }
.pmq-layout-horizontal .plan-card .plan-duration { margin:0; flex:1; }
.pmq-layout-horizontal .plan-card .plan-price { margin:0; font-size:18px; }
.pmq-layout-horizontal .plan-card .plan-savings { height:auto; margin:0; text-align:right; flex-shrink:0; }
.pmq-layout-horizontal .plan-card .plan-select-btn { padding:10px 22px; white-space:nowrap; flex-shrink:0; }
@media(max-width:600px){ .pmq-layout-horizontal .plan-card{flex-wrap:wrap} .pmq-layout-horizontal .plan-card .plan-select-btn{width:100%;text-align:center} }

/* featured: popular card is hero */
.pmq-layout-featured .premium-plans { grid-template-columns:1fr 1fr; gap:14px; }
.pmq-layout-featured .plan-card.popular { grid-column:1/-1; padding:36px 32px; }
.pmq-layout-featured .plan-card.popular .plan-duration { font-size:22px; }
.pmq-layout-featured .plan-card.popular .plan-price { font-size:30px; }
.pmq-layout-featured .plan-card.popular .plan-select-btn { padding:14px 32px; font-size:16px; }
@media(max-width:600px){ .pmq-layout-featured .premium-plans{grid-template-columns:1fr} }

/* centered: everything centered, benefits as pills */
.pmq-layout-centered .premium-header,.pmq-layout-centered .benefits-section h2,.pmq-layout-centered .plans-section h2 { text-align:center; }
.pmq-layout-centered .benefits-list { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pmq-layout-centered .benefits-list li { border-radius:30px; padding:10px 22px; font-size:14px; flex:0 0 auto; justify-content:center; }
.pmq-layout-centered .premium-plans { grid-template-columns:1fr 1fr; gap:20px; justify-items:center; }
.pmq-layout-centered .plan-card { border-radius:20px; padding:32px 24px; width:100%; }
.pmq-layout-centered .plan-card .plan-select-btn { border-radius:30px; padding:12px 28px; }
.pmq-layout-centered .plan-card.popular { grid-column:1/-1; max-width:380px; transform:scale(1.02); }
.pmq-layout-centered .order-submit-btn,.pmq-layout-centered .order-cancel-btn,.pmq-layout-centered .qris-check-btn,.pmq-layout-centered .qris-cancel-btn { border-radius:30px; }
@media(max-width:768px){ .pmq-layout-centered .premium-plans{grid-template-columns:1fr} .pmq-layout-centered .plan-card.popular{transform:none;max-width:100%} }

/* sidebar: benefits left, plans right */
.pmq-layout-sidebar .premium-content { display:grid; grid-template-columns:1fr 1.5fr; gap:24px; align-items:start; }
.pmq-layout-sidebar .benefits-section { margin-bottom:0; }
.pmq-layout-sidebar .premium-plans { grid-template-columns:1fr 1fr; gap:10px; }
.pmq-layout-sidebar .plan-card { padding:18px 14px; }
.pmq-layout-sidebar .plan-card .plan-price { font-size:18px; }
.pmq-layout-sidebar .plan-card .plan-select-btn { padding:8px 14px; font-size:12px; }
.pmq-layout-sidebar .order-form-section,.pmq-layout-sidebar .order-result-section,.pmq-layout-sidebar .premium-active { grid-column:1/-1; }
@media(max-width:768px){ .pmq-layout-sidebar .premium-content{grid-template-columns:1fr} .pmq-layout-sidebar .order-form-section,.pmq-layout-sidebar .order-result-section,.pmq-layout-sidebar .premium-active{grid-column:auto} }

/* stacked: full-width cards */
.pmq-layout-stacked .premium-plans { grid-template-columns:1fr; gap:12px; }
.pmq-layout-stacked .plan-card { display:flex; align-items:center; padding:24px 28px; gap:20px; }
.pmq-layout-stacked .plan-card .plan-duration { flex:1; margin:0; font-size:20px; }
.pmq-layout-stacked .plan-card .plan-price { margin:0; }
.pmq-layout-stacked .plan-card .plan-savings { height:auto; margin:0; }
.pmq-layout-stacked .plan-card .plan-select-btn { padding:12px 28px; white-space:nowrap; }
.pmq-layout-stacked .plan-card .popular-badge { position:static; transform:none; border-radius:20px; padding:4px 14px; font-size:10px; order:-1; }
@media(max-width:600px){ .pmq-layout-stacked .plan-card{flex-wrap:wrap} .pmq-layout-stacked .plan-card .plan-select-btn{width:100%;text-align:center} }

/* compact: small tight cards */
.pmq-layout-compact .pmq-container,.pmq-layout-compact.pmq-container { padding:24px; }
.pmq-layout-compact .premium-header { margin-bottom:24px; padding-bottom:16px; }
.pmq-layout-compact .premium-header h1 { font-size:22px; }
.pmq-layout-compact .benefits-section { margin-bottom:24px; }
.pmq-layout-compact .benefits-list li { padding:10px 14px; font-size:13px; }
.pmq-layout-compact .premium-plans { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.pmq-layout-compact .plan-card { padding:16px 12px; border-radius:10px; }
.pmq-layout-compact .plan-duration { font-size:14px; margin-bottom:8px; }
.pmq-layout-compact .plan-price { font-size:18px; margin-bottom:8px; }
.pmq-layout-compact .plan-savings { height:28px; font-size:11px; margin-bottom:10px; }
.pmq-layout-compact .plan-select-btn { padding:8px 14px; font-size:12px; border-radius:6px; }

/* magazine: big header, 3-col plans */
.pmq-layout-magazine .premium-header { margin-bottom:48px; padding-bottom:36px; }
.pmq-layout-magazine .premium-header h1 { font-size:38px; letter-spacing:-1px; }
.pmq-layout-magazine .premium-header .subtitle { font-size:18px; }
.pmq-layout-magazine .premium-plans { grid-template-columns:repeat(3,1fr); gap:16px; }
.pmq-layout-magazine .benefits-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:768px){ .pmq-layout-magazine .premium-plans{grid-template-columns:1fr 1fr} .pmq-layout-magazine .premium-header h1{font-size:28px} .pmq-layout-magazine .benefits-list{grid-template-columns:1fr} }
@media(max-width:480px){ .pmq-layout-magazine .premium-plans{grid-template-columns:1fr} }

/* reversed: plans first, benefits below */
.pmq-layout-reversed .premium-content { display:flex; flex-direction:column; }
.pmq-layout-reversed .plans-section { order:-1; margin-bottom:36px; }
.pmq-layout-reversed .benefits-section { order:0; }

/* minimal: no borders, big spacing, clean */
.pmq-layout-minimal .pmq-container,.pmq-layout-minimal.pmq-container { border-radius:0; box-shadow:none; }
.pmq-layout-minimal .pmq-container::before,.pmq-layout-minimal.pmq-container::before { display:none; }
.pmq-layout-minimal .premium-header { border-bottom:none; margin-bottom:48px; }
.pmq-layout-minimal .benefits-list li { border:none; background:none; padding:10px 0; }
.pmq-layout-minimal .benefits-list li:hover { transform:none; }
.pmq-layout-minimal .plan-card { border:none; background:var(--pmq-bg2); border-radius:20px; }
.pmq-layout-minimal .plan-card:hover { border:none; box-shadow:0 8px 30px rgba(0,0,0,0.2); }
.pmq-layout-minimal .plan-card.selected { box-shadow:0 0 0 2px var(--pmq-accent); }
.pmq-layout-minimal .premium-plans { gap:20px; }