/* =====================================================================
   A1Topup design system  |  ONE stylesheet for every public page
   Brand colours are sampled from the logo (purple #8637AF, slate #505A61).
   All component classes are prefixed a1- so they cannot collide with the
   legacy Bootstrap 4 / 5 pages; the "adapter" block near the end maps the
   old Bootstrap button/form classes onto the same tokens.
   ===================================================================== */

/* ---------- 1. TOKENS -------------------------------------------------- */
:root {
  /* brand */
  --a1-primary: #8637af;          /* logo purple; white text on it = 6.6:1 (AA) */
  --a1-primary-dark: #692a89;     /* hover / pressed */
  --a1-primary-light: #f4ebf9;    /* tints, selected rows, soft badges */
  --a1-primary-mid: #b98ad3;      /* decorative only */
  --a1-secondary: #505a61;        /* logo slate */
  --a1-accent: #e8891d;           /* used sparingly: highlights, badges */
  /* text + surfaces */
  --a1-text: #23282d;
  --a1-text-secondary: #505a61;
  --a1-text-muted: #6b757c;       /* 4.9:1 on white */
  --a1-border: #e3e6ea;
  --a1-border-strong: #c9ced4;
  --a1-bg: #ffffff;
  --a1-bg-alt: #f7f5fa;
  --a1-bg-dark: #23282d;
  /* semantic */
  --a1-success: #1a7f4b;  --a1-success-bg: #e8f6ee;
  --a1-danger:  #c62839;  --a1-danger-bg:  #fdecee;
  --a1-warning: #a86a00;  --a1-warning-bg: #fff6e5;
  --a1-info:    #692a89;  --a1-info-bg:    #f4ebf9;
  --a1-whatsapp: #128c4a;
  /* type */
  --a1-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --a1-fs-xs: .75rem; --a1-fs-sm: .875rem; --a1-fs-base: 1rem; --a1-fs-md: 1.125rem;
  --a1-fs-lg: 1.375rem; --a1-fs-xl: 1.75rem; --a1-fs-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --a1-lh: 1.6;
  /* shape */
  --a1-radius-sm: 6px; --a1-radius: 10px; --a1-radius-lg: 16px; --a1-radius-pill: 999px;
  --a1-shadow-sm: 0 1px 2px rgba(35,40,45,.06);
  --a1-shadow: 0 4px 14px rgba(35,40,45,.08);
  --a1-shadow-lg: 0 18px 50px rgba(35,40,45,.22);
  --a1-ring: 0 0 0 3px rgba(134,55,175,.28);
  /* spacing scale */
  --a1-s1: .25rem; --a1-s2: .5rem; --a1-s3: .75rem; --a1-s4: 1rem; --a1-s5: 1.5rem; --a1-s6: 2rem; --a1-s7: 3rem; --a1-s8: 4.5rem;
  --a1-header-h: 68px;
  --a1-container: 1180px;
  --a1-z-header: 1000; --a1-z-modal: 2000; --a1-z-float: 900;
}

/* ---------- 2. BASE (only what every page must share) ------------------ */
body.a1-theme { margin: 0; font-family: var(--a1-font); color: var(--a1-text); -webkit-font-smoothing: antialiased; }
body.a1-theme button, body.a1-theme input, body.a1-theme select, body.a1-theme textarea { font-family: inherit; }
.a1-container { width: 100%; max-width: var(--a1-container); margin: 0 auto; padding: 0 var(--a1-s4); }
.a1-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.a1-skip { position: absolute; left: -999px; top: 8px; z-index: 3000; background: var(--a1-primary); color: #fff; padding: 10px 16px; border-radius: var(--a1-radius-sm); }
.a1-skip:focus { left: 8px; }
.a1-no-scroll { overflow: hidden; }
[class^="a1-"], [class*=" a1-"], [class^="a1-"] *, [class*=" a1-"] * { box-sizing: border-box; } /* only our components (and what they contain); legacy pages are left alone */
html { scroll-padding-top: calc(var(--a1-header-h) + 16px); }
:where(.a1-theme) :focus-visible { outline: 3px solid rgba(134,55,175,.55); outline-offset: 2px; }

/* ---------- 3. TYPOGRAPHY (for a1- components and new pages) ----------- */
.a1-h1 { font-size: var(--a1-fs-2xl); line-height: 1.2; font-weight: 700; margin: 0 0 var(--a1-s4); color: var(--a1-text); }
.a1-h2 { font-size: var(--a1-fs-xl);  line-height: 1.25; font-weight: 600; margin: 0 0 var(--a1-s3); color: var(--a1-text); }
.a1-h3 { font-size: var(--a1-fs-lg);  line-height: 1.3;  font-weight: 600; margin: 0 0 var(--a1-s3); color: var(--a1-text); }
.a1-lead { font-size: var(--a1-fs-md); color: var(--a1-text-secondary); }
.a1-muted { color: var(--a1-text-muted); }
.a1-link { color: var(--a1-primary); text-decoration: underline; text-underline-offset: 2px; }
.a1-link:hover { color: var(--a1-primary-dark); }

/* ---------- 4. BUTTONS -------------------------------------------------- */
.a1-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.25rem;
  font: 600 var(--a1-fs-base)/1.2 var(--a1-font); text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  border: 2px solid transparent; border-radius: var(--a1-radius); transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s; }
.a1-btn:hover { text-decoration: none; }
.a1-btn:active { transform: translateY(1px); }
.a1-btn--primary { background: var(--a1-primary); color: #fff; }
.a1-btn--primary:hover, .a1-btn--primary:focus { background: var(--a1-primary-dark); color: #fff; }
.a1-btn--secondary { background: var(--a1-secondary); color: #fff; }
.a1-btn--secondary:hover { background: #3d454b; color: #fff; }
.a1-btn--outline { background: transparent; color: var(--a1-primary); border-color: var(--a1-primary); }
.a1-btn--outline:hover { background: var(--a1-primary); color: #fff; }
.a1-btn--success { background: var(--a1-whatsapp); color: #fff; }
.a1-btn--success:hover { background: #0e6f3b; color: #fff; }
.a1-btn--danger { background: var(--a1-danger); color: #fff; }
.a1-btn--danger:hover { background: #a01f2d; color: #fff; }
.a1-btn--ghost { background: transparent; color: var(--a1-text-secondary); border-color: var(--a1-border-strong); }
.a1-btn--ghost:hover { background: var(--a1-bg-alt); color: var(--a1-text); }
.a1-btn--sm { min-height: 36px; padding: .35rem .9rem; font-size: var(--a1-fs-sm); }
.a1-btn--lg { min-height: 52px; padding: .8rem 1.75rem; font-size: var(--a1-fs-md); }
.a1-btn--block { display: flex; width: 100%; }
.a1-btn[disabled], .a1-btn.is-loading { opacity: .7; cursor: not-allowed; pointer-events: none; }
.a1-btn__spinner { display: none; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: a1-spin .7s linear infinite; }
.a1-btn.is-loading .a1-btn__spinner { display: inline-block; }
@keyframes a1-spin { to { transform: rotate(360deg); } }

/* ---------- 5. FORMS ---------------------------------------------------- */
.a1-form { display: grid; gap: var(--a1-s4); text-align: left; }
.a1-form__row { display: grid; gap: var(--a1-s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .a1-form__row--2 { grid-template-columns: 1fr 1fr; } }
.a1-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.a1-label { font-size: var(--a1-fs-sm); font-weight: 600; color: var(--a1-text); }
.a1-required { color: var(--a1-danger); margin-left: 2px; }
.a1-input, .a1-select, .a1-textarea { width: 100%; min-height: 46px; padding: .65rem .9rem; font: 400 var(--a1-fs-base)/1.4 var(--a1-font); color: var(--a1-text);
  background: #fff; border: 1.5px solid var(--a1-border-strong); border-radius: var(--a1-radius); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.a1-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23505a61' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
.a1-textarea { min-height: 96px; resize: vertical; }
.a1-input::placeholder, .a1-textarea::placeholder { color: #8a949b; }
.a1-input:hover, .a1-select:hover, .a1-textarea:hover { border-color: var(--a1-secondary); }
.a1-input:focus, .a1-select:focus, .a1-textarea:focus { outline: none; border-color: var(--a1-primary); box-shadow: var(--a1-ring); }
.a1-field.has-error .a1-input, .a1-field.has-error .a1-select, .a1-field.has-error .a1-textarea { border-color: var(--a1-danger); background: #fffafb; }
.a1-field.has-error .a1-input:focus, .a1-field.has-error .a1-select:focus { box-shadow: 0 0 0 3px rgba(198,40,57,.25); }
.a1-error { min-height: 0; font-size: var(--a1-fs-sm); color: var(--a1-danger); }
.a1-error:empty { display: none; }
.a1-help { font-size: var(--a1-fs-xs); color: var(--a1-text-muted); }
.a1-check, .a1-radio { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--a1-fs-sm); }
.a1-check input, .a1-radio input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--a1-primary); }
.a1-phone { display: flex; align-items: stretch; }
.a1-phone__prefix { display: flex; align-items: center; padding: 0 .8rem; background: var(--a1-bg-alt); border: 1.5px solid var(--a1-border-strong); border-right: 0; border-radius: var(--a1-radius) 0 0 var(--a1-radius); color: var(--a1-text-secondary); font-weight: 600; }
.a1-phone .a1-input { border-radius: 0 var(--a1-radius) var(--a1-radius) 0; }
.a1-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot: hidden from people, visible to bots */
.a1-form__alert { padding: .75rem 1rem; border-radius: var(--a1-radius); font-size: var(--a1-fs-sm); }
.a1-form__alert[hidden] { display: none; }
.a1-form__alert a { font-weight: 600; text-decoration: underline; }
.a1-form__foot { font-size: var(--a1-fs-xs); color: var(--a1-text-muted); text-align: center; margin: 0; }

/* ---------- 6. ALERTS / BADGES / CARDS / TABLES ------------------------ */
.a1-alert { padding: .8rem 1rem; border-radius: var(--a1-radius); border: 1px solid transparent; font-size: var(--a1-fs-sm); }
.a1-alert--success { background: var(--a1-success-bg); color: #0f5a33; border-color: #bfe5cf; }
.a1-alert--danger  { background: var(--a1-danger-bg);  color: #8f1b29; border-color: #f4c2c8; }
.a1-alert--warning { background: var(--a1-warning-bg); color: #7a4b00; border-color: #f3dcae; }
.a1-alert--info    { background: var(--a1-info-bg);    color: var(--a1-primary-dark); border-color: #e2c9f0; }
.a1-badge { display: inline-block; padding: .2rem .6rem; font-size: var(--a1-fs-xs); font-weight: 600; border-radius: var(--a1-radius-pill); background: var(--a1-primary-light); color: var(--a1-primary-dark); }
.a1-badge--accent { background: #fff0dc; color: #8a4d00; }
.a1-card { background: #fff; border: 1px solid var(--a1-border); border-radius: var(--a1-radius-lg); box-shadow: var(--a1-shadow-sm); overflow: hidden; }
.a1-card__body { padding: var(--a1-s5); }
.a1-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.a1-table { width: 100%; border-collapse: collapse; font-size: var(--a1-fs-sm); }
.a1-table th { text-align: left; background: var(--a1-bg-alt); font-weight: 600; }
.a1-table th, .a1-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--a1-border); }

/* ---------- 7. BREADCRUMB / PAGINATION -------------------------------- */
.a1-breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 var(--a1-s4); padding: 0; font-size: var(--a1-fs-sm); color: var(--a1-text-muted); }
.a1-breadcrumb li + li::before { content: '/'; margin-right: .4rem; color: var(--a1-border-strong); }
.a1-breadcrumb a { color: var(--a1-primary); text-decoration: none; }
.a1-breadcrumb a:hover { text-decoration: underline; }
.a1-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; margin: var(--a1-s6) 0 0; padding: 0; }
.a1-pagination a, .a1-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .8rem;
  border: 1px solid var(--a1-border); border-radius: var(--a1-radius); color: var(--a1-text); text-decoration: none; font-weight: 500; background: #fff; }
.a1-pagination a:hover { border-color: var(--a1-primary); color: var(--a1-primary); }
.a1-pagination .is-current { background: var(--a1-primary); border-color: var(--a1-primary); color: #fff; }
.a1-pagination .is-disabled { color: var(--a1-border-strong); background: var(--a1-bg-alt); }
.a1-pagination .is-gap { border: 0; background: transparent; min-width: 20px; padding: 0; }

/* ---------- 8. MODAL (one component: lead form, success, errors) ------- */
.a1-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--a1-z-modal); display: none; align-items: center; justify-content: center; padding: var(--a1-s4); background: rgba(24,27,31,.62); overflow-y: auto; }
.a1-modal.is-open { display: flex; animation: a1-fade .18s ease-out; }
.a1-modal__dialog { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: var(--a1-radius-lg); box-shadow: var(--a1-shadow-lg); padding: var(--a1-s6) var(--a1-s5) var(--a1-s5); animation: a1-pop .2s ease-out; }
.a1-modal__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--a1-text-secondary); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.a1-modal__close:hover { background: var(--a1-bg-alt); color: var(--a1-text); }
.a1-modal__title { margin: 0 0 var(--a1-s2); font-size: var(--a1-fs-lg); font-weight: 700; color: var(--a1-text); padding-right: 2rem; }
.a1-modal__sub { margin: 0 0 var(--a1-s4); color: var(--a1-text-secondary); font-size: var(--a1-fs-sm); }
@keyframes a1-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a1-pop  { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* success modal content */
.a1-success { text-align: center; }
.a1-success__icon { width: 68px; height: 68px; margin: 0 auto var(--a1-s3); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--a1-success-bg); color: var(--a1-success); }
.a1-success__icon svg { width: 36px; height: 36px; }
.a1-success--existing .a1-success__icon { background: var(--a1-primary-light); color: var(--a1-primary); }
.a1-success__title { margin: 0 0 var(--a1-s2); font-size: var(--a1-fs-xl); font-weight: 700; }
.a1-success__msg { margin: 0 0 var(--a1-s4); color: var(--a1-text-secondary); }
.a1-rep { display: flex; align-items: center; gap: var(--a1-s3); text-align: left; padding: var(--a1-s3) var(--a1-s4); margin: 0 0 var(--a1-s4); background: var(--a1-bg-alt); border: 1px solid var(--a1-border); border-radius: var(--a1-radius); }
.a1-rep__avatar { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: var(--a1-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--a1-fs-md); }
.a1-rep__label { display: block; font-size: var(--a1-fs-xs); color: var(--a1-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.a1-rep__name { display: block; font-weight: 700; font-size: var(--a1-fs-md); }
.a1-rep__phone { display: block; color: var(--a1-text-secondary); font-variant-numeric: tabular-nums; }
.a1-success__actions { display: grid; gap: var(--a1-s2); grid-template-columns: 1fr 1fr; }
.a1-success__actions .a1-btn--block-full { grid-column: 1 / -1; }
.a1-success__ref { margin: var(--a1-s3) 0 0; font-size: var(--a1-fs-xs); color: var(--a1-text-muted); }

/* ---------- 9. HEADER + NAV ------------------------------------------- */
.a1-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: var(--a1-z-header); isolation: isolate; background: transparent; border-bottom: 1px solid var(--a1-border); transition: box-shadow .3s, border-color .3s; font-family: var(--a1-font); }
/* Fixed (not sticky): on several legacy pages the header sits inside a wrapper <div>, and on others html+body both have overflow-x:hidden -
   either one makes position:sticky stop working. The spacer below keeps the page layout exactly as it was. */
.a1-header-spacer { display: block; height: 69px; margin: 0; padding: 0; border: 0; pointer-events: none; }
/* The header's own surface is a separate layer: backdrop-filter on the header itself would turn it into the containing block of the
   position:fixed mobile menu drawer and break it. */
.a1-header::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; background: #fff; transition: background-color .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s; }
/* after scrolling: natural frosted glass - the page shows softly through, the (transparent) logo sits directly on it */
.a1-header.is-scrolled { border-bottom-color: rgba(255,255,255,.65); box-shadow: 0 10px 34px rgba(60,20,90,.13), 0 1px 0 rgba(255,255,255,.7) inset; }
.a1-header.is-scrolled::before { background: rgba(255,255,255,.58); -webkit-backdrop-filter: saturate(190%) blur(18px); backdrop-filter: saturate(190%) blur(18px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .a1-header.is-scrolled::before { background: rgba(255,255,255,.96); } }
.a1-header__inner { display: flex; align-items: center; gap: var(--a1-s4); min-height: var(--a1-header-h); }
.a1-logo { flex: 0 0 auto; display: flex; align-items: center; }
.a1-logo img { display: block; height: 46px; width: auto; }
.a1-nav { margin-left: auto; }
.a1-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.a1-nav__item { position: relative; }
.a1-nav__link { display: flex; align-items: center; gap: .3rem; padding: .55rem .8rem; color: var(--a1-text); font-weight: 500; font-size: .95rem; text-decoration: none; border-radius: var(--a1-radius-sm); background: none; border: 0; cursor: pointer; font-family: inherit; }
.a1-nav__link:hover, .a1-nav__item:focus-within > .a1-nav__link { color: var(--a1-primary); background: var(--a1-primary-light); text-decoration: none; }
.a1-nav__link.is-active { color: var(--a1-primary); font-weight: 600; }
.a1-nav__caret { width: 9px; height: 9px; transition: transform .15s; }
.a1-nav__sub { position: absolute; top: 100%; left: 0; min-width: 250px; margin: 0; padding: .5rem; list-style: none; background: #fff; border: 1px solid var(--a1-border); border-radius: var(--a1-radius); box-shadow: var(--a1-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.a1-nav__sub a { display: block; padding: .55rem .8rem; color: var(--a1-text); text-decoration: none; font-size: .92rem; border-radius: var(--a1-radius-sm); }
.a1-nav__sub a:hover { background: var(--a1-primary-light); color: var(--a1-primary-dark); }
@media (min-width: 992px) {
  .a1-nav__item:hover > .a1-nav__sub, .a1-nav__item:focus-within > .a1-nav__sub, .a1-nav__item.is-open > .a1-nav__sub { opacity: 1; visibility: visible; transform: none; }
  .a1-nav__item:hover .a1-nav__caret { transform: rotate(180deg); }
}
.a1-header__actions { display: flex; align-items: center; gap: var(--a1-s2); }
.a1-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--a1-border); border-radius: var(--a1-radius); background: #fff; color: var(--a1-text); cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.a1-burger svg { display: block; }
.a1-burger .a1-burger__x { display: none; }
.a1-burger[aria-expanded="true"] .a1-burger__lines { display: none; }
.a1-burger[aria-expanded="true"] .a1-burger__x { display: inline; }
@media (max-width: 991.98px) {
  .a1-burger { display: inline-flex; }
  .a1-header__actions { margin-left: auto; }
  .a1-nav { position: fixed; top: var(--a1-header-h); left: 0; right: 0; bottom: 0; margin: 0; padding: var(--a1-s3) var(--a1-s4) var(--a1-s6); background: #fff; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .25s, visibility .25s; border-top: 1px solid var(--a1-border); }
  .a1-nav.is-open { transform: none; visibility: visible; }
  .a1-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .a1-nav__link { width: 100%; justify-content: space-between; padding: .9rem .5rem; font-size: 1.02rem; border-bottom: 1px solid var(--a1-border); border-radius: 0; }
  .a1-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; padding: 0 0 .4rem .8rem; }
  .a1-nav__item.is-open > .a1-nav__sub { display: block; }
  .a1-nav__item.is-open .a1-nav__caret { transform: rotate(180deg); }
  .a1-header__actions .a1-btn--outline { display: none; }  /* login lives inside the drawer on small screens */
  .a1-nav__mobile-actions { display: grid; gap: var(--a1-s2); margin-top: var(--a1-s4); }
}
@media (min-width: 992px) { .a1-nav__mobile-actions { display: none; } }
@media (max-width: 380px) { .a1-logo img { height: 38px; } .a1-header__actions .a1-btn--primary { display: none; } }

/* ---------- 10. FOOTER -------------------------------------------------- */
.a1-footer { background: var(--a1-bg-alt); border-top: 4px solid var(--a1-primary); color: var(--a1-text-secondary); font-family: var(--a1-font); font-size: .94rem; line-height: 1.65; }
.a1-footer a { color: var(--a1-text-secondary); text-decoration: none; }
.a1-footer a:hover { color: var(--a1-primary); text-decoration: underline; }
.a1-footer__grid { display: grid; gap: var(--a1-s6); padding: var(--a1-s7) 0 var(--a1-s6); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .a1-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .a1-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.a1-footer__brand img { height: 56px; width: auto; display: block; margin-bottom: var(--a1-s3); }
.a1-footer__tag { display: inline-block; margin-bottom: var(--a1-s2); font-weight: 600; color: var(--a1-primary-dark); }
.a1-footer__ids { display: flex; flex-wrap: wrap; gap: var(--a1-s2); margin-top: var(--a1-s3); }
.a1-footer__id { padding: .25rem .7rem; background: #fff; border: 1px solid var(--a1-border); border-radius: var(--a1-radius-pill); font-size: var(--a1-fs-xs); }
.a1-footer__id b { color: var(--a1-text); }
.a1-footer h4 { margin: 0 0 var(--a1-s3); font-size: 1rem; font-weight: 700; color: var(--a1-text); }
.a1-footer ul { list-style: none; margin: 0; padding: 0; }
.a1-footer li + li { margin-top: .4rem; }
.a1-footer__contact li { display: flex; gap: .6rem; }
.a1-footer__contact strong { color: var(--a1-text); display: block; font-size: var(--a1-fs-sm); }
.a1-follow { margin-top: var(--a1-s4); }
.a1-follow__label { display: block; margin-bottom: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--a1-text-muted); }
.a1-social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.a1-footer .a1-social li + li { margin-top: 0; }
.a1-footer .a1-social__link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--a1-border); color: var(--brand, var(--a1-primary)); box-shadow: 0 1px 2px rgba(35,40,45,.06); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.a1-social__link svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.a1-footer .a1-social__link:hover, .a1-footer .a1-social__link:focus-visible { background: var(--brand, var(--a1-primary)); border-color: var(--brand, var(--a1-primary)); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(35,40,45,.2); text-decoration: none; }
.a1-footer .a1-social--instagram:hover, .a1-footer .a1-social--instagram:focus-visible { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-color: transparent; }
.a1-footer__app { display: flex; align-items: center; gap: var(--a1-s3); margin-top: var(--a1-s3); padding: var(--a1-s3); background: #fff; border: 1px solid var(--a1-border); border-radius: var(--a1-radius); }
.a1-footer__app img { width: 64px; height: 64px; border-radius: var(--a1-radius-sm); }
.a1-footer__bottom { border-top: 1px solid var(--a1-border); padding: var(--a1-s4) 0; display: flex; flex-wrap: wrap; gap: var(--a1-s3); justify-content: space-between; align-items: center; font-size: var(--a1-fs-sm); }
.a1-footer__legal { display: flex; flex-wrap: wrap; gap: var(--a1-s4); }
.a1-float-wa { position: fixed; right: 24px; bottom: 96px; z-index: var(--a1-z-float); width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; text-decoration: none; animation: a1-bounce 1s ease-in-out infinite alternate; }
.a1-float-wa::before { content: ''; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,0,0,.08), 0 0 0 8px rgba(0,0,0,.035); pointer-events: none; }
.a1-float-wa img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)); }
.a1-float-wa:hover, .a1-float-wa:focus-visible { animation-play-state: paused; transform: scale(1.06); }
@keyframes a1-bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
/* the cursor star that follows the mouse and blinks when it stops (desktop mouse only) */
#star { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; font-size: 20px; line-height: 1; visibility: hidden; text-shadow: 0 0 7px rgba(255,190,0,.65); will-change: transform; }
@media (max-width: 768px), (pointer: coarse) { #star { display: none !important; } }
@media (prefers-reduced-motion: reduce) { #star { display: none !important; } .a1-float-wa { animation: none !important; } .a1-btn, .a1-modal, .a1-modal__dialog, .a1-nav, .a1-nav__sub, .a1-btn__spinner { animation: none !important; transition: none !important; } }

/* ---------- 11. BLOG ---------------------------------------------------- */
.a1-blog-hero { background: linear-gradient(135deg, var(--a1-primary) 0%, #5a2274 100%); color: #fff; padding: var(--a1-s7) 0 var(--a1-s6); text-align: center; }
.a1-blog-hero h1 { color: #fff; margin: 0 0 var(--a1-s2); font-size: var(--a1-fs-2xl); font-weight: 700; }
.a1-blog-hero p { margin: 0 auto; max-width: 640px; opacity: .92; }
.a1-blog-tools { display: flex; flex-wrap: wrap; gap: var(--a1-s3); justify-content: space-between; align-items: center; margin: var(--a1-s5) 0; }
.a1-search { display: flex; flex: 1 1 280px; max-width: 460px; }
.a1-search .a1-input { border-radius: var(--a1-radius) 0 0 var(--a1-radius); }
.a1-search .a1-btn { border-radius: 0 var(--a1-radius) var(--a1-radius) 0; }
.a1-chips { display: flex; flex-wrap: wrap; gap: var(--a1-s2); }
.a1-chip { padding: .35rem .9rem; border: 1px solid var(--a1-border-strong); border-radius: var(--a1-radius-pill); color: var(--a1-text-secondary); font-size: var(--a1-fs-sm); text-decoration: none; background: #fff; }
.a1-chip:hover, .a1-chip.is-active { background: var(--a1-primary); border-color: var(--a1-primary); color: #fff; text-decoration: none; }
.a1-blog-grid { display: grid; gap: var(--a1-s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .a1-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .a1-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.a1-post-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--a1-border); border-radius: var(--a1-radius-lg); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.a1-post-card:hover { box-shadow: var(--a1-shadow); transform: translateY(-2px); }
.a1-post-card__img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--a1-primary-light); display: block; }
.a1-post-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--a1-s4); }
.a1-post-card__meta { font-size: var(--a1-fs-xs); color: var(--a1-text-muted); margin-bottom: var(--a1-s2); display: flex; gap: var(--a1-s2); flex-wrap: wrap; align-items: center; }
.a1-post-card__title { margin: 0 0 var(--a1-s2); font-size: 1.08rem; font-weight: 600; line-height: 1.35; }
.a1-post-card__title a { color: var(--a1-text); text-decoration: none; }
.a1-post-card__title a:hover { color: var(--a1-primary); }
.a1-post-card__excerpt { margin: 0 0 var(--a1-s3); color: var(--a1-text-secondary); font-size: var(--a1-fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.a1-post-card__more { margin-top: auto; font-weight: 600; font-size: var(--a1-fs-sm); color: var(--a1-primary); text-decoration: none; }
.a1-post-layout { display: grid; gap: var(--a1-s6); grid-template-columns: minmax(0, 1fr); padding: var(--a1-s6) 0 var(--a1-s7); }
@media (min-width: 1000px) { .a1-post-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.a1-post__meta { display: flex; flex-wrap: wrap; gap: var(--a1-s3); align-items: center; color: var(--a1-text-muted); font-size: var(--a1-fs-sm); margin-bottom: var(--a1-s4); }
.a1-post__cover { width: 100%; height: auto; border-radius: var(--a1-radius-lg); margin-bottom: var(--a1-s5); }
.a1-prose { font-size: 1.04rem; line-height: 1.8; color: var(--a1-text); overflow-wrap: anywhere; }
.a1-prose h2 { font-size: 1.55rem; margin: 2rem 0 .8rem; font-weight: 700; } .a1-prose h3 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; font-weight: 600; }
.a1-prose p { margin: 0 0 1.1rem; } .a1-prose ul, .a1-prose ol { margin: 0 0 1.1rem 1.3rem; padding: 0; } .a1-prose li { margin-bottom: .35rem; }
.a1-prose a { color: var(--a1-primary); text-decoration: underline; }
.a1-prose img { max-width: 100%; height: auto; border-radius: var(--a1-radius); }
.a1-prose blockquote { margin: 1.4rem 0; padding: .8rem 1.2rem; border-left: 4px solid var(--a1-primary); background: var(--a1-bg-alt); border-radius: 0 var(--a1-radius) var(--a1-radius) 0; }
.a1-prose pre, .a1-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.a1-prose pre { background: #1f2327; color: #eef0f2; padding: 1rem; border-radius: var(--a1-radius); overflow-x: auto; }
.a1-prose :not(pre) > code { background: var(--a1-bg-alt); padding: .1rem .35rem; border-radius: 4px; }
.a1-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .a1-prose th, .a1-prose td { border: 1px solid var(--a1-border); padding: .5rem .7rem; } .a1-prose th { background: var(--a1-bg-alt); }
.a1-prose iframe, .a1-prose video { max-width: 100%; }
.a1-video { position: relative; aspect-ratio: 16 / 9; margin: 1.4rem 0; } .a1-video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: var(--a1-radius); }
.a1-faq { margin-top: var(--a1-s6); } .a1-faq details { border: 1px solid var(--a1-border); border-radius: var(--a1-radius); margin-bottom: var(--a1-s2); background: #fff; }
.a1-faq summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; } .a1-faq details[open] summary { color: var(--a1-primary); } .a1-faq details > div { padding: 0 1.1rem 1rem; color: var(--a1-text-secondary); }
.a1-aside > * + * { margin-top: var(--a1-s5); }
.a1-cta-box { background: linear-gradient(135deg, var(--a1-primary), #5a2274); color: #fff; border-radius: var(--a1-radius-lg); padding: var(--a1-s5); } .a1-cta-box h3 { color: #fff; margin: 0 0 var(--a1-s2); }
.a1-related { margin: 0; padding: 0; list-style: none; } .a1-related li { padding: .55rem 0; border-bottom: 1px solid var(--a1-border); } .a1-related li:last-child { border: 0; } .a1-related a { color: var(--a1-text); text-decoration: none; font-weight: 500; } .a1-related a:hover { color: var(--a1-primary); }
.a1-empty { text-align: center; padding: var(--a1-s7) var(--a1-s4); color: var(--a1-text-secondary); }

/* ---------- 12. ADAPTER for legacy Bootstrap 4/5 pages ---------------- */
/* The old pages keep their layout; only colour tokens are unified so a
   visitor sees the same buttons/inputs everywhere. */
body.a1-theme .btn-primary, body.a1-theme .btn-main, body.a1-theme .btn-hero { background: var(--a1-primary); background-image: none; border-color: var(--a1-primary); color: #fff; }
body.a1-theme .btn-primary:hover, body.a1-theme .btn-primary:focus, body.a1-theme .btn-main:hover, body.a1-theme .btn-hero:hover { background: var(--a1-primary-dark); background-image: none; border-color: var(--a1-primary-dark); color: #fff; transform: none; box-shadow: var(--a1-shadow); }
body.a1-theme .btn-outline-primary, body.a1-theme .btn-primary-outline { color: var(--a1-primary); border-color: var(--a1-primary); background: transparent; background-image: none; }
body.a1-theme .btn-outline-primary:hover, body.a1-theme .btn-primary-outline:hover { background: var(--a1-primary); color: #fff; background-image: none; box-shadow: none; }
body.a1-theme .btn-success { background: var(--a1-whatsapp); background-image: none; border-color: var(--a1-whatsapp); }
body.a1-theme .form-control:focus, body.a1-theme .form-select:focus { border-color: var(--a1-primary); box-shadow: var(--a1-ring); outline: 0; }
body.a1-theme .page-item.active .page-link { background: var(--a1-primary); border-color: var(--a1-primary); }
body.a1-theme .page-link { color: var(--a1-primary); }

/* ---------- 13. RESPONSIVE TUNING (320px - 1920px) -------------------- */
@media (max-width: 480px) {
  .a1-modal { align-items: flex-end; padding: 0; }
  .a1-modal__dialog { max-width: 100%; border-radius: var(--a1-radius-lg) var(--a1-radius-lg) 0 0; padding: var(--a1-s5) var(--a1-s4); max-height: 92vh; }
  .a1-success__actions { grid-template-columns: 1fr; }
  .a1-footer__bottom { flex-direction: column; align-items: flex-start; }
  .a1-float-wa { right: 14px; bottom: 84px; width: 56px; height: 56px; }
  .a1-blog-tools { flex-direction: column; align-items: stretch; } .a1-search { max-width: none; }
}
@media (min-width: 1600px) { :root { --a1-container: 1320px; } }
@media print { .a1-header, .a1-footer, .a1-modal, .a1-float-wa { display: none !important; } }

/* ---------- 14. LEGACY-PAGE SUPPORT ------------------------------------ */
/* Rules the old pages still depend on. They used to be copy-pasted inside four
   different top_header.php files (with off-brand blue #007bff gradients); they
   now live here once, on brand tokens. Remove as pages are redesigned. */
.cta { position: relative; font-size: 22px; width: 100%; font-weight: bold; text-align: left; color: #fff; background-image: url(/india/img/ctaimga.png); background-size: cover; background-position: center;
  text-shadow: rgba(0,0,0,.2) 1px 1px 3px; letter-spacing: 1px; box-shadow: rgba(0,0,0,.4) 0 10px 30px; z-index: 1; padding: 60px 0; display: flex; align-items: center; justify-content: center; height: auto; }
@media (min-width: 992px) { .cta { height: 230px; padding: 0; } }
h7 { font-size: 2.45rem; color: #28f8ed; }
body.a1-theme .btn { display: inline-block; font-size: 16px; font-weight: 600; padding: 14px 28px; border: none; cursor: pointer; transition: all .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.15); text-transform: uppercase; letter-spacing: .5px; }
body.a1-theme .btn-primary-outline { display: inline-block; font-size: 16px; font-weight: 600; padding: 12px 28px; border-radius: 50px; border: 2px solid var(--a1-primary); cursor: pointer; text-transform: uppercase; letter-spacing: .5px; }
body.a1-theme .btn-warning { background: linear-gradient(135deg, #ffc107, #ff9800); color: #212529; }

/* ---------- 15. INLINE FORM CARD -------------------------------------- */
/* Inline lead forms sit in a white card so labels stay readable on the legacy
   dark / image section backgrounds they used to be dropped onto. */
.a1-form-card { max-width: 760px; margin: 0 auto; padding: var(--a1-s5); background: #fff; color: var(--a1-text); border-radius: var(--a1-radius-lg); box-shadow: var(--a1-shadow); text-align: left; }
.a1-form-card .a1-h3 { margin-top: 0; }
@media (max-width: 480px) { .a1-form-card { padding: var(--a1-s4); border-radius: var(--a1-radius); } }