/*
Theme Name: Storji Reservations - Installable
Author: Storji
Version: 1.1
Description: Responsive Storji reservation landing page.
*/
:root{--navy:#001526;--deep:#00101e;--blue:#078dff;--line:#246083;--ink:#071b36}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--navy);color:white}a{color:inherit;text-decoration:none}.wrap{max-width:1190px;margin:auto;padding:0 22px}.top{background:#001323;position:sticky;top:0;z-index:9;border-bottom:1px solid #154466}.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:20px}.logo{font-weight:900;font-size:47px;letter-spacing:-3px}.logo span{color:var(--blue)}.links{display:flex;gap:30px;font-size:14px}.btn{display:inline-block;border:0;border-radius:7px;background:var(--blue);color:#fff;font-size:15px;font-weight:800;padding:15px 22px;cursor:pointer;text-align:center}.btn:hover{background:#006cce}.hero{min-height:310px;background:linear-gradient(90deg,rgba(0,13,24,.96) 0%,rgba(0,13,24,.75) 40%,rgba(0,13,24,.05) 100%),url('assets/hero.jpg') center/cover;display:flex;align-items:center}.hero h1{font-size:clamp(43px,6vw,76px);line-height:.91;margin:20px 0 10px;font-weight:1000;letter-spacing:-2px}.blue{color:var(--blue)}.hero p{font-size:21px;margin:0 0 22px}.features{display:flex;gap:28px;flex-wrap:wrap;font-size:13px;font-weight:800}.features span:before{content:'✓';color:var(--blue);font-size:24px;margin-right:9px}.section{padding:24px 0}.section h2{font-size:30px;margin:0 0 4px;font-weight:900}.sub{color:#d0dfeb;margin:0 0 15px}.units{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.unit{border:1px solid #4b87a9;border-radius:10px;overflow:hidden;background:linear-gradient(#09345a,#001423)}.unit img{width:100%;height:152px;object-fit:cover;display:block}.unit-body{padding:12px}.unit h3{margin:0 0 6px;font-size:22px}.sq{background:#eaf4ff;color:#001a39;display:inline-block;padding:4px 9px;border-radius:20px;font-size:12px;font-weight:bold}.spec{font-size:13px;line-height:1.6;margin:10px 0}.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:9px 0}.prices div{background:#073b71;border-radius:5px;text-align:center;padding:7px 2px}.prices strong{display:block;font-size:22px}.prices small{font-size:11px}.unit .btn{width:100%;padding:12px 4px}.light{background:#f0f6fc;color:var(--ink)}.plans{display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:12px}.plan{border:1px solid #b6cde5;border-radius:8px;padding:16px;background:#fff;cursor:pointer}.plan.active{background:#087fff;color:white;border-color:#087fff}.plan strong{font-size:18px}.plan p{margin:8px 0 0;font-size:13px;line-height:1.4}.fee{background:#078dff;color:white;border-radius:8px;padding:16px;text-align:center}.fee strong{font-size:48px}.form-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:14px;align-items:start}.form-card{background:white;color:var(--ink);border-radius:10px;padding:18px}.form-card h2{color:#087fff}.form-card h3{color:#005cc0;font-size:16px;margin:22px 0 8px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}.fields.four{grid-template-columns:repeat(4,minmax(0,1fr))}input,select{width:100%;border:1px solid #c2d5e8;background:#f6faff;border-radius:5px;padding:12px;color:#183456;font:inherit;font-size:13px}input[type=checkbox]{width:auto}.check{display:flex;gap:9px;font-size:12px;line-height:1.5;margin:17px 0}.full{width:100%}.aside{background:#001d35;border:1px solid #23668e;border-radius:10px;padding:17px;margin-bottom:12px}.aside h3{margin:0 0 14px}.summary-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin:12px 0}.summary-line b{text-align:right}.steps{padding-left:20px;line-height:2;font-size:14px}.footer{padding:25px 0;border-top:1px solid #1a5a84}.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer p{font-size:13px}.notice{font-size:12px;color:#57708a;text-align:center}.menu-toggle{display:none}.success{padding:12px;border-radius:6px;background:#e6f9ed;color:#126333;margin-top:10px;display:none}@media(max-width:850px){.units{grid-template-columns:repeat(2,1fr)}.plans{grid-template-columns:repeat(2,1fr)}.form-layout{grid-template-columns:1fr}.links{display:none}.menu-toggle{display:block}.nav .btn{padding:12px}.hero{min-height:270px}}@media(max-width:520px){.units,.plans,.fields,.fields.three,.fields.four{grid-template-columns:1fr}.unit img{height:190px}.nav{min-height:62px}.logo{font-size:35px}.hero h1{font-size:43px}.hero p{font-size:17px}.features{gap:12px}.footer .wrap{display:block}.section h2{font-size:25px}}

/* Readability update: white text on all dark navy/blue panels. */
body, .top, .hero, .unit, .unit-body, .aside, .footer, .features, .spec, .prices, .summary-line, .steps {color:#fff;}
.top a, .footer a, .unit h3, .aside h3, .aside b, .aside span, .unit .spec, .prices small, .prices strong {color:#fff;}
.hero p, .section:not(.light) .sub, .aside p, .footer p {color:#f2f8ff;}
.unit .btn, .btn, .fee, .fee * {color:#fff;}
/* White application and payment panels retain dark text for contrast. */
.light, .light h2, .light h3, .light p, .light label, .light .sub, .form-card, .form-card label, .form-card p, .form-card .notice, .plan:not(.active), .plan:not(.active) * {color:#071b36;}
.form-card input, .form-card select {color:#071b36;background:#fff;}
.form-card input::placeholder {color:#52657d;opacity:1;}
.plan.active, .plan.active * {color:#fff;}
.form-card .btn, .form-card .btn * {color:#fff;}
.form-card .notice {color:#40556d;}

/* STORJI CONTRAST FIX v2 — explicitly scope every light/dark surface */
html body {background:#001526!important;color:#ffffff!important;}
body .top,body .hero,body #units,body .footer {color:#ffffff!important;}
body .top a,body .top .logo,body .footer a,body .footer p,body .hero h1,body .hero p,body .hero .features,body #units h2,body #units .sub,body #units .unit,body #units .unit h3,body #units .unit .spec,body #units .unit .prices,body #units .unit .prices strong,body #units .unit .prices small {color:#ffffff!important;opacity:1!important;}
body .blue,body .hero .blue,body #units .blue {color:#42b3ff!important;}
body #units .unit {background:#082d4b!important;border:1px solid #4b87a9!important;}
body #units .unit .sq {background:#eaf4ff!important;color:#001a39!important;}
body #payments,body #application {background:#f0f6fc!important;color:#071b36!important;}
body #payments h2,body #payments .sub,body #application h2,body #application .sub {color:#071b36!important;}
body #payments .plan:not(.active),body #payments .plan:not(.active) strong,body #payments .plan:not(.active) p {background:#ffffff!important;color:#071b36!important;}
body #payments .plan.active,body #payments .plan.active strong,body #payments .plan.active p {background:#087fff!important;color:#ffffff!important;}
body #payments .fee,body #payments .fee * {background:#087fff!important;color:#ffffff!important;}
body #application .form-card {background:#ffffff!important;color:#071b36!important;}
body #application .form-card h2,body #application .form-card h3 {color:#005cc0!important;}
body #application .form-card p,body #application .form-card label,body #application .form-card .notice {color:#29405b!important;}
body #application input:not([type=checkbox]),body #application select {background:#ffffff!important;color:#071b36!important;border:1px solid #91aac4!important;opacity:1!important;}
body #application input::placeholder {color:#52657d!important;opacity:1!important;}
body #application input:focus-visible {outline:3px solid #087fff!important;outline-offset:1px;}
body #application .aside,body #application .aside h3,body #application .aside p,body #application .aside li,body #application .aside span,body #application .aside b {color:#ffffff!important;}
body #application .aside {background:#001d35!important;}
body .btn,body button.btn,body a.btn,body #application .btn {background:#078dff!important;color:#ffffff!important;font-weight:800!important;}
body .btn:hover,body button.btn:hover {background:#006bca!important;}
body .success {background:#e6f9ed!important;color:#126333!important;}
@media(max-width:520px){body .hero .features span{color:#ffffff!important;}body #application .fields input{min-width:0;}}