/* Get Big Discounts This Super Month! (/page/get-big-discounts-this-super-month) - static rebuild (shared header/footer with the other digiweb.smac.ph clones) */

/* The original declares each file as its own family with no weight descriptor;
   kept the same so the browser's weight rendering matches. */
@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/NunitoSans-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans Bold";
  src: url("assets/fonts/NunitoSans-Bold.ttf") format("truetype");
  font-display: swap;
}

:root {
  --font: "Nunito Sans", sans-serif;
  --font-bold: "Nunito Sans Bold", sans-serif;
  --text: #282828;
  --muted: #6c757d;
  --link: #00589d;
  --blue: #007bff;
  --nav-active: #468dd8;
  --nav-text: #242424;
  --footer-link: #585858;
  --light: #f8f9fa;
  --border: #dee2e6;
  --red: #dc3545;
  --dark: #343a40;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 75px 0 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
}

h1, h2, h3, h4, h5, p, figure { margin: 0; }
img { vertical-align: middle; border-style: none; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 400; }
button { font: inherit; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  height: 76px;
  padding: 5px 16px 0;
  background: #fff;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 71px;
}
.topbar__brand { display: flex; align-items: center; }
.topbar__brand img { display: block; }
.menu-toggle { display: none; }

.menu { display: flex; align-items: center; flex: 1; height: 100%; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.menu__main { height: 100%; margin-right: auto !important; }
.menu__main > li { height: 100%; position: relative; }
.menu__main > li > a,
.menu__main .dropdown-toggle {
  display: block;
  height: 100%;
  margin: 0 16px;
  padding: 22.4px 11.2px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--nav-text);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
}
.menu__main > li > a:hover { text-decoration: none; color: var(--nav-active); }
.menu__main > li > a.is-active,
.menu__main .dropdown-toggle.is-active { color: var(--nav-active); border-bottom-color: #156bd5; }
.dropdown-toggle svg { margin-left: 10px; vertical-align: 0; }

.dropdown {
  display: none;
  position: absolute;
  top: 100%; left: 16px;
  min-width: 15rem;
  padding: 8px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  z-index: 10;
}
.has-dropdown.is-open .dropdown { display: block; }
.dropdown a { display: block; padding: .5rem 1.5rem; color: #212529; font-weight: 400; }
.dropdown a:hover { background: var(--light); text-decoration: none; }

.menu__account { margin-left: auto; }
@media (min-width: 1200px) {
  .menu .menu__account { align-items: flex-start; margin-top: -1px; }
}
.link-btn {
  display: inline-block;
  margin: 8px 8px 0 4px;
  padding: 6px 12px;
  color: var(--blue);
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: 4px;
}
.link-btn--reg { margin-bottom: 4px; }
.login-btn {
  display: inline-block;
  margin: 4px;
  padding: 8px 48px;
  color: #fff;
  font-weight: 400;
  background: var(--link);
  border: 1px solid transparent;
  border-radius: 160px;
}
.login-btn:hover { text-decoration: none; filter: brightness(1.1); }

.search { position: relative; width: 37px; height: 38px; }
.search input {
  width: 100%; height: 100%;
  padding: 6px 25px 6px 12px;
  font: inherit; font-weight: 400;
  color: #495057;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.search input::placeholder { color: transparent; }
.search input:focus {
  position: absolute; right: 0; width: 220px;
  border: 1px solid #ced4da; background: #fff; cursor: text; outline: 0;
}
.search input:focus::placeholder { color: #6c757d; }
.search__icon { position: absolute; right: 8px; top: 10px; pointer-events: none; color: var(--text); }


/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 48px 0; margin-top: 0; }
.footer--spaced { margin-top: 48px; }
.footer__grid { display: flex; margin: 0 -15px; }
.footer__grid > * { padding: 0 15px; }
.footer__brand { width: 33.3333%; order: 1; }
.footer__brand p { margin-bottom: 16px; }
.footer__apps { margin-top: 24px; }
.footer__apps a:first-child { margin-right: 4px; }
.footer__copy { margin-top: 24px; }
.muted { color: var(--muted); }
small { font-size: 14.4px; font-weight: 400; }
.footer__col { width: 16.6667%; order: 2; }
.footer__title { font-family: var(--font-bold); font-weight: 700; }
.footer__col nav { display: flex; flex-direction: column; margin-bottom: 24px; }
.footer__col nav a { padding: 6px 0; color: var(--footer-link); }
.social { display: flex; align-items: center; height: 32px; margin-top: 48px; padding-top: 24px; box-sizing: content-box; color: var(--dark); }
.social a { color: var(--dark); display: block; line-height: 0; }
.social a:first-child { margin-right: 16px; }


/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .container { max-width: 960px; }
  .topbar .container { max-width: 960px; padding: 0; }
  .menu-toggle {
    display: block;
    margin-right: 8px;
    padding: 4px 0;
    border: 0; background: none; cursor: pointer;
  }
  .menu {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px 16px 16px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
  }
  .menu.is-open { display: flex; }
  .menu ul { flex-direction: column; align-items: stretch; height: auto; }
  .menu__main > li > a, .menu__main .dropdown-toggle { margin: 0; padding: 12px 0; text-align: left; width: 100%; }
  .dropdown { position: static; border: 0; }
  .menu__account { margin-left: 0; }
  .search { width: 100%; margin-top: 8px; }
  .search input { border: 1px solid #ced4da; cursor: text; }
}

@media (max-width: 991.98px) {
  .container { max-width: 720px; }
}

@media (max-width: 767.98px) {
  .container { max-width: 540px; }
  body { margin-top: 60px; }
  .topbar { height: 64px; }
  .topbar__inner { height: 55px; }
  .menu { top: 64px; }
  .footer { text-align: center; }
  .footer__grid { flex-wrap: wrap; }
  .footer__col { width: 50%; }
  .footer__col--help { margin-bottom: 48px; }
  .social { margin-top: 0; padding-top: 0; justify-content: center; }
  .footer__brand { width: 100%; order: 5; padding-top: 2px; }
}

@media (max-width: 575.98px) {
  .container { max-width: none; }
}


/* ---------- Promo page (/page/<slug>) ---------- */
main { min-height: 400px; }

/* Banner: a background image on live (#header, min-height 269px, cover).
   Desktop only: the live mobile image never loads (unquoted url() with brackets),
   so below 768px the banner is an empty white band, as on live. */
.promo__banner {
  min-height: 269px;
  background: no-repeat center center / cover;
}
@media (min-width: 768px) {
  .promo__banner { background-image: url("assets/img/banner.png"); }
}

.promo__content { padding-top: 48px; }
.promo__title {
  margin-bottom: 8px;
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
}
.promo__body p { margin-bottom: 16px; }
.promo__body ul { margin: 0 0 16px; padding-left: 40px; }

/* Offer table, pasted from Word on live: 3px black cell borders, 1px cell padding, no fixed
   widths (the columns size to their text), and the system font stack set inline on live.
   strong stays at 400 (shared rule), as on live. */
.offers {
  border-collapse: collapse;
  font-weight: 300;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.offers td { padding: 1px; border: 3px solid #000; }

@media (max-width: 767.98px) {
  .promo__content { padding-top: 24px; text-align: center; }
  .promo__body { padding: 0 24px; }
}
/* The live CSS shrinks h2 to 1.6rem at <=400px. */
@media (max-width: 400px) {
  .promo__title { font-size: 25.6px; }
}