/* ==========================================================================
   Sonic MyAccount — website brand skin
   Served statically and linked from the Emersion billing portal via:
   <link rel="stylesheet" href="https://sonicnet.net.au/billing/myaccount-theme.css">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --bg:#FFFFFF;
  --surface:#F2F4F8;
  --surface-2:#FFFFFF;
  --ink:#12151C;
  --ink-muted:#586074;
  --accent:#1E2330;
  --accent-2:#37507B;
  --accent-soft:#E1E8F4;
  --line:rgba(18,21,28,.12);
  --line-strong:rgba(18,21,28,.22);
  --on-accent:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(30,35,48,.08);
  --shadow-md:0 10px 30px -12px rgba(30,35,48,.28);
  --radius:15px;
}

*{box-sizing:border-box;}

/* Vendor CSS forces a hard min-width (measured at 1024px) on the page,
   likely a pre-responsive-design assumption, which breaks mobile
   layout entirely - everything just overflows and scrolls instead of
   reflowing. Removing it here so our own responsive rules can work. */
html,
body,
#Body,
#Body.app{
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
}

html{
  background:var(--accent-2) url('https://sonicnet.net.au/billing/hero-bg.svg') center top / cover no-repeat scroll !important;
}
body{
  margin:0;
  background:none !important;
  color:var(--ink);
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

#Body{
  min-height:100vh;
}

/* Header (login page) */
#Header{
  background:var(--accent);
  padding:22px 0;
  text-align:center !important;
  float:none !important;
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
}
#Header h1{margin:0;text-align:center !important;width:100% !important;}
#Header img{
  height:100px !important;
  width:auto !important;
  display:inline-block;
}
/* Higher-specificity versions to beat a vendor rule (likely something
   like #Body #Header{margin:0}) that was winning over the plain
   #Header/#Content/#Footer selectors above and preventing centering. */
#Body #Header,
html body #Header{margin-left:auto !important;margin-right:auto !important;}
#Body #Content,
html body #Content{margin-left:auto !important;margin-right:auto !important;}
#Body #Footer,
html body #Footer{margin-left:auto !important;margin-right:auto !important;}

/* Content / login card */
#Content{
  padding:64px 20px 96px;
  float:none !important;
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
}

#Login{
  width:100%;
  max-width:400px;
  margin:0 auto;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:36px 32px;
  overflow:auto !important;
  height:auto !important;
  max-height:none !important;
}

#Login .form{
  margin:0 0 4px !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  position:static !important;
  width:auto !important;
  float:none !important;
  overflow:auto !important;
}
#Login form{
  float:none !important;
  display:block !important;
  width:auto !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}
#Login .element{margin-bottom:18px;}
#Login .layoutcleaner{display:none;}

#Login .label label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}

#Login input[type="text"],
#Login input[type="password"]{
  width:100%;
  font-family:'Poppins',sans-serif;
  font-size:14.5px;
  color:var(--ink);
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:var(--surface-2);
}
#Login input[type="text"]:focus,
#Login input[type="password"]:focus{
  outline:none;
  border-color:var(--accent-2);
}

#Login .submit{margin-top:4px;}
#Login input[type="submit"]{
  width:100%;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:15px;
  line-height:1.3;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid transparent;
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  overflow:visible;
  transition:background .15s ease, transform .1s ease;
}
#Login input[type="submit"]:hover{background:var(--accent-2);}
#Login input[type="submit"]:active{transform:translateY(1px);}
#Login input[type="submit"]:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}

/* Messages */
#Login .message{margin-top:20px !important;background:none !important;border:none !important;box-shadow:none !important;padding:0 !important;float:none !important;position:static !important;width:auto !important;height:auto !important;max-height:none !important;overflow:visible !important;}
#Login .message ul{
  list-style:none;margin:0 !important;padding:0 !important;font-size:13.5px;color:var(--ink-muted);
  background:none !important;border:none !important;box-shadow:none !important;
  float:none !important;position:static !important;width:auto !important;height:auto !important;
}
#Login .message li{
  display:block !important;
  float:none !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin-bottom:6px !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
#Login .message li.warning{
  display:block !important;
  color:#c0392b;
  background:#FCEBEA;
  border:1px solid #F3C6C3;
  border-radius:10px;
  padding:10px 12px !important;
  font-weight:600;
  margin-bottom:8px !important;
}
#Login .message li.alternateOption{margin-top:12px !important;}
#Login .message li.alternateOption a{
  color:var(--accent-2);
  font-weight:600;
}
#Login .message li.alternateOption a:hover{text-decoration:underline;}
#Login .message p{
  display:block !important;
  position:relative !important;
  float:none !important;
  width:auto !important;
  height:auto !important;
  clear:both;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-muted);
  margin-top:16px !important;
  padding:14px 0 0 22px !important;
  border-top:1px solid var(--line);
}
#Login .message p::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  width:15px;
  height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586074' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Footer (login page) */
#Footer{
  text-align:center;
  padding:24px 20px 40px;
  font-size:12.5px;
  color:rgba(255,255,255,.75);
  background:var(--accent);
  border-top:none;
  box-shadow:none;
  float:none !important;
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
}
/* Logged-in portal footer stays full width (only the login page's
   header/content/footer are capped so the hero background shows in
   the margins). */
#Body.app #Footer{
  max-width:100% !important;
  margin:0 !important;
}
#Footer a{color:#fff;}
#Footer a:hover{text-decoration:underline;}
#Footer p{margin:0 0 6px;}
#Footer .emersion_copyright{font-size:11px;color:rgba(255,255,255,.5);opacity:.8;margin-top:6px;}


/* ==========================================================================
   Logged-in portal shell (base template — header/nav/menu/content)
   Scoped under #Body.app so these rules never leak onto the login page,
   which shares this same stylesheet but reuses the #Header/#Content ids
   for a completely different layout. Add class="app" to <div id="Body">
   in base.tpl for this scoping to apply.
   ========================================================================== */

/* Header bar: logo + primary menu on the left, account/balance on the right */
#Body.app #Header{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  background:var(--accent);
  color:var(--on-accent);
  padding:20px 32px;
  text-align:left;
  position:sticky;
  top:0;
  width:100% !important;
  max-width:100% !important;
  z-index:50;
}
/* .left no longer renders its own box - its children (logo + menu)
   become direct flex items of #Header so the menu can claim a full
   width row of its own instead of being squeezed beside .right */
#Body.app #Header .left{
  display:contents;
}
#Body.app #Header .right{
  order:2 !important;
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:column !important;
  align-items:stretch;
  gap:4px;
  padding:0;
  float:none !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

#Body.app #Header h1{order:1;margin:0;flex:0 0 auto;width:auto !important;text-align:left !important;}
#Body.app #Header h1 img{height:72px !important;width:auto !important;display:block;}

/* Primary menu - own full-width row beneath the logo/account row */
#Menu{
  order:3;
  flex:1 0 100%;
  width:100%;
  height:auto !important;
  overflow:visible !important;
  margin:20px 0 0 0 !important;
  padding:0 !important;
  float:none !important;
}
#Menu ul{
  list-style:none;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px 44px;
  margin:0;
  padding:0;
  height:auto !important;
  overflow:visible !important;
}
#Menu li{list-style:none;margin:0 !important;padding:0 !important;}
#Menu li a{
  display:inline-block !important;
  height:auto !important;
  float:none !important;
  line-height:1.3 !important;
  text-decoration:none !important;
  font-family:'Poppins',sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,.72) !important;
  background:none !important;
  border:none !important;
  border-bottom:2px solid transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:9px 0 !important;
  margin:0 !important;
  text-transform:none !important;
  transition:color .15s ease, border-color .15s ease !important;
}
#Menu li a:hover{
  color:#fff !important;
  background:none !important;
  border-bottom-color:rgba(255,255,255,.55) !important;
}

/* "Billing" grouped dropdown (View Invoices / Payment History / Transactions),
   built client-side by menu-dropdown.js. Mirrors the website's own
   NavDropdown component's structure and interaction, restyled for the
   dark header. */
#Menu li.nav-drop{position:relative;list-style:none;margin:0 !important;padding:0 !important;}
#Menu li.nav-drop .nav-drop-trigger{
  display:inline-block !important;
  height:auto !important;
  float:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  vertical-align:baseline !important;
  line-height:1.3 !important;
  font-family:'Poppins',sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  color:rgba(255,255,255,.72) !important;
  background:none !important;
  border:none !important;
  border-bottom:2px solid transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:9px 0 !important;
  margin:0 !important;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease !important;
}
#Menu li.nav-drop .nav-drop-trigger:hover,
#Menu li.nav-drop .nav-drop-trigger[aria-expanded="true"]{
  color:#fff !important;
  border-bottom-color:rgba(255,255,255,.55) !important;
}
#Menu li.nav-drop .nav-drop-chevron{
  display:inline-block !important;
  vertical-align:middle !important;
  margin-left:5px !important;
  transition:transform .15s ease;
}
#Menu li.nav-drop .nav-drop-trigger[aria-expanded="true"] .nav-drop-chevron{transform:rotate(180deg);}

/* Icons prepended to each top-nav item by menu-dropdown.js */
#Menu .nav-icon{
  display:inline-block !important;
  width:15px !important;
  height:15px !important;
  vertical-align:-3px !important;
  margin-right:7px !important;
  flex-shrink:0;
}
/* The label text after the icon is wrapped in its own <span> by the
   Emersion template, which vendor CSS gives display:block - forcing
   it onto its own line below the icon instead of sitting beside it. */
#Menu li a span{display:inline !important;}

#Menu li.nav-drop .nav-drop-panel-hitbox{
  position:absolute;
  top:100%;
  left:0;
  z-index:60;
  padding-top:10px;
}
#Menu li.nav-drop .nav-drop-panel{
  min-width:220px;
  padding:10px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) - 2px);
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:2px;
}
#Menu li.nav-drop .nav-drop-item{
  display:block !important;
  height:auto !important;
  float:none !important;
  text-align:left !important;
  line-height:1.4 !important;
  padding:10px 12px !important;
  margin:0 !important;
  border:none !important;
  border-radius:8px !important;
  background:none !important;
  box-shadow:none !important;
  font-family:'Poppins',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  text-transform:none !important;
}
#Menu li.nav-drop .nav-drop-item:hover{background:var(--surface) !important;}

/* Top-right utility nav: Account ID / Log Out */
#Navigation{
  background:rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px 18px;
}
#Navigation ul{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:0;
  width:100%;
  font-size:12.5px;
}
#Navigation li{list-style:none;margin:0 !important;padding:0 !important;}
#Navigation a{color:rgba(255,255,255,.68) !important;background:none !important;border:none !important;box-shadow:none !important;padding:0 !important;}
#Navigation a:hover{color:#fff !important;}
#Navigation a.logout{color:#fff !important;font-weight:600 !important;}

/* Hello / balance summary */
#Summary{
  text-align:right;
  background:rgba(255,255,255,.08);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:4px;
}
#Summary h3{
  margin:0 0 4px;
  font-family:'Poppins',sans-serif;
  font-size:14.5px;
  font-weight:600;
  color:var(--on-accent);
}
#Summary .balance{font-size:13px;color:rgba(255,255,255,.75);}
#Summary .balance .value{
  font-weight:700;
  color:#fff;
  background:rgba(255,255,255,.14);
  padding:2px 10px;
  border-radius:999px;
  margin-left:6px;
}

/* Content area */
#Body.app #Content{
  background:rgba(242,244,248,.94);
  padding:40px 24px 60px;
  width:100% !important;
  max-width:100% !important;
}
#Body.app #Content > *{
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
}

#notifications{margin-bottom:16px;}
.notification{
  position:relative;
  padding:14px 44px 14px 16px;
  border-radius:10px;
  margin-bottom:10px;
  font-size:13.5px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.notification .close{
  position:absolute;
  top:10px;
  right:12px;
  font-size:11px;
  color:var(--ink-muted);
  cursor:pointer;
  text-decoration:underline;
}
.notification.error{background:#FCEBEA;border-color:#F3C6C3;color:#c0392b;}
.notification.warning{background:#FFF6E5;border-color:#F5DFA6;color:#8a6116;}
.notification.success{background:#E9F7EF;border-color:#BFE6CE;color:#1a7f4b;}
.notification.information{background:var(--accent-soft);border-color:var(--line-strong);color:var(--accent-2);}

.static_message_button{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13px;color:var(--ink-muted);margin-bottom:10px;
}
.static_message{list-style:none;margin:0 0 16px;padding:0;}
.static_message li.message{
  padding:10px 14px;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;margin-bottom:6px;font-size:13px;
}

/* Main page panel */
.typography.intercept{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:32px;
}
.typography.intercept h1,
.typography.intercept h2,
.typography.intercept h3{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.01em;
}
.typography.intercept a{color:var(--accent-2);}
.typography.intercept a:hover{text-decoration:underline;}

/* Vendor styles content-area filter/search <form> wrappers with their
   own fixed-width gradient background and border. Now that our cards
   are much wider, that inner box no longer stretches to match, leaving
   its own edge visible partway across the card. Stripping it so these
   forms sit flush instead of looking like a separate box. */
.typography.intercept form{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}
.typography.intercept .form{
  background:var(--surface) !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  border-radius:10px 10px 0 0 !important;
  padding:20px !important;
  margin:0 0 24px !important;
}

.typography.intercept,
#Content [class*="intercept"]{overflow-x:auto !important;}
.typography.intercept table{width:100%;border-collapse:collapse;font-size:14px;}
.typography.intercept table th{
  text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:10px 14px;border-bottom:1px solid var(--line-strong);
  background:var(--accent) !important;
  color:var(--on-accent) !important;
}
.typography.intercept table th a,
.typography.intercept table th a:visited{
  color:var(--on-accent) !important;
  text-decoration:none !important;
}
.typography.intercept table td{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg);}

.typography.intercept input[type="text"],
.typography.intercept input[type="password"],
.typography.intercept input[type="email"],
.typography.intercept input[type="number"],
.typography.intercept select,
.typography.intercept textarea{
  font-family:'Poppins',sans-serif;
  font-size:14.5px;
  color:var(--ink);
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:var(--surface-2);
}
.typography.intercept input:focus,
.typography.intercept select:focus,
.typography.intercept textarea:focus{
  outline:2px solid var(--accent-2);
  outline-offset:1px;
  border-color:var(--accent-2);
}

.typography.intercept input[type="submit"],
.typography.intercept button{
  height:auto !important;
  line-height:1.3 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  overflow:visible !important;
  font-family:'Poppins',sans-serif !important;
  font-weight:600 !important;
  font-size:14.5px !important;
  padding:11px 22px !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  background:var(--accent) !important;
  color:var(--on-accent) !important;
  cursor:pointer;
  box-shadow:var(--shadow-sm) !important;
  transition:background .15s ease;
}
.typography.intercept input[type="submit"]:hover,
.typography.intercept button:hover{background:var(--accent-2);}

@media (max-width:900px){
  #Body.app #Header{padding:0 20px;}
  #Body.app #Header .right{align-items:flex-start;text-align:left;}
  #Summary{text-align:left;}
  #Body.app #Content{padding:28px 16px 48px;}
  .typography.intercept{padding:22px;}
}