:root{--blue:#0759d8;--navy:#0b3f85;--green:#16a34a;--text:#123d76;--muted:#637895;--line:#dce7f5;--bg:#f6faff;--shadow:0 10px 28px rgba(20,70,130,.10)}
*{box-sizing:border-box}body{margin:0;font-family:'Nunito',Arial,sans-serif;color:var(--text);background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}
.topbar{background:#07489a;color:#fff;font-size:12px}.topbar-inner{height:36px;display:flex;align-items:center;justify-content:space-between}.top-links{display:flex;gap:20px;align-items:center}.mini-register{background:#1167dc;padding:6px 13px;border-radius:5px}
.navbar{background:#fff;border-bottom:1px solid #eef3f9}.nav-inner{height:72px;display:flex;align-items:center;gap:30px}.brand img{width:auto;height:65px;object-fit:contain}.nav-links{display:flex;gap:27px;margin:auto;font-size:14px;font-weight:700}.nav-links a:hover{color:var(--blue)}.nav-actions{display:flex;gap:8px}.menu-toggle{display:none;border:0;background:none;font-size:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:11px 20px;font-weight:800;font-size:14px;border:1px solid transparent;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#0a61e8,#0647ae);color:#fff;box-shadow:0 7px 16px rgba(0,80,190,.18)}.btn-outline{border-color:#d6e1ef;background:#fff;color:#16467e}.btn-green{background:#11a747;color:#fff}.btn-large{padding:14px 23px}.full{width:100%}
.hero{background:linear-gradient(110deg,#f9fcff 0%,#fff 58%,#eaf5ff 100%);overflow:hidden}.hero-grid{min-height:420px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center}.hero-copy{padding:45px 0}.eyebrow{display:inline-block;background:#e9f3ff;color:#0759d8;border:1px solid #cde3ff;border-radius:20px;padding:7px 12px;font-size:12px;font-weight:800}.hero h1{font-size:48px;line-height:1.04;margin:18px 0;color:#123f7d}.hero h1 span{color:#17498c}.hero-copy>p{max-width:570px;color:#547095;line-height:1.65;font-size:16px}.hero-points{display:flex;gap:25px;margin:25px 0}.hero-points div{display:flex;gap:9px;align-items:center;font-weight:800;font-size:12px}.hero-points b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#dff1e4;color:#0a9b46}.hero-points small{display:block;color:#6a809b;font-weight:600;margin-top:2px}.hero-buttons{display:flex;gap:12px}.hero-image-wrap{height:420px;position:relative;align-self:end}.hero-image-wrap img{width:100%;height:100%;object-fit:cover;border-radius:160px 0 0 0;filter:saturate(.92)}.scribble{position:absolute;left:18px;top:80px;font-size:25px;font-weight:900;color:#123f7d;font-style:italic;transform:rotate(-8deg);line-height:1.05}.scribble span{color:#149f49}
.section{padding:55px 0}.projects-section{background:#fff}.section-heading{text-align:center;margin-bottom:30px}.section-heading.left{text-align:left}.section-heading h2{font-size:30px;margin:0 0 8px}.section-heading p{margin:0;color:#6a7e98}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card,.large-project-card{border:1px solid #cfe0f3;border-radius:13px;background:#fff;padding:18px;box-shadow:var(--shadow)}.project-card{position:relative}.project-card.green{border-color:#bfe7cb}.project-top{display:flex;justify-content:space-between;align-items:center}.project-badge{display:inline-block;padding:8px 18px;border-radius:20px;background:#0b5ed7;color:#fff;font-weight:900}.green .project-badge{background:#0aa644}.book-icon{color:#0860d7;font-size:21px}.project-card h3{margin:12px 0 18px;font-size:17px}.detail{display:flex;gap:12px;align-items:center;margin:13px 0;color:#14508f}.detail>b{font-size:19px;color:#0860d7;width:20px}.detail span{font-size:12px;font-weight:700}.detail small{display:block;color:#59718e;font-size:11px;margin-top:2px}.detail .money{color:#123f7d;font-size:14px}.card-btn{display:block;text-align:center;background:#0961dc;color:#fff;padding:11px;border-radius:7px;font-weight:800;margin-top:17px}.green .card-btn{background:#0cab48}.courier-note{text-align:center;font-size:12px;color:#0b59bd;margin-top:10px}
.how-section{background:#f5faff}.steps{display:grid;grid-template-columns:1fr 25px 1fr 25px 1fr 25px 1fr;align-items:center}.step{text-align:center;background:#fff;border-radius:10px;padding:20px 14px;box-shadow:var(--shadow);position:relative}.step>span{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0860db;color:#fff;font-weight:900}.step-icon{font-size:26px;color:#0860db}.step h3{font-size:14px;margin:6px 0}.step p{font-size:11px;color:#657c97;line-height:1.45;margin:0}.step.orange>span{background:#ff8b20}.step.purple>span{background:#5a39c9}.step-arrow{color:#0759d8;font-size:25px;font-weight:900}
.why-section{background:#fff}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.why-list>div{display:flex;gap:15px;margin:17px 0;align-items:center}.why-list i{font-style:normal;width:43px;height:43px;border-radius:50%;background:#e8f3ff;display:grid;place-items:center;color:#0860d7;font-size:20px}.why-list b{display:block}.why-list small{display:block;color:#6c819b;margin-top:3px}.why-image{position:relative}.why-image img{width:100%;height:260px;object-fit:cover;border-radius:13px}.trust-badge{position:absolute;right:-12px;bottom:-14px;background:#fff;border-radius:13px;padding:15px 22px;box-shadow:var(--shadow);color:#0759d8;font-size:20px}.trust-badge b{font-size:12px;color:#0b4b8f}
.cta{background:linear-gradient(105deg,#074da8,#0b54b9);color:#fff;border-radius:14px;min-height:130px;margin-bottom:35px;padding:25px 40px;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.cta h2{margin:0 0 5px}.cta p{margin:0 0 14px;font-size:12px;opacity:.85}.cta-art{font-size:65px;opacity:.8}
.footer{background:#052f65;color:#fff;padding:40px 0 0}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:35px}.footer a,.footer span{display:block;color:#d5e3f5;font-size:12px;margin:8px 0}.footer h4{margin:0 0 12px}.footer-brand{display:flex;gap:10px;align-items:center}.footer-brand img{width:auto;height:50px;background:#fff;border-radius:4px}.footer p{font-size:11px;color:#b9cee6}.socials{display:flex;gap:7px;margin-top:13px}.socials span{border:1px solid #5c7da5;border-radius:50%;width:27px;height:27px;display:grid;place-items:center}.footer-bottom{border-top:1px solid #25558a;margin-top:30px;padding:14px 0;display:flex;justify-content:space-between;font-size:10px}
.inner-hero{background:linear-gradient(110deg,#eef7ff,#fff);padding:55px 0;border-bottom:1px solid #e3edf8}.inner-hero h1{font-size:40px;margin:14px 0 7px}.inner-hero p{color:#627b99;margin:0}.detail-layout,.form-layout,.payment-layout,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.large-project-card{padding:28px}.large-project-card h2{font-size:28px}.detail-list{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}.detail-list>div{display:flex;gap:12px;border:1px solid var(--line);padding:15px;border-radius:10px}.detail-list b{font-size:22px;color:#0760d8}.detail-list span{font-size:12px}.detail-list strong{display:block;font-size:15px;margin-top:3px}.notice,.success{padding:13px;border-radius:8px;background:#e9f8ee;color:#08743a;margin:15px 0}.info-panel,.form-card,.summary-card,.payment-card,.methods,.about-card{border:1px solid var(--line);border-radius:13px;padding:25px;box-shadow:var(--shadow);background:#fff}.info-panel li{margin:12px 0;color:#5d7491}.form-card h2{margin-top:0}label{display:block;font-size:12px;font-weight:800;margin:13px 0;color:#31567f}input,select,textarea{width:100%;margin-top:7px;padding:12px;border:1px solid #d5e1ee;border-radius:8px;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:#1670e8}.summary-badge{display:inline-block;background:#0b5ed7;color:#fff;padding:7px 12px;border-radius:15px;font-weight:900;font-size:12px}.summary-card h4{margin:12px 0 18px}.summary-row{display:flex;gap:12px;padding:12px 0;border-top:1px solid #eef3f8;font-size:17px}.summary-row span{font-size:12px}.summary-row strong{display:block;font-size:14px;margin-top:2px}.safe{font-size:11px;color:#5f7895}.payment-card{text-align:left}.payment-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #e7eef7;font-size:13px}.payment-row.total{font-size:17px}.secure-text{display:block;text-align:center;color:#5c7694;margin-top:10px}.methods div{border:1px solid #e4edf6;padding:13px;border-radius:8px;margin:10px 0;font-weight:800;font-size:13px}.methods small{display:block;color:#71839a;margin:4px 0 0 20px}.payment-success{text-align:center;font-size:50px;color:#0aa64a}.payment-card h2{text-align:center}
.dashboard-wrap{background:#f4f8fd;padding:35px 0;min-height:650px}.dashboard-grid{display:grid;grid-template-columns:220px 1fr;gap:25px}.sidebar{background:#fff;border-radius:12px;padding:15px;box-shadow:var(--shadow);height:max-content}.profile-mini{text-align:center;padding:10px;border-bottom:1px solid #e7eef6;margin-bottom:10px}.avatar{width:45px;height:45px;border-radius:50%;background:#dceeff;color:#0759d8;display:grid;place-items:center;margin:0 auto 7px;font-weight:900}.profile-mini small{display:block;color:#72859b}.sidebar>a{display:block;padding:11px;border-radius:7px;font-size:12px;font-weight:700;margin:4px 0}.sidebar>a.active,.sidebar>a:hover{background:#e7f1ff;color:#0759d8}.dash-head h1{margin:5px 0}.dash-head p{color:#70839b}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.stats>div,.dash-card{background:#fff;border:1px solid #e0eaf4;border-radius:10px;padding:16px;box-shadow:var(--shadow)}.stats span{display:block;font-size:10px;color:#6c8098}.stats b{display:block;font-size:18px;margin-top:7px}.green-text{color:#0aa64a}.dashboard-panels{display:grid;grid-template-columns:1.4fr 1fr;gap:15px}.progress{height:9px;background:#e4edf7;border-radius:20px;margin:18px 0 8px;overflow:hidden}.progress span{display:block;height:100%;background:#0a63dc}.between{display:flex;justify-content:space-between;font-size:10px;color:#6b8099}.status-line{margin-top:20px;display:flex;justify-content:space-between;font-size:12px}.status-line b{color:#0aa64a}.dash-card p{font-size:12px;border-bottom:1px solid #eef2f7;padding-bottom:10px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.about-grid img{grid-column:1/-1;width:100%;height:260px;object-fit:cover;border-radius:13px}.about-card p{color:#657b96;line-height:1.7}.process-list{max-width:800px}.process-item{display:flex;gap:20px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:12px;margin:13px 0}.process-item>span{width:42px;height:42px;border-radius:50%;background:#0a61da;color:#fff;display:grid;place-items:center;font-weight:900}.process-item h3{margin:0 0 4px}.process-item p{margin:0;color:#667d98}.faq{max-width:850px}.faq details{border:1px solid var(--line);border-radius:10px;margin:10px 0;padding:0 17px}.faq summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:800;display:flex;justify-content:space-between}.faq summary::-webkit-details-marker{display:none}.faq p{color:#687d96;line-height:1.6}.contact-info>div{display:flex;gap:15px;margin:22px 0}.contact-info>div>b{width:42px;height:42px;background:#e8f3ff;color:#0759d8;border-radius:50%;display:grid;place-items:center}.contact-info strong{display:block}.narrow{max-width:520px}.center{text-align:center}.muted{color:#71839a;font-size:12px}
@media(max-width:900px){.nav-links{display:flex;position:fixed;top:0;right:-100%;width:260px;height:100vh;background:#fff;padding:40px 30px;box-shadow:-5px 0 25px rgba(0,0,0,0.15);z-index:1000;flex-direction:column;transition:right 0.3s ease}.nav-links.open{right:0}.menu-toggle{display:block;margin-left:auto;position:relative;z-index:1001}.nav-actions{display:none}.hero-grid,.why-grid,.detail-layout,.form-layout,.payment-layout,.contact-grid,.about-grid{grid-template-columns:1fr}.hero-copy{padding:35px 0 10px}.hero h1{font-size:38px}.hero-image-wrap{height:340px}.project-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:16px}.step-arrow{transform:rotate(90deg);text-align:center}.footer-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.dashboard-panels{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.profile-mini{grid-column:1/-1}.sidebar>a{padding:9px}.top-links{gap:8px}.hero-points{flex-wrap:wrap}}
@media(max-width:560px){.topbar-inner{font-size:9px}.top-links{display:none}.navbar{height:65px}.nav-inner{height:65px}.brand img{width:140px}.hero h1{font-size:32px}.hero-image-wrap{height:270px}.scribble{font-size:20px}.hero-buttons{flex-direction:column}.detail-list{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:7px}.cta{padding:22px}.inner-hero h1{font-size:31px}.stats{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr}}
.modern-card{background:#fff;border-radius:12px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,0.05);position:relative;display:flex;flex-direction:column;border:1px solid #eef3f9;}
.modern-card.recommended{background:#0f2d69;color:#fff;border-color:#0f2d69;transform:scale(1.05);z-index:2;}
.most-selected-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#f59e0b;color:#111;font-size:11px;font-weight:900;padding:5px 12px;border-radius:20px;letter-spacing:1px;}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;}
.plan-name{font-size:14px;font-weight:800;color:#1d4ed8;text-transform:uppercase;letter-spacing:1px;}
.recommended .plan-name{color:#60a5fa;}
.days-circle{background:#f0f7ff;color:#1d4ed8;width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.recommended .days-circle{background:rgba(255,255,255,0.1);color:#fff;}
.days-circle b{font-size:18px;}
.days-circle span{font-size:10px;}
.price-wrap{margin-bottom:20px;}
.price-wrap h2{font-size:36px;margin:0;line-height:1;}
.price-wrap p{font-size:12px;color:#64748b;margin:5px 0 0;}
.recommended .price-wrap p{color:#cbd5e1;}
.plan-desc{font-size:13px;line-height:1.6;color:#475569;margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid #eef3f9;}
.recommended .plan-desc{color:#e2e8f0;border-color:rgba(255,255,255,0.1);}
.features-list{list-style:none;padding:0;margin:0 0 30px;flex-grow:1;}
.features-list li{font-size:13px;margin-bottom:12px;display:flex;gap:10px;color:#334155;}
.recommended .features-list li{color:#f8fafc;}
.features-list li span{color:#10b981;}
.btn-select{display:block;text-align:center;background:#1d4ed8;color:#fff;padding:14px;border-radius:8px;font-weight:700;transition:0.2s;}
.recommended .btn-select{background:#fff;color:#1d4ed8;}
.btn-select:hover{opacity:0.9;}
.feedback-section{background:#09090b;padding:80px 0;color:#fff;}
.feedback-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;}
.feedback-header .eyebrow{color:#9ca3af;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:none;border:none;padding:0;display:block;margin-bottom:10px;}
.feedback-header .eyebrow span{color:#f59e0b;}
.feedback-header h2{font-size:42px;font-weight:900;margin:0 0 10px;line-height:1.1;letter-spacing:-1px;}
.feedback-header p{color:#9ca3af;font-size:14px;margin:0;}
.feedback-header a{color:#60a5fa;font-size:13px;font-weight:700;}
.feedback-header a:hover{color:#93c5fd;}
.feedback-grid{column-count:4;column-gap:15px;}
.feedback-item{break-inside:avoid;margin-bottom:15px;position:relative;border-radius:12px;overflow:hidden;}
.feedback-item img{width:100%;display:block;border-radius:12px;}
.feedback-overlay{position:absolute;bottom:0;left:0;right:0;padding:40px 15px 15px;background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);color:#fff;}
.feedback-overlay b{display:block;font-size:12px;}
.feedback-overlay .stars{color:#f59e0b;font-size:10px;letter-spacing:2px;}
@media(max-width:900px){.feedback-header{flex-direction:column;align-items:flex-start;gap:20px;}.feedback-grid{column-count:2;}}
@media(max-width:560px){.feedback-grid{column-count:1;}}
.cert-section { background-color: #f0f8ff; padding: 80px 0; }
.cert-header { max-width: 700px; margin-bottom: 50px; }
.cert-header h2 { font-size: 48px; font-weight: 900; color: #0f172a; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1.5px; }
.cert-header p { font-size: 18px; color: #64748b; line-height: 1.6; }
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.cert-card { background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cert-card img { width: 100%; border-radius: 8px; display: block; object-fit: contain; }
.cert-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cert-grid { grid-template-columns: 1fr; } .cert-header h2 { font-size: 36px; } }
.about-content { padding: 100px 0; }
.about-flex { display: flex; align-items: center; gap: 60px; }
.about-text { flex: 1; }
.about-text h2 { font-size: 32px; font-weight: 800; color: #0f172a; margin-bottom: 15px; letter-spacing: -0.5px; }
.about-text p { font-size: 18px; color: #475569; line-height: 1.7; }
.about-image { flex: 1; position: relative; }
.about-image img { width: 100%; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
@media(max-width: 900px) { .about-flex { flex-direction: column; text-align: center; } }
.footer-grid-new { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 20px; }
@media(max-width: 900px) { .footer-grid-new { grid-template-columns: 1fr 1fr; } }
@media(max-width: 600px) { .footer-grid-new { grid-template-columns: 1fr; gap: 30px; } }
/* Payment Modal Styles */
.payment-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.8); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; }
.payment-modal-overlay.active { display: flex; opacity: 1; }
.payment-modal { background: #f8fafc; border-radius: 20px; width: 90%; max-width: 900px; max-height: 90vh; overflow-y: auto; position: relative; transform: translateY(20px); transition: transform 0.3s ease; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.payment-modal-overlay.active .payment-modal { transform: translateY(0); }
.close-modal { position: absolute; top: 15px; right: 15px; background: #e2e8f0; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; color: #475569; transition: 0.2s; }
.close-modal:hover { background: #cbd5e1; color: #0f172a; }

.payment-modal-grid { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 500px; }
.payment-details-pane { background: #0b1120; padding: 50px 40px; color: #fff; }
.step-eyebrow { color: #f59e0b; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 15px; text-transform: uppercase; }

.package-summary-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 25px; }
.summary-label { color: #60a5fa; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.package-summary-card h3 { font-size: 28px; margin: 10px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); font-size: 14px; color: #cbd5e1; }
.summary-row strong { color: #fff; font-size: 15px; }
.highlight-price { color: #f59e0b !important; font-size: 22px !important; }

.refund-notice { background: rgba(34, 197, 94, 0.1); padding: 15px; border-radius: 8px; font-size: 13px; color: #d1d5db; line-height: 1.5; margin-top: 25px; display: flex; gap: 10px; align-items: flex-start; }

.payment-qr-pane { padding: 50px 40px; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.qr-header { color: #2563eb; font-weight: 800; font-size: 14px; letter-spacing: 1.5px; margin-bottom: 25px; text-transform: uppercase; }
.qr-image-container { width: 280px; height: 280px; border: 10px solid #1e293b; border-radius: 16px; padding: 15px; background: #fff; margin-bottom: 25px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.qr-image-container img { width: 100%; height: 100%; object-fit: contain; }
.qr-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; color: #94a3b8; font-size: 13px; padding: 20px; border: 2px dashed #cbd5e1; border-radius: 8px; }

.qr-instruction { color: #64748b; font-size: 14px; line-height: 1.6; margin-bottom: 25px; max-width: 300px; }
.btn-confirm-payment { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; max-width: 320px; background: #2563eb; color: #fff; text-decoration: none; padding: 16px; border-radius: 8px; font-weight: 700; font-size: 15px; transition: background 0.2s; }
.btn-confirm-payment:hover { background: #1d4ed8; }
.qr-footer-note { margin-top: 20px; font-size: 12px; color: #94a3b8; }

@media(max-width: 768px) {
    .payment-modal-grid { grid-template-columns: 1fr; }
    .payment-modal { max-height: 90vh; overflow-y: auto; }
    .payment-details-pane, .payment-qr-pane { padding: 30px 20px; }
}
/* Confirmation Form Styles */
.confirmation-section { padding: 80px 0; background: #f8fafc; min-height: 100vh; }
.confirm-header { text-align: center; margin-bottom: 40px; }
.confirm-header h1 { font-size: 42px; font-weight: 900; color: #0f172a; margin: 10px 0; letter-spacing: -1px; line-height: 1.1; }
.confirm-header p { font-size: 15px; color: #64748b; max-width: 500px; margin: 0 auto; line-height: 1.6; }
.confirm-form { background: #fff; border-radius: 16px; padding: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.03); border: 1px solid #f1f5f9; }
.confirm-form label { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 8px; display: block; }
.confirm-form label small { color: #94a3b8; font-weight: 400; }
.confirm-form input[type="text"], .confirm-form input[type="number"], .confirm-form input[type="tel"], .confirm-form textarea { width: 100%; padding: 15px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; background: #fdfdfd; transition: 0.2s; color: #334155; font-family: inherit; }
.confirm-form input:focus, .confirm-form textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); background: #fff; }
.confirm-form textarea { resize: vertical; min-height: 100px; }
.readonly-input { background: #f1f5f9 !important; color: #64748b !important; cursor: not-allowed; border-color: #e2e8f0 !important; font-weight: 600; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.file-upload-box { position: relative; width: 100%; }
.file-upload-box input[type="file"] { opacity: 0; position: absolute; width: 100%; height: 100%; cursor: pointer; z-index: 2; }
.file-upload-box label { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 25px; border: 2px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; color: #64748b; font-size: 14px; font-weight: 500; cursor: pointer; margin: 0; transition: 0.2s; }
.file-upload-box:hover label { border-color: #94a3b8; background: #f1f5f9; }

.form-note { background: #f0f6ff; padding: 20px; border-radius: 8px; font-size: 12px; color: #64748b; line-height: 1.6; text-align: center; margin: 30px 0; }
.btn-submit-confirm { width: 100%; background: #2563eb; color: #fff; font-size: 16px; font-weight: 700; padding: 18px; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2); }
.btn-submit-confirm:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 15px 25px rgba(37, 99, 235, 0.3); }

@media(max-width: 600px) {
    .form-grid-2 { grid-template-columns: 1fr; gap: 0; }
    .confirm-form { padding: 25px; }
    .confirm-header h1 { font-size: 32px; }
}
/* Waiting Page Styles */
.waiting-section { padding: 80px 0; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.status-card { background: #fff; border-radius: 16px; padding: 50px 40px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); border: 1px solid #f1f5f9; text-align: center; width: 100%; }
.status-card h2 { font-size: 28px; font-weight: 800; color: #0f172a; margin-bottom: 15px; }
.status-card p { font-size: 15px; color: #64748b; line-height: 1.6; margin-bottom: 30px; }

.spinner { width: 60px; height: 60px; border: 5px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 30px; }
@keyframes spin { to { transform: rotate(360deg); } }

.timer-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 25px; margin: 30px 0; display: inline-block; min-width: 200px; }
.timer-box span { display: block; font-size: 42px; font-weight: 900; color: #166534; font-family: monospace; letter-spacing: -2px; margin-bottom: 5px; }
.timer-box small { color: #15803d; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

.timer-note { font-size: 13px !important; color: #94a3b8 !important; max-width: 400px; margin: 0 auto !important; }

.icon-circle { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; margin: 0 auto 30px; font-weight: bold; }
.icon-circle.success { background: #10b981; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2); }
.icon-circle.error { background: #ef4444; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2); }

/* Lightbox Styles */
.lightbox-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 2000; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.lightbox-overlay.active { display: flex; opacity: 1; }
.lightbox-content { position: relative; max-width: 90%; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
.lightbox-content img { max-width: 100%; max-height: 85vh; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); object-fit: contain; }
.lightbox-close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 40px; cursor: pointer; transition: 0.2s; line-height: 1; }
.lightbox-close:hover { color: #f87171; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 30px; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; backdrop-filter: blur(4px); }
.lightbox-prev { left: -60px; }
.lightbox-next { right: -60px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.3); }
@media (max-width: 768px) {
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
    .lightbox-close { top: -45px; right: 10px; }
}