/* ============================================================
   mobile-fixes.css — site-wide responsive + layout hardening
   Loaded after style.css / plans.css and BEFORE each page's
   own <style> block, so page-specific rules still win.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
html, body { overflow-x: hidden; max-width: 100%; }

img, svg, video { max-width: 100%; }
iframe { max-width: 100%; border: 0; }

/* (Header, navigation, buttons and footer now live in theme.css) */

/* ------------------------------------------------------------
   Hero (inner pages sit BELOW the header, not under it)
   ------------------------------------------------------------ */
#hero .container { padding-top: 0; }
@media (max-width: 767.98px) {
  #hero { padding: 90px 0 46px; min-height: auto; height: auto; }
  #hero h1 { font-size: clamp(26px, 7vw, 40px); line-height: 1.2; }
  #hero h2 { font-size: clamp(15px, 4vw, 19px); line-height: 1.5; }
}

/* ------------------------------------------------------------
   Phone typography + gutters
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .section-title h2 { font-size: 26px; }
  h1 { font-size: 28px; }
  h2 { font-size: 23px; }
  h3 { font-size: 20px; }
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------
   Cards / icon boxes — kill fixed widths that cause overflow
   ------------------------------------------------------------ */
.icon-box { height: auto; }
.icon-box[style*="min-width"] { min-width: 0 !important; }
.services .row > [class*="col-"] { display: flex; }
.services .icon-box { width: 100%; }

/* ------------------------------------------------------------
   Section spacing on phones (hero keeps its own padding)
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  section:not(#hero) { padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* ------------------------------------------------------------
   Any future <table> stays inside the viewport
   ------------------------------------------------------------ */
table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------
   Footer stacks and centres on phones
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  #footer .footer-top { padding: 40px 0 20px; }
  #footer .footer-info,
  #footer .footer-links,
  #footer .footer-newsletter,
  #footer .footer-contact { text-align: center; }
  #footer .social-links { display: flex; justify-content: center; gap: 8px; }
  #footer .footer-links ul { padding-left: 0; }
}

/* ------------------------------------------------------------
   education.html — cards with hard-coded height:150px
   ------------------------------------------------------------ */
.edu-card { height: auto !important; }
.edu-card img,
.edu-card .card-img-top {
  height: auto !important;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
   vip.html — absolutely-positioned blurred backdrop image
   ------------------------------------------------------------ */
.vip-img { max-width: 60%; height: auto; }
@media (max-width: 767.98px) { .vip-img { max-width: 92%; } }

/* ------------------------------------------------------------
   accounts.html — horizontal "swipe" plan strip: contain it
   ------------------------------------------------------------ */
.plans-scroll,
.scroll-container,
.horizontal-scroll,
[class*="horizontal-scroll"] { max-width: 100%; }
@media (max-width: 575.98px) {
  .plan-card, .plans-scroll .card { scroll-snap-align: start; }
  .plans-scroll, .scroll-container { scroll-snap-type: x proximity; }
}

/* ------------------------------------------------------------
   Accent colour override: Bootstrap's "success" green -> brand blue
   (covers the .text-success spans in the footer/i18n strings etc.)
   ------------------------------------------------------------ */
.text-success { color: #E2B04A !important; }
.btn-outline-success { color: #E2B04A; border-color: #E2B04A; }
.btn-outline-success:hover, .btn-outline-success:focus { background: #E2B04A; border-color: #E2B04A; color: #fff; }
.bg-success { background-color: #E2B04A !important; }
.border-success { border-color: #E2B04A !important; }

/* ------------------------------------------------------------
   Legal pages (Terms & Conditions / Privacy Policy)
   ------------------------------------------------------------ */
.legal-content { max-width: 920px; margin: 0 auto; color: #d9e2f2; font-size: 16px; line-height: 1.75; text-align: left; }
.legal-content h3 { color: #fff; font-size: 22px; margin: 34px 0 12px; }
.legal-content p, .legal-content li { color: #d9e2f2; }
.legal-content ul { padding-left: 22px; margin-bottom: 14px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: #F0C769; text-decoration: underline; }
.legal-content strong { color: #fff; }
.legal-box { background: rgba(226, 176, 74, .09); border: 1px solid rgba(226, 176, 74, .35); border-radius: 12px; padding: 20px 24px; margin: 0 0 22px; }
.legal-box h3 { margin-top: 0; font-size: 19px; }
.legal-box p { margin-bottom: 0; }
.legal-box.legal-warn { background: rgba(255, 170, 0, .08); border-color: rgba(255, 170, 0, .4); }
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; display: table; overflow: visible; }
.legal-table th, .legal-table td { border: 1px solid rgba(255, 255, 255, .14); padding: 10px 14px; vertical-align: top; text-align: left; }
.legal-table th { background: rgba(226, 176, 74, .18); color: #fff; }
@media (max-width: 767.98px) {
  .legal-content { font-size: 15px; }
  .legal-content h3 { font-size: 19px; }
  .legal-table { display: block; overflow-x: auto; }
}
.legal-content .legal-updated { color: #9db4d8; font-size: 14px; margin-bottom: 22px; }