/* ============================================================
   AMNIL DESIGN SYSTEM — theme override for the GIBL customer portal
   Loads AFTER gibl.css. Re-skins the existing frontend to the Amnil
   brand system: Poppins + brand red #D82D2B + cool charcoal neutrals,
   12px cards, 8px buttons, soft cool shadows, 3px red focus ring.
   Reversible: remove the <link> to this file in include/header_scripts.php.
   ============================================================ */

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

:root {
  /* Amnil brand */
  --red-50:#FDEDED; --red-100:#FAD7D6; --red-500:#D82D2B; --red-600:#C0211F; --red-700:#9F1B19;
  /* cool charcoal/slate ramp */
  --n-0:#FFFFFF; --n-50:#F7F7F9; --n-100:#EFEFF2; --n-200:#E3E3E8; --n-300:#CCCCD4;
  --n-400:#A0A0AC; --n-500:#71717E; --n-600:#53535E; --n-700:#3E3E47; --n-800:#27272E; --n-900:#18181D;
  /* semantic */
  --slate-800:#1E2230; --slate-900:#161925;
  --border:var(--n-200); --focus-ring:rgba(216,45,43,.35);
  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --shadow-sm:0 1px 3px rgba(24,24,29,.08),0 1px 2px rgba(24,24,29,.04);
  --shadow-md:0 4px 12px rgba(24,24,29,.08),0 2px 4px rgba(24,24,29,.04);

  /* Re-point the GIBL brand vars the existing CSS already consumes,
     so buttons/links pick up Amnil red without chasing every selector. */
  --danger:#D82D2B;
  --primary:#D82D2B;
}

/* ---- Typography: Poppins everywhere, charcoal ink ---- */
body {
  font-family: var(--font-sans) !important;
  color: var(--n-900);
  background: var(--n-50);
}
.homepageWrapper { background: var(--n-50); }

/* Section headings (Popular Services, Credit Card Services, …) */
.boxGridStyled-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--n-900);
}

/* Banner hero: flat deep slate (app-chrome tone), replaces GIBL blue gradient.
   Header was removed, so give the hero a little breathing room from the top. */
.breadcrumb-inner {
  background: var(--slate-900) !important;
  border-radius: 16px;
}
.homepageWrapper { padding-top: 20px; }

/* Banner title + subtitle — light on the slate hero.
   Specificity matches gibl.css's `.breadcrumb-inner .breadcrumb-title-wrapper .title`
   (which sets GIBL cyan) so Amnil white wins. */
.breadcrumb-inner .breadcrumb-title-wrapper .title,
.breadcrumb-div .title {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff !important;
}
.breadcrumb-inner .breadcrumb-title-wrapper .subTitle,
.breadcrumb-title-wrapper .subTitle,
.breadcrumb-title-wrapper .subTitle p { color: var(--n-300) !important; }

/* The hero content was absolutely centered against the hero image's height;
   with the image unset that leaves it floating above the slate box. Let it
   flow normally so the slate hero sizes to its own content with even padding. */
.breadcrumb-inner .breadcrumb-div {
  position: static;
  transform: none;
  max-width: 760px;
  padding-block: 36px;
}
/* Hide the hero image only when its filename is unset (src ends at "/uploads/"). */
.breadcrumb-inner .breadcrumbImage[src$="/uploads/"] { display: none; }
.breadcrumb-inner .breadcrumbImage-wrap:empty { display: none; }

/* "Suggested" chips: neutral translucent pills on the slate hero (were #D8E2FF blue) */
.breadcrumb-inner .breadcrumb-content-suggested .text { color: var(--n-300) !important; }
.breadcrumb-inner .breadcrumb-content-buttonWrapper a {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-family: var(--font-sans);
  transition: background .15s ease, border-color .15s ease;
}
.breadcrumb-inner .breadcrumb-content-buttonWrapper a:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.30) !important;
}

/* ---- Service tiles: white cards, hairline border, soft shadow ---- */
.boxStyled {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--n-0);
  padding: 16px 8px 4px;
  box-shadow: var(--shadow-sm);
}
.boxStyled:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--n-300);
}
/* red hover accent instead of GIBL blue */
.boxStyled:hover h6 { color: var(--red-600) !important; }
/* the expanding tint puck → subtle red tint (was #e3f5f9 blue) */
.boxStyled .overlay { background: var(--red-50) !important; }
.boxStyled figure { background: var(--n-50); }
/* Service tile icons (FontAwesome from the seeded form_icon) — charcoal, red on hover */
.boxStyled figure i.tile-icon {
  font-size: 30px;
  line-height: 1;
  color: var(--n-700);
  transition: color .15s ease;
}
.boxStyled:hover figure i.tile-icon { color: var(--red-600); }
.boxStyled h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--n-800);
}

/* ---- Buttons ---- */
.btn-danger {
  background-color: var(--red-500) !important;
  border-color: var(--red-500) !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
  font-family: var(--font-sans);
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--red-600) !important;
  border-color: var(--red-600) !important;
}
.btn-danger:active { background-color: var(--red-700) !important; border-color: var(--red-700) !important; }
.btn-outline-danger {
  color: var(--red-600) !important;
  border-color: var(--red-500) !important;
  border-radius: 8px;
  font-weight: 600;
  font-family: var(--font-sans);
}
.btn-outline-danger:hover {
  background-color: var(--red-500) !important;
  color: #fff !important;
}

/* ---- Search field: neutral surface, red focus ring ---- */
#products_container ~ * .searchInput,
.searchInput,
.input-group .form-control.searchInput {
  font-family: var(--font-sans);
  color: var(--n-900);
}
.searchInput:focus {
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none;
}

/* ---- Links ---- */
a { color: inherit; }
.homepageWrapper a:hover { color: var(--red-600); }

/* Footer "Crafted By" accent → brand red */
.footerWrapper a { color: var(--red-600) !important; }

/* ---- Accessible focus ring everywhere ---- */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Mono for any IDs / amounts if used */
.mono, .amnil-mono { font-family: var(--font-mono); }