/* ===========================================================================
   SADS COMIC SKIN for HostBill template_2019
   ---------------------------------------------------------------------------
   Upload to:  templates/portal/template_2019/dist/css/sads-comic.css
   It is pulled in by header.tpl AFTER app.min.css, so it overrides the stock
   theme without touching a single line of it.

   Every rule is scoped to body.sads-comic (the class added in header.tpl), so
   removing that one class in the body tag switches the whole skin off. Useful
   if a HostBill update breaks something and you need the stock look back in a
   hurry.

   template_2019 is Bootstrap 4 based, so this targets standard Bootstrap
   components: .card, .btn, .table, .form-control, .alert, .modal, .badge,
   .nav-link, plus HostBill's own .pageloader and PNotify popups.

   CAVEAT: I have not seen your rendered client area, only header.tpl. The
   selectors below cover the Bootstrap components template_2019 is built on and
   should get you most of the way there. Send me a screenshot of the dashboard,
   an invoice and the cart and I will tighten the rest.
   =========================================================================== */

body.sads-comic{
  --ink:#101010;
  --paper:#FFFDF2;
  --cream:#FFF2C0;
  --cyan:#00B7EF;
  --magenta:#EC008C;
  --pop:#FFE500;
  --ink-w:3px;
  --pop-shadow:6px 6px 0 var(--ink);
  --spring:cubic-bezier(.2,1.6,.4,1);

  color:var(--ink) !important;
  font-family:'Space Grotesk', system-ui, sans-serif !important;

  /* Plain background. The halftone dots were competing with body text and
     making the lighter labels hard to read - texture belongs behind big type,
     not behind a table of invoice numbers. For pure white change this to #FFF;
     paper is a warm near-white that still separates from the white cards. */
  background-color:var(--paper) !important;
  background-image:none !important;
}

/* Belt and braces: the loader must stay out of the flow whatever else changes. */
body.sads-comic .pageloader-wrapper{ position:fixed !important; }

body.sads-comic ::selection{ background:var(--pop); color:var(--ink); }

/* ---------------------------------------------------------------- lettering */
body.sads-comic h1,
body.sads-comic h2,
body.sads-comic .page-title,
body.sads-comic .card-title{
  font-family:'Bangers', Impact, cursive !important;
  letter-spacing:.02em; line-height:1.05;
  color:var(--cyan);
  font-style:normal !important;      /* Bangers has no italic - stop the fake slant */
  -webkit-text-stroke:1.5px var(--ink);
  paint-order:stroke fill;
  text-shadow:3px 3px 0 var(--ink);
  text-transform:uppercase;
}
/* Card titles run small, where a 1.5px stroke closes up the counters. */
body.sads-comic .card-title,
body.sads-comic h2{
  -webkit-text-stroke:1px var(--ink);
  text-shadow:2px 2px 0 var(--ink);
}
body.sads-comic h3,
body.sads-comic h4,
body.sads-comic h5,
body.sads-comic h6,
body.sads-comic .card-header,
body.sads-comic label,
body.sads-comic th{
  font-family:'Archivo Black', sans-serif !important;
  letter-spacing:0;
}
body.sads-comic a{ color:var(--magenta); }
body.sads-comic a:hover{ color:var(--ink); }

/* ------------------------------------------------------------------- panels */
body.sads-comic .card,
body.sads-comic .panel,
body.sads-comic .widget,
body.sads-comic .box{
  background:var(--paper) !important;
  border:var(--ink-w) solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:var(--pop-shadow) !important;
}
body.sads-comic .card-header{
  background:var(--cream) !important;
  border-bottom:var(--ink-w) solid var(--ink) !important;
  border-radius:0 !important;
  font-size:14px; text-transform:uppercase;
}
body.sads-comic .card-footer{
  background:#FFFFFF !important;
  border-top:var(--ink-w) solid var(--ink) !important;
}
/* The product listing panels read better as clean white, with the halftone
   page behind them doing the texturing. */
body.sads-comic .card,
body.sads-comic .card-body{
  background:#FFFFFF !important;
}

/* ------------------------------------------------------------------ buttons */
body.sads-comic .btn{
  font-family:'Bangers', Impact, cursive !important;
  font-size:18px !important; letter-spacing:.05em;
  padding:9px 20px 6px !important;
  border:var(--ink-w) solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:4px 4px 0 var(--ink) !important;
  transition:transform .16s var(--spring), box-shadow .16s ease !important;
}
body.sads-comic .btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink) !important; }
body.sads-comic .btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink) !important; }
body.sads-comic .btn:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }

body.sads-comic .btn-primary{ background:var(--magenta) !important; color:var(--paper) !important; }
body.sads-comic .btn-success{ background:var(--cyan) !important; color:var(--paper) !important; }
body.sads-comic .btn-secondary,
body.sads-comic .btn-default,
body.sads-comic .btn-light{ background:var(--paper) !important; color:var(--ink) !important; }
body.sads-comic .btn-warning{ background:var(--pop) !important; color:var(--ink) !important; }
body.sads-comic .btn-danger{ background:#D42A1E !important; color:var(--paper) !important; }
body.sads-comic .btn-link{ box-shadow:none !important; border-color:transparent !important; }
body.sads-comic .btn-sm{ font-size:15px !important; padding:6px 14px 4px !important; }

/* -------------------------------------------------------------------- forms */
body.sads-comic .form-control,
body.sads-comic .custom-select,
body.sads-comic .selectize-input,
body.sads-comic input[type="text"],
body.sads-comic input[type="email"],
body.sads-comic input[type="password"],
body.sads-comic input[type="number"],
body.sads-comic textarea,
body.sads-comic select{
  background:var(--paper) !important;
  color:var(--ink) !important;
  border:var(--ink-w) solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:inset 3px 3px 0 rgba(16,16,16,.07) !important;
  font-family:'Space Grotesk', sans-serif !important;
}
body.sads-comic .form-control:focus,
body.sads-comic .selectize-input.focus,
body.sads-comic select:focus,
body.sads-comic textarea:focus{
  outline:3px solid var(--magenta) !important;
  outline-offset:1px;
  box-shadow:none !important;
}
body.sads-comic label{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
body.sads-comic .input-group-text{
  background:var(--pop) !important; color:var(--ink) !important;
  border:var(--ink-w) solid var(--ink) !important; border-radius:0 !important;
}

/* ------------------------------------------------------------------- tables */
body.sads-comic .table{
  border:var(--ink-w) solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  /* custom.min.css gives .table a 6px radius with overflow:hidden. Against a
     square 4px ink border that leaves dark crescents poking out at the corners
     of the header row. Square everything off. */
  border-radius:0 !important;
  overflow:visible !important;
}
body.sads-comic .table-radius,
body.sads-comic .table-borders,
body.sads-comic .table-responsive{
  border-radius:0 !important;
}
body.sads-comic .table thead th:first-child,
body.sads-comic .table thead th:last-child,
body.sads-comic .table tr:first-child td:first-child,
body.sads-comic .table tr:first-child td:last-child,
body.sads-comic .table tr:last-child td:first-child,
body.sads-comic .table tr:last-child td:last-child{
  border-radius:0 !important;
}
/* The dark tabs poking out at each end of the header row. Only three things
   can draw that shape, so neutralise all three rather than guess:
     - a box-shadow on the table, thead, row or header cell
     - a ::before / ::after on the table or its .table-borders wrapper
     - border-spacing, which lets the table background show between cells
   None of them are wanted here; the ink borders do all the work. */
body.sads-comic .table,
body.sads-comic .table thead,
body.sads-comic .table thead tr,
body.sads-comic .table thead th,
body.sads-comic .table tbody tr,
body.sads-comic .table-borders,
body.sads-comic .table-radius,
body.sads-comic .table-responsive{
  box-shadow:none !important;
}
body.sads-comic .table::before,
body.sads-comic .table::after,
body.sads-comic .table thead::before,
body.sads-comic .table thead::after,
body.sads-comic .table thead th::before,
body.sads-comic .table thead th::after,
body.sads-comic .table-borders::before,
body.sads-comic .table-borders::after,
body.sads-comic .table-radius::before,
body.sads-comic .table-radius::after,
body.sads-comic .table-responsive::before,
body.sads-comic .table-responsive::after{
  content:none !important;
  display:none !important;
}
body.sads-comic .table{
  border-collapse:collapse !important;
  border-spacing:0 !important;
}
body.sads-comic .table thead th:first-child,
body.sads-comic .table tbody td:first-child{ border-left:2px solid var(--ink) !important; }
body.sads-comic .table thead th:last-child,
body.sads-comic .table tbody td:last-child{ border-right:2px solid var(--ink) !important; }

body.sads-comic .table thead th{
  background:var(--pop) !important;
  color:var(--ink) !important;
  border:2px solid var(--ink) !important;
  font-size:12px; text-transform:uppercase; letter-spacing:.04em;
}
body.sads-comic .table td,
body.sads-comic .table th{ border:2px solid var(--ink) !important; vertical-align:middle; }
body.sads-comic .table-striped tbody tr:nth-of-type(odd){ background:var(--cream) !important; }
body.sads-comic .table-hover tbody tr:hover{ background:rgba(0,183,239,.16) !important; }

/* ------------------------------------------------------- badges and statuses */
body.sads-comic .badge,
body.sads-comic .label,
body.sads-comic .status{
  border-radius:0 !important;
  border:2px solid var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:10.5px !important; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 8px !important;
}
body.sads-comic .badge-success,
body.sads-comic .badge-active{ background:var(--cyan) !important; color:var(--paper) !important; }
body.sads-comic .badge-warning,
body.sads-comic .badge-pending{ background:var(--pop) !important; color:var(--ink) !important; }
body.sads-comic .badge-danger,
body.sads-comic .badge-overdue{ background:var(--magenta) !important; color:var(--paper) !important; }
body.sads-comic .badge-secondary,
body.sads-comic .badge-light{ background:var(--paper) !important; color:var(--ink) !important; }

/* ---------------------------------------------------- alerts and PNotify pops */
body.sads-comic .alert,
body.sads-comic .ui-pnotify-container{
  background:var(--cream) !important;
  color:var(--ink) !important;
  border:var(--ink-w) solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:5px 5px 0 var(--ink) !important;
  font-family:'Space Grotesk', sans-serif !important;
}
body.sads-comic .alert-danger,
body.sads-comic .ui-pnotify.error .ui-pnotify-container{ background:var(--magenta) !important; color:var(--paper) !important; }
body.sads-comic .alert-success,
body.sads-comic .ui-pnotify.success .ui-pnotify-container{ background:var(--cyan) !important; color:var(--paper) !important; }
body.sads-comic .ui-pnotify-title{
  font-family:'Bangers', Impact, cursive !important;
  font-size:20px !important; letter-spacing:.04em;
}

/* -------------------------------------------------- sidebar and top navbar ===
   The sidebar was ink on ink: the theme's material icons inherit a dark colour,
   so on a black panel they were invisible until an item was hovered and the
   magenta background appeared behind them. Rather than force every icon light
   and hope none are missed, the sidebar now uses the page background. Icons and
   labels are ink on paper, which cannot go invisible whatever the theme does to
   an individual icon.

   To go back to the black sidebar, set the background below to var(--ink), the
   link colour to var(--paper), and add:
       body.sads-comic .sidebar i,
       body.sads-comic .sidebar .material-icons,
       body.sads-comic .sidebar svg { color:var(--paper) !important;
                                      fill:var(--paper) !important; }             */
body.sads-comic .sidebar,
body.sads-comic .sidenav,
body.sads-comic #sidebar,
body.sads-comic .app-sidebar{
  background:var(--paper) !important;
  border-right:4px solid var(--ink) !important;
}
body.sads-comic .sidebar a,
body.sads-comic .sidenav a,
body.sads-comic .app-sidebar a,
body.sads-comic .sidebar .nav-link{
  color:var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:13px; letter-spacing:.02em;
}
/* Icons follow the label colour in every state, so they can never vanish. */
body.sads-comic .sidebar i,
body.sads-comic .sidebar svg,
body.sads-comic .sidebar .material-icons,
body.sads-comic .sidenav i,
body.sads-comic .sidenav svg,
body.sads-comic .sidenav .material-icons,
body.sads-comic .app-sidebar i,
body.sads-comic .app-sidebar svg,
body.sads-comic .app-sidebar .material-icons{
  color:inherit !important;
  fill:currentColor !important;
  opacity:1 !important;
}
body.sads-comic .sidebar a:hover,
body.sads-comic .sidenav a:hover,
body.sads-comic .app-sidebar a:hover{
  background:var(--pop) !important;
  color:var(--ink) !important;
}
body.sads-comic .sidebar .nav-link.active,
body.sads-comic .sidebar a.active,
body.sads-comic .sidenav a.active,
body.sads-comic .app-sidebar a.active{
  background:var(--magenta) !important;
  color:var(--paper) !important;
}
body.sads-comic .navbar,
body.sads-comic .app-header,
body.sads-comic .main-header{
  background:var(--pop) !important;
  border-bottom:4px solid var(--ink) !important;
  box-shadow:none !important;
}
body.sads-comic .navbar a,
body.sads-comic .app-header a{ color:var(--ink) !important; }

/* ------------------------------------------------------------------- modals */
body.sads-comic .modal-content{
  background:var(--paper) !important;
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:10px 10px 0 var(--ink) !important;
}
body.sads-comic .modal-header,
body.sads-comic .modal-footer{
  background:var(--cream) !important;
  border-color:var(--ink) !important;
  border-width:var(--ink-w) !important;
}
body.sads-comic .dropdown-menu{
  background:var(--paper) !important;
  border:var(--ink-w) solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:5px 5px 0 var(--ink) !important;
}
body.sads-comic .dropdown-item:hover{ background:var(--pop) !important; color:var(--ink) !important; }

/* ---------------------------------------------------------------- page loader */
body.sads-comic .pageloader-layer{
  border-color:var(--magenta) !important;
  border-radius:0 !important;
}

/* ------------------------------------------------------------------ progress */
body.sads-comic .progress{
  background:var(--cream) !important;
  border:var(--ink-w) solid var(--ink) !important;
  border-radius:0 !important;
  height:16px;
}
body.sads-comic .progress-bar{
  background:var(--cyan) !important;
  border-radius:0 !important;
}

/* ------------------------------------------------------------------ tab nav */
body.sads-comic .nav-tabs{ border-bottom:var(--ink-w) solid var(--ink) !important; }
body.sads-comic .nav-tabs .nav-link{
  border:var(--ink-w) solid var(--ink) !important;
  border-radius:0 !important;
  background:var(--cream) !important;
  color:var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:12.5px; text-transform:uppercase; margin-right:6px;
}
body.sads-comic .nav-tabs .nav-link.active{ background:var(--pop) !important; }

/* ============================================================ footer.tpl bits
   The stock footer paints its links with .text-secondary, which lands as pale
   grey on cream and fails contrast. These pull it back to ink.                */
body.sads-comic .footer-content,
body.sads-comic .footer{
  background:var(--cream) !important;
  border-top:4px solid var(--ink) !important;
  color:var(--ink) !important;
}
body.sads-comic .footer-box{ padding:16px 0; }
body.sads-comic .footer .text-secondary,
body.sads-comic .footer small,
body.sads-comic .footer .nav-link.text-secondary{
  color:var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:11.5px !important;
  letter-spacing:.03em;
  text-transform:uppercase;
}
body.sads-comic .footer .nav-link:hover{ color:var(--magenta) !important; }

/* Sidebar section captions (MANAGE / ACCOUNT / HELP) */
body.sads-comic .sidebar .nav-header,
body.sads-comic .sidebar .menu-title,
body.sads-comic .sidenav .nav-header,
body.sads-comic .app-sidebar .nav-header,
body.sads-comic .app-sidebar .menu-title{
  color:var(--magenta) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:10.5px !important; letter-spacing:.10em; text-transform:uppercase;
  opacity:1 !important;
}

/* The floating WhatsApp button, to match the one on the website */
body.sads-comic .whatsapp-float{
  border:3px solid var(--ink) !important;
  border-radius:50% !important;
  box-shadow:4px 4px 0 var(--ink) !important;
}
body.sads-comic .whatsapp-float:hover{ transform:translate(-2px,-2px) scale(1.06); }

/* Product / offer cards on the order pages */
body.sads-comic .package,
body.sads-comic .product-box,
body.sads-comic .pricing-box{
  background:var(--paper) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:var(--pop-shadow) !important;
}
body.sads-comic .price,
body.sads-comic .product-price{
  font-family:'Archivo Black', sans-serif !important;
  color:var(--ink) !important;
}

/* ================================================== checkboxes and radios ===
   template_2019 draws its own control indicators with pseudo-elements layered
   over the real input. Styling the input alone leaves that indicator sitting on
   top - the white square inside the magenta box. So: neutralise the theme's
   decoration first, then draw the control ourselves.
   These are scoped to body.sads-comic, so the whole client area matches -
   including the checkout page, which the order page templates do not control. */

body.sads-comic .custom-control-label::before,
body.sads-comic .custom-control-label::after,
body.sads-comic .custom-checkbox .custom-control-label::before,
body.sads-comic .custom-radio .custom-control-label::before,
body.sads-comic .checkbox label::before,
body.sads-comic .checkbox label::after,
body.sads-comic .radio label::before,
body.sads-comic .radio label::after{
  content:none !important;
  display:none !important;
}

body.sads-comic input[type=checkbox],
body.sads-comic input[type=radio],
body.sads-comic .custom-control-input{
  -webkit-appearance:none !important;
  appearance:none !important;
  accent-color:#EC008C;
  position:relative !important;
  z-index:2;
  width:22px !important;
  height:22px !important;
  margin:0 8px 0 0 !important;
  padding:0 !important;
  flex:0 0 auto;
  vertical-align:middle;
  background:var(--paper) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:3px 3px 0 var(--ink) !important;
  cursor:pointer;
  transition:transform .12s var(--spring);
}
body.sads-comic input[type=radio],
body.sads-comic .custom-radio .custom-control-input{
  border-radius:50% !important;
}
body.sads-comic input[type=checkbox]:checked{
  background:var(--magenta) !important;
  background-image:none !important;
}
body.sads-comic input[type=checkbox]::after{
  content:"";
  display:block;
  width:100%; height:100%;
  line-height:16px; text-align:center;
  font-family:Arial, sans-serif; font-size:14px; font-weight:bold;
  color:var(--paper);
}
body.sads-comic input[type=checkbox]:checked::after{
  content:"\2714";
}
body.sads-comic input[type=radio]:checked{
  background:var(--magenta) !important;
  box-shadow:3px 3px 0 var(--ink), inset 0 0 0 4px var(--paper) !important;
}
body.sads-comic input[type=checkbox]:hover,
body.sads-comic input[type=radio]:hover{ transform:translate(-1px,-1px); }
body.sads-comic input[type=checkbox]:focus-visible,
body.sads-comic input[type=radio]:focus-visible{
  outline:3px solid var(--cyan); outline-offset:3px;
}

/* Flatten sprite-based checkbox plugins wherever they appear in the client
   area, not just on the order page. These wrappers (.checker, .icheckbox_*,
   .iradio_*, .uniform) paint a sprite over the real input, which is the grey
   dot that survives every attempt to style the input itself. */
body.sads-comic .checker,
body.sads-comic .checker span,
body.sads-comic div[class^="icheckbox"],
body.sads-comic div[class^="iradio"],
body.sads-comic .uniform{
  background:none !important;
  background-image:none !important;
  width:auto !important;
  height:auto !important;
  display:inline !important;
  position:static !important;
}
/* Do NOT force opacity here: the order page hides the real input on purpose and
   draws its own control on top. Reinstating opacity puts the native checkbox
   back over the drawn one - which is exactly the grey box on top of the pink. */
body.sads-comic .checker input[type=checkbox],
body.sads-comic div[class^="icheckbox"] input,
body.sads-comic div[class^="iradio"] input{
  position:static !important;
  display:inline-block !important;
}
/* ---------------------------------------------------- the drawn control ---
   sads-comic.js wraps every visible checkbox and radio in .sc-cbwrap, hides
   the real input with inline !important, and draws .sc-box beside it. These
   rules paint that box. Never give .sc-cbwrap input any opacity - that puts
   the native control back on top of the drawn one. */
body.sads-comic .sc-cbwrap{
  position:relative; display:inline-block;
  width:22px; height:22px; flex:0 0 auto;
  vertical-align:middle; margin:0 8px 0 0;
}
body.sads-comic .sc-cbwrap input{
  opacity:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.sads-comic .sc-box{
  position:absolute; inset:0; pointer-events:none;
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:background-color .12s ease;
}
body.sads-comic .sc-box--radio{ border-radius:50%; }
body.sads-comic .sc-box.is-on{ background:var(--magenta); }
body.sads-comic .sc-box.is-on::after{
  content:"\2714";
  display:block; text-align:center;
  font:bold 13px/16px Arial, sans-serif;
  color:var(--paper);
}
body.sads-comic .sc-box--radio.is-on::after{
  content:""; position:absolute; inset:4px;
  background:var(--paper); border-radius:50%;
}
body.sads-comic .sc-cbwrap input:focus-visible + .sc-box{
  outline:3px solid var(--cyan); outline-offset:3px;
}

/* Gateway rows on the checkout page read better as selectable chips. */
body.sads-comic #gatewaylist label,
body.sads-comic .gateway-select label{
  display:inline-flex; align-items:center;
  border:3px solid var(--ink);
  background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);
  padding:10px 16px;
  margin:0 10px 10px 0;
  font-weight:700;
  cursor:pointer;
}

/* The gateway detail block is hidden until a method is picked; make sure
   nothing in this skin keeps it hidden once HostBill reveals it. */
body.sads-comic #gatewayform:not([style*="display: none"]){
  display:block;
}
body.sads-comic #gatewayform{
  margin-top:16px;
}

/* ============================================ checkout page (overrides/cart4) ===
   Class names taken from your theme's overrides/cart4.tpl, so these are real
   selectors rather than guesses. */

/* The real terms input is deliberately hidden by cart4.tpl with an inline
   display:none!important, and is ticked programmatically once every per-term
   box is ticked. Leave it hidden - the visible boxes are .term-checkbox. */
body.sads-comic .tos-checkbox{
  display:none !important;
}
body.sads-comic .term-checkbox{
  margin-right:10px !important;
}
body.sads-comic .term-checkbox + label{
  font-size:13.5px;
  font-weight:700;
  vertical-align:middle;
  cursor:pointer;
}

/* Gateway chooser */
body.sads-comic .cart-gateway-list span.mx-2{
  display:inline-flex; align-items:center;
  user-select:none;
  border:3px solid var(--ink);
  background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);
  padding:10px 16px;
  margin:0 8px 10px !important;
  font-weight:700;
  cursor:pointer;
  transition:transform .14s var(--spring), box-shadow .14s ease;
}
body.sads-comic .cart-gateway-list span.mx-2:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--ink);
}
body.sads-comic .cart-gateway-list span.mx-2:has(input:checked){
  background:var(--pop);
}

/* Gateway detail block. It is empty on load because cart4.tpl only fetches the
   HTML on a radio click, and the first radio arrives already checked so no
   click ever happens - see cart4-gateway-fix.tpl, which triggers the fetch on
   load. These rules style whatever comes back. */
body.sads-comic #gatewayform{
  margin:0 0 20px;
}
body.sads-comic #gatewayform:not(:empty){
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  padding:18px 20px;
}

/* New client / Already registered tabs in the card header */
body.sads-comic .card-menu li{
  border:3px solid var(--ink);
  padding:8px 14px;
  font-family:'Archivo Black', sans-serif;
  font-size:12px; letter-spacing:.03em; text-transform:uppercase;
  cursor:pointer;
}
body.sads-comic .card-menu li.bgon2{ background:var(--pop); }
body.sads-comic .card-menu li.bgoff2{ background:var(--paper); }

/* Order notes */
body.sads-comic .form-control-noborders,
body.sads-comic .textarea-autoresize{
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  background:var(--paper) !important;
}

/* The complete-order button carries a material icon; keep it aligned with
   Bangers lettering rather than letting it ride high. */
body.sads-comic .btn .material-icons{
  font-size:20px;
  line-height:1;
  position:relative;
  top:-2px;
}

/* =========================================================== list pages ====
   Billing, invoices, services, tickets - anywhere the client area shows a
   table of records. These were rendering as a plain grid with pastel Bootstrap
   badges, which is the least comic thing on the site.

   Selectors cast a wide net on purpose: HostBill labels status pills
   inconsistently across pages (.badge, .label, .status-*), so anything that
   looks like a status pill inside a table gets the treatment.               */

/* the table becomes a panel in its own right */
body.sads-comic .table{
  border:4px solid var(--ink) !important;
}
body.sads-comic .card > .table,
body.sads-comic .card-body > .table,
body.sads-comic .table-responsive > .table{
  box-shadow:8px 8px 0 var(--ink) !important;
}
body.sads-comic .table tbody tr:nth-child(even) td{ background:var(--cream); }
body.sads-comic .table tbody tr:hover td{ background:rgba(0,183,239,.14); }

/* sort arrows in the header were magenta on yellow - muddy */
body.sads-comic .table thead th a,
body.sads-comic .table thead th i,
body.sads-comic .table thead th .material-icons{
  color:var(--ink) !important;
}

/* ---- status pills -------------------------------------------------------- */
body.sads-comic .badge,
body.sads-comic .label,
body.sads-comic [class*="badge-"],
body.sads-comic [class*="label-"],
body.sads-comic [class*="status-"]{
  display:inline-block;
  border-radius:0 !important;
  border:3px solid var(--ink) !important;
  box-shadow:3px 3px 0 var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:10.5px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 10px !important;
  line-height:1.3;
}
/* unpaid / overdue / suspended - the ones that need to be noticed.
   NOTE the capital letters: HostBill emits .badge-Unpaid, .badge-Paid,
   .badge-Cancelled. Attribute substring matching is case sensitive, which is
   why the earlier lowercase selectors matched nothing. */
body.sads-comic .badge-Unpaid,
body.sads-comic .badge-Overdue,
body.sads-comic .badge-Suspended,
body.sads-comic .badge-Collections,
body.sads-comic .table .badge-danger,
body.sads-comic .table .label-danger,
body.sads-comic .table [class*="unpaid" i],
body.sads-comic .table [class*="overdue" i],
body.sads-comic .table [class*="suspended" i]{
  background:var(--magenta) !important; color:var(--paper) !important;
}
/* paid / active - settled, no action needed */
body.sads-comic .badge-Paid,
body.sads-comic .badge-Active,
body.sads-comic .table .badge-success,
body.sads-comic .table .label-success,
body.sads-comic .table [class*="active" i]{
  background:var(--cyan) !important; color:var(--paper) !important;
}
/* cancelled / draft / pending - inert */
body.sads-comic .badge-Cancelled,
body.sads-comic .badge-Draft,
body.sads-comic .badge-Pending,
body.sads-comic .badge-Refunded,
body.sads-comic .table .badge-secondary,
body.sads-comic .table .badge-warning,
body.sads-comic .table [class*="cancel" i],
body.sads-comic .table [class*="draft" i],
body.sads-comic .table [class*="pending" i]{
  background:var(--cream) !important; color:var(--ink) !important;
}

/* ---- record links and the row arrow -------------------------------------- */
body.sads-comic .table td a{
  color:var(--magenta);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid transparent;
}
body.sads-comic .table td a:hover{ border-bottom-color:var(--ink); }
body.sads-comic .table td a .material-icons{
  color:var(--ink) !important;
  border:3px solid var(--ink);
  background:var(--pop);
  box-shadow:3px 3px 0 var(--ink);
  padding:4px;
  transition:transform .14s var(--spring), box-shadow .14s ease;
}
body.sads-comic .table td a:hover .material-icons{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink);
}

/* ---- page tabs ----------------------------------------------------------- */
body.sads-comic .nav-tabs{ border-bottom:4px solid var(--ink) !important; gap:6px; }
body.sads-comic .nav-tabs .nav-link{
  border:3px solid var(--ink) !important;
  border-bottom:none !important;
  border-radius:0 !important;
  background:var(--cream) !important;
  color:var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:12px !important;
  letter-spacing:.04em; text-transform:uppercase;
  padding:10px 18px !important;
  margin-bottom:-4px;
}
body.sads-comic .nav-tabs .nav-link.active{
  background:var(--pop) !important;
  transform:translateY(-2px);
}

/* ---- the figures at the top of billing ----------------------------------- */
body.sads-comic .text-danger{ color:var(--magenta) !important; }
body.sads-comic .text-success{ color:#0E7C4A !important; }
/* the pale grey intro line under a heading was failing contrast */
body.sads-comic .section-main .text-muted,
body.sads-comic .section-main .text-secondary{
  color:var(--ink) !important;
  opacity:.85;
}

/* ============================================ page tabs as comic buttons ===
   Markup: .nav-tabs > li > ul.nav-slider > li.nav-item(.active) > a.nav-link
   Invoices / Credit Receipts / Add Funds / Credit Logs. These read as plain
   text with a thin underline; make them buttons like the magenta actions
   opposite so the whole row of controls belongs to one family.             */
body.sads-comic .nav-tabs-wrapper .nav-tabs{
  border-bottom:none !important;
  padding-bottom:4px;
}
body.sads-comic .nav-slider{
  display:flex; flex-wrap:wrap; gap:12px;
}
body.sads-comic .nav-slider .nav-item{ margin:0 !important; }
body.sads-comic .nav-slider .nav-link{
  display:inline-block;
  font-family:'Bangers', Impact, cursive !important;
  font-size:19px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:9px 20px 6px !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  background:var(--paper) !important;
  color:var(--ink) !important;
  box-shadow:4px 4px 0 var(--ink) !important;
  transition:transform .16s var(--spring), box-shadow .16s ease,
             background-color .16s ease, color .16s ease;
}
body.sads-comic .nav-slider .nav-link:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--ink) !important;
  background:var(--pop) !important;
}
body.sads-comic .nav-slider .nav-item.active .nav-link,
body.sads-comic .nav-slider .nav-link.active{
  background:var(--magenta) !important;
  color:var(--paper) !important;
  -webkit-text-stroke:1px var(--ink);
}
/* template_2019 marks the current tab with a sliding underline - not needed
   now the active tab is filled */
body.sads-comic .nav-slider .nav-link::after,
body.sads-comic .nav-slider .nav-link::before,
body.sads-comic .nav-tabs-wrapper .nav-slider ~ .nav-slider-bar{
  display:none !important;
  content:none !important;
}

/* the "Filter data" button sits in the same row - match it */
body.sads-comic #service-filters{
  font-family:'Bangers', Impact, cursive !important;
  font-size:17px !important;
  letter-spacing:.05em;
  border:3px solid var(--ink) !important;
  background:var(--paper) !important;
  color:var(--ink) !important;
  box-shadow:4px 4px 0 var(--ink) !important;
  border-radius:0 !important;
  padding:8px 16px 5px !important;
}

/* the intro line under the tabs is an <h5> with no class, so it inherits the
   theme's grey - too light on a plain background */
body.sads-comic .section-main h5{ color:var(--ink) !important; }

/* sort arrows in table headers */
body.sads-comic .table thead th .sort-icon{
  color:var(--ink) !important;
  opacity:.55;
  vertical-align:middle;
}
body.sads-comic .table thead th a{
  font-family:'Archivo Black', sans-serif !important;
  font-size:11px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-bottom:none !important;
}

/* ================================================================ loader ===
   WHERE IT LIVES

   The markup is in header.shared.tpl, near the top of <body>:

       <div class="pageloader-wrapper">
         <div class="pageloader-item" style="display: none;">
           <i class="pageloader-layer"></i>
           <i class="pageloader-layer"></i>
           <i class="pageloader-layer"></i>
         </div>
       </div>

   Those three <i> elements are the three coloured diamonds. There is no image
   file anywhere - each is a square rotated 45 degrees by CSS in custom.min.css.
   HostBill's JS flips the inline display to show the loader during a page load.

   We repurpose the three layers as three word slots. Each gets a sound effect
   through ::after and they take turns, so the loader reads WHAM! then WHOOSH!
   then ZAP! on a loop, over a yellow starburst.

   Three layers means three words. To use more you would need more elements,
   which means editing header.shared.tpl - not worth it for a loader.

   IMPORTANT: never put !important on display for .pageloader-item. HostBill
   hides it with an inline style, and inline beats a normal stylesheet rule -
   which is what we want. Force it and the loader shows on every page forever.
   ========================================================================== */

body.sads-comic .pageloader-wrapper{
  background:rgba(255,253,242,.93) !important;
}

body.sads-comic .pageloader-item{
  position:relative !important;
  width:230px !important;
  height:180px !important;
  margin:0 auto !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  /* NO display rule here on purpose - HostBill hides this with an inline
     style, and inline beats a normal stylesheet rule. Add display and the
     loader never hides again. */

  /* Hold it invisible for the first 320ms of every appearance. Most pages
     finish loading inside that window, so nothing is drawn at all and the
     customer sees no flicker. Only a genuinely slow load gets a loader - which
     is the only time one is any use.

     This restarts on every show because changing display from none to block
     restarts CSS animations on the element. */
  animation:sc-loader-gate 140ms 320ms both !important;
}
@keyframes sc-loader-gate{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* the starburst behind the words */
body.sads-comic .pageloader-item::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:156px; height:156px; margin:-78px 0 0 -78px;
  background:var(--pop);
  clip-path:polygon(50% 0%,60% 14%,74% 6%,77% 22%,93% 20%,88% 35%,100% 44%,88% 55%,
                    95% 70%,79% 72%,80% 89%,65% 82%,56% 97%,47% 83%,33% 92%,30% 76%,
                    14% 78%,19% 63%,5% 54%,17% 43%,7% 29%,23% 27%,22% 11%,37% 17%);
  animation:sc-burst 600ms infinite alternate cubic-bezier(.4,0,.6,1) !important;
}
@keyframes sc-burst{
  from{ transform:scale(.88) rotate(-5deg); }
  to  { transform:scale(1.03) rotate(4deg); }
}

/* The words are .sc-load-word spans built by sads-comic.js. They replace the
   three <i class="pageloader-layer"> elements, which carry theme styling we
   could not reliably override - the text simply never appeared on them. These
   spans are ours, so nothing competes. */
body.sads-comic .pageloader-layer{ display:none !important; }

body.sads-comic .sc-load-word{
  position:absolute;
  inset:0;
  display:block;
  text-align:center;
  line-height:180px;
  white-space:nowrap;
  font-family:'Bangers', Impact, cursive;
  font-size:42px;
  letter-spacing:.03em;
  color:var(--paper);
  -webkit-text-stroke:2.5px var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--magenta);
  opacity:0;
  animation:sc-word 1800ms infinite;
}

/* Each word owns a third of the cycle: flies in, holds, snaps away. */
@keyframes sc-word{
  0%   { opacity:0; transform:scale(.45) rotate(-16deg); }
  6%   { opacity:1; transform:scale(1.12) rotate(-9deg); }
  14%  { transform:scale(1) rotate(-6deg); }
  27%  { opacity:1; transform:scale(1) rotate(-6deg); }
  33%  { opacity:0; transform:scale(1.1) rotate(-2deg); }
  100% { opacity:0; transform:scale(.45) rotate(-16deg); }
}

@media (prefers-reduced-motion: reduce){
  body.sads-comic .pageloader-item::before{ animation:none !important; transform:none; }
  body.sads-comic .sc-load-word{ animation:none !important; opacity:0; }
  body.sads-comic .sc-load-word:first-of-type{ opacity:1; }
}

/* ---------------------------------------------------------------------------
   CHANGING THE WORDS
   Edit LOADER_WORDS at the top of the loader section in sads-comic.js. Keep them short - anything past about
   eight characters starts to outgrow the starburst. Good ones: BAM! POW! ZAP!
   WHAM! ZOOM! KRAK! THWIP! WHOOSH! KA-POW! THWACK! SOCK! BLAM!

   OTHER OPTIONS
   1. Keep HostBill's diamonds, just recolour them:
        body.sads-comic .pageloader-layer:nth-child(1){ background:var(--pop) !important; }
        body.sads-comic .pageloader-layer:nth-child(2){ background:var(--magenta) !important; }
        body.sads-comic .pageloader-layer:nth-child(3){ background:var(--cyan) !important; }
      (delete the word rules above first)

   2. Use the badge logo instead of the starburst:
        body.sads-comic .pageloader-item::before{
          background:url('/assets/img/sads-logo-160.png') center/contain no-repeat;
          clip-path:none;
        }
   --------------------------------------------------------------------------- */

/* ====================================== floating-label fields and modals ===
   Markup (login, signup, account details):

     <div class="form-label-group">
       <input class="form-control" placeholder="Email Address">
       <label class="form-label-placeholder">Email Address</label>
     </div>

   Two things were wrong. The wrapper was being drawn as well as the input, so
   every field was a box inside a box. And floating the label inside the field
   meant fighting the theme's own material-style underline and positioning,
   which left a grey rule across the field and a stray tail at the edge.

   Simpler and more robust: the label becomes a normal block ABOVE the field.
   The label follows the input in the DOM, so column-reverse puts it on top
   without touching the markup. Nothing overlaps, nothing is positioned.     */
body.sads-comic .form-label-group,
body.sads-comic .form-group,
body.sads-comic .input-group{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
}
body.sads-comic .form-label-group{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch;
  position:static !important;
  margin-bottom:18px;
}
/* The label follows the input in the DOM and the strength meter is appended
   after both, so order them explicitly: label, field, meter. (column-reverse
   put the meter above the password box.) */
body.sads-comic .form-label-group .form-label-placeholder{ order:1; }
body.sads-comic .form-label-group .form-control{ order:2; }
body.sads-comic .form-label-group .password_strength,
body.sads-comic .form-label-group #password_strength,
body.sads-comic .form-label-group .parsley-errors-list{ order:3; }
body.sads-comic .form-label-group .form-control,
body.sads-comic .form-credentials .form-control{
  width:100% !important;
  display:block !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:4px 4px 0 var(--ink) !important;
  background:var(--paper) !important;
  background-image:none !important;   /* kills the material underline */
  padding:12px 14px !important;
  height:auto !important;
  min-height:0 !important;
  font-size:15px !important;
  line-height:1.3 !important;
}
body.sads-comic .form-label-group .form-control:focus{
  outline:3px solid var(--magenta) !important;
  outline-offset:1px;
  box-shadow:4px 4px 0 var(--ink) !important;
}
body.sads-comic .form-label-placeholder{
  position:static !important;
  display:block !important;
  transform:none !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  width:auto !important; height:auto !important;
  margin:0 0 6px !important;
  padding:0 !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:10.5px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink) !important;
  opacity:1 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  pointer-events:auto;
}
/* the theme draws its own underline / focus bar under material inputs */
body.sads-comic .form-label-group::before,
body.sads-comic .form-label-group::after,
body.sads-comic .form-label-group .form-control::before,
body.sads-comic .form-label-group .form-control::after{
  content:none !important;
  display:none !important;
}

/* password strength meter - a thin grey bar by default */
body.sads-comic .password_strength,
body.sads-comic #password_strength{
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  height:12px;
  margin-top:6px !important;
  background:var(--paper) !important;
  box-shadow:3px 3px 0 var(--ink) !important;
}
body.sads-comic .password_strength span{ height:100% !important; }

/* ---- modals -------------------------------------------------------------- */
body.sads-comic .modal-content{
  background:var(--paper) !important;
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:12px 12px 0 rgba(16,16,16,.85) !important;
}
body.sads-comic .modal-header{
  background:var(--cream) !important;
  border-bottom:4px solid var(--ink) !important;
  border-radius:0 !important;
  padding:16px 20px !important;
}
body.sads-comic .modal-title{
  font-family:'Bangers', Impact, cursive !important;
  font-size:26px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  margin:0 !important;
}
body.sads-comic .modal-header .close{
  opacity:1 !important;
  border:3px solid var(--ink) !important;
  background:var(--paper) !important;
  box-shadow:3px 3px 0 var(--ink) !important;
  border-radius:0 !important;
  padding:2px 4px !important;
  margin:0 !important;
}
body.sads-comic .modal-header .close:hover{ background:var(--magenta) !important; }
body.sads-comic .modal-header .close .material-icons{ color:var(--ink) !important; }
body.sads-comic .modal-body{ padding:22px 20px !important; }
body.sads-comic .modal-body a{ color:var(--magenta); font-weight:700; }

/* ====================================== domain search (domains/single.tpl) ==
   Class names from templates/orderpages/domains/domainstyles.css:
     .name-select      the search row
     .domain-in-01     the "www." prefix block
     .domain-in-02     wrapper round the name input
     .domain-in-03     wrapper round the TLD select (Chosen replaces the select)
     .button01         wrapper round the Go submit
     .cost01           the "starting at" price
     .list-domain      supported TLD list, bulleted with a green tick GIF
     .title06/.title08 headings

   These live in the client-area skin rather than in the order page template so
   they apply whichever cart template is selected, including HostBill's stock
   domain listing.                                                            */

body.sads-comic .name-select{
  display:flex !important;
  align-items:stretch;
  flex-wrap:wrap;
  gap:0;
}

/* the wrappers were drawn as well as the input inside them - box in a box */
body.sads-comic .domain-in-01,
body.sads-comic .domain-in-02,
body.sads-comic .domain-in-03{
  height:auto !important;
  min-height:54px;
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  background:var(--paper) !important;
  box-shadow:none !important;
  display:flex; align-items:center;
}
body.sads-comic .domain-in-01{
  background:var(--ink) !important;
  color:var(--paper) !important;
  font-family:'Archivo Black', sans-serif;
  font-size:14px;
  padding:0 12px;
  border-right:none !important;
}
body.sads-comic .domain-in-02{ flex:1 1 220px; min-width:0; border-right:none !important; }
body.sads-comic .domain-in-02 input,
body.sads-comic .domain-in-03 select,
body.sads-comic .domain-in-03 .chosen-container a{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  height:46px !important;
  line-height:46px !important;
  width:100% !important;
  padding:0 14px !important;
  font-size:17px;
  color:var(--ink) !important;
}
body.sads-comic .domain-in-03{ min-width:132px; }
body.sads-comic .domain-in-03 .chosen-container a{
  background:var(--cream) !important;
  font-family:'Archivo Black', sans-serif;
  font-size:14px;
}
body.sads-comic .chosen-container .chosen-drop{
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:6px 6px 0 var(--ink) !important;
  background:var(--paper) !important;
}
body.sads-comic .chosen-container .chosen-results li.highlighted{
  background:var(--magenta) !important; color:var(--paper) !important;
}

/* the Go button was stock green with rounded corners */
body.sads-comic .button01{
  height:auto !important;
  min-height:54px;
  margin-left:10px !important;
  padding:0 !important;
  background:var(--magenta) !important;
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:5px 5px 0 var(--ink) !important;
  display:flex; align-items:center;
}
body.sads-comic .button01 input,
body.sads-comic input.domain-check,
body.sads-comic .domain-check{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:'Bangers', Impact, cursive !important;
  font-size:24px !important;
  letter-spacing:.05em;
  color:var(--paper) !important;
  -webkit-text-stroke:1px var(--ink);
  padding:0 26px !important;
  height:46px !important;
  cursor:pointer;
}

/* "Starting at R85.00 per year!" - stock green on grey */
body.sads-comic .title08{
  font-family:'Archivo Black', sans-serif !important;
  font-size:12px !important;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink) !important;
  margin-bottom:6px;
}
body.sads-comic .cost01{
  /* domainstyles.css gives .cost01 a fixed height and hides the overflow, so
     Bangers at 50px plus a 3px shadow was being sliced off at the baseline and
     on the right. Release the box and give the shadow somewhere to land. */
  font:normal 46px/1.15 'Bangers', Impact, cursive !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:nowrap;
  letter-spacing:.02em;
  color:var(--ink) !important;
  text-align:left !important;
  padding:2px 6px 8px 0 !important;
  -webkit-text-stroke:1.5px var(--ink);
  paint-order:stroke fill;
  text-shadow:3px 3px 0 var(--pop);
}
/* the columns around it clip too */
body.sads-comic .kol-1,
body.sads-comic .kol-2,
body.sads-comic .zone1,
body.sads-comic .cost01 *{
  overflow:visible !important;
  height:auto !important;
}
body.sads-comic .cost01 span{
  display:block;
  font:normal 12px/1.5 'Archivo Black', sans-serif !important;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink) !important;
  -webkit-text-stroke:0;
  text-shadow:none;
  margin-top:8px;
}

/* supported TLDs - bulleted with a green tick GIF */
body.sads-comic .list-domain{ list-style:none !important; padding-left:0 !important; }
body.sads-comic .list-domain li{
  background:none !important;
  background-image:none !important;
  position:relative;
  padding-left:20px !important;
  font:normal 15px/26px 'Space Grotesk', sans-serif !important;
  color:var(--ink) !important;
}
body.sads-comic .list-domain li::before{
  content:"\2714";
  position:absolute; left:0; top:0;
  color:var(--magenta);
  font-size:13px;
  font-weight:bold;
}

body.sads-comic .linia1{
  border:none !important;
  border-top:4px solid var(--ink) !important;
  background:none !important;
  margin:26px 0 20px !important;
}
body.sads-comic .kol-1,
body.sads-comic .kol-2{ background-image:none !important; }
body.sads-comic .fs11 a{
  color:var(--magenta) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:12px !important;
  letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none !important;
  border-bottom:3px solid var(--ink);
}

@media (max-width:620px){
  body.sads-comic .name-select{ gap:10px; }
  body.sads-comic .domain-in-01{ display:none !important; }
  body.sads-comic .domain-in-02{ flex:1 1 100%; border-right:4px solid var(--ink) !important; }
  body.sads-comic .domain-in-03{ flex:1 1 auto; }
  body.sads-comic .button01{ margin-left:0 !important; flex:1 1 auto; justify-content:center; }
  body.sads-comic .cost01{ font-size:38px !important; }
}

/* ============================================ TLD pricing (domainpricing) ==
   table.styled with .head-table header row, .row-table rows, td.tld, and
   .price-period for the "1 year(s)" note. Three short columns, so it fits a
   phone perfectly well as a table - the mess on mobile is template_2019's
   stackable-table rules turning the header row into a grey block. Force it
   back to a real table and colour it.                                       */
body.sads-comic table.styled{
  display:table !important;
  width:100% !important;
  max-width:100% !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
  border:4px solid var(--ink) !important;
  box-shadow:6px 6px 0 var(--ink) !important;
  background:var(--paper) !important;
  margin:8px 0 26px !important;
}
body.sads-comic table.styled thead{ display:table-header-group !important; }
body.sads-comic table.styled tbody{ display:table-row-group !important; }
body.sads-comic table.styled tr{ display:table-row !important; }
body.sads-comic table.styled td,
body.sads-comic table.styled th{
  display:table-cell !important;
  width:auto !important;
  border:2px solid var(--ink) !important;
  padding:9px 10px !important;
  font-size:13.5px !important;
  line-height:1.4;
  color:var(--ink) !important;
  text-align:left !important;
  vertical-align:middle;
  overflow-wrap:anywhere;
}
body.sads-comic table.styled .head-table td,
body.sads-comic table.styled .head-table th,
body.sads-comic table.styled .status-head td{
  background:var(--pop) !important;
  color:var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:10.5px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
}
body.sads-comic table.styled .row-table-white td,
body.sads-comic table.styled .row-table-row1 td{ background:var(--cream) !important; }
body.sads-comic table.styled td.tld{
  font-family:'Archivo Black', sans-serif !important;
  font-size:14px !important;
}
body.sads-comic table.styled .price-period{
  display:block;
  font-size:10px !important;
  opacity:.7;
  margin-top:2px;
}
body.sads-comic .regprices{ margin:20px 0 !important; }

@media (max-width:520px){
  body.sads-comic table.styled td,
  body.sads-comic table.styled th{ padding:7px 6px !important; font-size:12.5px !important; }
  body.sads-comic table.styled td.tld{ font-size:13px !important; }
  body.sads-comic table.styled .head-table td{ font-size:9.5px !important; }
}

/* ================================== domain result block and stray buttons ==
   The single-domain result ("Domain x.co.za AVAILABLE! / Please choose period
   / Order Now!") renders with HostBill's own classes and was left stock: green
   status text and a green rounded button.

   The submit rule is deliberately broad. Several HostBill screens use bare
   <input type="submit"> with no .btn class, and each one that slips through
   shows up as a stock grey or green button in the middle of a comic page. */
body.sads-comic input[type=submit],
body.sads-comic button[type=submit],
body.sads-comic input[type=button]{
  font-family:'Bangers', Impact, cursive !important;
  font-size:19px !important;
  letter-spacing:.05em;
  padding:11px 22px 8px !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  background:var(--magenta) !important;
  color:var(--paper) !important;
  -webkit-text-stroke:1px var(--ink);
  box-shadow:4px 4px 0 var(--ink) !important;
  cursor:pointer;
  height:auto !important;
  width:auto !important;
  max-width:100%;
  transition:transform .16s var(--spring), box-shadow .16s ease;
}
body.sads-comic input[type=submit]:hover,
body.sads-comic button[type=submit]:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--ink) !important;
}

/* availability status - stock is green or red body text */
body.sads-comic .available,
body.sads-comic .status.available,
body.sads-comic .domain-available{
  display:inline-block;
  background:var(--cyan) !important;
  color:var(--paper) !important;
  border:3px solid var(--ink) !important;
  box-shadow:3px 3px 0 var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:11px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:5px 10px !important;
  line-height:1.3;
}
body.sads-comic .unavailable,
body.sads-comic .status.unavailable,
body.sads-comic .domain-unavailable{
  display:inline-block;
  background:var(--cream) !important;
  color:var(--ink) !important;
  border:3px solid var(--ink) !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:11px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:5px 10px !important;
}

/* the labels around the result read as body copy - give them some weight */
body.sads-comic .domain-after,
body.sads-comic .domain-after strong,
body.sads-comic .zone1,
body.sads-comic .container-step1 label{
  font-family:'Space Grotesk', sans-serif;
  color:var(--ink) !important;
}

@media (max-width:620px){
  /* stack the result so the period select is not squeezed beside its label */
  body.sads-comic .domain-after select,
  body.sads-comic .container-step1 select{
    display:block; width:100% !important; max-width:320px; margin-top:8px;
  }
  body.sads-comic input[type=submit],
  body.sads-comic button[type=submit]{ font-size:18px !important; }
}

/* =============================================================== captcha ===
   The image is generated server side (?action=captcha). CSS cannot sharpen the
   glyphs - it is a bitmap of deliberately distorted text - but it can stop the
   layout making things worse, and it can push the contrast.

   Layout: the image and its input were sitting side by side, each about half
   the width they needed, with the input overlapping the image's shadow. They
   stack now: image, then a full-width input, then the refresh link.        */
body.sads-comic img[src*="action=captcha"]{
  display:block !important;
  float:none !important;
  width:100%;
  max-width:340px;          /* upscaled from the stock ~200px, smoothly */
  height:auto;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  background:#FFFFFF;
  padding:6px;
  margin:0 0 14px !important;
  /* strip the hue and drive the strokes toward black - the stock image is
     low-contrast blue or grey on white */
  filter:grayscale(1) contrast(2.1) brightness(.97);
}

body.sads-comic input[name="captcha"],
body.sads-comic #field_captcha,
body.sads-comic input[id*="captcha"]{
  display:block !important;
  float:none !important;
  width:100% !important;
  max-width:340px;
  margin:0 0 12px !important;
  font-size:17px !important;
  letter-spacing:.08em;
  text-transform:none;
}

/* the refresh link belongs under both, not tucked beside the image */
body.sads-comic a[href*="captcha"],
body.sads-comic .captcha-refresh{
  display:inline-block;
  clear:both;
  font-family:'Archivo Black', sans-serif !important;
  font-size:11px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--magenta) !important;
  border-bottom:3px solid var(--ink);
  text-decoration:none !important;
  margin:0 0 16px;
}

/* any wrapper the theme floats these inside */
body.sads-comic .form-group_captcha,
body.sads-comic .captcha-wrapper,
body.sads-comic .g-ct-cart,
body.sads-comic .g-ct-clientarea{
  display:block !important;
  float:none !important;
  width:auto !important;
  overflow:visible !important;
}

/* ---------------------------------------------------------------------------
   THE REAL FIX: STOP USING IT

   header.shared.tpl already loads Google reCAPTCHA on every page - there is a
   reCaptchaCallback function and your sitekey in the head, written to find
   img[src*="action=captcha"] and replace it with a reCAPTCHA widget. It is
   installed but this form still serves the image version, so the setting is
   not enabled for it.

   HostBill admin: Settings -> Security (or Captcha) -> choose reCAPTCHA and
   tick the forms it applies to: login, signup, tickets, order.

   Also worth asking whether login needs a captcha at all. It stops nothing a
   rate limit would not, and it is a real obstacle for a customer on a phone
   trying to pay an invoice. Signup and ticket forms are the usual places, with
   login gated only after repeated failures.
   --------------------------------------------------------------------------- */

/* ====================================== one button, not a button in a box ==
   HostBill wraps some submits in a styled element: .button01 round the domain
   Go, and the theme's own green box round Order Now. Once the inner <input>
   is styled too you get a button drawn inside a button.

   This flattens any wrapper whose only job is to hold a submit, leaving the
   input itself as the button. It must stay near the END of this file so it
   comes after the generic submit rules above.                               */
body.sads-comic span:has(> input[type=submit]),
body.sads-comic div:has(> input[type=submit]),
body.sads-comic p:has(> input[type=submit]),
body.sads-comic span:has(> button[type=submit]),
body.sads-comic div:has(> button[type=submit]),
body.sads-comic .button01,
body.sads-comic .domain-check-bulk,
body.sads-comic .padded{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  /* NO display rule here. #illtransfer and #illupdate are divs that contain a
     submit as a direct child, and they are hidden with an inline display:none
     until their tab is picked. Forcing display here showed all three domain
     panels at once. Do not reintroduce it. */
}

/* ...and the input inside is the button, drawn once */
body.sads-comic .button01 input[type=submit],
body.sads-comic span:has(> input[type=submit]) > input[type=submit],
body.sads-comic div:has(> input[type=submit]) > input[type=submit],
body.sads-comic p:has(> input[type=submit]) > input[type=submit]{
  background:var(--magenta) !important;
  color:var(--paper) !important;
  border:3px solid var(--ink) !important;
  box-shadow:4px 4px 0 var(--ink) !important;
  font-family:'Bangers', Impact, cursive !important;
  font-size:20px !important;
  letter-spacing:.05em;
  padding:11px 24px 8px !important;
  height:auto !important;
  line-height:1.1 !important;
  -webkit-text-stroke:1px var(--ink);
}

/* Safari below 15.4 has no :has(). There the wrapper keeps its own styling,
   so name the two known wrappers directly as well. */
body.sads-comic .button01{ margin-left:10px; }

/* ============================================== floating chat buttons ======
   Two bubbles sit in the corners: our WhatsApp link and the Tawk.to widget.
   They were at different heights, which looks accidental. Both now sit the
   same distance off the bottom.

   Tawk draws its bubble inside an iframe, so its shape is out of reach from
   here - CSS cannot square a circle that is rendered in another document. The
   wrapper can be moved, which is what these rules do. To change the bubble
   itself: Tawk dashboard -> Administration -> Chat Widget, where the shape,
   colour and offset are all settings.                                       */
body.sads-comic .whatsapp-float{
  bottom:20px !important;
  left:20px !important;
  width:56px !important;
  height:56px !important;
  border-radius:0 !important;
  border:3px solid var(--ink) !important;
  box-shadow:4px 4px 0 var(--ink) !important;
  background-color:#25D366 !important;
}
body.sads-comic .whatsapp-float img{ width:30px !important; height:30px !important; border-radius:0 !important; }

/* nudge the Tawk wrapper onto the same line */
body.sads-comic iframe[title*="chat" i],
body.sads-comic .tawk-min-container,
body.sads-comic #tawkchat-minified-wrapper,
body.sads-comic #tawkchat-container{
  bottom:20px !important;
}

/* ======================================== portal home, the three big cards ==
   my.southafricandatasystems.co.za/ shows Place New Order / Client Area /
   Support as three identical white cards with a small blue icon. They already
   pick up the ink border and hard shadow from the .card rules above, so all
   that is missing is colour, lettering and some weight behind the icons.

   Targeted with :has(.material-icons) so it only catches cards built around a
   big icon, not the panels on checkout or billing. If a card somewhere else
   turns yellow unexpectedly, that is this rule and it needs narrowing.      */
body.sads-comic .section-main .card:has(.material-icons.size-hg),
body.sads-comic .section-main .card:has(> a > .material-icons),
body.sads-comic .section-main .card:has(.card-body > .material-icons){
  border:5px solid var(--ink) !important;
  box-shadow:10px 10px 0 var(--ink) !important;
  transition:transform .16s var(--spring), box-shadow .16s ease,
             background-color .16s ease;
  overflow:hidden;
}
body.sads-comic .section-main .card:has(.material-icons):hover{
  transform:translate(-4px,-4px);
  box-shadow:16px 16px 0 var(--ink) !important;
}

/* one colour each, so they read as three choices rather than three of a kind */
body.sads-comic .section-main .row > [class*="col"]:nth-child(1) .card:has(.material-icons){
  background:var(--pop) !important;
}
body.sads-comic .section-main .row > [class*="col"]:nth-child(2) .card:has(.material-icons){
  background:var(--cyan) !important;
}
body.sads-comic .section-main .row > [class*="col"]:nth-child(3) .card:has(.material-icons){
  background:var(--magenta) !important;
}
body.sads-comic .section-main .row > [class*="col"]:nth-child(2) .card:has(.material-icons),
body.sads-comic .section-main .row > [class*="col"]:nth-child(2) .card:has(.material-icons) *,
body.sads-comic .section-main .row > [class*="col"]:nth-child(3) .card:has(.material-icons),
body.sads-comic .section-main .row > [class*="col"]:nth-child(3) .card:has(.material-icons) *{
  color:var(--paper) !important;
}

/* the icon was a small blue glyph floating in white space */
body.sads-comic .section-main .card:has(.material-icons) .material-icons{
  font-size:64px !important;
  line-height:1 !important;
  color:var(--ink) !important;
  margin-bottom:10px;
  display:block;
}
body.sads-comic .section-main .row > [class*="col"]:nth-child(2) .card .material-icons,
body.sads-comic .section-main .row > [class*="col"]:nth-child(3) .card .material-icons{
  color:var(--paper) !important;
}

/* card labels in Bangers, sized like a cover line */
body.sads-comic .section-main .card:has(.material-icons) h1,
body.sads-comic .section-main .card:has(.material-icons) h2,
body.sads-comic .section-main .card:has(.material-icons) h3,
body.sads-comic .section-main .card:has(.material-icons) h4,
body.sads-comic .section-main .card:has(.material-icons) h5,
body.sads-comic .section-main .card:has(.material-icons) strong,
body.sads-comic .section-main .card:has(.material-icons) b{
  font-family:'Bangers', Impact, cursive !important;
  font-size:30px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.05;
  margin:0 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}
body.sads-comic .section-main .card:has(.material-icons) .card-body{
  padding:34px 20px !important;
  text-align:center;
}
body.sads-comic .section-main .card:has(.material-icons) a{
  text-decoration:none !important;
  display:block;
}

/* WELCOME sits alone above them with nothing to anchor it */
body.sads-comic .section-main > h1:first-child,
body.sads-comic .section-main .text-center > h1{
  margin-bottom:28px !important;
}

@media (max-width:640px){
  body.sads-comic .section-main .card:has(.material-icons) .material-icons{ font-size:52px !important; }
  body.sads-comic .section-main .card:has(.material-icons) h3,
  body.sads-comic .section-main .card:has(.material-icons) h4{ font-size:26px !important; }
}

/* The single VAT note injected by sads-comic.js beside the period selector.
   Deliberately quiet: it is a clarification, not a warning, so it should not
   compete with the price it sits under. */
body.sads-comic .sc-vat-note{
  display:block;
  margin:8px 0 16px;
  padding:0;
  background:none;
  border:none;
  border-left:3px solid var(--ink);
  padding-left:10px;
  box-shadow:none;
  font-family:'Space Grotesk', sans-serif;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0;
  line-height:1.5;
  color:var(--ink);
  opacity:.8;
  max-width:460px;
}

/* --------------------------------------------------------------- accessibility */
@media (prefers-reduced-motion: reduce){
  body.sads-comic .btn{ transition:none !important; }
  body.sads-comic .btn:hover{ transform:none; }
}

/* Keep the halftone off print, and drop the heavy borders to save toner. */
@media print{
  body.sads-comic::before{ display:none; }
  body.sads-comic .card,
  body.sads-comic .table{ box-shadow:none !important; border-width:1px !important; }
}