/* ==========================================
   MyHotelChannel — style.css (merged/clean)
   ========================================== */
/* Hide inline SVG sprite safely for CSP */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* ================== THEME / TOKENS ================== */
:root{
  --bg:#0b1220; --bg-2:#0f172a; --paper:#ffffff;
  --ink:#0f172a; --ink-2:#1f2937; --muted:#64748b;
  --brand:#3b82f6; --brand-2:#60a5fa; --accent:#22c55e;
  --ring: rgba(59,130,246,.35);
  --radius: 14px;

  --grad: radial-gradient(80rem 40rem at 10% -10%, rgba(59,130,246,.25), transparent 60%),
          radial-gradient(60rem 30rem at 90% 0%, rgba(34,197,94,.18), transparent 60%),
          linear-gradient(180deg,#0b1220 0%, #0f172a 50%, #0b1220 100%);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0b1220; --ink:#e2e8f0; --ink-2:#cbd5e1; --muted:#94a3b8;
    --ring: rgba(96,165,250,.45);
  }
}

/* ================== BASE ================== */
*{box-sizing:border-box}
html,body{height:100%}
body.theme{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  color:var(--ink); background:#fff;
}
@media (prefers-color-scheme: dark){
  body.theme{ background:var(--paper); }
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* ================== HEADER ================== */
/* Transparent header when at top */
.site-header.at-top{
  background: transparent;
  border-bottom-color: transparent;
}
@media (prefers-color-scheme: dark){
  .site-header.at-top{ background: transparent; }
}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  border-bottom:1px solid #e5e7eb;
  backdrop-filter:saturate(180%) blur(10px)
}
@media (prefers-color-scheme: dark){
  .site-header{background:rgba(15,23,42,.65);border-color:#1f2937}
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
@media (max-width:980px){ .header-inner{height:56px} }
.brand{display:flex;align-items:center;gap:10px}

/* Header logo sizing (standardised) */
.site-header .brand-logo{height:38px;width:auto;max-width:180px}
@media (max-width:980px){ .site-header .brand-logo{height:30px;max-width:150px} }

.nav a{padding:8px 10px;color:#0f172a;font-weight:600}
@media (prefers-color-scheme: dark){ .nav a{color:#e2e8f0} }

/* ================== UI PRIMITIVES ================== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-weight:800;border-radius:12px;padding:12px 18px;border:1px solid transparent;cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow:0 5px 20px rgba(2,6,23,.06);
}
.btn .icon{width:20px;height:20px}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border-color:#cbd5e1;color:inherit;background:#fff}
@media (prefers-color-scheme: dark){ .btn.ghost{border-color:#334155;background:transparent;color:#e2e8f0} }

.badge{
  display:inline-flex;gap:.35rem;align-items:center;border-radius:999px;
  background:#ecfeff;color:#0369a1;border:1px solid #bae6fd;padding:.3rem .7rem;font-size:.85rem
}
@media (prefers-color-scheme: dark){
  .badge{background:#083344;color:#7dd3fc;border-color:#164e63}
}

.icon{width:22px;height:22px;vertical-align:-3px}
.icon.sm{width:18px;height:18px}

/* ================== HERO ================== */
.hero{background:var(--grad);color:#e2e8f0;padding:72px 0 40px;position:relative;overflow:hidden}
.hero .glow{
  position:absolute;inset:-1px;
  background:
    radial-gradient(600px 200px at 20% 0,rgba(59,130,246,.18),transparent),
    radial-gradient(600px 200px at 80% -10%,rgba(34,197,94,.14),transparent);
  pointer-events:none
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.1;margin:6px 0 12px;color:#fff}
.hero h1 em{font-style:normal;color:#a5b4fc}
.spark svg{width:26px;height:26px;vertical-align:-6px;color:#22c55e}
.hero .sub{color:#cbd5e1;margin:0 0 18px;font-size:1.1rem}
.cta{display:flex;gap:12px;margin:14px 0 8px}
.trust{display:flex;gap:14px;flex-wrap:wrap;color:#cbd5e1;margin:12px 0 0;padding:0;list-style:none}
.trust li{display:flex;gap:.5rem;align-items:center}
.kpis{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.kpi{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:12px 14px;border-radius:12px}
.kpi .num{font-size:1.35rem;font-weight:900;color:#fff}

/* Mock UI (right) */
.hero-art{position:relative;min-height:340px}
.ui-mock{position:relative;margin:auto;border-radius:20px;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 60px rgba(2,6,23,.5);padding:18px;background:rgba(15,23,42,.45)}
.ui-bar{height:8px;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#22c55e)}
.ui-card{margin-top:14px;border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:14px;background:rgba(2,6,23,.35)}
.ui-row{display:flex;gap:.6rem;align-items:center;color:#e2e8f0;padding:8px 6px}
.ui-row+.ui-row{border-top:1px dashed rgba(255,255,255,.18)}

/* Logo strip */
.logos{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px 0}
.logo-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:999px;padding:8px 14px;background:#fff;color:#0f172a;font-weight:700}
.pill-ico{width:18px;height:18px}
@media (prefers-color-scheme: dark){
  .logo-pill{background:#111827;color:#e5e7eb;border-color:#374151}
}

/* ================== SECTIONS / CARDS / GRIDS ================== */
.section{padding:64px 0}
.section h2{margin:0 0 8px;font-size:clamp(24px,3.5vw,34px)}
.section.alt{background:#f8fafc}
@media (prefers-color-scheme: dark){ .section.alt{background:#0c1426} }

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
.card h3{margin:.2rem 0 .25rem;display:flex;gap:.5rem;align-items:center}
@media (prefers-color-scheme: dark){
  .card{background:#0b1324;border-color:#1f2937}
}

/* Compare table */
.compare{width:100%;border-collapse:collapse;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.compare th,.compare td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:left}
.compare th{background:#f8fafc}
.ok{color:#16a34a;font-weight:800}
.no{color:#dc2626;font-weight:800}
@media (prefers-color-scheme: dark){
  .compare{border-color:#1f2937}
  .compare th,.compare td{border-bottom-color:#1f2937}
  .compare th{background:#0e182c}
}

/* Testimonials */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:#0f172a;color:#e2e8f0;border-radius:16px;padding:18px;border:1px solid #1f2937}
.quote b{color:#fff}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.price-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:22px;position:relative}
.price-card.popular{border-color:#3b82f6;box-shadow:0 12px 40px rgba(59,130,246,.18)}
.price{font-size:34px;font-weight:900;color:var(--ink)}
.price-card .badge{position:absolute;top:-12px;right:16px}
@media (prefers-color-scheme: dark){
  .price-card{background:#0b1324;border-color:#1f2937}
  .price{color:#e2e8f0}
}

/* Roadmap */
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.rm-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px}
.rm-card.live{border-color:#22c55e33;box-shadow:0 6px 24px rgba(34,197,94,.1)}
.rm-card.wip{border-color:#f59e0b33}
.rm-card.plan{opacity:.9}
.rm-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.rm-ico{width:26px;height:26px}
.rm-card ul{margin:0;padding-left:18px}

/* Demo form */
.lead-form{margin-top:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.form-grid .span2{grid-column:1/-1}
.lead-form input,.lead-form textarea{
  width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:11px 12px;background:#fff;color:inherit
}
.lead-form textarea{resize:vertical}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--ring);outline-offset:2px}
.honeypot{position:absolute;left:-5000px}
.form-status{min-height:1.2em;margin-top:8px}

/* Footer */
.site-footer{background:#0f172a;color:#94a3b8}
.footer-inner{display:flex;gap:18px;justify-content:space-between;align-items:center;padding:28px 0}
.links a{color:#cbd5e1;margin-left:14px}

/* ================== ANIMATIONS ================== */
@media (prefers-reduced-motion: no-preference){
  .hero .glow{animation:float 14s ease-in-out infinite alternate}
  @keyframes float{from{transform:translateY(-2%)}to{transform:translateY(2%)}}
}

/* ================== RESPONSIVE ================== */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3,.pricing,.testi,.roadmap{grid-template-columns:1fr}
}
/* Ghost button на тъмен фон */
.btn.ghost{
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border-color: rgba(255,255,255,.92);
}
.btn.ghost:hover{
  background:#ffffff;
  border-color:#ffffff;
  box-shadow:0 8px 24px rgba(255,255,255,.15);
}
.btn.ghost:active{ transform: translateY(1px); }
.btn.ghost:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* ако някъде по навик е сложено aria-disabled или .is-disabled на <a>, визуално да НЕ го прави сиво */
a.btn[aria-disabled="true"],
a.btn.is-disabled{ opacity: 1; pointer-events: auto; }

/* ===== Mobile header + nav ===== */
.nav-toggle{
  display:none; appearance:none; background:transparent; border:0; padding:8px;
  margin-left:12px; cursor:pointer; border-radius:10px;
}
.nav-toggle:focus{ outline:2px solid var(--ring); outline-offset:2px }
.nav-toggle svg{ width:26px; height:26px }

@media (max-width: 980px){
  .header-inner{ height:56px; }
  /* преместваме навигацията в панел под хедъра */
  #primary-nav{
    position: fixed; left:0; right:0; top:56px; z-index:45;
    background: var(--paper); border-bottom:1px solid #e5e7eb;
    transform: translateY(-120%); transition: transform .2s ease;
  }
  body.nav-open{ overflow:hidden }
  #primary-nav.open{ transform: translateY(0) }
  #primary-nav a{
    display:block; padding:14px 18px; border-top:1px solid #e5e7eb;
    color: var(--ink); text-decoration:none; font-weight:600;
  }
  .nav-toggle{ display:inline-flex }
}

/* ===== Mobile hero sizing ===== */
@media (max-width: 980px){
  .hero{ padding:40px 0 28px }
  .hero-inner{ grid-template-columns:1fr; gap:16px }
  .hero h1{ font-size: clamp(24px, 8vw, 34px); line-height:1.15; margin:6px 0 10px }
  .cta{ flex-wrap:wrap }
  .cta .btn{ flex:1 1 48% }
  .kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .kpi{ padding:10px 12px }
  .hero-art{ order:2 }      /* да слиза под текста */
  .ui-mock{ transform: scale(.98); }
}

/* още по-малки екрани */
@media (max-width: 420px){
  .cta .btn{ flex:1 1 100% }
  .kpis{ grid-template-columns:1fr }
  .logos{ justify-content:flex-start; overflow-x:auto; padding-bottom:6px }
  .logo-pill{ white-space:nowrap }
  .ui-mock{ display:none } /* ако искаш да я скрием на съвсем малко */
}

/* ===== Sections / cards on mobile ===== */
@media (max-width: 980px){
  .grid-3, .pricing, .testi, .roadmap{ grid-template-columns:1fr }
  .card, .price-card, .quote{ padding:16px; border-radius:14px }
  .section{ padding:48px 0 }
  .form-grid{ grid-template-columns:1fr; }
}

/* ===== Layout fix: footer always at bottom, no horizontal jump ===== */

body.theme{
  min-height:100svh;           /* стабилно на мобилно */
  display:flex; flex-direction:column;
  overflow-x:hidden;           /* премахва „плъзгане“ по хоризонтал */
}
main{ flex:1 0 auto }          /* съдържанието заема височината */
.site-footer{ flex:0 0 auto; position:static; width:100% }

/* ===== Footer polish ===== */
.site-footer{
  background:#0f172a; color:#94a3b8;
  padding:0; /* оставяме само вътрешния контейнер да държи padding */
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:28px 0;
  border-top:1px solid rgba(148,163,184,.12);
}
.footer-inner .links a{ color:#cbd5e1; margin-left:14px; white-space:nowrap }
.copy{ white-space:nowrap }

/* ===== Footer responsive ===== */
@media (max-width: 980px){
  .footer-inner{
    flex-wrap:wrap; row-gap:10px;
    justify-content:center; text-align:center;
  }
  .footer-inner > div{ width:100%; display:flex; justify-content:center; }
  .footer-inner .links{ gap:12px; display:flex; flex-wrap:wrap; justify-content:center }
  .footer-inner .links a{ margin:0 8px }
}
/* Login button in header */
.nav .login-link { margin-left: .75rem; }
.btn.outline {
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  color: #fff;
}
.btn.outline:hover { border-color:#fff; }
.btn.small { padding: .45rem .8rem; font-size: .95rem; line-height: 1; }
@media (max-width: 960px){
  /* да стои на отделен ред в мобилното меню */
  .nav .login-link { display:inline-block; margin:.5rem 0 0; }
}
/* Login outline – адаптивен според фона на хедъра */
.site-header .login-link{
  background: transparent;
  border: 1px solid #33415533; /* дискретна рамка на светъл фон */
  color: #0f172a;
}
.site-header .login-link:hover{
  border-color:#0f172a; text-decoration:none;
}

/* Когато хедърът е прозрачен/над тъмния hero (at top) → бял outline */
.site-header.at-top .login-link{
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color:#fff;
}
.site-header.at-top .login-link:hover{
  border-color:#fff;
}
/* MOBILE HERO FIX */
@media (max-width: 768px){

  /* 1) не разпъвай секцията по височина */
  .hero{
    /* избери едно от двете според вкуса: */
    min-height: auto !important;     /* вариант А: без принудителна височина */
    /* min-height: 100svh !important;*/ /* вариант Б: точно 1 екран, само ако наистина го искаш */
    padding: 40px 0 24px;
  }

  /* 2) колоната да НЕ е space-between */
  .hero-inner{
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    gap: 16px;
    min-height: auto !important;
  }

  /* 3) да не държи празно място под текста */
  .hero-art{
    min-height: 0 !important;  /* отменя 340px */
  }

  /* ако искаш още по-компактно:
     .ui-mock{ display:none }  // скрий mock-а на мобилно
  */

  /* логата близо до съдържанието */
  .hero .logos{ margin-top: 12px; }
}