/* ===========================================================================
   MyKodai - Design 6 "Creative & Immersive" - light green + white theme.
   Loaded LAST, after app.css / sales.css / pages.css / panel.css.
   Palette: mint #DDF3D5, soft mint #F3FAF0, pale cards #EAF6E5, white,
   dark green #14532D (hover #0B3D24), text #17372A / #5B6B60, borders #D4E8D0.
   =========================================================================== */
:root{--mint:#DDF3D5;--soft-mint:#F3FAF0;--pale:#EAF6E5;--btn:#14532D;--btn-hover:#0B3D24;--focus:0 0 0 3px rgba(31,122,69,.28)}
body{background:var(--soft-mint);color:var(--ink)}
::selection{background:var(--mint)}
:focus-visible{outline:3px solid #2E9A5B;outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--emerald)!important;box-shadow:var(--focus)}

/* ---- buttons: dark green, clear states ---- */
.btn-primary,.btn-gold,.btn-buy{background:var(--btn);color:#fff;box-shadow:0 6px 16px rgba(20,83,45,.25)}
.btn-primary:hover,.btn-gold:hover,.btn-buy:hover{background:var(--btn-hover);color:#fff}
.btn-outline{border-color:var(--btn);color:var(--btn)}.btn-outline:hover{background:var(--btn);color:#fff}
.btn-light{background:#fff;color:var(--btn);border-color:var(--line)}.btn-light:hover{background:var(--mint);border-color:var(--emerald)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---- top bar + header ---- */
.topbar{background:var(--mint);color:var(--forest);border-bottom:1px solid var(--line)}.topbar a{color:var(--forest)}
.header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.nav a.nl{color:var(--ink);padding:.35rem .1rem;border-bottom:2px solid transparent}
.nav a.nl:hover{color:var(--btn)}.nav a.nl.active{color:var(--btn);border-bottom-color:#2E9A5B}
.dropdown a:hover,.dropdown button:hover{background:var(--soft-mint)}

/* ---- immersive hero (scenic photo, soft white overlay behind the text) ---- */
.hero.hero-immersive{color:var(--ink);padding:96px 0 150px;background-position:center 42%;min-height:560px}
.hero.hero-immersive::before{background:linear-gradient(90deg,rgba(243,250,240,.97) 0%,rgba(243,250,240,.88) 38%,rgba(243,250,240,.35) 68%,rgba(243,250,240,0) 100%)}
.hero.hero-immersive::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(0deg,var(--soft-mint),rgba(243,250,240,0));pointer-events:none}
.hero.hero-immersive h1{color:var(--btn);text-shadow:none;max-width:640px}
.hero.hero-immersive p.lead{color:var(--ink-2);max-width:520px}
.hero.hero-immersive .eyebrow{color:var(--emerald)}
.hero-stats b{color:var(--btn)}.hero-stats span{color:var(--ink);font-weight:500}
.journeys{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem}
.journey{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.25rem;border-radius:999px;background:#fff;color:var(--btn);border:1.5px solid var(--line);font-weight:700;box-shadow:0 6px 18px rgba(20,83,45,.1);transition:.2s}
.journey span{width:30px;height:30px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font-size:.95rem;font-weight:800}
.journey:hover{transform:translateY(-3px);border-color:var(--emerald);color:var(--btn-hover)}
.journey.primary{background:var(--btn);color:#fff;border-color:var(--btn)}.journey.primary span{background:rgba(255,255,255,.2)}
.journey.primary:hover{background:var(--btn-hover);color:#fff}
.hero-link{display:inline-block;margin-top:.8rem;font-weight:600;color:var(--btn)}

/* ---- floating search panel ---- */
.search-box{border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 50px rgba(20,83,45,.16)}
.search-box.float{margin-top:-70px}
.search-box input,.search-box select{background:var(--soft-mint)}
.search-box label{color:var(--emerald)}

/* ---- inner page headers: light, with soft hills ---- */
.page-head,.sale-hero{position:relative;background:linear-gradient(180deg,var(--mint) 0%,var(--soft-mint) 100%);color:var(--ink);padding:44px 0 64px;overflow:hidden;border-bottom:1px solid var(--line)}
.page-head::after,.sale-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:54px;pointer-events:none;
 background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 80V50c120-30 200-34 320-8s220 28 340-6 230-46 360-14 260 28 420-8V80z' fill='%23F3FAF0'/><path d='M0 80V64c140-22 260-20 400 0s280 18 420-4 360-18 620 4V80z' fill='%23EAF6E5' opacity='.8'/></svg>") center bottom/100% 100% no-repeat}
.page-head .container,.sale-hero .container{position:relative;z-index:1}
.page-head h1,.sale-hero h1{color:var(--btn)}.page-head p,.sale-hero p{color:var(--ink-2)}
.crumbs{color:var(--muted)}.crumbs a{color:var(--emerald)}

/* ---- cards ---- */
.card,.p-card,.review-card,.type-tile{border-color:var(--line)}
.p-card .type-tag{background:rgba(20,83,45,.88)}
.chip{background:var(--pale);border-color:var(--line);color:var(--ink-2)}
.type-tile{background:#fff}.type-tile:hover{background:var(--btn);color:#fff}
.dest-card::after{background:linear-gradient(180deg,transparent 45%,rgba(11,61,36,.86))}
.offer-card{background:linear-gradient(135deg,#14532D,#2E9A5B)}
.section-title{color:var(--btn)}
.eyebrow{color:var(--emerald)}
.badge-approved,.badge-confirmed,.badge-completed,.badge-paid,.badge-active{background:var(--mint);color:var(--btn)}
.stars{color:#2E9A5B}

/* ---- footer: light green ---- */
.footer{background:var(--mint);color:var(--ink);border-top:1px solid var(--line)}
.footer h4{color:var(--btn)}.footer p,.footer .small{color:var(--ink-2)}
.footer a{color:var(--ink-2)}.footer a:hover{color:var(--btn);text-decoration:underline}
.footer .copy{border-top-color:#C3DDBE;color:var(--ink-2)}
.footer .logo-img .brand-logo{background:transparent;padding:0}

/* ---- owner / admin panels: white sidebar, green active state ---- */
body.panel{background:var(--soft-mint)}
.sidebar{background:#fff;color:var(--ink);border-right:1px solid var(--line)}
.sidebar .role{color:var(--emerald);font-weight:700}
.sidebar a.item{color:var(--ink-2)}.sidebar a.item:hover{background:var(--pale);color:var(--btn)}
.sidebar a.item.active{background:var(--btn);color:#fff;box-shadow:0 4px 14px rgba(20,83,45,.25)}
.sidebar .sep{color:var(--muted)}
.sidebar .logo-img .brand-logo{background:transparent;padding:0}
.ptop{border-bottom-color:var(--line)}
.stat{border-color:var(--line)}body.panel .stat .ic{background:var(--mint)}

/* ---- wallet ---- */
.wallet-hero{background:linear-gradient(135deg,#14532D,#1F7A45)}

/* ---- login / register side image: green tint ---- */
.auth-art::before{background:linear-gradient(180deg,rgba(11,61,36,.25),rgba(11,61,36,.88))}
.auth-form{background:var(--soft-mint)}

/* ---- mobile ---- */
@media(max-width:900px){
  .hero.hero-immersive{padding:64px 0 120px;min-height:0}
  .hero.hero-immersive::before{background:linear-gradient(180deg,rgba(243,250,240,.94) 0%,rgba(243,250,240,.82) 60%,rgba(243,250,240,.55) 100%)}
  .search-box.float{margin-top:-60px}
  .nav{background:#fff}
}
@media(max-width:520px){.journey{flex:1 1 100%;justify-content:center}.page-head,.sale-hero{padding:30px 0 52px}}
@media(prefers-reduced-motion:reduce){.journey,.btn,.p-card,.dest-card{transition:none}}

/* inline grid on the stay-list filter bar made mobile overflow; force one column on phones/tablets */
@media(max-width:820px){.search-box{grid-template-columns:1fr!important}}
@media(min-width:821px) and (max-width:1100px){.nav{gap:.9rem}.nav a.nl{font-size:.86rem}}

input[type=date]{min-width:0}
.field input,.field select,.field textarea{background:#fff}

.why.why-3{grid-template-columns:repeat(3,1fr)}@media(max-width:900px){.why.why-3{grid-template-columns:1fr 1fr}}@media(max-width:560px){.why.why-3{grid-template-columns:1fr}}

/* panels on phones: nothing may push the page sideways */
.main{overflow-x:clip}.pcontent{min-width:0}.pcontent .card,.panel-grid>*{min-width:0}
@media(max-width:700px){
  .ptop{padding:.6rem 1rem;flex-wrap:wrap}.ptop .who{flex-wrap:wrap;gap:.5rem}
  .list-row{flex-wrap:wrap;gap:.4rem}
}

/* buttons that sit on a dark-green banner must be light, not dark-on-dark */
.wallet-hero .btn,.welcome .btn,.cta-band .btn-gold,.cta-band .btn-primary,.success-hero.dark .btn{background:#fff;color:var(--btn);box-shadow:none}
.wallet-hero .btn:hover,.welcome .btn:hover,.cta-band .btn-gold:hover{background:var(--mint);color:var(--btn-hover)}
.wallet-hero .btn[disabled],.wallet-hero .btn:disabled{background:rgba(255,255,255,.35);color:#fff}

@media(max-width:1000px){.panel-grid{grid-template-columns:1fr!important}}

/* stat cards are also used on the customer account page (panel.css is not loaded there) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow);display:flex;gap:1rem;align-items:center;transition:.2s;color:inherit}
.stat:hover{transform:translateY(-3px)}
.stat .ic{width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:var(--mint)}
.stat.orange .ic,.stat.dark .ic{background:#EDF1EE}.stat.blue .ic,.stat.gold .ic{background:var(--mint)}.stat.red .ic{background:#fde4e4}
.stat b{display:block;font-size:1.55rem;font-family:'Playfair Display',serif;color:var(--forest);line-height:1.1}.stat span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}