/* ==========================================================================
   IAK Contact page — prototype page-contact.jsx. Scoped to .iak-contact.
   Anchor colors use !important (beats style.css a{color:inherit!important}).
   ========================================================================== */
.iak-contact {
  --ct-accent: #C13538; --ct-accent-deep: #A1282B; --ct-success: #1F8A5B;
  --ct-bg: #fff; --ct-cream: #FFF8F0; --ct-ink: #18181a; --ct-ink-2: #2c2c2e; --ct-ink-3: #5a5a5e; --ct-mute: #848688;
  --ct-line: rgba(20,20,23,0.08); --ct-line-2: rgba(20,20,23,0.14);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--ct-cream);
}
/* style.css forces #information-contact { padding-top:1.625rem; margin-top:… !important }
   in several media queries — on this page that paints a blank cream strip above
   the dark hero. The hero is meant to butt against the header (like the mockup). */
.iak-contact, .iak-contact #information-contact { padding-top: 0 !important; margin-top: 0 !important; }
/* Dark: page darker than cards so cards/sections read as separate surfaces. */
/* Dark mode mirrors the prototype's LIGHT layout relationship: the HERO is the
   distinct/darkest layer, while the page background and the cards are nearly the
   same shade. If the page is darker than the cards, every gap between cards shows
   the darkest colour and reads as a harsh black BAND between rows — that was the
   bug. Keeping page ~= card makes the inter-card gaps disappear; cards are
   defined by their border, and only the hero stands out. */
[data-theme="dark"] .iak-contact { --ct-bg:#202024; --ct-cream:#1b1b1e; --ct-ink:#f5f5f7; --ct-ink-2:#e4e4e7; --ct-ink-3:#b8b8bb; --ct-mute:#8a8a8e; --ct-line:rgba(255,255,255,.14); --ct-line-2:rgba(255,255,255,.20); --ct-accent:#E0524F; --ct-accent-deep:#F26B5F; }
[data-theme="dark"] .iak-ct__hero { background: #0d0d0f; }
[data-theme="dark"] .iak-ct__card { border-color: rgba(255,255,255,.14); box-shadow: none; }
[data-theme="dark"] .iak-ct__input { background: #141417; }

.iak-contact .container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.iak-ct__card { background: var(--ct-bg); border: 1px solid var(--ct-line); border-radius: 16px; box-shadow: 0 4px 10px rgba(20,20,23,0.05), 0 2px 4px rgba(20,20,23,0.04); }

/* Hero */
.iak-ct__hero { position: relative; overflow: hidden; color: #fff; background: #18181a; }
.iak-ct__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 90% at 85% -10%, rgba(241,137,87,0.32) 0%, transparent 55%), radial-gradient(80% 80% at -5% 120%, rgba(193,53,56,0.4) 0%, transparent 52%); }
/* hero-inner is also .container, whose `padding: 0 1.25rem` zeroes the vertical
   padding — without !important the stats sit flush to the hero edge and look cut. */
.iak-ct__hero-inner { position: relative; padding-top: 52px !important; padding-bottom: 56px !important; }
.iak-ct__crumb { font-size: 12px; margin-bottom: 16px; color: rgba(255,255,255,0.6); }
.iak-ct__crumb a { color: rgba(255,255,255,0.6) !important; text-decoration: none; }
.iak-ct__crumb a:hover { color: #fff !important; }
.iak-ct__crumb .cur { color: rgba(255,255,255,0.9); }
.iak-ct__hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.iak-ct__stat { min-width: 0; }
.iak-ct__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
.iak-ct__title { font-size: 46px; font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 16px; }
.iak-ct__lead { font-size: 18px; line-height: 1.55; opacity: 0.82; max-width: 560px; margin: 0; }
.iak-ct__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iak-ct__stat { padding: 16px; background: rgba(255,255,255,0.08); border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); }
.iak-ct__stat .n { font-size: 22px; font-weight: 800; }
.iak-ct__stat .l { font-size: 12px; opacity: 0.7; margin-top: 2px; }

/* Channel cards — sit below the hero with a gap (no overlap). */
/* These sections also carry the theme's .container class, whose
   `padding: 0 1.25rem; margin: 0 auto` zeroes vertical padding — so the section
   gaps need !important to survive (horizontal gutter is left to .container). */
.iak-ct__channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 40px !important; padding-bottom: 8px !important; }
.iak-ct__chan { padding: 24px; display: flex; flex-direction: column; }
.iak-ct__chan-ic { display: inline-flex; padding: 12px; border-radius: 13px; align-self: flex-start; margin-bottom: 16px; font-size: 22px; }
.iak-ct__chan-ic--green { background: rgba(31,138,91,0.10); color: #1f8a5b; }
.iak-ct__chan-ic--blue { background: rgba(37,99,235,0.10); color: #2563eb; }
.iak-ct__chan-ic--orange { background: rgba(246,145,56,0.12); color: #F69138; }
.iak-ct__chan h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--ct-ink); }
.iak-ct__chan p { font-size: 13.5px; color: var(--ct-ink-3); line-height: 1.5; margin: 0 0 14px; }
.iak-ct__chan-foot { margin-top: auto; }
.iak-ct__chan-strong { font-size: 14px; font-weight: 700; color: var(--ct-ink); word-break: break-word; }
.iak-ct__chan-mute { font-size: 14px; color: var(--ct-mute); margin-top: 2px; }

/* Buttons */
.iak-ct__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid var(--ct-line-2); background: var(--ct-bg); color: var(--ct-ink-2) !important; margin-top: 12px; text-transform: capitalize;}
.iak-ct__btn--ghost:hover { border-color: var(--ct-accent); color: var(--ct-accent) !important; }
[data-theme="dark"] .iak-ct__btn--ghost:hover {
	border-color: #fff;
	background: #fff;
    color: #18181a !important;
}
.iak-ct__btn--primary { margin: 0; height: 46px; padding: 0 22px; background: var(--ct-accent); border-color: var(--ct-accent); color: #fff !important; font-size: 14px; }
.iak-ct__btn--primary:hover { background: var(--iak-brand-red); border-color: var(--iak-brand-red); }

/* Form + side */
.iak-ct__main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; padding-top: 56px !important; padding-bottom: 64px !important; }
.iak-ct__form { padding: 32px; }
.iak-ct__form h2 { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--ct-ink); }
.iak-ct__form-sub { color: var(--ct-ink-3); margin: 0 0 24px; font-size: 14.5px; }
.iak-ct__fields { display: flex; flex-direction: column; gap: 16px; }
.iak-ct__label { display: block; font-size: 13px; font-weight: 600; color: var(--ct-ink-2); margin-bottom: 8px; }
.iak-ct__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iak-ct__chip { cursor: pointer; }
.iak-ct__chip input { position: absolute; opacity: 0; pointer-events: none; }
.iak-ct__chip span { display: inline-block; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--ct-line-2); background: var(--ct-bg); color: var(--ct-ink-2);    line-height: initial;}
.iak-ct__chip input:checked + span,
.iak-ct__chip:hover span { border-color: var(--ct-accent); background: var(--ct-cream); color: var(--ct-accent-deep); }

[data-theme="dark"] .iak-ct__chip input:checked + span,
[data-theme="dark"] .iak-ct__chip:hover span {
	border: 1px solid var(--ct-line-2);
	background: var(--ct-line-2);
	color: var(--ct-ink-2) !important;
}

.iak-ct__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iak-ct__field { display: flex; flex-direction: column; }
.iak-ct__input { height: 44px; border: 1px solid var(--ct-line-2); border-radius: 9px; background: var(--ct-bg); color: var(--ct-ink); font-size: 14px; padding: 0 13px; width: 100%; }
.iak-ct__textarea { height: auto; padding: 12px 13px; line-height: 1.5; resize: vertical; }
.iak-ct__input:focus { outline: 0; border-color: var(--ct-accent); box-shadow: 0 0 0 3px rgba(193,53,56,.12); }
[data-theme="dark"] .iak-ct__input:focus {
	border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}
.iak-ct__err { color: var(--ct-accent); font-size: 12px; margin-top: 5px; }
.iak-ct__form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.iak-ct__note { font-size: 12px; color: var(--ct-mute); display: inline-flex; align-items: flex-start; gap: 6px; max-width: 360px; line-height: 20px;}
.iak-ct__note .fa { color: var(--ct-mute); position: relative; top: 5px; }

/* Sent state */
.iak-ct__sent { text-align: center; padding: 32px 0; }
.iak-ct__sent-ic { display: inline-flex; padding: 18px; border-radius: 999px; background: rgba(31,138,91,0.12); color: var(--ct-success); margin-bottom: 18px; font-size: 28px; }
.iak-ct__sent h2 { font-size: 26px; font-weight: 800; margin: 0 0 10px; color: var(--ct-ink); }
.iak-ct__sent p { color: var(--ct-ink-3); font-size: 15px; line-height: 1.55; max-width: 420px; margin: 0 auto 24px; }

/* Side */
.iak-ct__side { display: flex; flex-direction: column; gap: 16px; }
.iak-ct__addr { padding: 0; overflow: hidden; }
.iak-ct__map { width: 100%; height: 180px; border: 0; display: block; }
.iak-ct__addr-body { padding: 20px; }
.iak-ct__addr-row { display: flex; gap: 10px; align-items: flex-start; }
.iak-ct__addr-row + .iak-ct__addr-row { margin-top: 14px; }
.iak-ct__addr-row .fa { color: var(--ct-accent); margin-top: 6px; }
.iak-ct__addr-row .t { font-weight: 700; font-size: 14px; color: var(--ct-ink); }
.iak-ct__addr-row .s { font-size: 13px; color: var(--ct-ink-3); line-height: 1.5; }
.iak-ct__self { padding: 20px; }
.iak-ct__self-h { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--ct-ink); }
.iak-ct__self-link { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid var(--ct-line); font-size: 13.5px; color: var(--ct-ink-2) !important; text-decoration: none; }
.iak-ct__self-link:first-of-type { border-top: 0; }
.iak-ct__self-link:hover { color: var(--ct-accent) !important; }
.iak-ct__self-link .fa { color: var(--ct-mute); font-size: 12px; }

/* Channels grid with only 2 cards (guests — no account-manager card) */
.iak-ct__channels--2 { grid-template-columns: repeat(2, 1fr); }

/* Captcha: neutralise the extension's Bootstrap grid (.col-sm-2 label was
   squeezing the text one-word-per-line) and style it like a field.
   The extension wraps its widget in <fieldset><legend>Captcha</legend>; the
   bare legend was rendering as a stray "Captcha" heading — hide it. */
.iak-ct__field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.iak-ct__field fieldset > legend { display: none; }
.iak-ct__field .form-group { margin: 0; display: block; }
.iak-ct__field .control-label { display: block; float: none; width: auto; text-align: left; padding: 0 0 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ct-ink-2); white-space: normal; }
.iak-ct__field .col-sm-2, .iak-ct__field .col-sm-10, .iak-ct__field [class*="col-"] { display: block; float: none; width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; margin: 0; }
.iak-ct__field .g-recaptcha, .iak-ct__field img { max-width: 100%; }
.iak-ct__field .text-danger { color: var(--ct-accent); font-size: 12px; margin-top: 5px; }

@media (max-width: 920px) {
  .iak-ct__channels--2 { grid-template-columns: 1fr; }
  .iak-ct__hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .iak-ct__main { grid-template-columns: 1fr; gap: 28px; padding-top: 36px !important; }
  .iak-ct__channels { grid-template-columns: 1fr; padding-top: 28px !important; }
  .iak-ct__title { font-size: 26px; }
  .iak-ct__lead {font-size: 16px;}
  .iak-ct__stat .n{font-size: 20px;}
  .iak-ct__row2 { grid-template-columns: 1fr; }
  .iak-ct__form{padding: 22px;}
}