
:root{
  --sos-navy:#141B41;
  --sos-blue:#007CBE;
  --sos-accent:#FF9F1C;
  --sos-gray:#e5e7eb;
  --sos-text:#111827;
  --sos-bg:#f7f8fb;
}

/* ====== V2 Hero & Card ====== */
.sos-v2-hero{max-width:1100px;margin:26px auto 12px;padding:0 16px}
@media (min-width:1200px){ .sos-v2-hero{max-width:1240px;padding:0 24px} }
.sos-v2-card{border:1px solid var(--sos-gray);border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.07);padding:18px}

/* Form row */
.sos-form-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
@media (min-width:768px){ .sos-form-row{flex-wrap:nowrap} }
.sos-field{flex:1 1 0;min-width:240px;position:relative;display:flex;flex-direction:column;gap:6px}
.sos-field label{font-size:13px;color:#334155}
.sos-with-icon input{
  padding:26px 60px; font-size:18px; border-radius:20px; border:1px solid #cbd5e1; width:100%; box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sos-with-icon input:focus{outline:none;border-color:var(--sos-blue);box-shadow:0 0 0 4px rgba(0,124,190,.2)}
/* field icons */
.sos-with-icon:before{content:'';position:absolute;left:16px;top:44px;width:20px;height:20px;background-repeat:no-repeat;background-size:20px 20px;opacity:.65}
.sos-with-icon.from:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23141B41"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3M3 11h18M6 19h12"/></svg>')}
.sos-with-icon.to:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23141B41"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>')}

/* clear button */
.sos-clear{position:absolute;right:12px;top:50%;transform:translateY(-6px);height:28px;width:28px;border:none;border-radius:50%;background:#eef2f7;color:var(--sos-navy);font-weight:900;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sos-clear:hover{background:#e6edf5}

/* swap button */
.sos-swap{flex:0 0 auto;height:64px;width:56px;border-radius:14px;border:1px solid var(--sos-gray);background:#f3f7fb;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-top:auto}
.sos-swap:hover{background:#e7f2fa}
.sos-swap:before{content:'';display:block;width:22px;height:22px;background-size:22px 22px;background-repeat:no-repeat;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23141B41"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12M12 7l-4-4m4 4l-4 4M16 17H4m4-4l4 4m-4-4l4-4"/></svg>')}

/* submit */
.sos-btn{flex:0 0 auto;height:64px;padding:0 28px;border:none;border-radius:20px;background:var(--sos-navy);color:#fff;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sos-btn:hover{box-shadow:0 10px 20px rgba(20,27,65,.25)}
.sos-btn[disabled]{opacity:.55;cursor:not-allowed}

/* Suggestions */
.sos-suggest{position:absolute;top:76px;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.08);z-index:50;display:none;max-height:280px;overflow-y:auto;overflow-x:hidden}
.sos-suggest ul{list-style:none;margin:6px;padding:0}
.sos-suggest li{padding:12px 14px;border-radius:10px;cursor:pointer}
.sos-suggest li:hover{background:#f3f7fb}

/* Results */
.sos-results-wrap{max-width:1100px;margin:18px auto 26px;padding:0 16px}
@media (min-width:1200px){ .sos-results-wrap{max-width:1240px;padding:0 24px} }
.sos-hidden{opacity:0;transform:translateY(6px);pointer-events:none}
.sos-visible{opacity:1;transform:none;pointer-events:auto}
.sos-results-title{font-size:22px;margin:8px 0 12px;color:var(--sos-navy)}
.sos-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.sos-card{border:1px solid #e5e7eb;border-radius:14px;padding:18px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .12s ease, box-shadow .12s ease;text-decoration:none;color:inherit}
.sos-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.1);background:#fff}
.sos-code{font-size:22px;font-weight:900;letter-spacing:.02em;margin-bottom:6px;color:var(--sos-navy)}
.sos-name{font-size:14px;color:#4b5563}
.sos-see-more-wrap{text-align:center;margin-top:18px}
.sos-see-more{display:inline-block;padding:10px 16px;border:1px solid #e5e7eb;border-radius:10px;background:#f3f7fb;color:var(--sos-navy);text-decoration:none;font-weight:700}
.sos-see-more:hover{background:#e6f2f9}

/* ====== Route pages (kept nice) ====== */
.sos-route-hero{
  position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:linear-gradient(120deg,var(--sos-blue) 0%, var(--sos-accent) 100%);color:#fff;border-radius:0;overflow:hidden
}
.sos-route-hero .sos-hero-inner{max-width:1240px;margin:0 auto;padding:40px 20px 30px}
@media (min-width:1200px){ .sos-route-hero .sos-hero-inner{padding:48px 24px 36px} }
.sos-route-hero::after{content:'';position:absolute;inset:auto 0 0 0;height:80px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.14" d="M0,288L80,250.7C160,213,320,139,480,138.7C640,139,800,213,960,218.7C1120,224,1280,160,1360,128L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>');background-size:cover;background-repeat:no-repeat;opacity:.9;pointer-events:none}
.sos-breadcrumbs{opacity:.9;font-size:13px;margin-bottom:6px}
.sos-breadcrumbs a{color:#fff;text-decoration:underline}
.sos-route-title{font-size:34px;font-weight:900;letter-spacing:.01em;margin:6px 0 12px}
.sos-route-sub{opacity:.98;margin:0 0 14px}
.sos-badges{display:flex;gap:10px;flex-wrap:wrap}
.sos-badge{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:6px 10px;border-radius:999px;font-weight:700;backdrop-filter:blur(2px)}
.sos-tabs{max-width:1240px;margin:18px auto 28px;padding:0 20px}
@media (min-width:1200px){ .sos-tabs{padding:0 24px} }
.sos-tablist{display:flex;gap:8px;flex-wrap:wrap;border-bottom:2px solid #e5e7eb;padding:6px;background:#fff;border-radius:12px}
.sos-tab{border:none;background:#f3f7fb;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;color:var(--sos-navy)}
.sos-tab:hover{background:#e6f2f9}
.sos-tab[aria-selected="true"]{background:var(--sos-navy);color:#fff;box-shadow:0 0 0 2px var(--sos-accent) inset}
.sos-tabpanel{display:none;padding:14px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-top:12px;box-shadow:0 2px 10px rgba(0,0,0,.04);min-height:380px}
.sos-tabpanel.active{display:block}
.sos-panel-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media (max-width:900px){ .sos-panel-grid{grid-template-columns:1fr} }
.sos-card-lite{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fff}
.sos-list{margin:0;padding-left:18px}
.sos-list li{margin:4px 0}
.sos-back{display:inline-block;margin-top:20px;padding:10px 16px;border:1px solid #e5e7eb;border-radius:10px;background:#f3f7fb;color:var(--sos-navy);text-decoration:none}

/* v2.0.1 visual polish */
.sos-v2-card{padding:14px 14px}                  /* tighter outer padding */
.sos-form-row{gap:10px}                          /* slightly smaller gaps */

/* Lock consistent element heights */
:root{ --sos-height: 64px; }

.sos-with-icon input{
  height: var(--sos-height);
  line-height: var(--sos-height);
  padding: 22px 56px;                             /* a touch slimmer but tall */
}

/* Clear button: smaller & centered, dark circle */
.sos-clear{
  height: 24px; width: 24px;
  right: 12px;
  top: 50%; transform: translateY(-50%);
  background: #111827; color: #fff;
  font-size: 14px; font-weight: 900;
  opacity: .9;
}
.sos-clear:hover{ opacity: 1; }

/* Swap button matches input height + slimmer icon */
.sos-swap{
  height: var(--sos-height); width: 56px;
  border-radius: 16px;
  background:#f3f7fb; border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center;
  margin-top: 0;                                  /* align center */
}
.sos-swap:before{ width:20px; height:20px; background-size:20px 20px }

/* Search button exactly same height & vertical center */
.sos-btn{
  height: var(--sos-height);
  padding: 0 28px;
  display:flex; align-items:center; justify-content:center;
  margin: 0;
  border-radius: 18px;
  letter-spacing:.02em;
}

/* Labels spacing polish */
.sos-field label{margin-left:4px}

/* Suggest dropdown spacing */
.sos-suggest{top: calc(var(--sos-height) + 12px);}

/* Prevent tiny horizontal scroll anywhere in the form row */
.sos-form-row{overflow-x: hidden}

/* v2.0.2: force bottom alignment + exact sizing to beat theme styles */
:root{ --sos-height: 64px; }

.sos-form-row{
  display:flex;
  align-items:flex-end;           /* align bottoms so labels don't push inputs */
}

/* Reserve consistent label height so inputs start at same Y */
.sos-field label{
  display:block;
  height:18px;
  line-height:18px;
  margin-left:4px;
  margin-bottom:6px;
}

/* Inputs exact height */
.sos-with-icon input{
  height: var(--sos-height);
  line-height: normal;
  padding: 22px 56px;
  box-sizing: border-box;
}

/* Clear button centered in taller inputs */
.sos-clear{
  top: calc(18px + var(--sos-height)/2);  /* label height + half input */
  transform: translateY(-50%);
}

/* Swap button and Search button align bottoms and match height */
.sos-swap,
.sos-btn{
  height: var(--sos-height);
  box-sizing: border-box;
  margin: 0;                         /* kill theme margins */
  align-self: auto;                  /* respect flex-end alignment */
  display:flex; align-items:center; justify-content:center;
  line-height: 1 !important;         /* ignore theme button line-height */
}

/* Prevent any tiny horizontal scroll inside form */
.sos-form-row{overflow-x:hidden}

/* v2.0.3: remove any scroll; desktop one-line; mobile stacked cleanly */
:root{ --sos-height: 64px; }

/* Base: allow wrap (mobile-first) */
.sos-form-row{
  display:flex;
  flex-wrap:wrap;          /* mobile can wrap */
  align-items:center;      /* vertical centering of all controls */
  gap:12px;
  overflow-x:visible !important;  /* ensure no scrollbar */
}

/* Inputs */
.sos-field{flex:1 1 0; min-width:260px; position:relative}
.sos-field label{display:block; margin:0 0 6px 4px; height:18px; line-height:18px}
.sos-with-icon input{
  height:var(--sos-height); padding:22px 56px; box-sizing:border-box;
  border-radius:20px; font-size:18px
}
.sos-clear{top:calc(18px + var(--sos-height)/2); transform:translateY(-50%); height:24px; width:24px}

/* Swap */
.sos-swap{height:var(--sos-height); width:56px; display:flex; align-items:center; justify-content:center; border-radius:16px; margin:0}

/* Submit */
.sos-btn{height:var(--sos-height); padding:0 28px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0}

/* Desktop & tablet: force single line, no scroll */
@media (min-width:768px){
  .sos-form-row{ flex-wrap:nowrap; }  /* one line */
  .sos-field{ min-width:280px; }
  .sos-btn{ flex:0 0 auto; }
}

/* Small screens (<768px): stack neatly, no horizontal scroll */
@media (max-width:767.98px){
  .sos-field{ flex:1 1 100%; min-width:0; }         /* full width fields stacked */
  .sos-swap{ order:3; width:52px; height:52px }     /* small inline swap before button */
  .sos-btn{ order:4; flex:1 1 100%; height:56px }   /* full-width button on a new line */
  .sos-suggest{ max-width:100%; }                   /* dropdown constrained */
}

/* v2.0.4: Modern tabs (pill style with icons) */
.sos-tabs.modern{max-width:1240px;margin:18px auto 28px;padding:0 20px}
@media (min-width:1200px){ .sos-tabs.modern{padding:0 24px} }

.sos-tablist-wrapper{
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98));
  backdrop-filter: blur(4px);
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}

.admin-bar .sos-tablist-wrapper{ top: 32px; } /* WP admin bar offset */

.sos-tablist{
  display:flex; gap:10px; flex-wrap:wrap;
  border:1px solid #e5e7eb; border-radius:14px;
  padding:6px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.05);
}

.sos-tab{
  position:relative;
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border:none; background:transparent; cursor:pointer;
  border-radius:10px; color:var(--sos-navy); font-weight:700; letter-spacing:.01em;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease;
  outline: none;
}
.sos-tab:hover{ background:#f3f7fb; }
.sos-tab:active{ transform: translateY(1px); }
.sos-tab[aria-selected="true"]{
  background: linear-gradient(90deg, var(--sos-blue) 0%, var(--sos-accent) 100%);
  color:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset;
}

.sos-icon{
  width:18px; height:18px; display:inline-block; background-size:18px 18px; background-repeat:no-repeat; opacity:.9;
}

/* Inline SVG icons */
.sos-i-overview{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h10M4 18h6"/></svg>')}
.sos-i-airlines{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M10.5 7l6.5 6.5M4 13l7 1 7 5-2 2-7-5-5-1 0-2z"/></svg>')}
.sos-i-prices{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 12l6 6L21 6"/></svg>')}
.sos-i-airports{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 21s6-4.35 6-10a6 6 0 00-12 0c0 5.65 6 10 6 10z"/></svg>')}
.sos-i-faq{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 9a3 3 0 116 0c0 2-3 2-3 4m0 4h.01"/></svg>')}
.sos-i-deals{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 7l3-3h12l3 3-3 3H6L3 7zm0 10l3 3h12l3-3-3-3H6l-3 3z"/></svg>')}

/* Panels: smooth show */
.sos-tabpanel{display:none; opacity:0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease;}
.sos-tabpanel.active{display:block; opacity:1; transform:none;}

/* v2.0.5: enforce brand colors (navy/blue/orange) on tabs and search form */
:root{
  --sos-navy:#141B41;
  --sos-blue:#007CBE;
  --sos-accent:#FF9F1C;
}

 /* --- Search form color fixes --- */
.sos-with-icon input{
  background:#ffffff;
  border:1px solid #cbd5e1;
}
.sos-with-icon input:focus{
  border-color: var(--sos-blue);
  box-shadow: 0 0 0 4px rgba(0,124,190,.18);
}
.sos-clear{ background:#e9eef5; color:var(--sos-navy) }
.sos-swap{ background:#f3f7fb; border:1px solid #e5e7eb }
.sos-swap:hover{ background:#e6f2f9 }
.sos-btn{
  background: var(--sos-navy);
  color:#fff;
}
.sos-btn:hover{ box-shadow: 0 10px 24px rgba(20,27,65,.28) }

/* --- Tabs use solid navy active + orange underline, blue hover --- */
.sos-tablist{ border-color:#e5e7eb; background:#fff }
.sos-tab{
  color: var(--sos-navy);
}
.sos-tab:hover{
  background: #f3f7fb;
  color: var(--sos-blue);
}
.sos-tab[aria-selected="true"]{
  background: var(--sos-navy);
  color:#fff;
  box-shadow: inset 0 -3px 0 var(--sos-accent); /* orange underline */
}

/* Ensure sticky bar background fits brand neutrals */
.sos-tablist-wrapper{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.98));
  border-bottom: 1px solid #eef2f7;
}

/* Results title in navy */
.sos-results-title{ color: var(--sos-navy) }
