/* hero.css — Hero bento layout, search widget, live route preview, family-visa fields */
/* =========================================================
   HERO BENTO
   ========================================================= */
.hero{padding-top:56px; position:relative;}
.hero-top{max-width:760px; margin-bottom:40px;}
.hero-top h1{font-size:clamp(32px,4.6vw,54px); line-height:1.18; margin-bottom:18px;}
.hero-top h1 em{ font-style:normal; background:linear-gradient(135deg,var(--primary),var(--primary-grad)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-top p{font-size:17px; color:var(--muted); max-width:560px;}

.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
  position:relative;
}
.bento::before{ /* signature route-line */
  content:"";
  position:absolute; inset:0;
  background-image:url("../assets/icons/route-dashed-line.svg");
  background-repeat:no-repeat; background-size:100% 100%;
  pointer-events:none; z-index:0;
}
[dir="rtl"] .bento::before{ transform:scaleX(-1); }
.bento-card{
  position:relative; z-index:1; isolation:isolate;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
  transform:perspective(1000px) translateZ(0);
  will-change:transform;
}
.bento-card:hover{ box-shadow:var(--shadow-lg); }
.bento-card::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(320px circle at var(--lx,50%) var(--ly,50%), rgba(255,255,255,.14), transparent 60%);
  transition:opacity .4s ease; border-radius:inherit;
}
.bento-card:hover::after{ opacity:1; }
html.dark .bento-card:not(.card-promo):not(.card-offer){
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-color:rgba(255,255,255,.08);
}
html.dark .bento-card:hover{ border-color:rgba(143,180,255,.28); box-shadow:var(--shadow-lg), 0 0 40px -12px rgba(18,95,221,.45); }

.card-promo{ grid-column:span 7; grid-row:span 2; min-height:400px; color:#fff;
  position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
/* The single Hero slot's live composition — image, title, description and
   CTA all live inside this one layer so a service change moves them as one
   unified piece rather than swapping text against a static picture. */
.hero-feat-inner{
  position:absolute; inset:0 -28px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:34px 62px;
  background:
    linear-gradient(180deg, rgba(8,14,28,.12) 6%, rgba(5,10,24,.94) 96%),
    linear-gradient(120deg, rgba(13,69,161,.45), rgba(6,14,36,.55)),
    var(--promo-img, linear-gradient(120% 140% at 20% 0%, #1a5fd9 0%, #0D45A1 45%, #081c47 100%)) center/cover no-repeat;
  transform:translateX(0); opacity:1;
  will-change:transform, opacity;
}
@media (prefers-reduced-motion: reduce){
  .card-promo{ transition:box-shadow .4s ease; }
}
.card-promo:hover .hero-feat-inner{ background-size:auto, auto, 108% auto; }
.hero-feat-inner .tag{ display:inline-flex; align-items:center; gap:8px; background:rgba(250,205,4,.16); color:var(--accent); border:1px solid rgba(250,205,4,.4); font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:999px; width:fit-content; margin-bottom:16px; backdrop-filter:blur(6px);}
.hero-feat-inner h3{font-size:clamp(22px,2.6vw,32px); margin-bottom:10px; max-width:420px; text-shadow:0 2px 18px rgba(0,0,0,.35);}
.hero-feat-inner p{color:rgba(255,255,255,.85); max-width:420px; margin-bottom:20px; font-size:15px;}

.card-request{ grid-column:span 5; grid-row:span 2; padding:26px; display:flex; flex-direction:column;}
.request-tabs{display:flex; gap:6px; background:var(--surface-2); padding:5px; border-radius:12px; margin-bottom:20px;}
.request-tab{
  flex:1; padding:9px 4px; border:none; background:transparent; border-radius:9px; font-size:12.5px; font-weight:500; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:4px; transition:.2s;
}
.request-tab .icon{width:18px; height:18px;}
.request-tab.active{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow); }
.request-panel{display:none; flex:1; flex-direction:column; gap:12px;}
.request-panel.active{display:flex;}

/* Live animated route preview — makes the search widget feel alive */
.route-preview{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:12px; color:var(--muted); background:color-mix(in srgb, var(--primary) 6%, transparent);
  border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin-bottom:2px;
}
.route-preview .icon{ color:var(--primary); flex-shrink:0; }
html.dark .route-preview{ background:rgba(143,180,255,.08); }
html.dark .route-preview .icon{ color:#8FB4FF; }
.rp-type{
  font-weight:600; color:var(--primary); font-family:var(--font-display);
  white-space:nowrap; min-width:1ch;
}
html.dark .rp-type{ color:#8FB4FF; }
.rp-type::after{
  content:""; display:inline-block; width:2px; height:13px; background:currentColor;
  margin-inline-start:3px; vertical-align:-2px; animation:rpBlink 1s step-end infinite;
}
@keyframes rpBlink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .rp-type::after{ animation:none; } }
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; color:var(--muted); font-weight:500;}
.field select, .field input{
  border:1px solid var(--border); background:var(--surface-2); border-radius:11px; padding:11px 12px; font-size:14px; color:var(--text); font-family:inherit;
  width:100%; transition:border-color .2s ease, box-shadow .2s ease;
}
.field select:focus, .field input:focus{ outline:none; border-color:var(--primary-grad); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.field select optgroup{ font-family:var(--font-body); font-weight:700; font-style:normal; color:var(--primary); background:var(--surface); padding-block:4px; }
.field select optgroup option{ font-weight:400; color:var(--text); padding-inline-start:6px; }
html.dark .field select optgroup{ color:#8FB4FF; }
.relation-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.relation-pill{
  border:1px solid var(--border); background:var(--surface-2); border-radius:11px; padding:10px 6px; font-size:12.5px; text-align:center; font-weight:500; color:var(--text);
}
.relation-pill.selected{ background:color-mix(in srgb, var(--primary) 12%, var(--surface-2)); border-color:var(--primary); color:var(--primary); }
.reveal-fields{display:none; flex-direction:column; gap:10px; margin-top:2px;}
.reveal-fields.show{display:flex; animation:visaFieldFade .28s ease;}
.request-note{font-size:12px; color:var(--muted); margin-top:auto; padding-top:14px;}

/* ---- family visa: host / visitor sections + other-relation field ---- */
.visa-section-title{
  font-size:12px; font-weight:700; color:var(--primary); font-family:var(--font-display);
  letter-spacing:.2px; margin-top:4px; padding-top:12px; border-top:1px dashed var(--border);
  display:flex; align-items:center; gap:6px;
}
.reveal-fields > .visa-section-title:first-child{ margin-top:0; padding-top:0; border-top:none; }
html.dark .visa-section-title{ color:#8FB4FF; }
@keyframes visaFieldFade{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){ .reveal-fields.show{ animation:none; } }

.card-row3{grid-column:span 4; padding:26px; display:flex; flex-direction:column; gap:14px; min-height:220px;}
.card-feature{ background:linear-gradient(160deg, var(--surface), var(--surface-2)); }
.badge-row{display:flex; align-items:center; justify-content:space-between;}
.icon-tile{width:46px; height:46px; border-radius:13px; background:color-mix(in srgb, var(--primary) 10%, transparent); display:flex; align-items:center; justify-content:center; color:var(--primary);}
html.dark .icon-tile{ background:rgba(143,180,255,.14); color:#8FB4FF; }
.card-row3 h4{font-size:17.5px;}
.card-row3 p{color:var(--muted); font-size:14px;}

.stat-block{display:flex; gap:22px; margin-top:4px;}
.stat-block .num{font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--primary);}
html.dark .stat-block .num{color:#8FB4FF;}
.stat-block .lbl{font-size:12px; color:var(--muted);}

.card-offer{
  color:#fff; border:1px solid rgba(250,205,4,.25); position:relative;
  background:
    linear-gradient(155deg, rgba(10,16,32,.72), rgba(8,12,26,.92)),
    var(--offer-img, linear-gradient(150deg,#12203d,#0b1220)) center/cover no-repeat;
}
.card-offer .icon-tile{ background:rgba(250,205,4,.16); color:var(--accent); }
.countdown{display:flex; gap:8px; margin-top:2px;}
.countdown .cd-box{background:rgba(255,255,255,.08); border:1px solid rgba(250,205,4,.3); border-radius:10px; padding:8px 10px; text-align:center; min-width:52px;}
.countdown .cd-box b{display:block; font-family:var(--font-mono); font-size:18px; color:var(--accent);}
.countdown .cd-box span{font-size:10px; color:rgba(255,255,255,.6);}

@media (max-width:980px){
  .card-promo, .card-request{grid-column:span 12; grid-row:span 1;}
  .card-row3{grid-column:span 12;}
  .field-row{grid-template-columns:1fr;}
}