/* ============================================================================
   ShipGlobal — member area design layer
   ----------------------------------------------------------------------------
   Loaded from resources/views/members/includes/header.blade.php, so it applies
   to every page that uses the shared member chrome.

   Deliberately additive: this sits ON TOP of Bootstrap 3 and restyles the nav,
   footer, typography, buttons, cards, forms and tables. It does NOT override
   Bootstrap's grid (.row / .col-*), so no existing page layout shifts.
   Nothing here changes markup or behaviour.
   ========================================================================== */

:root{
  --sg-blue:#003087; --sg-blue-2:#0044C8; --sg-blue-tint:#EEF4FF;
  --sg-orange:#FF6B00; --sg-orange-light:#FFF3EB; --sg-orange-dark:#B34700;
  --sg-off:#F7F9FC; --sg-border:#E4EDF6; --sg-text:#0A0A1A; --sg-muted:#6B7897;
  --sg-green:#16A34A;
  --sg-font:'DM Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --sg-radius:12px;
  --sg-shadow:0 8px 32px rgba(0,48,135,.07);
}

body.page,body{
  font-family:var(--sg-font);
  color:var(--sg-text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ── Typography ─────────────────────────────────────────────── */
.sg-mem-main h1,.sg-mem-main h2,.sg-mem-main h3,.sg-mem-main h4,
section h1,section h2,section h3,section h4{
  font-family:var(--sg-font);font-weight:700;color:var(--sg-text);
  letter-spacing:-.01em;line-height:1.25;
}
section h1{font-size:30px;margin-bottom:14px}
section h2{font-size:25px}
section h3{font-size:20px}
section p,section li{color:#2A3142;line-height:1.65}
a{color:var(--sg-blue-2);transition:color .2s}
a:hover,a:focus{color:var(--sg-orange);text-decoration:none}

/* ── Nav ────────────────────────────────────────────────────── */
/* The nav must sit above the page banner. The legacy .titlebar/.titlebar1 bands are
   position:relative with no z-index and come later in the DOM, so they painted over the
   nav's open dropdown and swallowed its first few items. */
.navbar.navbar-inverse.sg-mem-nav{
  /* No backdrop-filter here. It is decorative, and in Safari it creates both a
     stacking context and a containing block for absolutely positioned
     descendants, which left the My Account dropdown layered under the page
     banner. A solid background avoids the whole problem. */
  background:#fff!important;
  border:none;border-bottom:1px solid var(--sg-border);
  border-radius:0;margin-bottom:0;min-height:66px;
  position:relative; z-index:1040!important;
  overflow:visible!important;
}
.sg-mem-nav .container,
.sg-mem-nav .navbar-header{overflow:visible!important}
/* Let the dropdown escape the nav box and sit above everything below it. */
.sg-mem-nav .navbar-collapse{
  position:static!important; overflow:visible!important; z-index:auto;
}
/* Desktop only — below 768px custom.css intentionally makes the dropdown
   position:relative/width:100% so it stacks inline in the collapsed menu. */
@media (min-width:769px){
  .sg-mem-nav .navbar-nav > li{position:relative}
  .sg-mem-nav .navbar-nav > li > .dropdown-menu{
    position:absolute!important; top:100%; left:auto; width:auto!important;
    min-width:230px; z-index:1050!important;
  }
}
/* The banner must never paint over the nav or its dropdown.
   The views set position:relative inline, so it is positioned and would otherwise
   win on source order. Pin it below the nav explicitly. Its children are lifted
   back above the banner's own ::before overlay via .titlebar > .container. */
.titlebar,.titlebar1,.reg-hero,.ibt-hero{
  position:relative!important;
  z-index:0!important;
}
/* Belt and braces: anything that could out-stack the nav is pinned under it. */
body.page > .titlebar,
body.page > .titlebar1,
body > .titlebar,
body > .titlebar1{z-index:0!important}
.sg-mem-nav .navbar-brand{height:auto;padding:14px 15px}
.sg-mem-nav .navbar-brand img{height:30px;width:auto}
.sg-mem-nav .navbar-nav > li > a{
  color:var(--sg-text)!important;font-size:14px;font-weight:500;
  padding:23px 14px;background:transparent!important;
}
.sg-mem-nav .navbar-nav > li > a:hover,
.sg-mem-nav .navbar-nav > li > a:focus,
.sg-mem-nav .navbar-nav > .open > a{color:var(--sg-blue)!important;background:transparent!important}
.sg-mem-nav .navbar-nav > li > a:after{
  content:"";display:block;height:2px;background:var(--sg-orange);
  border-radius:2px;margin-top:5px;transform:scaleX(0);transition:transform .18s;
}
.sg-mem-nav .navbar-nav > li > a:hover:after{transform:scaleX(1)}
.sg-mem-nav .dropdown-menu{
  border:1px solid var(--sg-border);border-radius:var(--sg-radius);
  box-shadow:var(--sg-shadow);padding:8px;margin-top:2px;
}
.sg-mem-nav .dropdown-menu > li > a{
  font-size:13.5px;color:var(--sg-text);padding:9px 12px;border-radius:8px;
}
.sg-mem-nav .dropdown-menu > li > a:hover{background:var(--sg-blue-tint);color:var(--sg-blue)}
.sg-mem-nav .dropdown-menu > li > a i{color:var(--sg-muted);width:16px;margin-right:6px}
.sg-mem-nav .navbar-toggle{border-color:var(--sg-border);margin-top:16px}
.sg-mem-nav .navbar-toggle .icon-bar{background:var(--sg-text)}
/* Login / Logout treated as the primary action */
.sg-mem-nav .navbar-right > li > a{
  color:var(--sg-blue)!important;font-weight:600;
}
.sg-mem-nav .navbar-right > li > a:hover{color:var(--sg-orange)!important}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  font-family:var(--sg-font);font-weight:600;border-radius:10px;
  padding:9px 18px;transition:transform .15s,box-shadow .2s,background .2s;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary,.btn-primary:focus{
  background:var(--sg-orange);border-color:var(--sg-orange);color:#fff;
}
.btn-primary:hover,.btn-primary:active{
  background:var(--sg-orange-dark);border-color:var(--sg-orange-dark);
  box-shadow:0 8px 20px rgba(255,107,0,.28);color:#fff;
}
.btn-default{background:#fff;border-color:var(--sg-border);color:var(--sg-blue)}
.btn-default:hover{border-color:var(--sg-blue);color:var(--sg-blue);background:var(--sg-blue-tint)}
.btn-success{background:var(--sg-green);border-color:var(--sg-green)}
.get-quote,.buttoncl a,.submit{
  background:var(--sg-orange)!important;color:#fff!important;
  border-radius:10px!important;font-weight:600;border:none!important;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-control{
  font-family:var(--sg-font);font-size:14px;height:auto;padding:10px 12px;
  border:1px solid var(--sg-border);border-radius:10px;box-shadow:none;
  color:var(--sg-text);transition:border-color .15s,box-shadow .15s;
}
.form-control:focus{
  border-color:var(--sg-blue-2);box-shadow:0 0 0 3px rgba(0,68,200,.12);
}
label{font-size:13px;font-weight:600;color:var(--sg-text);margin-bottom:6px}
.input-group-addon{border:1px solid var(--sg-border);background:var(--sg-off);border-radius:10px}
.has-error .form-control{border-color:#DC2626}
.help-block{font-size:12.5px;color:var(--sg-muted)}

/* ── Panels / boxes as cards ────────────────────────────────── */
.panel,.box,.well{
  border:1px solid var(--sg-border);border-radius:var(--sg-radius);
  box-shadow:var(--sg-shadow);background:#fff;
}
.panel-heading,.box-header{
  background:var(--sg-off);border-bottom:1px solid var(--sg-border);
  border-radius:var(--sg-radius) var(--sg-radius) 0 0;font-weight:700;
}
.well{background:var(--sg-off);box-shadow:none}

/* ── Section headings (h5.color_box_heading) ────────────────────
   33 member views use this as a section bar; it rendered as a heavy solid orange
   slab. Restyled as a card header. Specificity matches the original (h5.class)
   so this wins by load order rather than !important where possible. */
h5.color_box_heading,
.color_box_heading{
  background:var(--sg-off)!important;
  border:1px solid var(--sg-border)!important;
  border-bottom:none!important;
  border-radius:var(--sg-radius) var(--sg-radius) 0 0!important;
  color:var(--sg-text)!important;
  font-family:var(--sg-font)!important;
  font-size:13px!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:14px 18px!important;
  margin:26px 0 0!important;
  position:relative;
}
h5.color_box_heading:before{
  content:""; position:absolute; left:0; top:10px; bottom:10px;
  width:3px; background:var(--sg-orange); border-radius:0 3px 3px 0;
}
/* the content block that follows a section bar reads as the body of that card */
h5.color_box_heading + .form-line,
h5.color_box_heading + div,
h5.color_box_heading + form{
  border:1px solid var(--sg-border);
  border-radius:0 0 var(--sg-radius) var(--sg-radius);
  background:#fff; padding:20px; margin-bottom:8px;
}

/* ── Form blocks ────────────────────────────────────────────────
   .form-line is the field wrapper used by 37 views. */
.form-line{padding:2px 0}
.form-line .form-group{margin-bottom:16px}

/* ── Tables ─────────────────────────────────────────────────── */
.table{font-size:13.5px;color:var(--sg-text)}
.table > thead > tr > th{
  background:var(--sg-off);border-bottom:1px solid var(--sg-border)!important;
  font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--sg-muted);
}
.table > tbody > tr > td{border-top:1px solid var(--sg-border);vertical-align:middle}
.table-hover > tbody > tr:hover{background:var(--sg-blue-tint)}
.table-striped > tbody > tr:nth-of-type(odd){background:#FBFCFE}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert{border-radius:var(--sg-radius);border:1px solid transparent;font-size:14px}
.alert-success{background:#F0FDF4;border-color:#BBF7D0;color:#166534}
.alert-danger{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
.alert-info{background:var(--sg-blue-tint);border-color:#C7DBFF;color:var(--sg-blue)}
.alert-warning{background:var(--sg-orange-light);border-color:#FFD5B8;color:var(--sg-orange-dark)}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination > li > a,.pagination > li > span{color:var(--sg-blue);border-color:var(--sg-border)}
.pagination > .active > a,.pagination > .active > span,
.pagination > .active > a:hover{background:var(--sg-blue);border-color:var(--sg-blue)}

/* ── Titlebar → hero band ───────────────────────────────────────
   59 member views render <div class="titlebar"> and set their own background
   image + height:400px in a page-level <style>. This file is pulled in from the
   header partial, i.e. AFTER those blocks, so these rules win at equal
   specificity and restyle every one of them without touching the views.
   Each page keeps its own background image; we normalise the box and overlay it
   so text stays readable (and so a missing image degrades to the brand gradient
   rather than a bare grey band). */
.titlebar,.titlebar1{
  position:relative;
  height:auto!important;
  min-height:0;
  padding:52px 0!important;
  background-color:var(--sg-blue);
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  display:flex; align-items:center;
  margin:0;
}
.titlebar:before,.titlebar1:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,48,135,.78),rgba(0,68,200,.78));
}
/* Some views hide their <h1> because the title is baked into the banner artwork.
   Those must not be washed out — drop to a light scrim instead of the brand wash. */
.titlebar:has(h1[style*="display:none"]):before,
.titlebar1:has(h1[style*="display:none"]):before{
  background:linear-gradient(135deg,rgba(0,48,135,.12),rgba(0,68,200,.12));
}
.titlebar > .container,.titlebar1 > .container{position:relative; z-index:1}
.titlebar h1,.titlebar1 h1{
  color:#fff!important; font-weight:800; font-size:34px;
  letter-spacing:-.02em; line-height:1.15; margin:0; text-align:center;
}
/* .titlecl was a translucent black slab pushed down with margin-top:15%,
   which is what produced the large empty gap under the nav. */
.titlecl{
  background:none!important; margin-top:0!important; padding:0!important;
}
@media (max-width:768px){
  .titlebar,.titlebar1{padding:34px 0!important}
  .titlebar h1,.titlebar1 h1{font-size:24px}
}

/* ============================================================
   Footer — mirrors the public site footer (sg-revamp.css)
   ============================================================ */
footer.sg-mem-footer{
  background:var(--sg-off);border-top:1px solid var(--sg-border);
  padding:56px 0 24px;margin-top:56px;color:var(--sg-muted);
}
/* brand + the 5 columns mirrored from the public site footer */
.sg-mem-footer .sg-f-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;gap:26px;margin-bottom:36px;
}
.sg-mem-footer .sg-f-brand img{height:28px;width:auto;margin-bottom:12px}
.sg-mem-footer .sg-f-about{font-size:13px;color:var(--sg-muted);line-height:1.65;max-width:300px}
.sg-mem-footer .sg-f-addr{margin-top:16px;max-width:300px}
.sg-mem-footer .sg-f-addr-head{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--sg-text);margin-bottom:6px;
}
.sg-mem-footer .sg-f-addr a,.sg-mem-footer .sg-f-addr span{font-size:13px;color:var(--sg-muted);line-height:1.65}
.sg-mem-footer .sg-f-addr a:hover{color:var(--sg-blue)}
.sg-mem-footer .sg-f-head{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--sg-text);margin-bottom:14px;
}
.sg-mem-footer .sg-f-list{display:flex;flex-direction:column;gap:9px;list-style:none;padding:0;margin:0}
.sg-mem-footer .sg-f-list a{font-size:13px;color:var(--sg-muted)}
.sg-mem-footer .sg-f-list a:hover{color:var(--sg-blue)}
.sg-mem-footer .sg-f-socials{display:flex;gap:10px;margin-top:16px}
.sg-mem-footer .sg-f-socials a{
  width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--sg-border);
  display:inline-flex;align-items:center;justify-content:center;color:var(--sg-muted);
}
.sg-mem-footer .sg-f-socials a:hover{color:var(--sg-blue);border-color:var(--sg-blue)}
.sg-mem-footer .sg-f-bottom{
  border-top:1px solid var(--sg-border);padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.sg-mem-footer .sg-f-bottom small{font-size:12px;color:var(--sg-muted)}
.sg-mem-footer .sg-f-legal{display:flex;gap:16px;flex-wrap:wrap}
.sg-mem-footer .sg-f-legal a{font-size:12px;color:var(--sg-muted)}
.sg-mem-footer .sg-f-legal a:hover{color:var(--sg-blue)}
.sg-mem-footer .sg-f-badges{display:flex;gap:8px;flex-wrap:wrap}
.sg-mem-footer .sg-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:var(--sg-muted);background:#fff;border:1px solid var(--sg-border);
  border-radius:7px;padding:5px 11px;
}

@media (max-width:980px){
  .sg-mem-footer .sg-f-grid{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:600px){
  .sg-mem-footer .sg-f-grid{grid-template-columns:1fr}
  .sg-mem-nav .navbar-nav > li > a{padding:11px 14px}
  .sg-mem-nav .navbar-nav > li > a:after{display:none}
}