/* ============================================================
   YeneHost — supplementary components
   Load AFTER style.css. Only contains selectors that don't
   already exist there: QR lightbox, bank logo picker, the hero
   order rail, trust chips, stat cards, and the logo-icon
   treatment for the floating support button main.js injects.
   ============================================================ */

/* ---------- PWA install banner (mobile only) ---------- */
.install-banner{
  position:fixed; left:12px; right:12px; bottom:88px; z-index:998;
  background:var(--forest); color:#fff; border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:12px; box-shadow:0 10px 26px rgba(15,59,44,0.35);
  animation:install-banner-in .25s ease;
}
.install-banner.clickable{ cursor:pointer; }
.install-banner-icon{ width:40px; height:40px; border-radius:10px; flex-shrink:0; }
.install-banner-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.install-banner-text strong{ font-size:13px; }
.install-banner-text span{ font-size:12px; color:rgba(255,255,255,0.75); font-family:var(--mono); }
.install-banner-close{
  background:rgba(255,255,255,0.14); border:none; color:#fff; width:26px; height:26px;
  border-radius:50%; flex-shrink:0; cursor:pointer; font-size:13px; line-height:1;
}
@keyframes install-banner-in{ from{ transform:translateY(16px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@media (min-width: 640px){
  .install-banner{ left:auto; right:20px; bottom:96px; width:340px; }
}

/* ---------- Floating support button: logo icons instead of text pills ---------- */
.support-float a.support-btn{
  width:56px; height:56px; padding:0; border-radius:50%;
  overflow:hidden; background:#fff; box-shadow:0 8px 22px rgba(15,59,44,0.32);
}
.support-float a.support-btn img{ width:100%; height:100%; object-fit:cover; display:block; }
.support-float a.support-btn:hover{ background:#fff; }

/* ---------- Payment method card (no QR — logo, number, copy button) ---------- */
.pay-card-mini{ display:flex; align-items:center; gap:14px; }
.pay-card-mini .pay-mini-logo{
  width:46px; height:46px; border-radius:50%; object-fit:cover; border:1px solid var(--line);
  background:#fff; flex-shrink:0;
}

/* ---------- Domain search: highlighted top result ---------- */
.domain-hero-result{
  background:#F0F9F1; border:1.5px solid #22C55E; border-radius:12px; padding:18px 20px; margin-bottom:14px;
}
.domain-hero-msg{ color:#166534; font-weight:700; font-size:15px; margin-bottom:12px; }
.domain-hero-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.domain-hero-price{ font-family:var(--mono); font-weight:700; color:var(--forest); font-size:16px; }
.domain-alt-list .result-row{ font-size:13px; }
.domain-check-error{
  background:#FEF3C7; border:1.5px solid #F59E0B; border-radius:12px;
  padding:16px 20px; margin-bottom:14px; font-size:14px; color:#92400E;
}
.domain-check-error p{ margin:0; color:#92400E; }

/* ---------- Sales hero: order rail (replaces the stamp on money pages) ---------- */
.hero-order-rail{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:20px; box-shadow:0 18px 40px rgba(15,59,44,0.18);
}
.hero-order-rail .rail-head{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:12px;
}
.rail-plan{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px;
  background:#fff; transition:border-color .15s ease, transform .15s ease;
}
.rail-plan.rail-featured{ border-color:var(--gold); background:linear-gradient(180deg,#FBF3E1,#fff); }
.rail-plan:hover{ transform:translateX(-2px); border-color:var(--forest); }
.rail-plan-name{ font-weight:700; font-size:14px; color:var(--ink); }
.rail-plan-sub{ font-size:12px; color:var(--ink-soft); }
.rail-plan-price{ font-family:var(--mono); font-weight:700; color:var(--forest); font-size:15px; white-space:nowrap; }
.rail-plan-cta{
  display:inline-block; margin-top:2px; margin-bottom:16px; font-size:12px; font-weight:700;
  text-decoration:none; color:var(--forest-deep); background:var(--gold); padding:8px 12px;
  border-radius:8px; text-align:center; width:100%; transition:transform .15s ease;
}
.rail-plan-cta:hover{ transform:translateY(-1px); }
.rail-domain-note{ margin-top:2px; font-size:12px; color:var(--ink-soft); text-align:center; font-family:var(--mono); }

/* ---------- Trust / stat strip ---------- */
.trust-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.trust-chip{
  display:flex; align-items:center; gap:8px; background:var(--paper);
  border:1px solid var(--line); color:var(--ink); padding:8px 14px; border-radius:999px;
  font-size:13px; font-family:var(--mono);
}
.trust-strip.on-light .trust-chip{ background:var(--paper); border:1px solid var(--line); color:var(--ink); }
.trust-chip .ico{ font-size:16px; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; }
.stat-card{ border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; background:var(--paper); }
.stat-card .stat-num{ font-family:var(--mono); font-size:26px; font-weight:800; color:var(--forest); }
.stat-card .stat-label{ font-size:12px; color:var(--ink-soft); margin-top:4px; }

.cards.four{ grid-template-columns:repeat(4,1fr); }

@media (max-width: 960px){
  .cards.four{ grid-template-columns:repeat(2,1fr); }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  .cards.four{ grid-template-columns:1fr; }
}

/* ---------- Header logo icon (added alongside the existing text mark) ---------- */
.brand{ align-items:center; }
.brand-icon{ height:34px; width:auto; display:block; }
@media (max-width:600px){
  .brand-icon{ height:28px; }
}

/* ---------- Visual rhythm: alternating section tint ---------- */
/* Breaks up long stretches of identical white/cream sections without
   going back to full solid-color blocks — a barely-there wash, not a wall. */
.band-tint{
  background:linear-gradient(180deg, rgba(215,154,44,0.05), rgba(215,154,44,0.015));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.band-tint .card{ background:#fff; }

/* ---------- Icon chip: small colored badge for feature/card headers ---------- */
/* Replaces plain mono numbering (.num) with an actual icon inside a tinted
   circle — adds texture and color-as-accent without filling backgrounds. */
.icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:rgba(215,154,44,0.12); font-size:22px; margin-bottom:14px;
}

/* ---------- Feature list with icon chips (used on hosting.html "included in every plan") ---------- */
.feature-icon-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:16px;
}
.feature-icon-item{
  display:flex; align-items:flex-start; gap:12px; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:16px;
}
.feature-icon-item .fi-icon{
  width:38px; height:38px; flex-shrink:0; border-radius:10px; background:rgba(15,59,44,0.06);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.feature-icon-item .fi-text{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; }

/* ---------- Plan card: "Best for" line ---------- */
.plan .best-for{
  font-size:13px; color:var(--ink-soft); font-style:italic; margin:-6px 0 18px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}

/* ---------- Featured/"Most Chosen" plan — bold, animated, floats highest ---------- */
.plan.featured{
  background:linear-gradient(135deg, var(--forest) 0%, #0d3226 45%, var(--forest) 70%, #1a4a37 100%);
  background-size:220% 220%;
  animation:featured-shimmer 9s ease infinite;
  border-color:var(--gold); color:#fff;
  box-shadow:0 24px 50px rgba(15,59,44,0.22);
  transform:translateY(-8px);
}
.plan.featured::after{
  background:radial-gradient(circle, rgba(215,154,44,0.35), transparent 70%);
  opacity:0.7;
}
.plan.featured:hover{ transform:translateY(-14px); box-shadow:0 30px 60px rgba(15,59,44,0.3); }
.plan.featured:hover::after{ opacity:1; }
@keyframes featured-shimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@media (max-width:900px){
  .plan.featured{ transform:none; }
  .plan.featured:hover{ transform:translateY(-4px); }
}
@media (prefers-reduced-motion: reduce){
  .plan.featured{ animation:none; }
}
.plan.featured h3{ color:rgba(255,255,255,0.7); }
.plan.featured .price{ color:#fff; }
.plan.featured .price small{ color:rgba(255,255,255,0.55); }
.plan.featured .best-for{ color:rgba(255,255,255,0.75); border-bottom-color:rgba(255,255,255,0.18); }
.plan.featured li{ color:rgba(255,255,255,0.88); border-bottom-color:rgba(255,255,255,0.14); }
.plan.featured::before{ background:var(--gold); color:var(--forest-deep); z-index:1; }

/* ---------- Top announcement ribbon (site-wide, one deliberate strip of color) ---------- */
.promo-ribbon{
  background:var(--forest); color:#fff; text-align:center; font-size:13px;
  font-weight:600; padding:9px 16px; letter-spacing:0.01em;
}
.promo-ribbon strong{ color:var(--gold); }

/* Full-feature checklist inside each plan card */
.plan .full-features{ list-style:none; padding:0; margin:14px 0 0; }
.plan .full-features li{
  padding:6px 0; border-bottom:none; font-size:13.5px; display:flex; gap:8px; align-items:flex-start;
}
.plan .full-features li::before{ content:"✓"; color:var(--gold); font-weight:700; flex-shrink:0; }
.plan.featured .full-features li::before{ color:var(--gold); }

/* ---------- Order type selector (domain / hosting / bundle) ---------- */
.order-type-selector{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px;
}
.order-type-card{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:18px 12px;
  cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.order-type-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(15,59,44,0.1); }
.order-type-card input{ position:absolute; opacity:0; pointer-events:none; }
.order-type-card .otc-icon{ font-size:26px; margin-bottom:4px; }
.order-type-card .otc-title{ font-weight:700; font-size:14.5px; color:var(--ink); }
.order-type-card .otc-sub{ font-size:12px; color:var(--ink-soft); font-family:var(--mono); }
.order-type-card .otc-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--forest-deep); font-size:10.5px; font-weight:700;
  padding:3px 10px; border-radius:999px; font-family:var(--mono);
}
.order-type-card:has(input:checked),
.order-type-card.selected{
  border-color:var(--forest); border-width:2px; background:rgba(15,59,44,0.04);
  box-shadow:0 8px 20px rgba(15,59,44,0.12);
}
.order-type-card.featured-choice:has(input:checked),
.order-type-card.featured-choice.selected{
  border-color:var(--gold); background:rgba(215,154,44,0.08);
}
@media (max-width:560px){
  .order-type-selector{ grid-template-columns:1fr; }
}

/* ---------- Expanded Telebirr payment widget ---------- */
.telebirr-widget{
  background:#fff; border:1.5px solid var(--gold); border-radius:16px; padding:22px;
  margin-bottom:22px; position:relative; overflow:hidden;
}
.telebirr-widget::after{
  content:''; position:absolute; top:-50px; right:-50px; width:150px; height:150px;
  background:radial-gradient(circle, rgba(215,154,44,0.18), transparent 70%);
}
.telebirr-widget-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; position:relative; }
.telebirr-logo-lg{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.telebirr-widget-head h3{ margin:0 0 2px; font-size:17px; color:var(--forest); }
.telebirr-widget-head p{ margin:0; font-size:13px; color:var(--ink-soft); }
.telebirr-steps{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; position:relative; }
.telebirr-step{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink); }
.telebirr-step .ts-num{
  width:24px; height:24px; border-radius:50%; background:var(--forest); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  flex-shrink:0; font-family:var(--mono);
}
.telebirr-number-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:12px 16px;
  position:relative;
}
.telebirr-number-row .pay-number{ font-family:var(--mono); font-weight:700; font-size:16px; color:var(--forest); }