*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',-apple-system,sans-serif;background:#f5f7fa;color:#1a1a1a}
/* ----------------------------------------------------------------------
Park Planner loader — used in three places:
1. client.html bootstrap (#pp-boot-loader, removed once React mounts)
2. LoginScreen overlay during the WP auto-login round-trip
3. logout.html bridge page
Clean, minimal, no heavy backdrop — a thin conic-gradient sweep ring
with a subtle core dot and brand-blue text. Sits on a near-white sheet
so it blends with the parent WordPress page when iframed instead of
slamming a dark gradient over it.
---------------------------------------------------------------------- */
.pp-loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#1a2a44;animation:ppLoaderFadeIn .25s ease-out}
.pp-loader-overlay.is-leaving{opacity:0;transition:opacity .3s ease}
html.embed .pp-loader-overlay{position:absolute;background:rgba(255,255,255,.85)}
.pp-loader{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;z-index:1}
.pp-loader-ring{position:relative;width:64px;height:64px;border-radius:50%;
background:conic-gradient(from 0deg,rgba(106,179,248,0) 0%,rgba(106,179,248,.15) 25%,#2b7dc9 80%,#0d2b5e 100%);
-webkit-mask:radial-gradient(circle 30px at center,transparent 99%,#000 100%);
mask:radial-gradient(circle 30px at center,transparent 99%,#000 100%);
animation:ppLoaderSpin 1s linear infinite}
.pp-loader-ring::after{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:#2b7dc9;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(106,179,248,.18);animation:ppLoaderPulse 1.6s ease-in-out infinite}
.pp-loader-text{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.pp-loader-title{font-size:15px;font-weight:600;letter-spacing:.3px;color:#0d2b5e}
.pp-loader-sub{font-size:13px;color:#5a6b7e;letter-spacing:.2px;font-weight:400}
@keyframes ppLoaderSpin{to{transform:rotate(360deg)}}
@keyframes ppLoaderPulse{0%,100%{box-shadow:0 0 0 4px rgba(106,179,248,.18)}50%{box-shadow:0 0 0 8px rgba(106,179,248,.05)}}
@keyframes ppLoaderFadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
.pp-loader-ring,.pp-loader-ring::after{animation:none}
}
.gate{min-height:100vh;background:linear-gradient(135deg,#0d2b5e 0%,#1e4788 45%,#6ab3f8 100%);padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.gate::before{content:'';position:absolute;top:-30%;left:-15%;width:60%;height:60%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);pointer-events:none;animation:gateBlob 18s ease-in-out infinite}
.gate::after{content:'';position:absolute;bottom:-30%;right:-15%;width:60%;height:60%;background:radial-gradient(circle,rgba(106,179,248,.18) 0%,transparent 70%);pointer-events:none;animation:gateBlob 22s ease-in-out infinite reverse}
@keyframes gateBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.1)}}
html.embed .gate::before,html.embed .gate::after{display:none}
@keyframes gateFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* Embed mode (when iframe is loaded with ?embed=1). Strips the dark
background and vertical centering so the login card sits flush on the
parent WordPress page — and collapses any min-heights so the parent
iframe can shrink to exactly the content height. */
html.embed,html.embed body{background:transparent;min-height:0;height:auto;overflow:hidden}
html.embed #root{min-height:0}
html.embed .gate{min-height:0;height:auto;background:transparent;padding:0;display:block}
html.embed .gate-container{padding:0}
html.embed .gate-card{box-shadow:none;border-radius:12px;padding:50px 24px;margin:0}
html.embed .gate-box{box-shadow:none;margin-bottom:12px;padding:24px}
html.embed .app-wrap{padding-top:0}
.gate-container{max-width:1100px;width:100%;position:relative;z-index:1}
.gate-trust{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:#9aa6b8;font-weight:500}
.gate-trust .stars{color:#f5a623;font-size:14px;letter-spacing:2px;margin-right:4px}
.gate-trust .dot{color:#c4d0e0;font-size:8px}
html.embed .gate-trust{display:none}
.gate-card{background:#fff;border-radius:20px;padding:48px;box-shadow:0 12px 40px rgba(43,125,201,.12);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;animation:gateFadeIn .55s ease-out}
.gate-left {
text-align: center;
position: relative;
padding: 12px 20px 40px;
border: 1px solid #e4ebf3;
border-radius: 20px;
box-shadow: 0 30px 80px -20px rgba(15, 42, 94, 0.18), 0 8px 24px -8px rgba(15, 42, 94, 0.06), inset 0 1px 0 rgba(255,255,255,1);
}
.gate-logo-wrap{display:inline-block;margin-bottom:18px;line-height:0}
.gate-logo-wrap img{height:100px;margin:0;display:block;filter:none}
.gate-left h1{font-size:clamp(28px,3.1vw,38px);background:linear-gradient(135deg,#2B7DC9 0%,#4ea0e6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;font-weight:700;line-height:1.15;letter-spacing:-.5px}
.gate-left .sub{font-size:clamp(14px,1.5vw,16px);color:#5a6b7e;margin-bottom:22px;line-height:1.55;padding:0 8px}
.gate-left .sub em,.gate-right h2 em{font-style:italic;font-family:Georgia,'Times New Roman',serif;font-weight:500;color:#2B7DC9}
.gate-right .included{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#2B7DC9 0%,#6ab3f8 100%);color:#fff;font-size:11.5px;font-weight:700;padding:7px 16px;border-radius:999px;margin-bottom:14px;letter-spacing:1.2px;text-transform:uppercase;box-shadow:0 4px 14px rgba(43,125,201,.32)}
.gate-right .included .dot{width:6px;height:6px;background:#ffd166;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px rgba(255,209,102,.3)}
.gate-right h2{font-size:clamp(28px,3.4vw,40px);color:#0d1834;margin-bottom:10px;font-weight:800;line-height:1.1;letter-spacing:-.6px}
.gate-right .rsub{font-size:clamp(14px,1.5vw,16px);color:#5a6b7e;margin-bottom:24px;line-height:1.6;max-width:540px}
.gate-label{text-align:left;font-size:13.5px;font-weight:600;color:#2a3648;margin-bottom:8px;display:flex;align-items:center;gap:8px;letter-spacing:.2px}
.gate-label::before{content:'';width:14px;height:2px;background:#2B7DC9;border-radius:2px;display:inline-block}
.gate-input-field{position:relative;margin-bottom:14px}
.gate-input-field .gate-input{margin-bottom:0;padding-right:48px}
.gate-input-icon{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#eef4fb;border-radius:8px;color:#2B7DC9;font-size:14px;pointer-events:none}
.gate-access-link{margin-top:6px;font-size:14.5px;color:#2B7DC9;cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:none;width:100%;text-align:center;font-weight:700;transition:color .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px 0}
.gate-access-link:hover{color:#0d2b5e}
.gate-access-link .chev{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;text-decoration:none}
.gate-access-link .chev.open{transform:rotate(-135deg) translateY(-2px)}
.gate-prev-note{font-size:13px;color:#7a8699;margin-top:6px;margin-bottom:14px;line-height:1.5;text-align:center;padding:0 8px}
.gate-box{background:#fff;border-radius:16px;padding:40px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.2);margin-bottom:24px}
.gate-box img{height:50px;margin-bottom:16px}
.gate-box h1{font-size:22px;color:#6ab3f8;margin-bottom:4px}
.gate-box p{font-size:13px;color:#888;margin-bottom:24px}
.gate-tabs{display:flex;margin-bottom:24px;border-radius:10px;overflow:hidden;border:2px solid #6ab3f8}
.gate-tab{flex:1;padding:12px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:#fff;color:#6ab3f8;transition:all .2s}
.gate-tab.active{background:#6ab3f8;color:#fff}
.gate-input{width:100%;padding:13px 16px;background:#fff;border:1px solid #d8e0eb;border-radius:10px;font-size:15px;text-align:left;margin-bottom:14px;outline:none;color:#1a1a1a;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.4;transition:border-color .15s ease,background .15s ease}
.gate-input::placeholder{color:#a7b4c6}
.gate-input:hover{border-color:#b8c8dc}
.gate-input:focus{border-color:#6ab3f8;background:#fff;box-shadow:none}
.gate-input:-webkit-autofill,.gate-input:-webkit-autofill:hover,.gate-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset!important;box-shadow:0 0 0 1000px #fff inset!important;-webkit-text-fill-color:#1a1a1a!important;transition:background-color 5000s ease-in-out 0s}
.gate-input.code{letter-spacing:3px;font-weight:700;text-transform:uppercase;text-align:center}
.gate-input.email{letter-spacing:0;font-weight:400;font-size:15px}
.gate-or{display:flex;align-items:center;gap:14px;margin:8px 0 10px;color:#a7b4c6;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.gate-or::before,.gate-or::after{content:'';flex:1;height:1px;background:#e4e8ef}
.gate-access-panel{background:#f8faff;border:1px solid #e4ecf5;border-radius:10px;padding:14px;margin-top:12px;animation:gateFadeIn .25s ease-out}
.gate-access-panel .gate-input{margin-bottom:10px}
.gate-access-panel .gate-btn{margin-bottom:0}
.gate-btn{width:100%;padding:14px 20px;background:linear-gradient(135deg,#4ea0e6 0%,#2B7DC9 100%);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:10px;letter-spacing:.3px;transition:transform .15s,box-shadow .2s,background .25s;box-shadow:0 8px 22px rgba(43,125,201,.35);min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.gate-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(43,125,201,.45);background:linear-gradient(135deg,#2B7DC9 0%,#1f5fa5 100%)}
.gate-btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(43,125,201,.35)}
.gate-btn .arrow{transition:transform .2s;display:inline-block;font-weight:700}
.gate-btn:hover .arrow{transform:translateX(3px)}
.gate-btn.green{background:linear-gradient(135deg,#2ecc71 0%,#27ae60 100%);box-shadow:0 6px 18px rgba(39,174,96,.35)}
.gate-btn.green:hover{background:linear-gradient(135deg,#27ae60 0%,#1e8449 100%);box-shadow:0 10px 24px rgba(39,174,96,.45)}
.gate-btn.gray{background:#555;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.err{color:#c0392b;font-size:14px;font-weight:500;margin-top:10px;padding:10px 14px;background:rgba(231,76,60,.08);border-radius:10px;border-left:3px solid #e74c3c;text-align:left!important;line-height:1.45}
.free-note{font-size:11px;color:#888;margin-top:10px;line-height:1.5}
.free-note a{color:#6ab3f8}
.gate-help{margin-top:24px;padding-top:18px;border-top:1px solid #eef0f4}
.help-btn{background:#fff;border:1.5px solid #e4e8ef;color:#2a3648;font-size:14px;font-weight:600;padding:11px 20px;border-radius:10px;cursor:pointer;width:100%;transition:all .2s;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.help-btn .qicon{width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1}
.help-btn:hover{border-color:#2B7DC9;color:#2B7DC9;background:#f0f7ff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(43,125,201,.18)}
.help-popup{display:none;background:linear-gradient(135deg,#f8faff 0%,#eef5ff 100%);border:1px solid #d0dff5;border-radius:12px;padding:16px 18px;margin-top:12px;text-align:left;animation:gateFadeIn .3s ease-out}
.help-popup.show{display:block}
.help-popup h4{font-size:15px;color:#0d2b5e;margin-bottom:6px;font-weight:600}
.help-popup p{font-size:14px;color:#5a6b7e;line-height:1.5}
.help-popup a{color:#6ab3f8;font-weight:600}
.preview{background:#fff;border-radius:16px;padding:32px;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.preview h2{font-size:20px;color:#6ab3f8;margin-bottom:6px;text-align:center}
.preview .psub{font-size:13px;color:#888;text-align:center;margin-bottom:20px}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.preview-card{background:#fff;border:1px solid #e4ecf5;border-radius:14px;padding:22px 16px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.preview-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(43,125,201,.15);border-color:#c4d6f0}
.preview-card .icon{width:52px;height:52px;background:linear-gradient(135deg,#eef4fb 0%,#dbe7f5 100%);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px;line-height:1;color:#2B7DC9}
.preview-card h4{font-size:14.5px;color:#0d1834;margin-bottom:6px;font-weight:700}
.preview-card p{font-size:12.5px;color:#5a6b7e;line-height:1.5}
.preview-features{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:24px;padding:22px 24px;background:#fff;border:1px solid #e4ecf5;border-radius:14px}
.preview-feat{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#1f2a4d;line-height:1.4;font-weight: 500;}
.preview-feat .chk{color:#fff;font-weight:700;background:#27ae60;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;box-shadow:0 2px 6px rgba(39,174,96,.25)}
.upgrade-box{margin-top:22px;padding:22px 26px;border:none;border-radius:16px;background:linear-gradient(135deg,#0d2b5e 0%,#1f5fa5 50%,#2B7DC9 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;box-shadow:0 12px 30px rgba(43,125,201,.3);position:relative;overflow:hidden}
.upgrade-box::after{content:'';position:absolute;top:-40%;right:-15%;width:60%;height:180%;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 65%);pointer-events:none}
.upgrade-text{position:relative;z-index:1;flex:1 1 240px;min-width:0}
.upgrade-label{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#ffd166;margin-bottom:6px;text-transform:uppercase}
.upgrade-box h3{color:#fff;font-size:18px;margin-bottom:4px;font-weight:700;line-height:1.25}
.upgrade-box p{color:rgba(255,255,255,.85);font-size:13px;line-height:1.5;margin:0}
.upgrade-cta{position:relative;z-index:1;background:#fff;color:#2B7DC9;padding:11px 20px;border-radius:999px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .2s;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.upgrade-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.25)}
.upgrade-cta .arrow{transition:transform .2s}
.upgrade-cta:hover .arrow{transform:translateX(3px)}
.print-div{
display: flex;
gap: 8px;
}
@media(max-width:960px){
.gate-card{grid-template-columns:1fr;gap:32px;padding:36px}
.gate-left, .gate-right {padding:20px}
.gate-logo-wrap img{height:90px}
.preview-grid{grid-template-columns:repeat(3,1fr)}
.upgrade-box{flex-direction:column;align-items:flex-start;text-align:left}
.upgrade-cta{width:100%;justify-content:center}
.print-div{flex-direction:column;align-items:center;
}
.print-div input{max-width:100%;width:240px !important;}
.cm-overlay { top: 10% !important; left: 18% !important; }
.upgrade-text {
position: relative;
z-index: 1;
flex: 1 1 95px;
min-width: 0;
}
}
@media(max-width:640px){
.gate{padding:24px 14px}
.gate-card{padding:26px 22px;border-radius:16px;gap:26px}
.gate-logo-wrap,.header img{display:none}
.preview-grid{grid-template-columns:1fr;gap:10px}
.preview-card {
padding: 14px 16px;
display: flex;
gap: 12px;
text-align: left;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: center;
}
.preview-card .icon{margin-bottom:0;font-size:24px}
.preview-features{grid-template-columns:1fr;gap:8px 0;margin-top:18px}
.gate-input{font-size:16px}
.ride-chk{padding:14px;gap:12px}
.ride-chk .box{width:22px;height:22px}
.ride-chk .rname{font-size:14.5px}
.ride-chk .rland{font-size:12px}
.btn-row{flex-wrap:wrap;gap:10px}
.btn{padding:12px 18px;font-size:13.5px;min-height:44px}
.btn-row>div{flex:0 0 auto}
.btn-row .btn{flex:1 1 auto;max-width:100%;white-space:normal}
.cm-overlay { top: 10% !important; left: 0% !important; }
}
@media(max-width:380px){
.gate-card{padding:22px 16px}
}
.app-wrap{max-width:1100px;margin:0 auto;padding:20px}
.header{text-align:center;padding:16px 0 24px}
.header img{height:40px}
.header h2{font-size:26px;color:#2B7DC9;margin-top:6px}
.steps{display:flex;justify-content:center;align-items:flex-start;gap:0;margin:0 auto 28px;max-width:760px;padding:4px 10px 8px;position:relative}
.step-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;flex:0 0 auto;min-width:56px;max-width:84px;user-select:none;transition:transform .2s}
.step-item:hover{transform:translateY(-2px)}
.step-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:#f0f2f7;color:#94a0b4;border:2px solid transparent;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}
.step-item:hover .step-circle{background:#e4e8ef;color:#5a6b7e;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.step-item.active .step-circle{background:linear-gradient(135deg,#ffb347 0%,#f5a623 100%);color:#fff;border-color:#fff;box-shadow:0 0 0 3px #f5a623,0 8px 18px rgba(245,166,35,.45);transform:scale(1.06)}
.step-item.done .step-circle{background:linear-gradient(135deg,#8ac7fa 0%,#6ab3f8 100%);color:#fff;border-color:#fff;box-shadow:0 0 0 2px #6ab3f8,0 3px 10px rgba(106,179,248,.35)}
.step-item.done .step-circle::after{content:'✓';position:absolute;bottom:-3px;right:-3px;width:18px;height:18px;background:#27ae60;color:#fff;border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.14);line-height:1}
.step-label{font-size:11px;font-weight:700;color:#94a0b4;margin-top:8px;letter-spacing:.5px;text-align:center;text-transform:uppercase;transition:color .2s;line-height:1.25}
.step-item.active .step-label{color:#f5a623}
.step-item.done .step-label{color:#2b7dc9}
.step-connector{flex:1;height:3px;background:#e0e3ea;margin-top:26px;min-width:8px;max-width:60px;border-radius:2px;transition:background .3s}
.step-connector.done{background:linear-gradient(90deg,#6ab3f8 0%,#8ac7fa 100%)}
@media(max-width:640px){
.steps{padding:4px 4px 6px;margin-bottom:22px}
.step-item{min-width:46px;max-width:60px}
.step-item:hover{transform:none}
.step-circle{width:42px;height:42px;font-size:17px;border-width:1.5px}
.step-item.active .step-circle{transform:scale(1.05);box-shadow:0 0 0 2px #f5a623,0 5px 12px rgba(245,166,35,.4)}
.step-item.done .step-circle{box-shadow:0 0 0 1.5px #6ab3f8,0 2px 6px rgba(106,179,248,.3)}
.step-item.done .step-circle::after{width:15px;height:15px;font-size:9px;border-width:1.5px;bottom:-2px;right:-2px}
.step-label{font-size:9.5px;letter-spacing:.3px;margin-top:6px}
.step-connector{min-width:4px;height:2px;margin-top:22px;max-width:40px}
}
@media(max-width:380px){
.step-item{min-width:38px;max-width:50px}
.step-circle{width:36px;height:36px;font-size:15px}
.step-item.done .step-circle::after{width:13px;height:13px;font-size:8px}
.step-connector{min-width:2px;margin-top:19px}
.step-label{font-size:8.5px;letter-spacing:.2px;margin-top:5px}
}
.user-badge{display:inline-flex;align-items:center;background:#e8f0fe;color:#6ab3f8;font-size:11px;font-weight:700;padding:6px 14px;border-radius:999px;letter-spacing:.3px}
.user-badge.paid { background: #c7f1c4; color: #0c9511; }
.user-badge::before{content:'';display:inline-block;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center;mask:url("data:image/svg+xml;utf8,") no-repeat center;margin-right:6px}
.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid #eee}
.card h3{font-size:18px;color:#2B7DC9;margin-bottom:12px}
.card p.sub{font-size:14px;color:#888;margin-bottom:14px}
.card p.sub.plantype {
font-size: 13px;
color: #0e8f13;
margin-bottom: 14px;
background: #0e8f1342;
text-transform: capitalize;
width: max-content;
padding: 3px 10px 6px;
border-radius: 15px;
font-weight: 600;
border: 1px #0e8f1380 solid;
}
.plans-section{margin-top:18px}
.plans-section h3{margin-bottom:10px}
.plans-list{display:flex;flex-direction:column;gap:10px}
.plan-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid #e6ecf3;border-radius:10px;transition:border-color .2s,box-shadow .2s,transform .15s}
.plan-item:hover{border-color:#c4d9f0;box-shadow:0 4px 14px rgba(43,125,201,.08);transform:translateY(-1px)}
.plan-item .thumb{width:48px;height:48px;flex:0 0 48px;border-radius:8px;background:#f4f8fd;display:flex;align-items:center;justify-content:center;padding:6px;border:1px solid #e6ecf3;overflow:hidden}
.plan-item .thumb img{max-width:100%;max-height:100%;object-fit:contain}
.plan-item .thumb-fallback{font-size:22px;line-height:1}
.plan-item .info{flex:1 1 auto;min-width:0}
.plan-item .info .pname{font-weight:600;font-size:15px;color:#222;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-item .info .pmeta{font-size:12.5px;color:#7a8699;margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.plan-item .info .pmeta .park{color:#2b7dc9;font-weight:600}
.plan-item .info .pmeta .dot{color:#c4d9f0}
.plan-item .actions{display:flex;gap:8px;flex:0 0 auto}
.btn-sm{padding:7px 14px;font-size:12.5px;border-radius:6px;min-height:auto}
.btn-danger{background:#fef2f2;color:#c53030;border:1px solid #fcc7c7}
.btn-danger:hover{background:#fee5e5}
@media(max-width:640px){
.plan-item{padding:12px;gap:12px;flex-wrap:wrap}
.plan-item .thumb{width:42px;height:42px;flex:0 0 42px}
.plan-item .info{flex:1 1 calc(100% - 54px);min-width:0}
.plan-item .info .pname{white-space:normal}
.plan-item .actions{width:100%;flex:0 0 100%;justify-content:stretch;border-top:1px solid #f0f3f7;padding-top:10px;margin-top:2px}
.plan-item .actions .btn{flex:1 1 auto;min-height:40px}
}
.warn-red{font-size:13px;color:#e74c3c;margin-top:8px;line-height:1.5}
.warn-red a{color:#e74c3c;font-weight:600;text-decoration:underline}
.warn-orange{background:#fff8f0;border:1px solid #f0d4a8;border-radius:8px;padding:10px 14px;margin-top:10px;font-size:13px;color:#8b6914;line-height:1.5}
.warn-orange a{color:#8b6914;font-weight:600}
.info-box{background:#f0f7ff;border:1px solid #c4d6f0;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:14px;color:#333;line-height:1.5}
.disclaimer-box{background:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;padding:10px 14px;margin-top:16px;font-size:13px;color:#333;line-height:1.5}
.section-divider{display:flex;align-items:center;gap:14px;margin:24px 0 16px;color:#94a3b8;font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:#e4e8ef}
.section-divider span{padding:0 4px;white-space:nowrap}
.park-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.park-card{position:relative;background:#fff;border:1.5px solid #e4ebf3;border-radius:14px;padding:18px 18px 16px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s,transform .15s;display:flex;flex-direction:column;text-align:left;overflow:hidden}
.park-card:hover{border-color:#b8d4ee;box-shadow:0 6px 18px rgba(43,125,201,.1);transform:translateY(-1px)}
.park-card.selected{border-color:#2B7DC9;background:#f0f7ff;box-shadow:0 8px 22px rgba(43,125,201,.16)}
.park-card .park-logo{height:44px;width:auto;max-width:170px;object-fit:contain;display:block;margin:0 0 14px;align-self:flex-start}
.park-card .name{font-size:15px;font-weight:700;color:#0d1834;margin-bottom:4px;line-height:1.3}
.park-desc{font-size:12.5px;color:#7a8699;line-height:1.45;margin-bottom:12px;flex:1}
.park-badge{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.2px;line-height:1.4}
.park-badge.tone-orange{background:#fff4e0;color:#b86e08}
.park-badge.tone-green{background:#e3f5e2;color:#1f7d24}
.park-check{position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;background:#0d1834;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.park-check::after{content:'';width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(0,-2px)}
.park-card.selected .park-check{opacity:1;transform:scale(1)}
label.field{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:4px;margin-top:12px}
select.inp,input.inp{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;background:#fff;box-sizing:border-box;height:42px;font-family:inherit;color:#333;outline:none;transition:border-color .15s,box-shadow .15s}
select.inp:hover,input.inp:hover{border-color:#b9d4f3}
select.inp:focus,input.inp:focus{border-color:#6ab3f8;box-shadow:0 0 0 3px rgba(106,179,248,.18)}
.dp-wrap{position:relative;width:100%}
.dp-input{width:100%;padding:10px 40px 10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;background:#fff;box-sizing:border-box;height:42px;font-family:inherit;color:#333;outline:none;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center}
.dp-input:hover{border-color:#b9d4f3}
.dp-input.open,.dp-input:focus{border-color:#6ab3f8;box-shadow:0 0 0 3px rgba(106,179,248,.18)}
.dp-input.placeholder{color:#9aa3ad}
.dp-pop{position:absolute;z-index:1000;top:calc(100% + 6px);left:0;width:300px;background:#fff;border:1px solid #e4e8ee;border-radius:12px;box-shadow:0 12px 32px rgba(13,43,94,.18);padding:14px;user-select:none}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-title{font-size:14px;font-weight:700;color:#1a1a1a}
.dp-nav{display:flex;gap:4px}
.dp-nav button{width:28px;height:28px;border:none;background:#f3f6fb;border-radius:6px;color:#6ab3f8;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.dp-nav button:hover{background:#e3eefa}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-dow div{text-align:center;font-size:11px;font-weight:700;color:#888;padding:6px 0;text-transform:uppercase;letter-spacing:.5px}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-cell{height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;color:#1a1a1a;cursor:pointer;background:transparent;border:none;font-family:inherit;transition:background .12s,color .12s}
.dp-cell:hover{background:#f0f7ff}
.dp-cell.muted{color:#c4c9d1}
.dp-cell.today{color:#6ab3f8;font-weight:700}
.dp-cell.sel{background:#6ab3f8;color:#fff;font-weight:700}
.dp-cell.sel:hover{background:#5aa3e8}
.dp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #f0f2f5}
.dp-foot button{background:none;border:none;color:#6ab3f8;font-size:13px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:inherit}
.dp-foot button:hover{background:#f0f7ff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ride-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-content: center;}
.ride-chk{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e4e8ef;border-radius:10px;cursor:pointer;font-size:13px;transition:border-color .15s,background .15s,box-shadow .15s}
.ride-chk:hover{border-color:#6ab3f8;background:#fafcff}
.ride-chk.checked{background:#f0f7ff;border-color:#6ab3f8;box-shadow:0 0 0 1px #6ab3f8 inset}
.ride-chk .box{width:20px;height:20px;border:2px solid #ccc;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s}
.ride-chk.checked .box{background:#6ab3f8;border-color:#6ab3f8;color:#fff;font-size:12px}
.ride-chk .info{flex:1;min-width:0}
.ride-chk .rname{font-weight:600;font-size:15px;line-height:1.3;word-break:break-word;color:#1a1a1a}
.ride-chk .rland{font-size:12px;color:#6b7887;line-height:1.4;margin-top:2px}
.ride-chk .epa-star{color:#27ae60;font-size:16px;flex-shrink:0;margin-left:auto}
.order-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #eee;border-radius:8px;margin-bottom:6px;background:#fff}
.order-item .num{width:24px;height:24px;border-radius:50%;background:#6ab3f8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.order-item .oname{font-size:15px;font-weight:600}
.order-item .oland{font-size:12px;color:#888}
.order-item .arrows{display:flex;gap:4px;flex-wrap: wrap;}
.order-item .arrows button{width:26px;height:26px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;font-size:12px}
.order-item .arrows button:hover{background:#f0f7ff}
.meal-row{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px;flex-wrap: wrap;}
.meal-row input,.meal-row select{padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px}
.meal-row .notes{flex:1}
.sched-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #f0f0f0;align-items:flex-start}
.sched-item:last-child{border-bottom:none}
.sched-time{width:80px;text-align:right;flex-shrink:0}
.sched-time .t{font-weight:700;color:#6ab3f8;font-size:13px}
.sched-time .t2{font-size:10px;color:#888}
.sched-body{flex:1}
.sched-body .sname{font-weight:600;font-size:16px}
.sched-body .sdet{font-size:13px;color:#666;margin-top:2px}
.sched-body .snote{font-size:10px;color:#888;font-style:italic;margin-top:2px}
.btn{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;line-height:1.2;word-break:break-word}
.btn-blue{background:#6ab3f8;color:#fff}
.btn-blue:hover{background:#1557b0}
.btn-gray{background:#eee;color:#333}
.btn-green{background:#27ae60;color:#fff}
.btn-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;flex-wrap:wrap;gap:10px}
.opt-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid #f0f3f7}
.opt-row.last,.opt-row:last-of-type{border-bottom:none}
.opt-icon{width:40px;height:40px;flex:0 0 40px;background:#eef4fb;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#2B7DC9}
.opt-body{flex:1 1 auto;min-width:0}
.opt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.opt-title{font-size:15px;font-weight:700;color:#0d1834;line-height:1.3}
.opt-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:.2px;line-height:1.4;white-space:nowrap}
.opt-pill.tone-yellow{background:#fff4e0;color:#b86e08}
.opt-pill.tone-blue{background:#e7f0fb;color:#2B7DC9}
.opt-pill.tone-green{background:#e3f5e2;color:#1f7d24}
.opt-sub{font-size:13px;color:#7a8699;line-height:1.45}
.tog{width:44px;height:24px;border-radius:12px;background:#d4dae3;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.tog.on{background:#2B7DC9}
.tog::after{content:'';width:20px;height:20px;border-radius:10px;background:#fff;position:absolute;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tog.on::after{left:22px}
@media(max-width:600px){
.opt-row{gap:12px;padding:12px 2px}
.opt-icon{width:36px;height:36px;flex:0 0 36px}
.opt-icon svg{width:16px;height:16px}
.opt-title{font-size:14px}
.opt-sub{font-size:12.5px}
.opt-pill{font-size:10.5px;padding:2px 8px}
}
.park-hdr{color:#6ab3f8;font-size:14px;margin:16px 0 8px;border-bottom:2px solid #6ab3f8;padding-bottom:4px}
@media(max-width:600px){.park-grid,.ride-list,.row2,.preview-grid,.preview-features{grid-template-columns:1fr}.app-wrap{padding:12px}}
/* ----------------------------------------------------------------------
Shows tab — card-based selector with pill showtimes. Each card has a
header (always visible) and an expanded panel (only when selected) that
reveals showtime pills. Uses .show-card scope so it can't bleed into
ride/order styles that share the planner card layout.
---------------------------------------------------------------------- */
.show-card{border:1px solid #e4e8ef;border-radius:12px;margin-bottom:12px;background:#fff;transition:border-color .15s,box-shadow .15s,background .15s;overflow:hidden}
.show-card:hover{border-color:#bcd6f3}
.show-card.selected{border-color:#6ab3f8;box-shadow:0 0 0 1px #6ab3f8 inset;background:#f7faff}
.show-head{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer}
.show-check{width:22px;height:22px;border:2px solid #c9d1de;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:13px;background:#fff;transition:background .15s,border-color .15s}
.show-card.selected .show-check {
background: #6ab3f8;
border-color: #6ab3f8;
}
.show-icon{width:34px;height:34px;border-radius:8px;background:#eef4fb;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.show-info{flex:1;min-width:0}
.show-name{font-weight:700;font-size:15px;color:#1557b0;line-height:1.3;word-break:break-word}
.show-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.show-pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;letter-spacing:.2px;line-height:1.5;white-space:nowrap}
.show-pill.pill-park{background:#ede9fe;color:#6d28d9}
.show-pill.pill-duration{background:#f1f5f9;color:#475569}
.show-pill.sched-fixed{background:#dcfce7;color:#15803d}
.show-pill.sched-warm{background:#fef3c7;color:#b45309}
.show-right{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:8px}
.show-time-preview{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:240px}
.show-time-mini{display:inline-block;font-size:11px;padding:4px 10px;border-radius:14px;background:#f1f5f9;color:#475569;border:1px solid #e4e8ef;white-space:nowrap}
.show-time-mini.show-time-more{background:#fff;color:#6b7887}
.show-time-chip{display:inline-flex;align-items:center;gap:6px;background:#6ab3f8;color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:18px;white-space:nowrap}
.show-time-chip .dot{width:6px;height:6px;border-radius:50%;background:#fff}
.show-expand{border-top:1px dashed #cfe0f5;padding:14px;background:#fafcff}
.show-expand-label{font-size:11px;font-weight:700;letter-spacing:1px;color:#6b7887;margin-bottom:10px}
.show-times{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.show-time-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;border:1px solid #cbd5e1;background:#fff;color:#334155;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit}
.show-time-btn:hover{border-color:#6ab3f8;background:#eff6ff;color:#1557b0}
.show-time-btn .dot{width:6px;height:6px;border-radius:50%;background:#94a3b8;transition:background .15s}
.show-time-btn:hover .dot{background:#6ab3f8}
.show-time-btn.selected{background:#6ab3f8;border-color:#6ab3f8;color:#fff}
.show-time-btn.selected:hover{background:#6ab3f8;color:#fff}
.show-time-btn.selected .dot{background:#fff}
.show-time-input{width:200px;max-width:100%}
.show-expand-note{display:flex;align-items:center;gap:6px;font-size:11px;color:#6b7887;font-style:italic;margin-top:4px}
.show-expand-note .info-circle{font-style:normal;font-size:13px;color:#94a3b8;line-height:1}
@media(max-width:600px){
.show-head{padding:12px;gap:10px}
.show-icon{width:30px;height:30px;font-size:16px}
.show-name{font-size:14px}
.show-time-preview{display:none}
.show-right{margin-left:0}
.show-time-chip{font-size:11px;padding:5px 10px}
.show-time-btn{padding:6px 12px;font-size:12px}
}
/* Toast notification */
.toast-stack{position:fixed;top:24px;right:24px;left:auto;transform:none;z-index:2000;pointer-events:none;display:flex;flex-direction:column;gap:10px;align-items:flex-end;width:calc(100% - 48px);max-width:420px}
.toast{pointer-events:auto;width:100%;display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;background:#fff;box-shadow:0 24px 56px rgba(13,43,94,.22),0 4px 12px rgba(13,43,94,.08),0 0 0 1px rgba(13,43,94,.04);font-size:14px;font-weight:500;color:#1a1a1a;position:relative;overflow:hidden;animation:toast-in .55s cubic-bezier(.34,1.56,.64,1) both}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px}
.toast.success::before{background:linear-gradient(180deg,#2ecc71 0%,#27ae60 100%)}
.toast.error::before{background:linear-gradient(180deg,#e74c3c 0%,#c0392b 100%)}
.toast.leaving{animation:toast-out .3s ease-in both}
.toast .toast-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;font-weight:700;color:#fff;position:relative;margin-left:4px}
.toast.success .toast-icon{background:linear-gradient(135deg,#2ecc71 0%,#27ae60 100%);box-shadow:0 6px 16px rgba(39,174,96,.4)}
.toast.success .toast-icon::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(39,174,96,.45);animation:toast-pulse 1.4s ease-out infinite}
.toast.error .toast-icon{background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);box-shadow:0 6px 16px rgba(231,76,60,.4)}
.toast .toast-body{flex:1;line-height:1.45;min-width:0}
.toast .toast-title{font-weight:700;font-size:15px;color:#0d2b5e;margin-bottom:3px;line-height:1.3;letter-spacing:-.1px}
.toast .toast-msg{font-size:13px;color:#5a6b7e;font-weight:400;overflow-wrap:anywhere}
.toast-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(13,43,94,.06);overflow:hidden;border-radius:0 0 16px 16px}
.toast-progress::after{content:'';display:block;height:100%;width:100%;transform-origin:left;animation:toast-countdown 3.2s linear forwards}
.toast.success .toast-progress::after{background:linear-gradient(90deg,#2ecc71 0%,#27ae60 100%)}
.toast.error .toast-progress::after{background:linear-gradient(90deg,#e74c3c 0%,#c0392b 100%)}
@keyframes toast-in{0%{opacity:0;transform:translateX(32px) scale(.94)}60%{transform:translateX(-3px) scale(1.015)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toast-out{0%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(24px) scale(.96)}}
@keyframes toast-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes toast-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:640px){
.toast-stack{top:14px;right:10px;width:calc(100% - 20px)}
.toast{padding:14px 16px;gap:12px;border-radius:14px}
.toast .toast-icon{width:38px;height:38px;font-size:18px}
.toast .toast-title{font-size:14px}
.toast .toast-msg{font-size:12px}
}
/* Confirm modal */
.cm-overlay{position:fixed;top: 14%;left: 31%;z-index:2500;display:flex;align-items:center;justify-content:center;padding:20px;animation:cm-fade .2s ease-out both}
.cm-card{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(13,43,94,.3);width:100%;max-width:400px;padding:28px;text-align:center;animation:cm-pop .28s cubic-bezier(.21,1.02,.73,1) both}
.cm-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#fee 0%,#fcd 100%);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:28px}
.cm-icon.danger{background:linear-gradient(135deg,#fee 0%,#fcc 100%)}
.cm-icon.warn{background:linear-gradient(135deg,#fff6e5 0%,#ffe0b3 100%)}
.cm-title{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:6px}
.cm-msg{font-size:14px;color:#666;line-height:1.5;margin-bottom:22px}
.cm-btns{display:flex;gap:10px;justify-content:center}
.cm-btn{flex:1;padding:12px 20px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .1s,box-shadow .15s,background .15s}
.cm-btn:active{transform:scale(.97)}
.cm-btn.cancel{background:#f0f2f5;color:#555}
.cm-btn.cancel:hover{background:#e4e8ef}
.cm-btn.primary{background:#6ab3f8;color:#fff;box-shadow:0 4px 12px rgba(106,179,248,.35)}
.cm-btn.primary:hover{background:#5aa3e8}
.cm-btn.danger{background:#e74c3c;color:#fff;box-shadow:0 4px 12px rgba(231,76,60,.35)}
.cm-btn.danger:hover{background:#c0392b}
@keyframes cm-fade{0%{opacity:0}100%{opacity:1}}
@keyframes cm-pop{0%{opacity:0;transform:translateY(10px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}