/* HostingBee — 20i Reseller Portal Custom CSS
 * Paste this into: my.20i.com → Reseller → Customization → Custom CSS
 * (used on both Custom Login Page and Status Page)
 * Source of truth: https://hostingbee.co/20i/styles.css
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');

:root {
  --hb-bg: #ffffff;
  --hb-fg: #15182b;
  --hb-muted: #6b7180;
  --hb-border: #ece6d8;
  --hb-card: #ffffff;
  --hb-honey: #f5b342;
  --hb-honey-deep: #e08a1a;
  --hb-navy: #15182b;
  --hb-accent: #fbeecb;
  --hb-radius: 14px;
  --hb-shadow: 0 10px 40px -15px rgba(21,24,43,.25);
  --hb-glow: 0 20px 60px -20px rgba(245,179,66,.55);
  --hb-gradient-hero: radial-gradient(ellipse at top, #fdf5e1 0%, #ffffff 60%);
  --hb-gradient-honey: linear-gradient(135deg, #f5b342, #e08a1a);
}

/* ---------- Reset the 20i shell to look like hostingbee.co ---------- */
html, body {
  background: var(--hb-bg) !important;
  color: var(--hb-fg) !important;
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
  font-feature-settings: "ss01", "cv11";
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.02em;
  color: var(--hb-fg);
}

a { color: var(--hb-honey-deep); }
a:hover { color: var(--hb-honey); }

/* ---------- HostingBee header ---------- */
.hb-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hb-border);
}
.hb-header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.hb-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.hb-logo img { height: 36px; width: auto; }
.hb-nav { display: none; gap: 28px; }
@media (min-width: 1024px) { .hb-nav { display: flex; } }
.hb-nav a {
  font-size: 14px; font-weight: 500; color: var(--hb-muted);
  text-decoration: none; transition: color .2s;
}
.hb-nav a:hover { color: var(--hb-fg); }
.hb-cta {
  display: inline-block;
  background: var(--hb-fg); color: var(--hb-bg) !important;
  padding: 10px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: transform .2s;
}
.hb-cta:hover { transform: scale(1.02); color: var(--hb-bg) !important; }

/* ---------- Wrap the 20i form area in our hero look ---------- */
body > main,
body > .container,
body > #content,
body > .page-content,
.hb-page {
  background: var(--hb-gradient-hero);
  min-height: 70vh;
  padding: 64px 24px;
}

/* Ensure readable text inside the light hero/form area
 * 20i sometimes renders status messages (e.g. "domain is available to register")
 * with white text intended for a dark theme — force a dark color on light bgs.
 * Use !important + universal selector to beat 20i's inline/utility styles. */
body, body * {
  color: var(--hb-fg) !important;
}
/* Re-allow light text on intentionally dark / colored surfaces.
 * 20i renders action buttons as <a class="btn btn-primary">, plain <button>,
 * or elements with inline blue/dark backgrounds — force white text on all of
 * them so labels stay visible regardless of which variant 20i picks. */
.hb-cta, .hb-cta *,
button, button *,
input[type="submit"], input[type="button"], input[type="reset"],
a.btn, a.btn *, a.button, a.button *,
.btn, .btn *, .button, .button *,
[role="button"], [role="button"] *,
[class*="btn-primary"], [class*="btn-primary"] *,
[class*="btn-info"], [class*="btn-info"] *,
[class*="btn-success"], [class*="btn-success"] *,
[class*="btn-danger"], [class*="btn-danger"] *,
[class*="btn-warning"], [class*="btn-warning"] *,
[class*="btn-secondary"], [class*="btn-secondary"] *,
.hb-footer, .hb-footer *,
[class*="dark"], [class*="dark"] *,
[style*="background: #15"], [style*="background:#15"],
[style*="background: #000"], [style*="background:#000"],
[style*="background: #1"], [style*="background:#1"],
[style*="background: #2"], [style*="background:#2"],
[style*="background: rgb(0"], [style*="background:rgb(0"] {
  color: #ffffff !important;
}
/* Exception: text-only / link-style buttons stay readable on light bg */
.btn-link, .btn-link *, a.btn-link, a.btn-link *,
button.btn-link, button.btn-link * {
  color: var(--hb-honey-deep) !important;
  background: transparent !important;
}

.hb-footer h4, .hb-footer h4 * { color: #fff !important; }

/* Tooltips / popovers — dark background needs white text.
 * 20i renders hover popups (app descriptions, breadcrumb labels) with a
 * near-black background but inherits the page's dark text color, making
 * them unreadable. Force white text on any tooltip/popover surface. */
.tooltip, .tooltip *,
.tooltip-inner, .tooltip-inner *,
.popover, .popover *,
.popover-body, .popover-body *,
[role="tooltip"], [role="tooltip"] *,
[class*="tooltip"], [class*="tooltip"] *,
[class*="popover"], [class*="popover"] *,
[data-tooltip], [data-tooltip]::after, [data-tooltip]::before,
[data-popover], [data-popover] *,
[data-tippy-root], [data-tippy-root] *,
.tippy-box, .tippy-box *,
.tippy-content, .tippy-content * {
  color: #ffffff !important;
  background-color: #15182b !important;
}

/* Section title bars (panel/card headers) — dark gray bg needs white text.
 * 20i renders section banners like "CDN", "Web Files", "Email" as
 * .panel-heading / .card-header / .section-header with a dark background
 * but inherits a dark blue heading color — force white for contrast. */
.panel-heading, .panel-heading *,
.panel-title, .panel-title *,
.card-header, .card-header *,
.section-header, .section-header *,
.section-title, .section-title *,
.box-header, .box-header *,
[class*="panel-heading"], [class*="panel-heading"] *,
[class*="card-header"], [class*="card-header"] *,
[class*="section-head"], [class*="section-head"] *,
h1[class*="header"], h2[class*="header"], h3[class*="header"],
h4[class*="header"], h5[class*="header"], h6[class*="header"] {
  color: #ffffff !important;
  background: var(--hb-navy) !important;
}
.hb-footer a:hover { color: var(--hb-honey) !important; }
/* Status / availability messages — keep readable and on-brand */
.alert, .alert-success, .alert-info, .alert-warning,
.message, .notice, .availability, .domain-available,
[class*="available"]:not([class*="unavailable"]), [class*="status-message"] {
  color: var(--hb-fg) !important;
  background: var(--hb-accent) !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}
.alert-danger, .domain-unavailable, [class*="unavailable"] {
  background: #fde2e2 !important;
  color: #7a1d1d !important;
}
.domain-unavailable, .alert-danger, [class*="unavailable"] {
  background: #fde2e2 !important;
  color: #7a1d1d !important;
}
/* Keep buttons/CTAs and dark footer text light as designed */
button, input[type="submit"], .btn, .button, .hb-cta,
.hb-footer, .hb-footer * {
  color: var(--hb-bg);
}
.hb-footer h4 { color: #fff; }

/* Soften 20i's default form panels */
form, .panel, .card, .well, .login-box, .basket-summary {
  background: var(--hb-card) !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: var(--hb-radius) !important;
  box-shadow: var(--hb-shadow) !important;
  padding: 32px !important;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto !important;
  box-sizing: border-box;
}

/* Narrow only the login/basket panels — keep domain search & order pages wide */
.login-box, .basket-summary, form[action*="login"], form[name="login"] {
  max-width: 480px;
}

/* Domain search results — let the table breathe */
.domain-search-results, .domain-results, table.domains, .results-table {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  display: block;
}
.domain-search-results table, .domain-results table {
  width: 100%;
  border-collapse: collapse;
}

label { font-weight: 500; color: var(--hb-fg); }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
select, textarea {
  width: 100%;
  background: #fafbfc !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font: inherit;
  font-size: 16px !important;
  color: var(--hb-fg) !important;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  min-width: 0;
}

/* OTP / verification code input — readable for all 6 digits */
input[name*="code" i], input[name*="otp" i], input[name*="token" i],
input[name*="verif" i], input[id*="code" i], input[id*="otp" i],
input[id*="token" i], input[id*="verif" i],
input[maxlength="6"], input[maxlength="8"],
input[autocomplete="one-time-code"] {
  width: auto !important;
  min-width: 240px !important;
  max-width: 320px;
  font-size: 22px !important;
  letter-spacing: 0.4em !important;
  text-align: center;
  font-family: 'Sora', ui-monospace, monospace !important;
  padding: 14px 18px !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--hb-honey) !important;
  box-shadow: 0 0 0 3px rgba(245,179,66,.2) !important;
}

button, input[type="submit"], .btn, .button {
  background: var(--hb-fg) !important;
  color: var(--hb-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
button:hover, input[type="submit"]:hover, .btn:hover, .button:hover {
  transform: translateY(-1px);
  box-shadow: var(--hb-glow);
}

.btn-primary, .btn-honey {
  background: var(--hb-gradient-honey) !important;
  color: var(--hb-navy) !important;
}

/* ---------- HostingBee footer ---------- */
.hb-footer {
  background: var(--hb-navy);
  color: rgba(255,255,255,.7);
  border-top: 1px solid var(--hb-border);
}
.hb-footer-top {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
  padding: 64px 24px;
}
@media (min-width: 768px) {
  .hb-footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.hb-footer img.hb-footer-logo {
  height: 40px; filter: brightness(0) invert(1);
}
.hb-footer p.hb-tag {
  margin-top: 16px; max-width: 280px;
  font-size: 14px; color: rgba(255,255,255,.7);
}
.hb-footer h4 {
  color: #fff; font-size: 14px; font-weight: 600;
  margin: 0 0 16px;
}
.hb-footer ul { list-style: none; padding: 0; margin: 0; }
.hb-footer ul li { margin-bottom: 8px; }
.hb-footer ul li a {
  color: rgba(255,255,255,.7); font-size: 14px;
  text-decoration: none; transition: color .2s;
}
.hb-footer ul li a:hover { color: var(--hb-honey); }
.hb-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
}
.hb-footer-bottom-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,.6);
}
@media (min-width: 768px) {
  .hb-footer-bottom-inner { flex-direction: row; }
}