@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --navy: #2b91b7;
    --navy-2: #69cddd;
    --ink: #21485d;
    --muted: #718096;
    --line: #e6edf3;
    --soft: #effafd;
    --white: #ffffff;
    --yellow: #ffcf42;
    --yellow-soft: #fff4c7;
    --cyan: #61d6df;
    --green: #48bb86;
    --red: #e67570;
    --blue: #4d8dd8;
    --shadow: 0 20px 60px rgba(8, 29, 52, .08);
    --radius: 20px;
    --font-body: 'DM Sans', 'Segoe UI', Arial, sans-serif;
    --font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--font-body); font-size: 15px; line-height: 1.6; }
body, button, input, select, textarea { font-family: var(--font-body); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.04em; }
h1, h2 { line-height: 1.03; }
.site-body { min-width: 320px; overflow-x: hidden; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 112px 0; }
.section-white { background: #fff; }
.section-soft { background: #effafd; }
.section-dark { color: #fff; background: linear-gradient(135deg, #69cddd 0%, #2b91b7 62%, #247fa7 100%); }
.eyebrow { color: #668197; font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; }
.light-eyebrow { color: #b5d1df; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 207, 66, .12); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font-size: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 18px; line-height: 0; }
.button-dark { color: #fff; background: #2b91b7; box-shadow: 0 8px 18px rgba(28, 119, 153, .2); }
.button-dark:hover { background: #217fa5; box-shadow: 0 12px 24px rgba(28, 119, 153, .28); }
.payment-retry-form { margin: 17px 0; }
.payment-retry-form .button { width: 100%; }
.button-yellow { color: var(--navy); background: var(--yellow); box-shadow: 0 8px 22px rgba(255, 207, 66, .22); }
.button-yellow:hover { background: #ffdb6b; }
.button-ghost { color: #e8f5f8; border-color: rgba(255, 255, 255, .24); background: rgba(255,255,255,.04); }
.button-ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); }
.button-outline { color: var(--navy); border-color: #d8e3eb; background: #fff; }
.button-outline:hover { border-color: #9eb5c5; background: #f8fbfc; }
.button-block { width: 100%; }
.button-large { min-height: 56px; }
.button-small { min-height: 36px; padding: 0 13px; font-size: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 13px; font-weight: 700; }
.text-link span { font-size: 17px; transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px, -3px); }
.text-link-light { color: #fff; }

/* Public navigation */
.site-header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; color: #fff; }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 86px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.brand strong { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: -.06em; line-height: 1; }
.brand strong > span { color: var(--yellow); }
.brand small { display: block; margin-top: 4px; color: #91aabd; font-size: 8px; font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.brand-mark { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; width: 27px; height: 27px; padding: 5px 5px 4px; overflow: hidden; border-radius: 8px 8px 10px 3px; background: var(--yellow); transform: skewY(-8deg); }
.brand-mark:before { position: absolute; top: 4px; left: 7px; width: 13px; height: 3px; border-radius: 3px; background: var(--navy); content: ''; }
.brand-mark span { display: block; width: 3px; height: 10px; border-radius: 3px; background: var(--navy); }
.brand-mark span:nth-child(2) { height: 14px; }
.brand-mark span:nth-child(3) { height: 7px; }
.main-nav { display: flex; align-items: center; gap: 30px; font-size: 12px; font-weight: 600; color: #c5d6e0; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover { color: #fff; }
.main-nav .nav-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; color: #fff; }
.main-nav .nav-cta span { color: var(--yellow); font-size: 16px; }
.nav-toggle { display: none; color: #fff; background: transparent; font-size: 12px; font-weight: 700; }
.nav-toggle span { margin-left: 7px; color: var(--yellow); font-size: 18px; }

/* Hero */
.hero { position: relative; min-height: 690px; padding: 160px 0 0; overflow: hidden; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.hero-glow-one { top: -340px; right: -140px; width: 760px; height: 760px; border: 1px solid rgba(93, 209, 222, .12); box-shadow: 0 0 0 90px rgba(93, 209, 222, .025), 0 0 0 180px rgba(93, 209, 222, .02); }
.hero-glow-two { bottom: -440px; left: -170px; width: 620px; height: 620px; border: 1px solid rgba(255, 207, 66, .08); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); align-items: center; gap: 64px; min-height: 490px; }
.hero-copy { padding-bottom: 28px; }
.hero-copy h1 { max-width: 590px; margin: 22px 0 22px; font-size: clamp(48px, 5.6vw, 78px); }
.hero-copy h1 em, h2 em { color: var(--yellow); font-style: normal; }
.hero-lead { max-width: 470px; margin-bottom: 30px; color: #adc4d2; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 45px; color: #dbeaf0; }
.hero-proof strong, .hero-proof small { display: block; }
.hero-proof strong { font-size: 12px; }
.hero-proof small { margin-top: 4px; color: #88a5b6; font-size: 11px; }
.avatar-stack { display: flex; padding-left: 7px; }
.avatar-stack span { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -7px; border: 2px solid var(--navy); border-radius: 50%; color: #fff; background: #75a9bb; font-size: 10px; font-weight: 700; }
.avatar-stack span:nth-child(2) { background: #bb7e63; }.avatar-stack span:nth-child(3) { background: #7394c4; }.avatar-stack span:nth-child(4) { color: var(--navy); background: var(--yellow); }
.hero-art { position: relative; min-height: 430px; }
.art-card { position: absolute; top: 50%; left: 50%; width: min(440px, 88%); padding: 18px 20px 17px; border: 1px solid rgba(255,255,255,.4); border-radius: 24px; background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(215,243,244,.87)); box-shadow: 20px 25px 70px rgba(0,0,0,.24), inset 0 0 40px rgba(255,255,255,.45); transform: translate(-50%, -48%) rotate(-4deg); }
.art-card:after { position: absolute; right: -16px; bottom: -20px; z-index: -1; width: 75%; height: 75%; border-radius: 18px; background: rgba(67, 143, 163, .18); content: ''; filter: blur(12px); }
.art-card-top, .art-card-bottom { display: flex; align-items: center; justify-content: space-between; }
.art-card-top { padding: 1px 3px 17px; color: #113452; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.art-card-top > span > span { color: #52a4aa; }
.art-status { color: #57817f; font-size: 9px; font-weight: 600; letter-spacing: 0; }.art-status i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #49bd86; }
.ac-unit { position: relative; height: 165px; padding: 28px 28px 20px; overflow: hidden; border: 1px solid rgba(78, 128, 147, .26); border-radius: 18px 18px 31px 31px; background: linear-gradient(155deg, #f9ffff 0%, #d7edf0 57%, #b6d8de 100%); box-shadow: 0 12px 20px rgba(15, 86, 111, .12); }
.ac-unit:before { position: absolute; right: -40px; bottom: 25px; width: 75%; height: 80px; border-radius: 50%; background: rgba(83, 177, 187, .17); content: ''; transform: rotate(-8deg); }
.ac-topline { position: absolute; top: 15px; left: 26px; right: 26px; height: 3px; border-radius: 99px; background: rgba(110, 178, 188, .45); }.ac-brand { position: relative; color: #28506c; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.09em; }.ac-brand span { color: #56b5bd; }
.ac-screen { position: absolute; top: 62px; right: 29px; padding: 5px 8px; border-radius: 5px; color: #4b7379; background: rgba(180, 225, 225, .8); font-family: monospace; font-size: 13px; font-weight: 700; }
.ac-vent { position: absolute; right: 28px; bottom: 23px; left: 28px; display: flex; gap: 10px; }.ac-vent i { display: block; flex: 1; height: 12px; border-bottom: 2px solid rgba(57, 115, 127, .32); border-radius: 0 0 50% 50%; transform: skewX(-25deg); }
.wind-lines { display: flex; gap: 10px; justify-content: center; height: 47px; padding-top: 13px; }.wind-lines span { display: block; width: 45px; height: 25px; border-right: 1px solid rgba(67, 166, 181, .48); border-bottom: 1px solid rgba(67, 166, 181, .48); border-radius: 0 0 18px 18px; transform: rotate(20deg); }.wind-lines span:nth-child(2) { height: 36px; transform: rotate(27deg); }.wind-lines span:nth-child(3) { transform: rotate(34deg); }
.art-card-bottom { padding: 12px 5px 0; border-top: 1px solid rgba(60, 118, 133, .16); color: #5d7b87; font-size: 10px; }.art-card-bottom strong { color: #143b58; font-size: 14px; }.art-card-bottom strong span { color: #5d7b87; font-size: 9px; font-weight: 500; }
.art-spark { position: absolute; z-index: 2; color: var(--yellow); font-size: 24px; }.spark-a { top: 20px; right: 15%; }.spark-b { bottom: 76px; left: 7%; color: #68d3d8; font-size: 16px; }.spark-c { top: 35%; left: 13%; color: rgba(255,255,255,.55); font-size: 34px; }.art-orbit { position: absolute; border: 1px solid rgba(97, 214, 223, .22); border-radius: 50%; transform: rotate(25deg); }.orbit-one { top: 27px; left: 12%; width: 400px; height: 310px; }.orbit-two { top: 80px; left: 2%; width: 490px; height: 230px; border-color: rgba(255, 207, 66, .14); transform: rotate(-22deg); }.floating-badge { position: absolute; right: 2%; bottom: 26px; display: flex; align-items: center; gap: 9px; padding: 11px 13px 11px 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; color: #fff; background: rgba(20, 55, 79, .8); box-shadow: 0 10px 22px rgba(0,0,0,.12); transform: rotate(4deg); }.floating-badge b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--navy); background: var(--yellow); font-family: var(--font-display); font-size: 11px; }.floating-badge span { font-size: 9px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.hero-bottom { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 20px; padding: 30px 0 33px; border-top: 1px solid rgba(255,255,255,.13); }.hero-stat { display: flex; flex-direction: column; gap: 3px; padding-left: 19px; border-left: 1px solid rgba(255,255,255,.18); }.hero-stat:first-child { padding-left: 0; border-left: 0; }.hero-stat strong { color: #fff; font-family: var(--font-display); font-size: 18px; letter-spacing: -.04em; }.hero-stat span { color: #86a4b4; font-size: 10px; }.hero-stat-note { flex-direction: row; align-items: center; justify-content: flex-end; gap: 9px; border: 0; }.hero-stat-note > span { color: var(--yellow); font-size: 20px; }.hero-stat-note strong { color: var(--yellow); font-size: 13px; }
.announcement { color: var(--navy); background: var(--yellow); }.announcement-inner { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 47px; font-size: 11px; }.announcement-inner > span:first-child, .announcement-end { font-size: 17px; }.announcement-divider { width: 1px; height: 15px; background: rgba(8,29,52,.35); }

/* Public content */
.section-heading { margin-bottom: 45px; }.section-heading h2 { margin: 15px 0 0; color: var(--navy); font-size: clamp(37px, 4vw, 55px); }.heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }.heading-note { max-width: 315px; margin-bottom: 3px; color: var(--muted); font-size: 13px; line-height: 1.8; }.centered { text-align: center; }.centered .eyebrow { display: inline-block; }
.package-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.package-card { position: relative; display: flex; min-height: 448px; flex-direction: column; padding: 25px 22px 21px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 25px rgba(8,29,52,.035); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.package-card:hover { border-color: #b9cbd7; box-shadow: var(--shadow); transform: translateY(-5px); }.package-featured { border-color: rgba(255,207,66,.7); background: linear-gradient(180deg, #fffdf5 0%, #fff 42%); }.package-ribbon { position: absolute; top: 0; right: 0; padding: 6px 12px 6px 15px; border-radius: 0 0 0 12px; color: #6f5400; background: var(--yellow); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.package-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }.package-capacity { color: var(--navy); font-family: var(--font-display); font-size: 31px; font-weight: 700; letter-spacing: -.07em; }.package-tag { padding: 5px 8px; border-radius: 6px; color: #7691a1; background: #eef5f7; font-size: 9px; font-weight: 700; text-transform: uppercase; }.package-card h3 { min-height: 24px; margin-bottom: 8px; color: var(--navy); font-size: 18px; }.package-card > p { min-height: 50px; margin-bottom: 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }.package-price { margin: auto 0 21px; color: var(--navy); font-family: var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -.06em; }.package-price small { margin-right: 1px; color: #6f8593; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0; }.package-price span { margin-left: 4px; color: #8295a0; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0; }.package-features { min-height: 70px; margin-bottom: 22px; padding-top: 14px; border-top: 1px solid var(--line); }.package-features span { display: block; margin-top: 7px; color: #586f7c; font-size: 10px; }.package-features b { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; color: #258763; background: #d9f5e8; font-size: 9px; }.empty-state { grid-column: 1 / -1; padding: 40px; border: 1px dashed #cbd9e2; border-radius: var(--radius); color: var(--muted); text-align: center; }
.benefit-section, .order-section { position: relative; color: #fff; background: var(--navy); overflow: hidden; }.benefit-section:before, .order-section:before { position: absolute; top: -240px; right: -170px; width: 570px; height: 570px; border: 1px solid rgba(97,214,223,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(97,214,223,.025), 0 0 0 140px rgba(97,214,223,.02); content: ''; }.benefit-section { padding: 112px 0; }.benefit-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; }.benefit-copy h2, .order-intro h2 { margin: 18px 0 22px; color: #fff; font-size: clamp(39px, 4vw, 58px); }.benefit-copy p, .order-intro > p { max-width: 410px; color: #abc3cf; font-size: 14px; line-height: 1.85; }.benefit-list { border-top: 1px solid rgba(255,255,255,.15); }.benefit-item { display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.15); }.benefit-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(255,255,255,.25); border-radius: 11px; color: var(--yellow); font-size: 19px; }.benefit-item h3 { margin-bottom: 4px; color: #fff; font-size: 15px; letter-spacing: -.02em; }.benefit-item p { margin: 0; color: #8ca8b8; font-size: 11px; }.benefit-item > b { align-self: start; padding-top: 4px; color: #648394; font-size: 10px; font-weight: 500; text-align: right; }.benefit-copy .text-link { margin-top: 27px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.step-card { position: relative; min-height: 255px; padding: 26px; overflow: hidden; border: 1px solid #e0e9ee; border-radius: var(--radius); background: #fff; }.step-card-active { color: #fff; border-color: var(--navy); background: var(--navy); box-shadow: 0 16px 35px rgba(8,29,52,.16); }.step-no { position: absolute; top: 23px; right: 25px; color: #a9bbc5; font-family: var(--font-display); font-size: 12px; }.step-card-active .step-no { color: #6c8798; }.step-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 35px; border-radius: 14px; color: var(--navy); background: var(--yellow); font-size: 24px; }.step-card h3 { margin-bottom: 9px; font-size: 19px; }.step-card p { max-width: 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }.step-card-active p { color: #a8bfca; }
.order-section { padding: 112px 0; }.order-section:before { top: -330px; right: -100px; }.order-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .77fr 1.23fr; gap: 75px; align-items: start; }.order-intro { padding-top: 48px; }.order-contact { display: flex; align-items: center; gap: 13px; margin-top: 38px; }.order-contact > span { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: var(--yellow); font-family: var(--font-display); font-weight: 700; }.order-contact strong, .order-contact a { display: block; }.order-contact strong { color: #d9e7ed; font-size: 12px; }.order-contact a { margin-top: 3px; color: var(--yellow); font-size: 11px; font-weight: 700; }.order-form-card { padding: 30px; border: 1px solid rgba(255,255,255,.65); border-radius: 23px; background: rgba(255,255,255,.97); box-shadow: 0 30px 80px rgba(0,0,0,.18); }.order-form-card .flash { margin: -3px -3px 18px; }.form-heading { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; margin-bottom: 23px; }.form-heading span { grid-row: span 2; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; color: var(--navy); background: var(--yellow); font-family: var(--font-display); font-size: 10px; font-weight: 700; }.form-heading strong { color: var(--navy); font-family: var(--font-display); font-size: 18px; letter-spacing: -.03em; }.form-heading small { color: var(--muted); font-size: 10px; }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 12px; }.field { display: block; min-width: 0; }.field-full { grid-column: 1 / -1; }.field > span { display: block; margin-bottom: 7px; color: #5c7382; font-size: 10px; font-weight: 700; }.field > span i { color: var(--red); font-style: normal; }.field input, .field select, .field textarea, .admin-textarea { width: 100%; border: 1px solid #dae5eb; border-radius: 10px; outline: 0; color: var(--ink); background: #fbfdfe; font-size: 12px; transition: border-color .2s ease, box-shadow .2s ease; }.field input, .field select { height: 43px; padding: 0 12px; }.field textarea, .admin-textarea { padding: 11px 12px; resize: vertical; }.field input::placeholder, .field textarea::placeholder { color: #a2b2bc; }.field input:focus, .field select:focus, .field textarea:focus, .admin-textarea:focus { border-color: #76bdc6; box-shadow: 0 0 0 3px rgba(97,214,223,.13); }.payment-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.payment-option { display: flex; align-items: center; gap: 8px; min-height: 51px; padding: 8px 9px; border: 1px solid #dae5eb; border-radius: 10px; background: #fff; }.payment-option input { position: absolute; opacity: 0; }.payment-option.is-selected { border-color: #65b7bf; background: #f2ffff; }.payment-option.is-disabled { opacity: .6; }.payment-option > span:not(.payment-logo) { min-width: 0; flex: 1; }.payment-option strong, .payment-option small { display: block; }.payment-option strong { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.payment-option small { margin-top: 2px; color: var(--muted); font-size: 8px; }.payment-option > b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: #51b891; font-size: 9px; }.payment-option em { color: #a28b35; font-size: 8px; font-style: normal; font-weight: 700; text-transform: uppercase; }.payment-logo { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 7px; color: #fff; font-size: 8px; font-weight: 800; }.bank-logo { background: var(--navy); font-size: 15px; }.qris-logo { color: var(--navy); background: #d8f1f1; }.bca-logo { background: #2780c3; font-size: 7px; }.mandiri-logo { background: #f0af38; color: #1f3249; }.form-total { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 13px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }.form-total strong { color: var(--navy); font-family: var(--font-display); font-size: 18px; }.form-note { margin: 12px 0 0; color: #92a2aa; font-size: 9px; text-align: center; }
.faq-section { padding-top: 105px; padding-bottom: 120px; }.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 95px; }.faq-grid h2 { margin: 17px 0 13px; color: var(--navy); font-size: 42px; }.faq-grid > div:first-child p { max-width: 240px; color: var(--muted); font-size: 13px; line-height: 1.75; }.faq-grid > div:first-child .text-link { margin-top: 20px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { position: relative; padding: 22px 40px 22px 0; color: var(--navy); cursor: pointer; font-family: var(--font-display); font-size: 15px; font-weight: 600; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary:after { position: absolute; top: 19px; right: 4px; color: #86a0af; content: '+'; font-family: var(--font-body); font-size: 23px; font-weight: 400; }.faq-list details[open] summary:after { content: '−'; }.faq-list details p { max-width: 640px; margin: -8px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.site-footer { padding: 45px 0; color: #a6bac6; background: #061629; }.footer-grid { display: grid; grid-template-columns: 1fr 1.1fr auto; align-items: center; gap: 35px; }.brand-footer { width: fit-content; }.footer-grid > p { max-width: 300px; margin: 0; font-size: 11px; line-height: 1.7; }.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 10px; }.footer-meta a { color: var(--yellow); font-weight: 700; }

/* Shared flash and success */
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border: 1px solid transparent; border-radius: 11px; font-size: 11px; }.flash-success { color: #216b52; border-color: #b8e6d0; background: #effcf5; }.flash-error { color: #933e3a; border-color: #f0c5c2; background: #fff5f4; }.flash-icon { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; color: #fff; background: currentColor; font-size: 11px; font-weight: 800; }.flash-success .flash-icon { color: #399c75; }.flash-error .flash-icon { color: #d36a65; }.flash-list { margin: 5px 0 0; padding-left: 16px; }.flash-close { margin-left: auto; color: currentColor; background: transparent; font-size: 18px; line-height: 1; }.success-page { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 40px 20px; overflow: hidden; background: #eef8f9; }.success-glow { position: absolute; top: -260px; right: -180px; width: 650px; height: 650px; border: 1px solid rgba(67,164,177,.13); border-radius: 50%; box-shadow: 0 0 0 80px rgba(67,164,177,.035), 0 0 0 160px rgba(67,164,177,.025); }.success-card { position: relative; width: min(100%, 640px); padding: 42px 48px; border: 1px solid #dcebed; border-radius: 24px; background: #fff; box-shadow: var(--shadow); text-align: center; }.success-brand { color: var(--navy); }.success-brand small { color: #8196a2; }.success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 43px auto 23px; border-radius: 50%; color: #fff; background: #4ebc8b; box-shadow: 0 0 0 10px #e7f8ef; font-size: 30px; }.success-card .eyebrow { color: #4b9a82; }.success-card h1 { margin: 14px 0 13px; color: var(--navy); font-size: 37px; }.success-lead { max-width: 440px; margin: 0 auto 25px; color: var(--muted); font-size: 13px; line-height: 1.75; }.order-reference { display: inline-flex; align-items: center; gap: 13px; padding: 7px 12px 7px 14px; border-radius: 9px; background: #f2f7f8; }.order-reference span { color: #8196a1; font-size: 10px; }.order-reference strong { color: var(--navy); font-size: 12px; letter-spacing: .08em; }.success-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 27px 0 17px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; text-align: left; }.success-summary span, .success-summary strong { display: block; }.success-summary span { margin-bottom: 3px; color: #8b9da6; font-size: 9px; }.success-summary strong { color: var(--navy); font-size: 12px; }.success-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border-radius: 10px; color: #7e7040; background: #fff9df; text-align: left; }.success-note > span { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #cdb95d; border-radius: 50%; font-size: 10px; }.success-note p { margin: 0; font-size: 10px; line-height: 1.6; }.success-actions { display: flex; justify-content: center; gap: 10px; margin-top: 23px; }
.success-card > .flash { margin: 20px 0 -14px; text-align: left; }.payment-instruction { margin: 17px 0; padding: 21px; border: 1px solid #cfe7eb; border-radius: 15px; background: #f5fcfd; text-align: center; }.payment-instruction .eyebrow { margin-bottom: 7px; font-size: 9px; letter-spacing: .13em; }.payment-instruction h2 { margin: 0 0 14px; color: var(--navy); font-size: 19px; }.payment-qr-frame { display: grid; place-items: center; width: 220px; min-height: 220px; margin: 0 auto 15px; padding: 10px; border: 1px solid #dce9ec; border-radius: 12px; background: #fff; }.payment-qr-frame img { display: block; width: 200px; height: 200px; }.payment-instruction .button { min-height: 40px; font-size: 10px; }.payment-expiry { display: block; margin-top: 11px; color: #8299a5; font-size: 10px; }.payment-number { display: block; margin: 4px 0 17px; color: var(--navy); font-family: var(--font-display); font-size: 28px; letter-spacing: .08em; }

/* Admin */
.admin-body { color: var(--ink); background: #f4f7f9; }.admin-shell { display: flex; min-height: 100vh; }.admin-sidebar { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; display: flex; width: 245px; flex-direction: column; color: #b4c9d5; background: var(--navy); }.admin-brand { display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 23px; border-bottom: 1px solid rgba(255,255,255,.1); }.sidebar-close { display: none; color: #aec2ce; background: transparent; font-size: 25px; }.admin-profile { display: flex; align-items: center; gap: 11px; margin: 26px 19px 25px; padding: 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(255,255,255,.04); }.profile-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--navy); background: var(--yellow); font-family: var(--font-display); font-size: 13px; font-weight: 700; }.admin-profile strong, .admin-profile span { display: block; }.admin-profile strong { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.admin-profile span { margin-top: 2px; color: #7795a6; font-size: 9px; }.admin-nav { display: flex; flex-direction: column; padding: 0 13px; }.nav-label { margin: 0 11px 10px; color: #577688; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.nav-label-spaced { margin-top: 25px; }.admin-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 9px; color: #9cb5c2; font-size: 11px; font-weight: 600; }.admin-nav a span { display: grid; place-items: center; width: 18px; color: #7291a2; font-size: 16px; }.admin-nav a:hover, .admin-nav a.active { color: #fff; background: rgba(255,255,255,.09); }.admin-nav a.active:before { position: absolute; left: -13px; width: 3px; height: 19px; border-radius: 0 3px 3px 0; background: var(--yellow); content: ''; }.admin-nav a.active span { color: var(--yellow); }.nav-count { display: grid; place-items: center; width: 19px; height: 19px; margin-left: auto; border-radius: 50%; color: #6e5c16; background: var(--yellow); font-size: 9px; }.admin-sidebar-footer { margin-top: auto; padding: 20px 25px 25px; border-top: 1px solid rgba(255,255,255,.1); }.status-dot { display: flex; align-items: center; gap: 7px; margin-bottom: 17px; color: #7ba59e; font-size: 10px; }.status-dot i { width: 6px; height: 6px; border-radius: 50%; background: #56be8b; box-shadow: 0 0 0 4px rgba(86,190,139,.12); }.logout-link { display: flex; align-items: center; gap: 10px; padding: 0; color: #8ca6b4; background: transparent; font-size: 11px; }.logout-link:hover { color: #fff; }.admin-main { min-width: 0; width: calc(100% - 245px); margin-left: 245px; }.admin-topbar { display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 45px; border-bottom: 1px solid #e3ebef; background: #fff; }.admin-breadcrumb { margin-right: 7px; color: #a1b2bb; font-size: 11px; }.admin-topbar strong { color: var(--navy); font-size: 12px; }.view-site-link { color: #708797; font-size: 11px; font-weight: 700; }.view-site-link span { margin-left: 5px; color: var(--blue); font-size: 16px; }.sidebar-open { display: none; color: var(--navy); background: transparent; font-size: 20px; }.admin-content { width: min(1280px, 100%); margin: 0 auto; padding: 43px 45px 70px; }.admin-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }.admin-page-heading h1 { margin: 9px 0 7px; color: var(--navy); font-size: 34px; }.admin-page-heading h1 span { color: var(--yellow); font-size: 20px; }.admin-page-heading p { margin: 0; color: #8397a2; font-size: 12px; }.heading-actions { display: flex; gap: 10px; }.back-link { display: inline-flex; margin-bottom: 2px; color: #638296; font-size: 11px; font-weight: 700; }.detail-heading { align-items: center; }.detail-statuses { display: flex; gap: 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 23px; }.stat-card { position: relative; min-height: 145px; padding: 22px; overflow: hidden; border: 1px solid #e4edf1; border-radius: 15px; background: #fff; }.stat-card-dark { color: #fff; border-color: var(--navy); background: var(--navy); }.stat-card > span { display: block; color: #7f949f; font-size: 10px; }.stat-card-dark > span { color: #9db8c7; }.stat-card strong { display: block; margin-top: 14px; color: var(--navy); font-family: var(--font-display); font-size: 28px; letter-spacing: -.06em; }.stat-card-dark strong { color: #fff; }.stat-card small { display: block; margin-top: 4px; color: #a1b1b8; font-size: 9px; }.stat-card > i { position: absolute; top: 21px; right: 20px; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #617f8e; background: #edf4f6; font-size: 14px; font-style: normal; }.stat-card-dark > i { color: var(--yellow); background: rgba(255,207,66,.15); }.stat-icon-yellow { color: #9a7a16 !important; background: #fff4c8 !important; }.stat-icon-green { color: #299267 !important; background: #ddf6e9 !important; }.stat-icon-blue { color: #477cb9 !important; background: #e4f0fc !important; }.admin-two-col { display: grid; grid-template-columns: 1.6fr .85fr; gap: 14px; }.panel { border: 1px solid #e4edf1; border-radius: 15px; background: #fff; }.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 23px 23px 18px; }.panel-heading h2 { margin: 0; color: var(--navy); font-size: 17px; }.panel-heading p { margin: 4px 0 0; color: #9aabb3; font-size: 10px; }.panel-heading .text-link { font-size: 10px; }.heading-count { display: inline-grid; place-items: center; min-width: 23px; height: 21px; margin-left: 4px; padding: 0 6px; border-radius: 7px; color: #668395; background: #edf4f6; font-family: var(--font-body); font-size: 10px; letter-spacing: 0; }.table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; text-align: left; }.data-table th { padding: 0 15px 11px; border-bottom: 1px solid #e8eef1; color: #a0b0b7; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }.data-table td { padding: 15px; border-bottom: 1px solid #eef3f5; vertical-align: middle; font-size: 11px; }.data-table tbody tr:last-child td { border-bottom: 0; }.data-table td:first-child, .data-table th:first-child { padding-left: 23px; }.data-table td:last-child, .data-table th:last-child { padding-right: 23px; }.data-table td > strong, .data-table td > small, .data-table td > a, .data-table td > span { display: block; }.data-table td strong { color: var(--navy); font-size: 11px; }.data-table td small { margin-top: 4px; color: #9aabb3; font-size: 9px; }.table-primary { color: #447f9b; font-size: 11px; font-weight: 700; }.table-primary:hover { color: var(--navy); }.icon-link { color: #87a4b2; font-size: 19px; text-align: right; }.icon-link:hover { color: var(--navy); }.status-pill { display: inline-flex !important; align-items: center; width: fit-content; min-height: 23px; padding: 0 8px; border-radius: 7px; font-size: 9px !important; font-weight: 700; white-space: nowrap; }.status-pending { color: #8a7011; background: #fff5ce; }.status-paid { color: #247b5a; background: #def6e9; }.status-failed, .status-refunded { color: #a04946; background: #fde5e3; }.status-order-new { color: #4c7591; background: #e7f2fa; }.status-order-processing { color: #806317; background: #fff1c9; }.status-order-approved, .status-order-completed { color: #247b5a; background: #def6e9; }.status-order-cancelled { color: #9c4e4a; background: #fde5e3; }.quick-panel { align-self: start; }.quick-link { display: grid; grid-template-columns: 34px 1fr 15px; align-items: center; gap: 10px; margin: 0 14px; padding: 15px 9px; border-top: 1px solid #edf2f4; }.quick-link:first-of-type { border-top: 0; }.quick-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-weight: 800; }.quick-icon-yellow { color: #a38314; background: #fff5c7; }.quick-icon-blue { color: #3e75b6; background: #e5f0fc; }.quick-icon-green { color: #299267; background: #ddf6e9; }.quick-link strong, .quick-link small { display: block; }.quick-link strong { color: var(--navy); font-size: 11px; }.quick-link small { margin-top: 3px; color: #9aabb3; font-size: 9px; }.quick-link > b { color: #94abb5; font-size: 18px; }.quick-link:hover { background: #fbfdfe; }.empty-panel { display: grid; place-items: center; min-height: 220px; padding: 30px; text-align: center; }.empty-panel > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 13px; border-radius: 12px; color: #7493a0; background: #edf5f6; font-size: 22px; }.empty-panel strong { color: var(--navy); font-size: 13px; }.empty-panel p { margin: 5px 0 0; color: #9aabb3; font-size: 10px; }.filter-panel { margin-bottom: 16px; padding: 13px; }.filter-form { display: flex; align-items: center; gap: 8px; }.filter-form select, .search-field { height: 41px; border: 1px solid #dfe9ee; border-radius: 9px; background: #fff; color: #617985; font-size: 11px; }.filter-form select { padding: 0 10px; }.search-field { display: flex; align-items: center; min-width: 260px; padding: 0 11px; }.search-field span { margin-right: 7px; color: #98aeb9; font-size: 18px; }.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }.filter-form .button { min-height: 41px; margin-left: auto; font-size: 11px; }.panel-table { overflow: hidden; }.data-table-large td { padding-top: 17px; padding-bottom: 17px; }.pagination-wrap { padding: 16px 23px; border-top: 1px solid #edf2f4; }.pagination-wrap nav { display: flex; justify-content: center; }.pagination-wrap nav > div:first-child { display: none; }.pagination-wrap nav > div:last-child > span, .pagination-wrap nav > div:last-child > a { display: inline-flex; gap: 5px; }.pagination-wrap a, .pagination-wrap span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border: 1px solid #e0e9ed; color: #71909f; background: #fff; font-size: 10px; }.pagination-wrap span[aria-current="page"] { color: var(--navy); border-color: var(--navy); background: #eaf2f5; }.pagination-wrap a:hover { color: var(--navy); border-color: #8daab8; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .7fr); gap: 15px; }.detail-main, .detail-aside { display: flex; flex-direction: column; gap: 15px; }.detail-card, .action-card { overflow: hidden; }.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 25px; padding: 0 23px 25px; }.info-grid div { min-width: 0; }.info-grid span, .info-grid strong { display: block; }.info-grid span { margin-bottom: 5px; color: #9aabb3; font-size: 9px; }.info-grid strong { overflow-wrap: anywhere; color: var(--navy); font-size: 12px; }.info-full { grid-column: 1 / -1; }.info-note { padding: 10px; border-radius: 8px; color: #667f8b !important; background: #f5f8fa; font-weight: 500; line-height: 1.6; }.package-detail-row { display: flex; align-items: center; gap: 13px; margin: 0 23px; padding: 15px; border-radius: 11px; background: #f5f9fa; }.package-mini-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 11px; color: #428c9b; background: #dff3f3; font-size: 20px; }.package-detail-row > div:nth-child(2) { min-width: 0; flex: 1; }.package-detail-row strong, .package-detail-row span { display: block; }.package-detail-row strong { color: var(--navy); font-size: 12px; }.package-detail-row span { margin-top: 3px; color: #8da1aa; font-size: 9px; }.package-detail-price { text-align: right; }.package-detail-price strong { font-family: var(--font-display); font-size: 14px; }.amount-breakdown { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; padding: 20px 23px 23px; }.amount-breakdown div { display: flex; flex-direction: column; gap: 4px; }.amount-breakdown span { color: #9aabb3; font-size: 9px; }.amount-breakdown strong { color: var(--navy); font-size: 11px; }.amount-total { grid-column: 1 / -1; flex-direction: row !important; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 16px; border-top: 1px solid #e8eef1; }.amount-total strong { font-family: var(--font-display); font-size: 21px; }.action-card { padding-bottom: 23px; }.action-card .panel-heading { padding-bottom: 10px; }.action-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #947617; background: #fff3c8; font-family: var(--font-display); font-size: 10px; font-weight: 700; }.action-icon-blue { color: #4b7db7; background: #e5f0fc; font-size: 18px; }.action-amount { margin: 0 23px 15px; color: var(--navy); font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.06em; }.paid-info { margin: 0 23px 15px; padding: 9px; border-radius: 8px; color: #247b5a; background: #e4f8ed; font-size: 9px; }.paid-info span { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 4px; border-radius: 50%; color: #fff; background: #47b987; font-size: 9px; }.stack-form { display: flex; flex-direction: column; gap: 13px; margin: 0 23px; }.stack-form .button { min-height: 43px; font-size: 11px; }.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }.form-panel { max-width: 780px; padding: 28px; }.admin-form-grid { gap: 18px 14px; }.checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 13px; border: 1px solid #e0eaee; border-radius: 10px; background: #f8fbfc; }.checkbox-field input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--navy); }.checkbox-field strong, .checkbox-field small { display: block; }.checkbox-field strong { color: var(--navy); font-size: 11px; }.checkbox-field small { margin-top: 2px; color: #94a7af; font-size: 9px; }.package-admin-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.package-admin-card { padding: 20px; }.package-admin-head { display: flex; align-items: center; justify-content: space-between; }.package-admin-capacity { margin-top: 21px; color: #7693a1; font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.07em; }.package-admin-card h2 { margin: 5px 0 8px; color: var(--navy); font-size: 17px; }.package-admin-card p { min-height: 39px; margin-bottom: 15px; color: #93a4ac; font-size: 10px; line-height: 1.6; }.package-admin-price { display: block; padding-top: 14px; border-top: 1px solid #e8eef1; color: var(--navy); font-family: var(--font-display); font-size: 21px; }.package-admin-price small { margin-left: 3px; color: #9babb3; font-family: var(--font-body); font-size: 9px; font-weight: 500; }.package-admin-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }.package-admin-actions form { margin: 0; }.icon-button-danger { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #f1d8d7; border-radius: 9px; color: #c26864; background: #fff8f7; font-size: 18px; }.icon-button-danger:hover { background: #fde9e7; }
/* Login */
.login-page { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 35px 20px; overflow: hidden; background: var(--navy); }.login-decoration { position: absolute; border: 1px solid rgba(97,214,223,.13); border-radius: 50%; }.login-decoration-one { top: -350px; right: -100px; width: 700px; height: 700px; box-shadow: 0 0 0 90px rgba(97,214,223,.025); }.login-decoration-two { bottom: -450px; left: -220px; width: 650px; height: 650px; border-color: rgba(255,207,66,.1); }.login-card { position: relative; width: min(100%, 455px); padding: 38px; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.22); }.login-brand { color: var(--navy); }.login-brand small { color: #8299a6; }.login-intro { margin: 58px 0 26px; }.login-intro h1 { margin: 14px 0 12px; color: var(--navy); font-size: 39px; }.login-intro p { margin: 0; color: var(--muted); font-size: 12px; }.login-form { display: flex; flex-direction: column; gap: 17px; }.login-form .button { margin-top: 4px; }.login-card .flash { margin-top: 18px; }.back-home { display: block; margin-top: 29px; color: #8298a4; font-size: 10px; text-align: center; }.back-home:hover { color: var(--navy); }

@media (max-width: 1050px) {
    .hero-grid { gap: 20px; }.hero-art { transform: scale(.9); transform-origin: right center; }.package-grid { grid-template-columns: repeat(2, 1fr); }.package-card { min-height: 400px; }.package-card > p { min-height: auto; }.benefit-grid { gap: 50px; }.admin-content { padding-right: 25px; padding-left: 25px; }.admin-topbar { padding: 0 25px; }.stat-grid { grid-template-columns: repeat(2,1fr); }.admin-two-col { grid-template-columns: 1fr; }.quick-panel { display: grid; grid-template-columns: repeat(3,1fr); }.quick-panel .panel-heading { grid-column: 1/-1; }.quick-link { margin: 0 7px 14px; border-top: 0; }
}
@media (max-width: 760px) {
    .container { width: min(100% - 34px, 600px); }.section { padding: 75px 0; }.site-header { position: absolute; }.nav-wrap { min-height: 72px; }.nav-toggle { display: block; }.main-nav { position: absolute; top: 65px; right: 17px; left: 17px; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(8,29,52,.97); box-shadow: 0 15px 30px rgba(0,0,0,.2); }.main-nav.is-open { display: flex; }.main-nav a { padding: 12px; }.main-nav .nav-cta { justify-content: center; margin-top: 5px; }.hero { min-height: auto; padding: 130px 0 0; }.hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }.hero-copy { padding-bottom: 0; }.hero-copy h1 { font-size: clamp(45px, 13vw, 68px); }.hero-lead { font-size: 14px; }.hero-proof { margin-top: 31px; }.hero-art { min-height: 320px; margin: -8px auto 0; transform: scale(.82); transform-origin: top center; }.art-card { width: 430px; }.hero-bottom { grid-template-columns: repeat(2,1fr); gap: 20px 12px; padding: 5px 0 27px; }.hero-stat { padding-left: 12px; }.hero-stat:nth-child(3) { padding-left: 0; border-left: 0; }.hero-stat-note { justify-content: flex-start; }.announcement-inner { justify-content: flex-start; gap: 9px; overflow: hidden; white-space: nowrap; font-size: 9px; }.announcement-inner > span:first-child, .announcement-end { font-size: 13px; }.announcement-divider { height: 12px; }.heading-row { display: block; }.heading-note { margin-top: 18px; }.package-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.package-card { min-height: 0; padding: 19px 15px 16px; border-radius: 15px; }.package-top { margin-bottom: 16px; }.package-capacity { font-size: 24px; }.package-tag { padding: 4px 5px; font-size: 7px; }.package-card h3 { min-height: 0; font-size: 14px; }.package-card > p { font-size: 10px; }.package-price { margin-top: 16px; font-size: 21px; }.package-price small { font-size: 9px; }.package-price span { font-size: 8px; }.package-features { min-height: 85px; margin-bottom: 15px; }.package-features span { font-size: 9px; }.package-features b { width: 12px; height: 12px; font-size: 7px; }.package-card .button { min-height: 42px; padding: 0 8px; font-size: 10px; }.benefit-grid, .order-grid, .faq-grid { grid-template-columns: 1fr; gap: 45px; }.benefit-section, .order-section { padding: 77px 0; }.benefit-copy h2, .order-intro h2 { font-size: 42px; }.benefit-item { grid-template-columns: 37px 1fr 22px; gap: 11px; }.benefit-item p { font-size: 10px; }.steps-grid { grid-template-columns: 1fr; gap: 10px; }.step-card { min-height: 185px; }.step-icon { margin-bottom: 22px; }.step-card p { max-width: 100%; }.order-intro { padding-top: 0; }.order-form-card { padding: 20px 15px; border-radius: 17px; }.form-grid { gap: 13px 9px; }.field input, .field select { height: 41px; }.payment-options { grid-template-columns: 1fr 1fr; }.payment-option { gap: 6px; padding: 7px; }.payment-option strong { font-size: 9px; }.payment-option em { font-size: 7px; }.faq-grid h2 { font-size: 38px; }.footer-grid { grid-template-columns: 1fr; gap: 19px; }.footer-meta { align-items: flex-start; }.success-card { padding: 30px 20px; }.success-card h1 { font-size: 30px; }.success-actions { flex-direction: column; }.login-card { padding: 28px 22px; }.login-intro { margin-top: 47px; }.admin-sidebar { transform: translateX(-100%); transition: transform .25s ease; }.admin-sidebar.is-open { transform: translateX(0); box-shadow: 18px 0 40px rgba(0,0,0,.2); }.sidebar-close { display: block; }.admin-overlay { position: fixed; z-index: 19; inset: 0; display: none; background: rgba(5,19,34,.5); }.admin-overlay.is-open { display: block; }.admin-main { width: 100%; margin-left: 0; }.admin-topbar { height: 72px; padding: 0 18px; }.sidebar-open { display: block; margin-right: 13px; }.admin-topbar > div { flex: 1; }.view-site-link { display: none; }.admin-content { padding: 28px 17px 50px; }.admin-page-heading { display: block; margin-bottom: 25px; }.admin-page-heading .button { margin-top: 18px; }.admin-page-heading h1 { font-size: 29px; }.heading-actions { margin-top: 15px; }.stat-grid { gap: 9px; }.stat-card { min-height: 125px; padding: 16px; }.stat-card strong { margin-top: 11px; font-size: 22px; }.stat-card > i { top: 14px; right: 14px; width: 27px; height: 27px; }.quick-panel { display: block; }.quick-link { margin: 0 14px; border-top: 1px solid #edf2f4; }.filter-form { align-items: stretch; flex-direction: column; }.search-field { min-width: 0; }.filter-form select, .filter-form .button { width: 100%; }.filter-form .button { margin-left: 0; }.panel-heading { padding-right: 16px; padding-left: 16px; }.data-table td:first-child, .data-table th:first-child { padding-left: 16px; }.data-table td:last-child, .data-table th:last-child { padding-right: 16px; }.data-table th, .data-table td { padding-right: 10px; padding-left: 10px; }.detail-grid { grid-template-columns: 1fr; }.detail-statuses { margin-top: 14px; }.info-grid { padding-right: 16px; padding-left: 16px; }.package-detail-row { margin-right: 16px; margin-left: 16px; }.amount-breakdown { padding-right: 16px; padding-left: 16px; }.action-card .panel-heading { padding-right: 16px; padding-left: 16px; }.action-amount, .stack-form { margin-right: 16px; margin-left: 16px; }.package-admin-grid { grid-template-columns: 1fr; }.form-panel { padding: 18px 15px; }.admin-form-grid { grid-template-columns: 1fr; }.admin-form-grid .field-full { grid-column: auto; }.form-actions { flex-direction: column-reverse; }.form-actions .button { width: 100%; }
}
@media (max-width: 420px) {
    .package-grid { grid-template-columns: 1fr; }.package-card { min-height: 0; }.package-features { min-height: 0; }.hero-art { transform: scale(.68); margin-bottom: -60px; }.hero-copy h1 { font-size: 45px; }.hero-actions .button { width: 100%; }.hero-stat strong { font-size: 15px; }.payment-options { grid-template-columns: 1fr; }.success-summary { grid-template-columns: 1fr; }
}

/* Light-blue brochure palette */
:root {
    --navy: #2b91b7;
    --navy-2: #69cddd;
    --ink: #21485d;
    --soft: #effafd;
}

.section-soft { background: #effafd; }
.section-dark { background: linear-gradient(135deg, #69cddd 0%, #2b91b7 62%, #247fa7 100%); }
.benefit-section, .order-section { background: linear-gradient(135deg, #3aa5c2 0%, #2b91b7 65%, #247fa7 100%); }
.button-dark { background: #2b91b7; box-shadow: 0 8px 18px rgba(28, 119, 153, .2); }
.button-dark:hover { background: #217fa5; box-shadow: 0 12px 24px rgba(28, 119, 153, .28); }
.floating-badge { background: rgba(28, 125, 158, .88); box-shadow: 0 10px 22px rgba(16, 106, 139, .18); }
.site-footer { color: #d7f1f4; background: #1e7d9e; }
.login-page { background: linear-gradient(135deg, #69cddd 0%, #2b91b7 62%, #247fa7 100%); }
.admin-body { background: #effafd; }
.admin-sidebar { background: linear-gradient(180deg, #2e9cbd 0%, #1f7fa4 100%); }
.main-nav { color: #e6f8fa; }
.admin-profile { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.1); }
.admin-nav a:hover, .admin-nav a.active { background: rgba(255,255,255,.15); }
.step-card-active, .stat-card-dark { border-color: #2b91b7; background: #2b91b7; }
.main-nav { --navy: #1f789d; }

@media (max-width: 760px) {
    .main-nav { background: rgba(31, 127, 164, .97); }
}

.field select:disabled {
    color: #a2b2bc;
    cursor: not-allowed;
    background: #f2f7f9;
}

.map-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}
.map-field-heading > span {
    display: block;
    margin-bottom: 0;
    color: #5c7382;
    font-size: 10px;
    font-weight: 700;
}
.map-field-heading > span i { color: var(--red); font-style: normal; }
.map-location-button {
    padding: 5px 9px;
    border: 1px solid #b8dce3;
    border-radius: 7px;
    color: #247fa7;
    background: #f1fbfd;
    font-size: 9px;
    font-weight: 700;
}
.map-location-button:hover:not(:disabled) {
    border-color: #72bdc9;
    background: #e4f7fa;
}
.map-location-button:disabled {
    cursor: wait;
    opacity: .65;
}
.map-search-row {
    position: relative;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.map-search-input-wrap {
    position: relative;
    min-width: 0;
    flex: 1;
}
.map-search-input-wrap input {
    min-width: 0;
}
.map-search-button {
    min-width: 80px;
    padding: 0 12px;
    border: 1px solid #b8dce3;
    border-radius: 9px;
    color: #fff;
    background: #2b91b7;
    font-size: 10px;
    font-weight: 700;
}
.map-search-button:hover:not(:disabled) { background: #217fa5; }
.map-search-button:disabled { cursor: wait; opacity: .65; }
.map-suggestions {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid #c9e1e6;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 25px rgba(27, 98, 122, .16);
}
.map-suggestion {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: #315d6e;
    background: #fff;
    font-size: 10px;
    line-height: 1.4;
    text-align: left;
}
.map-suggestion-empty {
    padding: 10px 12px;
    color: #8a9da7;
    font-size: 10px;
}
.map-suggestion + .map-suggestion { border-top: 1px solid #edf3f5; }
.map-suggestion:hover, .map-suggestion:focus { color: #1d7597; background: #effafd; }
.installation-map {
    z-index: 1;
    width: 100%;
    height: 285px;
    overflow: hidden;
    border: 1px solid #dae5eb;
    border-radius: 12px;
    background: #eaf5f7;
}
.map-help {
    margin: 7px 0 0;
    color: #8a9da7;
    font-size: 9px;
    line-height: 1.5;
}
.leaflet-control-attribution {
    font-size: 8px;
}

.location-map-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    color: #2787a8;
    font-size: 10px;
    font-weight: 700;
}
.location-coordinates {
    display: block;
    margin-top: 4px;
    color: #8a9da7;
    font-size: 9px;
    font-weight: 400;
}

@media (max-width: 420px) {
    .map-search-row { flex-direction: column; }
    .map-search-button { min-height: 40px; }
}

/* Payment settings */
.payment-page-heading { margin-bottom: 25px; }
.payment-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(285px, 350px); gap: 16px; align-items: start; }
.payment-channel-panel { min-width: 0; overflow: hidden; }
.payment-panel-heading { align-items: center; }
.payment-heading-note { display: inline-flex; align-items: center; min-height: 27px; padding: 0 10px; border-radius: 999px; color: #277d69; background: #e0f8ed; font-size: 10px; font-weight: 700; }
.payment-table-wrap { overflow-x: auto; }
.payment-settings-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.payment-settings-table th { padding: 13px 18px; border-top: 1px solid #edf2f4; border-bottom: 1px solid #e6eef1; color: #8aa0ad; background: #fbfcfd; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.payment-settings-table td { padding: 16px 18px; border-bottom: 1px solid #edf2f4; color: var(--ink); font-size: 12px; vertical-align: middle; }
.payment-settings-table tbody tr:last-child td { border-bottom: 0; }
.payment-settings-table td strong, .payment-settings-table td small { display: block; }
.payment-settings-table td strong { color: var(--navy); font-size: 12px; }
.payment-settings-table td small { margin-top: 2px; color: #8ba1ad; font-size: 10px; }
.payment-settings-table td:first-child { min-width: 160px; }
.payment-settings-table td:nth-child(2) { min-width: 135px; }
.payment-channel-name { font-size: 14px !important; }
.payment-provider-select { width: 205px; height: 40px; padding: 0 12px; border: 1px solid #dce7ec; border-radius: 9px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; }
.payment-provider-select:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(105, 205, 221, .16); }
.payment-provider-manual { display: inline-flex; align-items: center; min-height: 40px; color: #637d8a; font-size: 12px; font-weight: 600; }
.payment-status-control { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.payment-status-checkbox { width: 15px; height: 15px; accent-color: #2b91b7; }
.payment-status-pill { display: inline-flex; align-items: center; min-height: 29px; padding: 0 11px; border-radius: 999px; white-space: nowrap; font-size: 10px; font-weight: 700; }
.payment-status-pill.is-active { color: #1c986c; background: #e2f8ed; }
.payment-status-pill.is-inactive { color: #6f8794; background: #eef3f6; }
.payment-save-button { min-height: 37px; padding: 0 15px; border: 1px solid #b9c8ff; border-radius: 9px; color: #3048ce; background: #fff; font-size: 11px; font-weight: 700; }
.payment-save-button:hover { border-color: #7b91f2; background: #f6f8ff; }
.payment-empty-panel { min-height: 210px; }
.payment-settings-aside { display: flex; flex-direction: column; gap: 16px; }
.payment-side-card { padding: 22px; }
.payment-side-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.payment-side-heading h2 { margin: 7px 0 0; color: var(--navy); font-size: 20px; }
.payment-side-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; color: #9a7a13; background: #fff2bd; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.payment-side-description { margin: 13px 0 20px; color: #879aa4; font-size: 11px; line-height: 1.6; }
.payment-mdr-form { display: flex; flex-direction: column; gap: 18px; }
.payment-mdr-form .field { display: flex; flex-direction: column; gap: 6px; }
.payment-mdr-form .field > span, .payment-bearer-field legend { color: #627b88; font-size: 10px; font-weight: 700; }
.payment-mdr-form .field small { color: #95a6ae; font-size: 9px; }
.payment-percent-input { display: flex; align-items: center; overflow: hidden; height: 42px; border: 1px solid #dce7ec; border-radius: 9px; background: #fff; }
.payment-percent-input:focus-within { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(105, 205, 221, .16); }
.payment-percent-input input { width: 100%; height: 100%; padding: 0 12px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.payment-percent-input b { padding: 0 13px; color: #8da3ad; font-size: 12px; }
.payment-bearer-field { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; border: 0; }
.payment-bearer-field legend { margin-bottom: 2px; padding: 0; }
.payment-radio-option { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid #e4edf0; border-radius: 10px; cursor: pointer; }
.payment-radio-option:has(input:checked) { border-color: #91d5dc; background: #f1fbfc; }
.payment-radio-option input { width: 15px; height: 15px; accent-color: #2b91b7; }
.payment-radio-option strong, .payment-radio-option small { display: block; }
.payment-radio-option strong { color: var(--navy); font-size: 11px; }
.payment-radio-option small { margin-top: 2px; color: #8fa2aa; font-size: 9px; line-height: 1.4; }
.payment-radio-option em { padding: 4px 7px; border-radius: 6px; color: #628397; background: #eaf2f5; font-size: 8px; font-style: normal; font-weight: 700; }
.payment-integration-card { background: linear-gradient(145deg, #fff 0%, #f5fcfd 100%); }
.payment-integration-status { padding: 5px 8px; border-radius: 999px; color: #a17d14; background: #fff4cb; font-size: 9px; font-weight: 700; }
.payment-integration-status-ready { color: #217c5e; background: #dcf7e9; }
.payment-integration-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 9px; background: #eaf8fb; }
.payment-integration-note > span { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; color: #fff; background: #55b9ca; font-size: 10px; font-weight: 700; }
.payment-integration-note p { margin: 0; color: #5c7a87; font-size: 9px; line-height: 1.5; }
.payment-integration-note code { overflow-wrap: anywhere; font-size: 8px; }
.payment-mdr-cell { display: flex; align-items: stretch; flex-direction: column; gap: 6px; min-width: 155px; }
.payment-mdr-type-select { width: 100%; height: 32px; padding: 0 7px; border: 1px solid #dce7ec; border-radius: 8px; outline: 0; color: #617985; background: #fff; font-size: 10px; }
.payment-mdr-type-select:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(105, 205, 221, .16); }
.payment-row-value { display: flex; align-items: center; width: 100%; height: 35px; overflow: hidden; border: 1px solid #dce7ec; border-radius: 8px; background: #fff; }
.payment-row-value:focus-within { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(105, 205, 221, .16); }
.payment-row-value input { width: 100%; min-width: 0; height: 100%; padding: 0 7px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.payment-row-value b { min-width: 24px; padding-right: 7px; color: #8da3ad; font-size: 10px; text-align: right; }
.payment-bearer-select { width: 151px; height: 35px; padding: 0 8px; border: 1px solid #dce7ec; border-radius: 8px; outline: 0; color: #617985; background: #fff; font-size: 10px; }
.payment-bearer-select:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(105, 205, 221, .16); }
.payment-mdr-info-card { min-height: 275px; }
.payment-global-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; color: #6d7ca3; background: #eef1fb; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.payment-mdr-bearer-form { display: flex; flex-direction: column; gap: 16px; }
.payment-mdr-info-list { display: flex; flex-direction: column; gap: 11px; }
.payment-mdr-info-list > div { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid #e5eef1; border-radius: 9px; background: #fbfdfd; }
.payment-mdr-info-icon { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 7px; color: #fff; background: #2b91b7; font-size: 10px; font-weight: 700; }
.payment-mdr-info-list p, .payment-mdr-info-list strong, .payment-mdr-info-list small { display: block; }
.payment-mdr-info-list p { margin: 0; }
.payment-mdr-info-list strong { color: var(--navy); font-size: 10px; }
.payment-mdr-info-list small { margin-top: 2px; color: #8fa2aa; font-size: 9px; line-height: 1.4; }

@media (max-width: 1100px) {
    .payment-settings-layout { grid-template-columns: 1fr; }
    .payment-settings-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .payment-settings-aside { display: flex; }
    .payment-side-card { padding: 18px 16px; }
    .payment-settings-table { min-width: 980px; }
    .payment-settings-table th, .payment-settings-table td { padding-right: 13px; padding-left: 13px; }
}

/* Payment list: fit the panel without horizontal scrolling */
.payment-settings-layout { grid-template-columns: minmax(0, 1fr); }
.payment-settings-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payment-table-wrap { overflow: visible; }
.payment-settings-table { min-width: 0; table-layout: fixed; }
.payment-settings-table th:nth-child(1), .payment-settings-table td:nth-child(1) { width: 15%; }
.payment-settings-table th:nth-child(2), .payment-settings-table td:nth-child(2) { width: 18%; }
.payment-settings-table th:nth-child(3), .payment-settings-table td:nth-child(3) { width: 16%; }
.payment-settings-table th:nth-child(4), .payment-settings-table td:nth-child(4) { width: 21%; }
.payment-settings-table th:nth-child(5), .payment-settings-table td:nth-child(5) { width: 19%; }
.payment-settings-table th:nth-child(6), .payment-settings-table td:nth-child(6) { width: 11%; }
.payment-settings-table td { overflow-wrap: anywhere; }
.payment-provider-select { width: 100%; max-width: 205px; }
.payment-mdr-cell { min-width: 0; max-width: 180px; }
.payment-mdr-type-select, .payment-row-value { width: 100%; }
.payment-status-control { flex-wrap: wrap; }
.payment-status-pill { white-space: normal; }
.payment-account-summary { overflow-wrap: anywhere; }
.payment-account-missing { color: #b18122 !important; }
.payment-account-button { display: inline-flex; align-items: center; min-height: 27px; margin-top: 7px; padding: 0 9px; border: 1px solid #b9dce3; border-radius: 7px; color: #247fa7; background: #f2fbfc; font-size: 9px; font-weight: 700; }
.payment-account-button:hover { border-color: #68b9c7; background: #e5f7f9; }

.bank-account-modal { width: min(100% - 32px, 520px); padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px rgba(19, 67, 88, .24); }
.bank-account-modal::backdrop { background: rgba(24, 69, 88, .42); backdrop-filter: blur(2px); }
.bank-account-modal-card { position: relative; padding: 29px; }
.bank-account-modal-close { position: absolute; top: 18px; right: 21px; width: 30px; height: 30px; border-radius: 8px; color: #839aaa; background: transparent; font-size: 26px; line-height: 1; }
.bank-account-modal-close:hover { color: var(--navy); background: #effafd; }
.bank-account-modal h2 { margin: 9px 42px 8px 0; color: var(--navy); font-size: 25px; }
.bank-account-modal-intro { margin: 0 0 24px; color: #8097a4; font-size: 12px; line-height: 1.6; }
.bank-account-form { display: flex; flex-direction: column; gap: 17px; }
.bank-account-form .field { display: flex; flex-direction: column; gap: 7px; }
.bank-account-form .field > span { color: #627b88; font-size: 11px; font-weight: 700; }
.bank-account-form .field input { width: 100%; height: 47px; padding: 0 13px; border: 1px solid #dce7ec; border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; }
.bank-account-form .field input:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(105, 205, 221, .16); }
.bank-account-modal-note { padding: 12px; border: 1px solid #f6dfa0; border-radius: 10px; color: #9b6b1e; background: #fff9e8; font-size: 10px; line-height: 1.6; }
.bank-account-modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 19px; border-top: 1px solid #edf2f4; }
.bank-account-modal-actions .button { min-height: 43px; font-size: 11px; }

.password-input-wrap { position: relative; }
.password-input-wrap input { padding-right: 92px; }
.password-toggle { position: absolute; top: 50%; right: 8px; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 8px; border-radius: 7px; color: var(--navy); background: transparent; font-size: 10px; font-weight: 700; transform: translateY(-50%); }
.password-toggle:hover { background: #eaf8fb; }
.password-toggle:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.password-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.ipaymu-status-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; padding: 16px 20px; border-color: #b8e2e6; background: #f1fcfd; }
.ipaymu-status-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ipaymu-status-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; color: #fff; background: var(--navy); font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.ipaymu-status-copy strong, .ipaymu-status-copy p { display: block; }
.ipaymu-status-copy strong { color: var(--navy); font-size: 12px; }
.ipaymu-status-copy p { margin: 3px 0 0; color: #78939f; font-size: 10px; }
.ipaymu-status-copy b { color: var(--navy); font-weight: 700; }
.ipaymu-status-panel form { flex: 0 0 auto; }
.ipaymu-status-panel .button { min-height: 38px; font-size: 10px; }

@media (max-width: 760px) {
    .payment-settings-aside { display: flex; }
    .payment-settings-table { display: block; min-width: 0; }
    .payment-settings-table thead { display: none; }
    .payment-settings-table tbody, .payment-settings-table tr, .payment-settings-table td { display: block; width: 100% !important; }
    .payment-settings-table tr { padding: 10px 0; border-bottom: 1px solid #edf2f4; }
    .payment-settings-table tbody tr:last-child { border-bottom: 0; }
    .payment-settings-table td { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 16px; border: 0; }
    .payment-settings-table td::before { color: #8aa0ad; content: attr(data-label); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .payment-settings-table td:first-child { padding-top: 13px; }
    .payment-settings-table td:last-child { display: flex; justify-content: flex-end; padding-top: 11px; }
    .payment-mdr-cell { width: 100%; max-width: 190px; }
    .payment-provider-select { max-width: 190px; }
    .payment-status-control { justify-content: flex-start; }
    .bank-account-modal-card { padding: 24px 18px; }
    .bank-account-modal-actions { flex-direction: column-reverse; }
    .bank-account-modal-actions .button { width: 100%; }
    .ipaymu-status-panel { align-items: stretch; flex-direction: column; gap: 12px; }
    .ipaymu-status-panel form, .ipaymu-status-panel .button { width: 100%; }
}

/* Installation operations */
.installation-operations-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 15px; padding: 18px 20px; }
.installation-operations-block { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.operations-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: #9a7a13; background: #fff3c8; font-size: 18px; }
.operations-icon-map { color: #397ab2; background: #e5f1fb; }
.operations-copy { min-width: 0; }
.operations-copy > strong, .operations-copy > small { display: block; }
.operations-copy > strong { color: var(--navy); font-size: 12px; }
.operations-copy > small { margin-top: 3px; color: #8a9fa9; font-size: 9px; line-height: 1.5; }
.operations-date-field { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.operations-date-field > span { color: #627b88; font-size: 10px; font-weight: 700; }
.operations-date-field input { height: 35px; padding: 0 9px; border: 1px solid #dce7ec; border-radius: 8px; outline: 0; color: var(--ink); background: #fbfdfe; font-size: 10px; }
.operations-date-field input:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(105, 205, 221, .13); }
.operations-help { color: #a0afb6 !important; }
.map-coordinate-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; color: var(--navy); font-size: 11px; font-weight: 700; }
.map-coordinate-link span { color: #3e8caf; font-size: 9px; }
.map-coordinate-link:hover { color: #167796; }

/* Customer tracking */
.tracking-page { position: relative; min-height: 100vh; overflow: hidden; padding: 34px 20px 55px; color: var(--ink); background: linear-gradient(145deg, #effafd 0%, #d7f1f4 52%, #f9fdfe 100%); }
.tracking-orb { position: absolute; border: 1px solid rgba(43, 145, 183, .14); border-radius: 50%; pointer-events: none; }
.tracking-orb-one { top: -250px; right: -110px; width: 560px; height: 560px; box-shadow: 0 0 0 65px rgba(105, 205, 221, .08); }
.tracking-orb-two { bottom: -330px; left: -190px; width: 500px; height: 500px; border-color: rgba(255, 207, 66, .2); }
.tracking-container { position: relative; z-index: 1; width: min(100%, 920px); margin: 0 auto; }
.tracking-brand { color: var(--navy); }
.tracking-brand small { color: #7896a4; }
.tracking-heading { max-width: 650px; margin: 58px 0 27px; }
.tracking-heading h1 { margin: 14px 0 14px; color: var(--navy); font-size: clamp(39px, 6vw, 65px); }
.tracking-heading h1 em { color: #49aeba; font-style: normal; }
.tracking-heading p { max-width: 540px; margin: 0; color: #6e8997; font-size: 13px; line-height: 1.8; }
.tracking-search { max-width: 760px; padding: 20px; border: 1px solid rgba(255,255,255,.8); border-radius: 17px; background: rgba(255,255,255,.83); box-shadow: 0 18px 50px rgba(37, 123, 148, .1); }
.tracking-search label { display: block; margin-bottom: 7px; color: #577482; font-size: 10px; font-weight: 700; }
.tracking-search-row { display: flex; gap: 9px; }
.tracking-search input { width: 100%; min-width: 0; height: 49px; padding: 0 14px; border: 1px solid #d1e3e8; border-radius: 10px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; text-transform: uppercase; }
.tracking-search input:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(105, 205, 221, .16); }
.tracking-search .button { min-height: 49px; flex: 0 0 auto; }
.tracking-search > small { display: block; margin-top: 8px; color: #91a6ae; font-size: 9px; }
.tracking-alert { display: flex; align-items: center; gap: 9px; max-width: 760px; margin-top: 18px; padding: 13px 15px; border: 1px solid #f3dca1; border-radius: 11px; color: #976f22; background: #fff9e7; font-size: 11px; }
.tracking-alert > span { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; color: #fff; background: #d8a937; font-weight: 700; }
.tracking-alert-cancelled { border-color: #f0c8c6; color: #a85b57; background: #fff4f3; }
.tracking-alert-cancelled > span { background: #d57972; }
.tracking-result-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 42px 0 15px; }
.tracking-result-heading > div span, .tracking-result-heading > div strong { display: block; }
.tracking-result-heading > div span { color: #829ba7; font-size: 10px; }
.tracking-result-heading > div strong { margin-top: 3px; color: var(--navy); font-family: var(--font-display); font-size: 22px; letter-spacing: -.04em; }
.tracking-order-status, .tracking-payment-status { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; font-size: 9px; font-weight: 700; }
.tracking-order-status { min-height: 29px; padding: 0 12px; color: #2d8e67; background: #ddf7e9; }
.tracking-order-status-cancelled { color: #ad5e59; background: #ffe7e5; }
.tracking-result-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 15px; }
.tracking-panel { padding: 24px; border: 1px solid rgba(208, 229, 234, .9); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 12px 35px rgba(37,123,148,.07); }
.tracking-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.tracking-panel-heading h2 { margin: 9px 0 0; color: var(--navy); font-size: 21px; }
.tracking-panel-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #9d7d19; background: #fff2bd; font-family: var(--font-display); font-size: 15px; }
.tracking-panel-icon-blue { color: #3e78b6; background: #e4f1fc; }
.tracking-timeline { margin: 0; padding: 0; list-style: none; }
.tracking-step { position: relative; display: flex; gap: 13px; min-height: 71px; }
.tracking-step:not(:last-child)::after { position: absolute; top: 31px; bottom: 0; left: 14px; width: 1px; background: #dbe9ed; content: ''; }
.tracking-step.is-done:not(:last-child)::after { background: #8cd6c1; }
.tracking-step-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid #d8e7eb; border-radius: 50%; color: #9bb0b9; background: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 700; }
.tracking-step.is-done .tracking-step-marker { border-color: #56bd92; color: #fff; background: #56bd92; }
.tracking-step.is-current .tracking-step-marker { border-color: var(--navy); color: #fff; background: var(--navy); box-shadow: 0 0 0 5px rgba(43,145,183,.12); }
.tracking-step strong { display: block; margin-top: 2px; color: #6e8793; font-size: 12px; }
.tracking-step.is-done strong, .tracking-step.is-current strong { color: var(--navy); }
.tracking-step p { margin: 3px 0 0; color: #9aabb3; font-size: 10px; line-height: 1.5; }
.tracking-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 16px; }
.tracking-detail-list div { min-width: 0; }
.tracking-detail-list span, .tracking-detail-list strong { display: block; }
.tracking-detail-list span { margin-bottom: 4px; color: #91a4ac; font-size: 9px; }
.tracking-detail-list strong { overflow-wrap: anywhere; color: var(--navy); font-size: 11px; }
.tracking-payment-status { margin-top: 6px; min-height: 22px; padding: 0 8px; color: #8e7626; background: #fff4c7; }
.tracking-payment-status-paid { color: #29835e; background: #ddf7e9; }
.tracking-payment-status-failed { color: #a85b57; background: #ffe7e5; }
.tracking-schedule { margin-top: 23px; padding: 14px; border: 1px solid #b8e2e6; border-radius: 11px; background: #f0fcfd; }
.tracking-schedule > span, .tracking-schedule > strong, .tracking-schedule > small { display: block; }
.tracking-schedule > span { color: #5a8593; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tracking-schedule > strong { margin-top: 5px; color: var(--navy); font-family: var(--font-display); font-size: 18px; }
.tracking-schedule > small { margin-top: 4px; color: #82a0aa; font-size: 9px; }
.tracking-schedule-pending { border-color: #eadfb5; background: #fffaf0; }
.tracking-schedule-pending > strong { color: #a1812a; font-size: 14px; }
.tracking-payment-instruction { margin-top: 23px; padding: 17px; }
.tracking-payment-instruction h2 { font-size: 17px; }
.tracking-payment-instruction .payment-qr-frame { width: 190px; min-height: 190px; padding: 8px; }
.tracking-payment-instruction .payment-qr-frame img { width: 172px; height: 172px; }
.tracking-payment-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.tracking-payment-actions .button { min-height: 38px; font-size: 10px; }
.demo-payment-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; padding: 15px 18px; border-color: #ccebdc; background: #f7fffb; }
.demo-payment-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.demo-payment-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: #fff; background: #4dbb88; font-size: 15px; font-weight: 800; }
.demo-payment-copy strong, .demo-payment-copy p { display: block; }
.demo-payment-copy strong { color: #28795b; font-size: 11px; }
.demo-payment-copy p { margin: 3px 0 0; color: #79a08e; font-size: 9px; }
.button-demo-success { min-height: 40px; color: #fff; background: #43ad7c; box-shadow: 0 7px 16px rgba(67, 173, 124, .18); white-space: nowrap; }
.button-demo-success:hover { background: #359c6c; box-shadow: 0 10px 20px rgba(67, 173, 124, .24); }
.detail-aside > .action-card:first-child > .panel-heading > .action-icon { display: none; }
.admin-sidebar { color: #e7f7fa; }
.admin-brand .brand small { color: #c6e9ee; }
.admin-profile strong { color: #fff; font-size: 12px; }
.admin-profile span { color: #c3e6eb; font-size: 10px; }
.nav-label { color: #c8e8ed; font-size: 10px; }
.admin-nav a { color: #e3f5f7; font-size: 13px; font-weight: 700; }
.admin-nav a span { color: #c8e8ed; }
.admin-nav a:hover, .admin-nav a.active { color: #fff; background: rgba(255,255,255,.16); }
.admin-sidebar-footer .status-dot { color: #c9eadb; font-size: 11px; }
.logout-link { color: #d9f0f2; font-size: 13px; font-weight: 700; }
.sidebar-close { color: #d8f0f3; }
.tracking-updated { margin-top: 15px; color: #8ea5ae; font-size: 9px; text-align: right; }
.tracking-updated a { color: var(--navy); font-weight: 700; }
.tracking-back-home { display: block; margin-top: 28px; color: #6c8c99; font-size: 10px; text-align: center; }
.tracking-back-home:hover { color: var(--navy); }

@media (max-width: 760px) {
    .installation-operations-panel { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
    .operations-date-field { align-items: flex-start; flex-direction: column; gap: 5px; }
    .operations-date-field input { width: 100%; }
    .tracking-page { padding: 25px 16px 40px; }
    .tracking-heading { margin-top: 46px; }
    .tracking-heading h1 { font-size: 42px; }
    .tracking-search { padding: 15px; }
    .tracking-search-row { align-items: stretch; flex-direction: column; }
    .tracking-search .button { width: 100%; }
    .tracking-result-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 30px; }
    .tracking-result-grid { grid-template-columns: 1fr; }
    .tracking-panel { padding: 19px 16px; }
    .tracking-payment-actions { flex-direction: column; }
    .tracking-payment-actions .button { width: 100%; }
    .demo-payment-panel { align-items: stretch; flex-direction: column; }
    .demo-payment-panel form, .demo-payment-panel .button { width: 100%; }
}