/* Top banner: slim gradient bar with contact links on the left and the
   "free for patients" note + language and currency pickers on the right.
   Loaded by main.js on every page (after style.css, so these rules win). */
.topbar {
  position: relative; z-index: 70;
  background: var(--blue-900); /* Estate Blue (style guide 4.4: white on Estate Blue 12.07:1, as the footer) – teal until 9 Nov 2026 */
  color: #fff;
  font-size: 12.5px; letter-spacing: .01em;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar::after { /* fine gold hairline */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: rgba(0, 0, 0, .06);
  pointer-events: none;
}
.topbar .container { height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar .l, .topbar .r { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar a, .topbar .disclose { color: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .ic { width: 13px; height: 13px; opacity: .9; }
.topbar .disclose { opacity: 1; }

/* pickers */
.topbar .tb-pick { display: flex; align-items: center; gap: 6px; }
.topbar .cur-menu { position: relative; }
.topbar .cur-btn {
  height: 24px; padding: 0 9px; gap: 5px; border-radius: 999px;
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, .14); border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.topbar .cur-btn:hover, .topbar .cur-menu.open .cur-btn { background: rgba(0, 0, 0, .26); border-color: rgba(255, 255, 255, .55); }
.topbar .cur-btn b { font-weight: 600; }
.topbar .cur-btn .cur-sym { color: #fff; opacity: .85; font-weight: 500; }
.topbar .cur-btn .ic { width: 11px; height: 11px; opacity: .8; transition: transform .15s; }
.topbar .cur-btn .lang-ic { width: 13px; height: 13px; }
.topbar .cur-menu.open .cur-btn .ic:last-child { transform: rotate(180deg); }
.topbar .cur-list {
  right: 0; left: auto; top: calc(100% + 7px); z-index: 130;
  min-width: 236px; font-size: 14px; color: var(--ink, #10231b); letter-spacing: 0;
}
.topbar .cur-list li > * { white-space: nowrap; hyphens: none; }
.topbar .lang-menu .cur-list { min-width: 170px; }
.topbar .lang-menu .cur-list li { grid-template-columns: 34px 1fr; }

@media (max-width: 960px) { .topbar .disclose { display: none; } .topbar .tb-pick { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) {
  .topbar .container { height: 32px; }
  .topbar .l a + a { display: none; }
  .topbar .cur-list { right: 0; }
}
@media (max-width: 380px) { .topbar .l a { font-size: 0; gap: 0; } .topbar .l .ic { width: 15px; height: 15px; } }

/* globe, chevrons and currency symbol stay white */
.topbar .cur-btn .ic, .topbar .cur-btn .lang-ic, .topbar .cur-btn .cur-sym { color: #fff !important; opacity: 1 !important; }
/* small flags in the language and currency lists */
.cur-list .flag, .mnav-lang .flag { display: inline-block; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); line-height: 0; }
.cur-list .flag svg, .mnav-lang .flag svg { width: 100%; height: 100%; display: block; }
.topbar .cur-list li { grid-template-columns: 30px 64px 1fr; }
.topbar .lang-menu .cur-list li { grid-template-columns: 30px 1fr; }
.topbar .cur-list li span.flag { justify-self: center; }
.mnav-lang .flag { width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; }

/* left: social profiles, then phone and email */
.topbar .tb-soc { display: inline-flex; align-items: center; gap: 12px; padding-right: 16px; margin-right: -2px; border-right: 1px solid rgba(255, 255, 255, .28); }
.topbar .tb-soc a, .topbar .tb-soc span { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; }
.topbar .tb-soc svg { width: 16px; height: 16px; }
.topbar .tb-soc a:hover { opacity: .8; }
.topbar .tb-soc .off { opacity: .6; cursor: default; }

/* right: My account (profile button + drop-down), then language and currency */
.topbar .r { gap: 6px; }
.topbar .acc-menu { position: relative; }
.topbar .acc-btn .ic:first-child { width: 14px; height: 14px; }
.topbar .acc-menu.open .acc-cv { transform: rotate(180deg); }
.topbar .acc-menu.open .acc-btn { background: rgba(0, 0, 0, .26); border-color: rgba(255, 255, 255, .55); }
.acc-list { position: absolute; right: 0; top: calc(100% + 7px); z-index: 130; width: 300px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-l, 0 24px 48px -18px rgba(5, 56, 99, .28)); color: var(--navy); letter-spacing: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; }
.acc-menu.open .acc-list { opacity: 1; visibility: visible; transform: none; }
.acc-h { margin: 4px 10px 8px; font: 600 15px/1.2 var(--title); color: var(--navy); }
.acc-h small { display: block; margin-top: 3px; font: 400 12.5px/1.35 var(--text); color: var(--slate-500, #677089); }
.acc-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.topbar .acc-list .acc-i { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--navy); text-decoration: none; white-space: normal; }
.topbar .acc-list a.acc-i:hover, .topbar .acc-list a.acc-i:focus-visible { background: var(--teal-50); color: var(--navy); outline: none; }
.topbar .acc-list .acc-i > .ic { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--teal-50); color: var(--teal-700); opacity: 1; }
.topbar .acc-list .acc-i > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acc-i b { font: 600 14px/1.25 var(--title); }
.acc-i small { font-size: 12.5px; color: var(--slate-500, #677089); }
.acc-i.soon { cursor: default; }
.acc-i.soon b, .acc-i.soon > .ic { opacity: .65; }
.acc-i em { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--slate-100, #edf1ff); font: 600 11px/1.2 var(--title); font-style: normal; color: var(--slate-600, #436573); }
@media (max-width: 900px) { .topbar .tb-soc { display: none; } }
@media (max-width: 640px) { .topbar .acc-btn span { display: none; } .topbar .acc-btn { padding: 0 7px; } .acc-list { right: -90px; width: min(300px, calc(100vw - 24px)); } }
.acc-list { text-align: left; } .acc-i.soon { align-items: center; }
.topbar .acc-list .acc-i > span { align-items: flex-start; }
@media (max-width: 980px) { .topbar .l > a:first-of-type { display: inline-flex; } }

/* My account items: the same icon tiles as the main menu (grey tile, teal outline icon; tile turns teal on hover) */
.topbar .acc-list .acc-i > .ic { width: 40px; height: 40px; padding: 11px; border-radius: 11px; background: var(--smoke, #f2f6f7); color: var(--green-d, #046b67); transition: background .15s, color .15s; }
.topbar .acc-list a.acc-i:hover, .topbar .acc-list a.acc-i:focus-visible { background: var(--smoke, #f2f6f7); }
.topbar .acc-list a.acc-i:hover > .ic, .topbar .acc-list a.acc-i:focus-visible > .ic { background: var(--action); color: #fff; }
/* My account list = main menu items: same row padding, grey icon tile in teal, tile turns action teal on hover */
.topbar .acc-list .acc-i { gap: 12px; padding: 9px 10px; border-radius: 12px; }
.topbar .acc-list .acc-i > .ic { width: 40px; height: 40px; padding: 11px; border-radius: 11px; background: var(--smoke, #f2f6f7); color: var(--green-d, #046b67); opacity: 1; stroke-width: 1.9; }
.topbar .acc-list a.acc-i:hover, .topbar .acc-list a.acc-i:focus-visible { background: var(--smoke, #f2f6f7); }
.topbar .acc-list a.acc-i:hover > .ic, .topbar .acc-list a.acc-i:focus-visible > .ic { background: var(--action); color: #fff; }
.topbar .acc-list .acc-i b { font: 600 14.5px/1.25 var(--title); color: var(--navy); }
.topbar .acc-list .acc-i small { font-size: 12.5px; color: #5f6a80; }
.acc-list::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; } /* hover bridge between button and list */
.acc-i.soon b, .acc-i.soon > .ic { opacity: 1; }
/* social icons: instant tooltip under the icon (same wording as Follow us on the Guide page) */
.topbar .tb-soc [data-tip] { position: relative; }
.topbar .tb-soc [data-tip]::after { content: attr(data-tip); position: absolute; z-index: 140; left: 50%; top: calc(100% + 9px); padding: 6px 10px; border-radius: 8px; background: var(--navy, #233658); color: #fff; font: 500 12px/1.2 var(--text); white-space: nowrap; letter-spacing: 0; transform: translate(-50%, -3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s, visibility .12s; box-shadow: 0 8px 20px -8px rgba(5, 56, 99, .5); }
.topbar .tb-soc [data-tip]:hover::after, .topbar .tb-soc [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.topbar .tb-soc .off:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.topbar .tb-soc .off { opacity: 1; color: rgba(255, 255, 255, .62); }
.topbar .tb-soc [data-tip]:first-child::after { left: -6px; transform: translate(0, -3px); } .topbar .tb-soc [data-tip]:first-child:hover::after, .topbar .tb-soc [data-tip]:first-child:focus-visible::after { transform: none; }

/* My account: sections that say where things are kept */
.acc-list { width: 330px; max-height: min(80vh, 640px); overflow-y: auto; }
.acc-sh { margin: 10px 10px 4px; font: 600 10.5px/1 var(--title); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700, #04645f); }
.acc-list ul + .acc-sh { padding-top: 8px; border-top: 1px solid #eef2f5; }
.topbar .acc-list .acc-i.soon { align-items: center; }
.topbar .acc-list .acc-i.soon em { margin-left: auto; }
.acc-ft { margin: 8px 10px 4px; padding-top: 10px; border-top: 1px solid #eef2f5; font: 400 12px/1.45 var(--text, inherit); color: #5f6a80; white-space: normal; }
.topbar .acc-ft a { color: var(--teal-700, #04645f); text-decoration: underline; padding: 0; border: 0; background: none; display: inline; }
@media (max-width: 640px) { .acc-list { width: min(330px, calc(100vw - 24px)); } }
.acc-list { width: 350px; max-height: none; overflow: visible; }
.topbar .acc-list .acc-i { padding: 6px 8px; }
.topbar .acc-list .acc-i > .ic { width: 34px; height: 34px; padding: 8px; }
.acc-sh { margin-top: 8px; }
@media (max-width: 640px) { .acc-list { width: min(350px, calc(100vw - 24px)); max-height: 78vh; overflow-y: auto; } }

/* Refer & earn button – sits left of My account; on phones icon only */
.topbar .ref-menu .acc-list { width: 320px; }
@media (max-width: 640px) { .topbar .ref-menu .acc-list { right: -130px; width: min(320px, calc(100vw - 24px)); } }
@media (max-width: 420px) { .topbar .l a { font-size: 0; gap: 0; } .topbar .l .ic { width: 15px; height: 15px; } }



/* My account: uploads locked until the visitor has a quote request */
.acc-i.acc-lock em { display: inline-flex; align-items: center; gap: 4px; }
.topbar .acc-list .acc-i.acc-lock em .ic { width: 11px; height: 11px; padding: 0; background: none; color: inherit; }

/* VIP package – main-menu pill (Turkey offer: navy with sand accent, palette v1.2) */

#mnav .sm-vip-m { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 14px 16px; border-radius: 16px; background: var(--navy); color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--sand-400); }
#mnav .sm-vip-m .ic { flex: none; width: 22px; height: 22px; color: var(--sand-300); }
#mnav .sm-vip-m b { display: block; font: 600 16px var(--title); }
#mnav .sm-vip-m small { display: block; font-size: 13px; opacity: .8; }

/* header rhythm: equal visible gaps between menu words, VIP and Free quotes; VIP same height as Free quotes */
/* header: logo | menu centred in the free space | VIP + Quotes as a matching pair */
@media (min-width: 1181px) { .header .container { gap: 0 !important; } .header .nav.sm-nav { margin: 0 0 0 auto !important; padding: 0 !important; } .header .tools { margin-left: 15px !important; gap: 26px !important; } }
.header .hdr-cta.hdr-vip { background: linear-gradient(90deg, var(--sand-300), var(--sand-400)); color: var(--slate-900); text-decoration: none; }
.header .hdr-cta.hdr-vip .dot { border-radius: 50% !important; background: var(--slate-900); color: var(--sand-300); }
.header .hdr-cta.hdr-vip .dot .ic { width: 15px; height: 15px; }
.header .hdr-cta.hdr-vip:hover, .header .hdr-cta.hdr-vip:focus-visible, .header .hdr-cta.hdr-vip.active { background: linear-gradient(90deg, var(--sand-200), var(--sand-300)); }
@media (max-width: 1100px) { .header .hdr-cta.hdr-vip { display: none; } }

/* Help in the top bar ("?" button) */
.topbar .help-menu .acc-btn .ic:first-child { width: 14px; height: 14px; }
@media (max-width: 640px) { .topbar .help-menu .acc-btn span { display: none; } .topbar .help-menu .acc-btn { padding: 0 7px; } .topbar .help-menu .acc-list { right: -170px; width: min(300px, calc(100vw - 24px)); } }
/* VIP and Quotes: identical width so they read as a matching pair */
@media (min-width: 1181px) { .header .tools .hdr-cta { width: 120px !important; justify-content: center; padding-left: 6px !important; padding-right: 6px !important; } }
@media (min-width: 1181px) and (max-width: 1280px) { .header .tools .hdr-cta { width: 114px !important; } }

/* VIP: simple gold pill with navy text (option B), no icon */
.header .hdr-cta.hdr-vip { padding: 0 6px !important; font-weight: 700; letter-spacing: .1em; }

/* language and currency: hover bridge between button and list (same as My account) */
.topbar .cur-list::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }

/* tablets (iPad portrait and landscape): keep every button label on one line and give the right-hand menus room –
   the email shrinks to its icon (still a mailto link), the phone number stays */
.topbar .acc-btn span, .topbar .cur-btn b { white-space: nowrap; }
@media (max-width: 1180px) { .topbar .l a[href^="mailto:"] { font-size: 0; gap: 0; } .topbar .l a[href^="mailto:"] .ic { width: 15px; height: 15px; } }
@media (min-width: 641px) and (max-width: 860px) { .topbar .container { gap: 10px; } .topbar .l { gap: 14px; } .topbar .acc-btn, .topbar .cur-btn { padding: 0 8px; } }
@media (min-width: 641px) and (max-width: 767px) { .topbar .help-menu .acc-btn span, .topbar .ref-menu .acc-btn span { display: none; } .topbar .help-menu .acc-btn, .topbar .ref-menu .acc-btn { padding: 0 7px; } }
/* phones: phone number as an icon up to 640px so the menus always fit (it reappeared at 421–640px and pushed the currency off-screen) */
@media (max-width: 640px) { .topbar .l a { font-size: 0; gap: 0; } .topbar .l .ic { width: 15px; height: 15px; } }
/* small phones (iPhone SE, 320–374px): drop the globe, currency symbol and chevrons so all seven buttons fit */
@media (max-width: 374px) { .topbar .container { gap: 8px; } .topbar .r { gap: 4px; } .topbar .tb-pick { gap: 4px; } .topbar .cur-btn .lang-ic, .topbar .cur-btn .cur-sym, .topbar .tb-pick .cur-btn > .ic:last-child, .topbar .acc-btn .acc-cv { display: none; } .topbar .acc-btn, .topbar .cur-btn { padding: 0 8px; } }
/* phones: Help / Earn rewards / My account panels span the screen under the top bar (they ran off the left edge) */
@media (max-width: 640px) {
  .topbar .acc-menu { position: static; }
  .topbar .acc-menu .acc-list { left: 12px; right: 12px; width: auto; top: calc(100% + 4px); }
}
@media (min-width: 641px) and (max-width: 900px) { .topbar .help-menu .acc-list { left: 0; right: auto; } }