/* ArrivalCardGuide – Countries page (matches approved mockup) */
:root{
  --blue:#0b5fd0;--blue-2:#0a4fb4;--navy:#08306f;--navy-2:#06265a;--ink:#0d3a82;--text:#2c5388;--muted:#5d7fa8;
  --line:#d3e6fa;--panel:#eef7ff;--panel-2:#e4f2ff;--white:#fff;
  --font:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:#f3f9ff;min-height:100vh;padding:0}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input,select{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--blue);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:16px}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.frame{width:100%;margin:0;background:#f3f9ff;border:0;border-radius:0;overflow-x:clip;box-shadow:none}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #e1edf9}
.bar{display:flex;align-items:center;gap:20px;height:72px;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .plane{width:40px;height:40px;color:var(--blue)}
.brand b{display:block;font-size:1.18rem;font-weight:800;letter-spacing:-.02em;color:#0a3d96;line-height:1.1}
.brand small{display:block;font-size:.62rem;font-weight:500;color:#5a7aa3;margin-top:2px;letter-spacing:.01em}
.main-nav{display:flex;align-items:center;justify-content:center;gap:34px;flex:1}
.main-nav>a,.nav-item>a{position:relative;display:inline-flex;align-items:center;gap:5px;padding:24px 0;font-size:.86rem;font-weight:500;color:#1b4a94;white-space:nowrap}
.main-nav>a:hover,.nav-item>a:hover{color:var(--blue)}
.main-nav .ic{font-size:.8em}
.main-nav a[aria-current=page]{font-weight:700;color:var(--blue)}
.main-nav a[aria-current=page]::after{content:"";position:absolute;left:-4px;right:-4px;bottom:11px;height:2px;background:var(--blue);border-radius:2px}
.main-nav a[aria-current=page]::before{content:"";position:absolute;left:50%;bottom:6px;width:5px;height:5px;margin-left:-2.5px;background:var(--blue);border-radius:50%}
.nav-item{position:relative}
.nav-item .drop{position:absolute;top:calc(100% - 8px);left:-14px;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(18,70,140,.18);padding:8px;display:none;z-index:60}
.nav-item:hover .drop,.nav-item:focus-within .drop,.nav-item.open .drop{display:block}
.drop a{display:block;padding:9px 12px;border-radius:8px;font-size:.84rem;font-weight:500;color:#1b4a94}
.drop a:hover{background:var(--panel);color:var(--blue)}
.head-actions{display:flex;align-items:center;gap:16px;flex:none}
.search-btn{width:40px;height:40px;border-radius:50%;border:0;background:#e6f2ff;color:var(--blue);display:grid;place-items:center;cursor:pointer;font-size:1.05rem}
.search-btn:hover{background:#d5e9ff}
.plan-cta{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 22px;border-radius:99px;background:linear-gradient(180deg,#0f66d6,#0a4aa6);color:#fff;font-size:.86rem;font-weight:600;box-shadow:0 6px 16px rgba(10,74,166,.35)}
.plan-cta:hover{filter:brightness(1.08)}
.menu-toggle{display:none;width:42px;height:42px;border:0;border-radius:10px;background:#e6f2ff;color:var(--blue);font-size:1.4rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:272px;background:#7fc0f4 url(countries-hero.webp) right center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(228,243,255,.55) 0%,rgba(228,243,255,.2) 32%,rgba(228,243,255,0) 52%),linear-gradient(180deg,rgba(255,255,255,0) 70%,rgba(243,249,255,.9) 100%)}
.hero-inner{padding:38px 44px 40px;max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:99px;background:rgba(255,255,255,.92);color:#0b4aa8;font-size:.82rem;font-weight:600;box-shadow:0 4px 14px rgba(20,90,170,.16)}
.eyebrow .ic{font-size:1.05rem}
.hero h1{margin:16px 0 12px;font-size:clamp(2.1rem,3.6vw,3rem);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:#0b3a8c}
.hero p{margin:0;max-width:560px;font-size:1rem;line-height:1.65;font-weight:500;color:#10386f}
.hero-plane{position:absolute;z-index:0;left:46%;top:21%;width:min(21vw,290px);transform:rotate(-4deg);height:auto;filter:drop-shadow(0 10px 12px rgba(10,50,110,.3));pointer-events:none}

/* ---------- Layout ---------- */
.content{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;padding:20px 26px 26px;align-items:start}
.toolbar{display:grid;grid-template-columns:minmax(150px,1.05fr) repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:center;background:linear-gradient(180deg,#f7fbff,#eaf5ff);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:16px;box-shadow:0 8px 22px rgba(30,100,180,.08)}
.field{position:relative;display:flex;align-items:center;min-width:0;height:46px;background:#fff;border:1px solid #dcebfa;border-radius:12px;box-shadow:0 2px 6px rgba(30,100,180,.05)}
.field>.ic{position:absolute;left:12px;font-size:1.05rem;color:var(--blue);pointer-events:none}
.field>.chev{left:auto;right:11px;font-size:.9rem}
.field select{text-overflow:ellipsis}
.field input,.field select{width:100%;height:100%;border:0;background:transparent;outline:0;padding:0 28px 0 38px;font-size:.8rem;font-weight:500;color:#173f7c;appearance:none;-webkit-appearance:none;cursor:pointer;border-radius:12px}
.field input{cursor:text}
.field input::placeholder{color:#6f8fb6}
.field:focus-within{border-color:#69a6ee;box-shadow:0 0 0 3px rgba(40,120,220,.16)}
.total{padding:0 6px 0 12px;text-align:right;font-size:.8rem;font-weight:600;color:#1a4a94;line-height:1.35;white-space:nowrap}
.total b{display:block;font-size:1.35rem;font-weight:800;color:var(--navy)}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#ffffff,#f0f8ff);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(30,100,180,.10);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,100,180,.18)}
.card[hidden]{display:none}
.photo{position:relative;display:block;height:132px;overflow:hidden;background:#cfe6fb}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.card:hover .photo img{transform:scale(1.06)}
.body{position:relative;padding:12px 12px 15px;display:flex;flex-direction:column;flex:1}
.flag{position:absolute;left:12px;top:-19px;width:38px;height:38px;border-radius:50%;border:3px solid #fff;overflow:hidden;box-shadow:0 3px 10px rgba(10,50,110,.28);background:#fff}
.flag img{width:100%;height:100%;object-fit:cover}
.card h2{margin:0 0 5px 46px;min-height:22px;font-size:1.06rem;font-weight:700;letter-spacing:-.01em;color:#0b4aa8;line-height:1.3}
.card p{margin:8px 0 10px;font-size:.78rem;line-height:1.5;color:var(--muted);font-weight:500;min-height:3em}
.tags{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:11px}
@media(min-width:1380px){.tags{flex-wrap:nowrap}}
.tags span{display:inline-flex;align-items:center;gap:3px;padding:4px 4px;border-radius:6px;background:#e6f2ff;color:#1558ad;font-size:.54rem;letter-spacing:-.005em;font-weight:600;white-space:nowrap}
.tags .ic{font-size:.68rem;stroke-width:2.2}
.guide{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;color:var(--blue)}
.guide .ic{transition:transform .2s}
.card:hover .guide .ic{transform:translateX(4px)}
.more-wrap{display:flex;justify-content:center;margin-top:20px}
.more{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 26px;border-radius:99px;border:1px solid #b9d6f5;background:#fff;color:var(--blue);font-size:.86rem;font-weight:600;cursor:pointer;box-shadow:0 5px 14px rgba(30,100,180,.10)}
.more:hover{background:#eaf4ff}
.more[hidden]{display:none}
.empty{display:none;grid-column:1/-1;text-align:center;padding:36px;border:2px dashed #a9cdf0;border-radius:16px;background:#fff;color:#3e6592;font-weight:500}

/* ---------- Sidebar ---------- */
.side{display:grid;gap:16px;position:sticky;top:88px}
.panel{background:linear-gradient(160deg,#f6fbff,#e3f1ff);border:1px solid var(--line);border-radius:16px;padding:18px 18px 18px;box-shadow:0 8px 22px rgba(30,100,180,.08)}
.panel h2{display:flex;align-items:center;gap:10px;margin:0;font-size:.98rem;font-weight:700;color:#0b4aa8}
.panel h2 .ic{font-size:1.5rem;color:var(--blue);stroke-width:1.8}
.panel .lead{margin:6px 0 14px 0;font-size:.78rem;line-height:1.5;color:var(--muted);font-weight:500}
.panel .field{margin-bottom:9px;height:44px}
.go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:46px;margin-top:6px;border:0;border-radius:11px;background:linear-gradient(180deg,#0f66d6,#0a4aa6);color:#fff;font-size:.88rem;font-weight:600;cursor:pointer;box-shadow:0 7px 16px rgba(10,74,166,.32)}
.go:hover{filter:brightness(1.08)}
.pop{list-style:none;margin:12px 0 10px;padding:0;display:grid;gap:3px}
.pop a{display:flex;align-items:center;gap:11px;padding:6px 4px;border-radius:10px;font-size:.88rem;font-weight:500;color:#1b4a94}
.pop a:hover{background:rgba(255,255,255,.8)}
.pop .n{width:22px;height:22px;border-radius:50%;border:1.5px solid #8bbaf0;background:#f2f8ff;color:var(--blue);display:grid;place-items:center;font-size:.7rem;font-weight:700;flex:none}
.pop .f{width:30px;height:30px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 6px rgba(10,50,110,.25);flex:none}
.pop .f img{width:100%;height:100%;object-fit:cover}
.viewall{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;color:var(--blue)}
.check{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:11px}
.check li{display:flex;align-items:center;gap:12px;font-size:.84rem;font-weight:500;color:#1b4a94;padding-left:6px}
.check svg{width:20px;height:20px;color:var(--blue);flex:none}

/* ---------- Footer ---------- */
.site-footer{margin:0 14px 14px;border-radius:14px;background:linear-gradient(100deg,#082c66,#0a3a82 55%,#082c66);color:#fff}
.foot{display:flex;align-items:center;gap:20px;height:78px;padding:0 24px}
.foot .brand b{color:#fff;font-size:1.1rem}
.foot .brand small{color:#a9c6ee}
.foot .brand .plane{color:#fff}
.foot nav{display:flex;gap:30px;flex:1;justify-content:center}
.foot nav a{font-size:.82rem;font-weight:500;color:#dbe9ff;padding:4px 0;border-bottom:2px solid transparent}
.foot nav a:hover,.foot nav a[aria-current=page]{color:#fff;border-bottom-color:#fff}
.social{display:flex;align-items:center;gap:18px}
.social a{color:#fff;display:grid;place-items:center;width:26px;height:26px;opacity:.95}
.social a:hover{opacity:1;transform:translateY(-2px)}
.social svg{width:22px;height:22px;fill:currentColor}
.top{width:40px;height:40px;border:0;border-radius:50%;background:#0d4fae;color:#fff;display:grid;place-items:center;cursor:pointer;font-size:1.05rem;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.top:hover{background:#1767d6}

/* ---------- Responsive ---------- */
@media(max-width:1240px){
  .content{grid-template-columns:minmax(0,1fr) 270px;gap:18px;padding:18px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .main-nav{gap:22px}
  .bar{padding:0 20px}
}
@media(max-width:1020px){
  body{padding:8px}
  .content{grid-template-columns:1fr}
  .side{position:static;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .main-nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 16px;box-shadow:0 14px 24px rgba(18,70,140,.12)}
  .main-nav.open{display:flex}
  .main-nav>a,.nav-item>a{padding:13px 0;border-bottom:1px solid #edf4fc}
  .main-nav a[aria-current=page]::after,.main-nav a[aria-current=page]::before{display:none}
  .nav-item .drop{position:static;display:none;box-shadow:none;border:0;padding:0 0 6px 12px}
  .nav-item.open .drop{display:block}
  .menu-toggle{display:grid;place-items:center;margin-left:auto}
  .head-actions{margin-left:0}
  .hero-plane{left:auto;right:8%;top:12%}
}
@media(max-width:760px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .toolbar{grid-template-columns:1fr 1fr}
  .toolbar .field:first-child{grid-column:1/-1}
  .total{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:8px}
  .side{grid-template-columns:1fr}
  .hero-inner{padding:28px 22px 32px}
  .hero::after{background:linear-gradient(90deg,rgba(228,243,255,.8),rgba(228,243,255,.45))}
  .plan-cta{display:none}
  .foot{flex-direction:column;height:auto;padding:20px;gap:16px}
  .foot nav{flex-wrap:wrap;gap:14px 22px}
  .hero-plane{display:none}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr}
  .photo{height:160px}
  .toolbar{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}