/* Axxess Availability Checker — frontend styles */
.axxess-avail { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.axxess-avail__search { margin-bottom: 18px; }
.axxess-avail__search label { display: block; font-weight: 600; margin-bottom: 8px; }
.axxess-avail__row { display: flex; gap: 8px; flex-wrap: wrap; }
.axxess-avail__row input {
  flex: 1 1 300px; padding: 11px 14px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 1rem; min-width: 200px;
}
.axxess-avail__row button {
  background: #2271b1; color: #fff; border: none; border-radius: 6px;
  padding: 11px 22px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.axxess-avail__row button:disabled { opacity: .5; cursor: not-allowed; }
.axxess-avail__map {
  width: 100%; height: 380px; border: 1px solid #ddd; border-radius: 8px;
  margin-top: 12px; background: #f0f0f1;
}
.axxess-avail__coords { font-size: .8rem; color: #666; margin-top: 8px; font-family: monospace; }
.axxess-avail__hint { color: #666; font-size: .9rem; }
.axxess-avail__results { display: flex; flex-direction: column; gap: 12px; }

/* Service switcher (Fibre / Telkom / MTN) */
.axxess-avail__svcbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.axxess-avail__svc {
  border: 1px solid #ccc; background: #fff; color: #333; border-radius: 999px;
  padding: 8px 18px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.axxess-avail__svc.is-active { background: #2271b1; border-color: #2271b1; color: #fff; }
.axxess-avail__svc-mark { font-weight: 700; }
.axxess-avail__svc-mark-ok { color: #2e7d32; }
.axxess-avail__svc-mark-no { color: #c62828; }
.axxess-avail__svc.is-active .axxess-avail__svc-mark-ok,
.axxess-avail__svc.is-active .axxess-avail__svc-mark-no { color: #fff; }

/* Views */
.axxess-avail__view { display: none; }
.axxess-avail__view.is-active { display: block; }

/* Hero */
.axxess-avail__hero {
  background: linear-gradient(135deg, #0b3d2e, #1b5e20); color: #fff;
  border-radius: 12px; padding: 22px 24px; margin-bottom: 18px;
}
.axxess-avail__hero h3 { margin: 0 0 4px; font-size: 1.2rem; color: #fff; }
.axxess-avail__hero p { margin: 0; color: #cde8d2; font-size: .88rem; }
.axxess-avail__hero-big { font-size: 1.6rem; font-weight: 800; }

/* Plans grid */
.axxess-avail__plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.axxess-avail__plan {
  position: relative; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px;
  background: #fff; display: flex; flex-direction: column;
}
.axxess-avail__plan--fastest { border-color: #2e7d32; box-shadow: 0 0 0 1px #2e7d32; }
.axxess-avail__plan--selected { border-color: #2271b1; box-shadow: 0 0 0 2px #2271b1; }
.axxess-avail__plan-tag {
  align-self: flex-start; background: #2e7d32; color: #fff; font-size: .62rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 6px;
}
.axxess-avail__plan-prov { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #2271b1; }
.axxess-avail__plan-speed { font-size: 1.7rem; font-weight: 800; margin: 6px 0 2px; }
.axxess-avail__plan-unit { font-size: .5em; font-weight: 600; color: #777; margin-left: 2px; }
.axxess-avail__plan-cap { font-size: .8rem; color: #2e7d32; font-weight: 600; }
.axxess-avail__plan-line { font-size: .72rem; color: #777; margin-bottom: 12px; }
.axxess-avail__plan-actions { display: flex; gap: 8px; margin-top: auto; }
.axxess-avail__plan-actions button { flex: 1; }
.axxess-avail__plan-request {
  background: #2e7d32; color: #fff; border: none; border-radius: 6px;
  padding: 8px 10px; font-weight: 600; font-size: .72rem; cursor: pointer;
}
.axxess-avail__plan-compare {
  background: #fff; color: #2271b1; border: 1px solid #2271b1; border-radius: 6px;
  padding: 8px 10px; font-weight: 600; font-size: .72rem; cursor: pointer;
}
.axxess-avail__plan-compare.is-on { background: #2271b1; color: #fff; }

/* Compare table */
.axxess-avail__compare { margin-top: 26px; border-top: 2px solid #e0e0e0; padding-top: 18px; }
.axxess-avail__compare h3 { margin: 0 0 4px; font-size: 1.05rem; }
.axxess-avail__compare-hint { color: #666; font-size: .85rem; margin: 0 0 12px; }
.axxess-avail__compare-msg { color: #c62828; font-size: .85rem; font-weight: 600; margin: 0 0 8px; }
.axxess-avail__compare-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.axxess-avail__compare-table th,
.axxess-avail__compare-table td { border: 1px solid #e0e0e0; padding: 10px 12px; text-align: left; }
.axxess-avail__compare-table thead th { background: #f0f0f1; font-weight: 700; text-transform: capitalize; }
.axxess-avail__compare-attr { width: 120px; font-weight: 600; background: #fafbfc; }
.axxess-avail__compare-remove {
  background: #c62828; color: #fff; border: none; border-radius: 50%;
  width: 20px; height: 20px; line-height: 1; font-size: .8rem; font-weight: 700;
  cursor: pointer; vertical-align: middle; margin-left: 4px;
}
.axxess-avail__compare-speed { font-size: 1.1rem; font-weight: 800; }
.axxess-avail__compare-unit { font-size: .6em; font-weight: 600; color: #777; margin-left: 2px; }
.axxess-avail__compare-request {
  background: #2e7d32; color: #fff; border: none; border-radius: 6px;
  padding: 6px 12px; font-weight: 600; font-size: .75rem; cursor: pointer;
}

/* Service card (Telkom / MTN views) */
.axxess-avail__svc-card {
  border: 1px solid #e0e0e0; border-radius: 12px; padding: 28px 24px; background: #fff; text-align: center;
}
.axxess-avail__svc-card-name { font-size: 1.3rem; font-weight: 800; margin: 8px 0 4px; }
.axxess-avail__svc-card-msg { color: #666; font-size: .9rem; margin-bottom: 18px; }
.axxess-avail__svc-card-request {
  background: #2271b1; color: #fff; border: none; border-radius: 6px;
  padding: 10px 18px; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.axxess-avail__svc-card .axxess-avail__contact-form { max-width: 420px; margin: 14px auto 0; text-align: left; }
/* Negative (not available) service card — same shape as the positive one but
   tinted red so an unavailable service can never read as available. */
.axxess-avail__svc-card--negative { border-color: #f0c9c4; background: #fffafa; }
.axxess-avail__svc-card--negative .axxess-avail__svc-card-name { color: #8d2f26; }
.axxess-avail__svc-card-hint {
  max-width: 460px; margin: 0 auto 16px; font-size: .82rem; color: #666; line-height: 1.5;
}

/* Badge */
.axxess-avail__badge {
  display: inline-block; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: #e0e0e0; color: #333;
}
.axxess-avail__badge-ok { background: #2e7d32; color: #fff; }
.axxess-avail__badge-no { background: #c62828; color: #fff; }
.axxess-avail__badge-unknown { background: #f9a825; color: #333; }

/* Contact form */
.axxess-avail__contact { margin-top: 12px; }
.axxess-avail__contact-form { margin-top: 10px; display: none; flex-direction: column; gap: 8px; max-width: 420px; }
.axxess-avail__contact-form.is-open { display: flex; }
.axxess-avail__contact-intro { font-size: .8rem; color: #555; margin: 0; }
.axxess-avail__contact-form input,
.axxess-avail__contact-form textarea {
  border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; font-size: .85rem; font-family: inherit;
}
.axxess-avail__contact-send {
  background: #2e7d32; color: #fff; border: none; border-radius: 6px;
  padding: 8px 16px; font-weight: 600; font-size: .82rem; cursor: pointer; align-self: flex-start;
}
.axxess-avail__contact-send:disabled { opacity: .6; cursor: not-allowed; }
.axxess-avail__contact-status { font-size: .8rem; font-weight: 600; }
.axxess-avail__contact-status.is-ok { color: #2e7d32; }
.axxess-avail__contact-status.is-error { color: #c62828; }

/* Contact form inside a plan card — compact */
.axxess-avail__plan .axxess-avail__contact { margin-top: 8px; }
.axxess-avail__plan .axxess-avail__contact-form { max-width: 100%; gap: 5px; text-align: left; margin-top: 6px; }
.axxess-avail__plan .axxess-avail__contact-intro { font-size: .68rem; }
.axxess-avail__plan .axxess-avail__contact-form input,
.axxess-avail__plan .axxess-avail__contact-form textarea { font-size: .72rem; padding: 5px 7px; }
.axxess-avail__plan .axxess-avail__contact-send { font-size: .72rem; padding: 5px 10px; }

/* ---------------------------------------------------------------
   Checking overlay — full-screen technical console.
   Fixed over the viewport so the visitor sees progress without
   scrolling, dims the page behind it, and lists each service with a
   status glyph as the checks return.
   --------------------------------------------------------------- */
html.axxess-loading-lock, body.axxess-loading-lock { overflow: hidden; }

.axxess-avail__loading-overlay {
  /* `inset` is Chrome 87 / Safari 14.1+. Declare the longhands first so older
     WebKit/Blink still pins all four edges. */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  /* iOS Safari counts the collapsing URL bar in 100vh, so the console could sit
     under the toolbar or off-screen. % of a fixed element is the fallback. */
  width: 100%; height: 100%;
  padding: 24px;
  background: rgba(5, 16, 11, .86);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-overflow-scrolling: touch;
  animation: axl-fade-in .18s ease-out both;
}
.axxess-avail__loading-overlay.is-closing { animation: axl-fade-out .25s ease-in both; }
@keyframes axl-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes axl-fade-out { from { opacity: 1; } to { opacity: 0; } }

.axxess-avail__console {
  /* min() is Chrome 79 / Safari 11.1+; the width fallback is declared first. */
  width: 100%; max-width: 580px;
  width: min(580px, 100%);
  /* dvh keeps the panel inside the visible area when iOS/Android toolbars are
     on screen; svh is the smallest state when they are expanded. */
  max-height: 100%; max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 1px solid #35e07f; border-radius: 14px;
  background: linear-gradient(180deg, #08160f 0%, #050d09 100%);
  box-shadow: 0 0 0 1px rgba(53, 224, 127, .18), 0 26px 70px rgba(0, 0, 0, .6),
              inset 0 0 70px rgba(53, 224, 127, .06);
  color: #b9ffd6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .82rem;
}

/* title bar */
.axxess-avail__console-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid rgba(53, 224, 127, .28);
  background: rgba(53, 224, 127, .07);
}
.axxess-avail__console-led {
  width: 9px; height: 9px; border-radius: 50%; background: #35e07f; flex: 0 0 9px;
  box-shadow: 0 0 0 0 rgba(53, 224, 127, .7); animation: axl-led 1.4s ease-out infinite;
}
@keyframes axl-led {
  0%   { box-shadow: 0 0 0 0 rgba(53, 224, 127, .65); }
  100% { box-shadow: 0 0 0 9px rgba(53, 224, 127, 0); }
}
.axxess-avail__console-title {
  flex: 1 1 auto; font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #8affc1; margin: 0;
}
.axxess-avail__console-clock { font-size: .72rem; color: #4fbe86; letter-spacing: .06em; }

/* body */
.axxess-avail__console-body { padding: 20px 22px 22px; }
.axxess-avail__console-radar {
  display: block; width: 168px; height: 168px; margin: 0 auto 16px;
  /* Reserve the box before the file loads so the panel does not jump on slow
     mobile connections, and keep it crisp on HiDPI screens. */
  max-width: 100%; object-fit: contain;
}
.axxess-avail__console-head { text-align: center; margin-bottom: 18px; }
.axxess-avail__console-head h4 {
  margin: 0 0 5px; font-size: 1rem; font-weight: 700; letter-spacing: .04em; color: #e6fff1;
  font-family: inherit;
}
.axxess-avail__console-head p { margin: 0; font-size: .76rem; color: #63c894; }

/* address line */
.axxess-avail__console-target {
  border: 1px dashed rgba(53, 224, 127, .35); border-radius: 8px;
  padding: 9px 12px; margin-bottom: 14px; font-size: .74rem; color: #9fe9bf;
  word-break: break-word;
}
.axxess-avail__console-target b { color: #8affc1; font-weight: 700; }

/* progress bar */
.axxess-avail__console-meter {
  height: 6px; border-radius: 999px; background: rgba(53, 224, 127, .12);
  overflow: hidden; margin-bottom: 16px;
}
.axxess-avail__console-meter i {
  display: block; height: 100%; width: 38%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(53, 224, 127, .25), #35e07f, rgba(53, 224, 127, .25));
  animation: axl-meter 1.5s ease-in-out infinite;
}
@keyframes axl-meter {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* service rows */
.axxess-avail__console-rows {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid rgba(53, 224, 127, .22); border-radius: 8px; overflow: hidden;
}
.axxess-avail__console-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 9px 12px; font-size: .76rem;
  border-bottom: 1px solid rgba(53, 224, 127, .12);
}
.axxess-avail__console-row:last-child { border-bottom: 0; }
.axxess-avail__console-name { color: #bdf7d7; letter-spacing: .04em; }
.axxess-avail__console-status { color: #4fbe86; letter-spacing: .1em; font-size: .7rem; text-transform: uppercase; }
.axxess-avail__console-glyph {
  width: 18px; text-align: center; font-weight: 700; color: #35e07f;
}
.axxess-avail__console-row.is-done .axxess-avail__console-status { color: #35e07f; }
.axxess-avail__console-row.is-fail .axxess-avail__console-status { color: #ff8a7a; }
.axxess-avail__console-row.is-fail .axxess-avail__console-glyph { color: #ff8a7a; }
.axxess-avail__console-row.is-fail .axxess-avail__console-name { color: #e8b6ae; }
.axxess-avail__console-spin {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid rgba(53, 224, 127, .28); border-top-color: #35e07f;
  animation: axl-glyph-spin .8s linear infinite;
}
@keyframes axl-glyph-spin { to { transform: rotate(360deg); } }

.axxess-avail__console-foot {
  margin: 14px 0 0; font-size: .7rem; color: #4a9d70; letter-spacing: .06em; text-align: center;
}

/* screen-reader only */
.axxess-avail__loading-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* keep the trigger button obvious while a check runs */
.axxess-avail__row button.is-busy { opacity: 1; background: #5a8fbf; cursor: progress; }

/* narrow screens */
@media (max-width: 600px) {
  .axxess-avail__loading-overlay { padding: 12px; }
  /* 100dvh last so it wins where supported; the vh line is the fallback. */
  .axxess-avail__console { border-radius: 12px; font-size: .8rem; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .axxess-avail__console-body { padding: 14px 13px 16px; }
  .axxess-avail__console-bar { padding: 9px 12px; gap: 8px; }
  .axxess-avail__console-title { font-size: .68rem; letter-spacing: .1em; }
  .axxess-avail__console-clock { font-size: .68rem; }
  /* 168px of radar is a third of a phone screen — shrink it hard. */
  .axxess-avail__console-radar { width: 112px; height: 112px; margin-bottom: 10px; }
  .axxess-avail__console-head { margin-bottom: 12px; }
  .axxess-avail__console-head h4 { font-size: .92rem; }
  .axxess-avail__console-head p { font-size: .72rem; }
  .axxess-avail__console-target { font-size: .7rem; padding: 8px 10px; margin-bottom: 10px; }
  .axxess-avail__console-meter { margin-bottom: 12px; }
  .axxess-avail__console-row {
    grid-template-columns: 1fr auto; gap: 6px 8px; padding: 9px 10px; font-size: .74rem;
  }
  .axxess-avail__console-status { font-size: .66rem; letter-spacing: .06em; }
  .axxess-avail__console-foot { font-size: .66rem; margin-top: 11px; }
}

/* Very short viewports (landscape phones): the radar is the first thing to go. */
@media (max-height: 520px) {
  .axxess-avail__console-radar { width: 84px; height: 84px; margin-bottom: 8px; }
  .axxess-avail__console-head { margin-bottom: 10px; }
  .axxess-avail__console-head p { display: none; }
  .axxess-avail__console-body { padding: 12px 13px 14px; }
}

/* Touch devices: stop iOS zooming the panel when it auto-focuses, and make the
   layout tap-safe. */
@media (hover: none) {
  .axxess-avail__console { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .axxess-avail__console-led,
  .axxess-avail__console-meter i,
  .axxess-avail__console-spin { animation: none; }
  .axxess-avail__console-meter i { width: 100%; opacity: .5; }
  .axxess-avail__loading-overlay { animation: none; }
  /* NOTE: the SVG's own animations cannot be stopped from here — the loader is
     rendered as an <img>. The SVG carries its own prefers-reduced-motion block
     and, for browsers/OSes that do not support the media query inside an SVG,
     the JS swaps in a static still (see viewport/reduced-motion handling). */
}