/* ============================================================
   MYIP client-area brand bundle  (ported from astro.myip.gr)
   Auto-loaded by WHMCS as the child theme's css/custom.css.
   Scoped to .site-header / .site-footer / .btn so it does NOT
   fight the parent theme's Bootstrap layout.
   ------------------------------------------------------------
   Fonts: copy these woff2 from astro.myip.gr/fonts/ into
          templates/myip/fonts/  (self-host = same-origin, no CORS).
   ============================================================ */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-v20-greek_latin-regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-v20-greek_latin-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-v20-greek_latin-600.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-v24-greek_latin-regular.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-v24-greek_latin-500.woff2) format("woff2")}

:root{
  --bg-0:#060818;--bg-1:#0d1126;--bg-2:#141936;--bg-3:#11142e;--bg-4:#161a36;
  --fg-0:#e8ecf5;--fg-1:rgba(var(--c-text),.75);--fg-2:rgba(var(--c-text),.6);--fg-3:rgba(var(--c-text),.65);--fg-dim:rgba(var(--c-fg),var(--alpha-4));
  --c-fg:255,255,255;--c-bg:6,8,24;--c-text:232,236,245;--c-accent:58,58,255;
  --surface-md:rgba(var(--c-fg),var(--alpha-3));--surface-lo:rgba(var(--c-fg),var(--alpha-2));
  --line-hi:rgba(var(--c-fg),.32);--line-md:rgba(var(--c-fg),var(--alpha-6));
  --accent:#3a3aff;--accent-tint:#6f6fff;--accent-soft:rgba(var(--c-accent),.12);
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --t-eyebrow:11px;--t-body-xs:12px;--t-body-sm:13px;--t-body:14px;--t-h3:17px;--t-h4:18px;
  --alpha-2:.04;--alpha-3:.06;--alpha-4:.08;--alpha-5:.1;--alpha-6:.18;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --r-md:10px;--max-w:1440px;--gutter:48px;--t-fast:.15s;--t-med:.2s;
  --shadow-accent:0 6px 28px -10px var(--accent),0 1px 0 rgba(255,255,255,.1) inset;
}

/* ---- HEADER ---- (note: position is STATIC here, not absolute as on the
   landing hero — in the client area it must be a solid bar above content) */
.site-header{position:static;background:var(--bg-0);border-bottom:1px solid var(--fg-dim);padding:18px var(--gutter);font-family:var(--font-sans)}
.site-header-inner{display:flex;align-items:center;gap:48px;max-width:var(--max-w);margin:0 auto}
.site-header .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:19px;color:var(--fg-0);letter-spacing:-.01em;text-decoration:none}
.site-header .brand-tld{color:var(--fg-2);font-weight:500}
.site-nav{display:flex;gap:32px;font-size:var(--t-body);font-weight:500}
.site-nav a{color:var(--fg-1);transition:color var(--t-fast);display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--fg-0)}
.site-header-cta{margin-left:auto;display:flex;align-items:center;gap:16px}
.link-quiet{font-size:var(--t-body);font-weight:500;color:var(--fg-1);text-decoration:none}
.link-quiet:hover{color:var(--fg-0)}
.nav-toggle{display:none;width:40px;height:40px;background:var(--surface-lo);border:1px solid var(--line-md);border-radius:10px;color:var(--fg-0);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--fg-0);border-radius:1px;transition:transform var(--t-med),opacity var(--t-med)}
.nav-toggle.open span:nth-child(1){transform:translateY(2.75px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-2.75px) rotate(-45deg)}

/* ---- BUTTONS ---- */
.site-header .btn,.site-footer .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-md);font-size:var(--t-body);font-weight:600;color:#fff;border:none;cursor:pointer;text-decoration:none;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.btn-primary{background:var(--accent);box-shadow:var(--shadow-accent)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--fg-0);border:1px solid var(--line-md)}
.btn-ghost:hover{background:var(--surface-md);border-color:var(--line-hi)}

/* ---- FOOTER ---- */
.site-footer{background:var(--bg-1);border-top:1px solid var(--fg-dim);padding:64px var(--gutter) 32px;color:var(--fg-2);font-size:var(--t-body-sm);font-family:var(--font-sans)}
.site-footer-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:56px}
.site-footer h3,.site-footer h4{font-size:var(--t-body-xs);font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 16px;font-weight:500}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:var(--fg-0)}
.footer-subhead{margin:18px 0 10px;padding-top:14px;border-top:1px solid rgba(var(--c-fg),var(--alpha-3));font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.site-footer-blurb{margin:14px 0 22px;max-width:360px;line-height:1.55}
.site-footer-meta{display:grid;grid-template-columns:90px 1fr;gap:6px 14px;margin:0;font-family:var(--font-mono);font-size:var(--t-eyebrow)}
.site-footer-meta>div{display:contents}
.site-footer-meta dt{color:var(--fg-3);letter-spacing:.06em}
.site-footer-meta dd{margin:0;color:var(--fg-1)}
.site-footer-bottom{max-width:var(--max-w);margin:48px auto 0;padding-top:var(--space-6);border-top:1px solid var(--fg-dim);display:flex;justify-content:space-between;gap:24px;font-family:var(--font-mono);font-size:var(--t-eyebrow);color:var(--fg-3)}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
  .site-header{padding:var(--space-4) var(--space-6)}
  .site-nav{position:fixed;inset:64px 0 0;background:rgba(var(--c-bg),.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;align-items:stretch;padding:var(--space-8) var(--space-6);gap:4px;z-index:100;transform:translateY(-110%);transition:transform .3s cubic-bezier(.6,0,.4,1);overflow-y:auto}
  .site-nav.open{transform:translateY(0)}
  .site-nav>a{padding:var(--space-4) 0;border-bottom:1px solid rgba(var(--c-fg),.05);width:100%;font-size:17px}
  .nav-toggle{display:inline-flex}
  .link-quiet{display:none}
}
@media(max-width:960px){
  :root{--gutter:24px}
  .site-footer-inner{grid-template-columns:1fr 1fr}
  .site-footer-bottom{flex-direction:column;gap:12px}
}
@media(max-width:640px){.site-footer-inner{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   Cleanup: de-dupe twenty-one's own chrome
   ------------------------------------------------------------
   The injected MYIP strip already carries the brand, and the MYIP
   footer is the canonical one — so hide twenty-one's duplicate logo
   and its built-in footer. The functional client navbar, search, cart
   and account menu stay. The language/currency modal (#modalChooseLanguage)
   stays in the DOM; we re-trigger it from a link in the MYIP footer.
   These rules only load when MYIP is the active/preview template
   (custom.css is auto-loaded only for this theme).
   ============================================================ */
#header .navbar-brand { display: none; }
#footer { display: none; }

.site-footer-lang { color: var(--fg-2); text-decoration: none; cursor: pointer; }
.site-footer-lang:hover { color: var(--fg-0); }

/* ============================================================
   Cleanup round 2: reclaim header space
   ------------------------------------------------------------
   - Breadcrumb kept — it aids navigation on inner pages.
   - Hide the knowledgebase search from the header chrome now that the
     logo is gone; KB pages still carry their own search. The empty
     search form keeps its `ml-auto`, so the cart stays right-aligned.
   - Slim the top navbar row to a thin bar holding just the cart.
   ============================================================ */
#header .input-group.search { display: none; }
#header .navbar.navbar-light { padding-top: 2px; padding-bottom: 2px; min-height: 0; }

/* Match the client-area body to the white of the page's own sections
   (astro light look) instead of twenty-one's #f1f1f1 grey. The white/
   bordered cards keep their definition on top. */
body.primary-bg-color { background-color: #fff; }

/* ============================================================
   Order form (standard_cart) — MYIP light styling
   ------------------------------------------------------------
   When the Order Form Template is switched to standard_cart, the store
   funnel renders inside our myip system template (so this custom.css
   loads). Everything standard_cart ships is scoped under
   #order-standard_cart, so these overrides only touch the store funnel.
   Light cards on the white body, astro accent for price/buttons/headers,
   Inter typeface — to match the rest of the client area.
   NB: do NOT reuse the dark --bg-*/--fg-* tokens here (they're the dark
   header/footer palette); the store body is light, so use explicit values.
   ============================================================ */
#order-standard_cart { font-family: var(--font-sans); color: #1c2238; }

/* Section dividers + the "select a product" sub-headings */
#order-standard_cart .sub-heading span { color: var(--accent); }

/* Product cards */
#order-standard_cart .products .product {
  border: 1px solid #e6eaf1;
  border-radius: 12px;
  overflow: hidden;
}
#order-standard_cart .products .product header {
  background: #f5f7fa;
  border-bottom: 1px solid #e6eaf1;
}
#order-standard_cart .products .product header span { color: #111638; font-weight: 600; }
#order-standard_cart .products .product div.product-pricing span.price {
  color: var(--accent);
  font-weight: 700;
}

/* Primary actions (Order / Checkout / addon "add") → astro accent */
#order-standard_cart .btn-primary,
#order-standard_cart .panel-addon .panel-add {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#order-standard_cart .btn-primary:hover { filter: brightness(1.06); }

/* "Παραγγελία" product order buttons ship green (.btn-order-now) → astro blue
   to match the brand. The `a.` element selector lifts specificity to (1,1,1)
   so it wins over standard_cart's all.min.css (which loads AFTER our
   custom.css). Deliberately scoped to the order button only — the green
   "domain available" indicator and addon "add" panels keep their semantic
   green. */
#order-standard_cart a.btn-order-now {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#order-standard_cart a.btn-order-now:hover,
#order-standard_cart a.btn-order-now:focus {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
  filter: brightness(1.08);
}

/* Blue/grey section headers that ship with standard_cart (#058 / #666)
   → MYIP navy, so the cart + checkout headers stay on-brand. */
#order-standard_cart .view-cart-items-header { background-color: var(--accent); }
#order-standard_cart .view-cart-items { border-bottom-color: var(--accent); }
#order-standard_cart .order-summary,
#order-standard_cart .order-summary { background-color: #111638; border-bottom-color: #111638; }

/* ============================================================
   Site-lookalike — bring the twenty-one body closer to astro.myip.gr
   ------------------------------------------------------------
   Scoped/elevated so they win over twenty-one's CSS (which loads AFTER
   our custom.css) without !important. Content scope = #main-body,
   chrome scope = #header.
   ============================================================ */

/* (1) Inter everywhere — twenty-one body ships Open Sans. `html body`
   (0,0,2) beats twenty-one's `body` (0,0,1) regardless of load order;
   most elements inherit, the explicit list covers those that don't.
   Icon fonts (.fa*) declare their own family and stay untouched. */
html body,
html body .btn,
html body input, html body select, html body textarea, html body .form-control,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .panel-title, html body .list-group-item-heading,
html body .navbar, html body .nav {
  font-family: var(--font-sans);
}

/* (2) Astro accent for body links / focus / pagination. */
#main-body a:not(.btn) { color: var(--accent); }
#main-body a:not(.btn):hover { color: var(--accent-tint); }
#main-body .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
#main-body .pagination > .active > a,
#main-body .pagination > .active > a:hover,
#main-body .pagination > .active > span {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* (3) Cards like astro — rounded, soft border + shadow. No overflow:hidden,
   so tables inside panels don't clip. */
#main-body .panel,
#main-body .card {
  border: 1px solid #e6eaf1;
  border-radius: 12px;
  box-shadow: 0 8px 32px -16px rgba(17, 22, 56, 0.08);
}
#main-body .panel-heading,
#main-body .card-header {
  background: #f5f7fa;
  border-bottom: 1px solid #e6eaf1;
  border-radius: 12px 12px 0 0;
}

/* (4) Unified dark top — blend twenty-one's "Logged in as" topbar into the
   MYIP strip's --bg-0 so the header reads as one dark zone above the white
   navbar. (Logged-in-only element; verify contrast on a real session.) */
#header .topbar {
  background: var(--bg-0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#header .topbar a,
#header .topbar .btn,
#header .topbar .btn-active-client { color: #e8ecf5; }
#header .topbar .input-group-text {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(232, 236, 245, 0.7);
}

/* ── Accent calming + active-state contrast ───────────────────
   The dark chrome (strip/footer) keeps the bright dark-mode accent
   (#3a3aff); on the LIGHT body that read as too intense, and the body-link
   recolor put accent text on filled/active backgrounds → invisible.
   Fix both: scope the calmer astro LIGHT-mode accent (#2828d9 — the exact
   value myip.gr uses in light mode) to the content + order form, and fill
   active items with the accent + white text. The dark strip/footer sit
   outside these scopes and stay #3a3aff. */
#main-body,
#order-standard_cart {
  --accent: #2828d9;
  --accent-tint: #4d4def;
  --accent-soft: rgba(40, 40, 217, 0.10);
}

#main-body .list-group-item.active,
#main-body .list-group-item.active:hover,
#main-body .list-group-item.active:focus {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#main-body .pagination .active > a,
#main-body .pagination .active > span,
#main-body .pagination .page-item.active .page-link {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Status pills (service/invoice/ticket status: Ενεργά, Ανεξόφλητος, Κλειστό…)
   → astro pill shape: fully rounded + a touch more padding. Semantic colors
   (.label-success / -danger / -warning …) are kept; no uppercase, since Greek
   caps lose accents and read worse. Header cart/notification badges are in
   #header, outside this scope. */
#main-body .label,
#main-body .badge {
  border-radius: 999px;
  padding: 0.32em 0.72em;
  font-weight: 600;
}