/* ============================================================
   GSM Alo — Emerald refresh (override layer)
   Loads AFTER Dhru's theme.css + theme16.css, so it wins.
   Purely visual polish — no layout structure changed.
   Safe to remove: delete this file's <link> from gsmalo2026/header.tpl.
   ============================================================ */

:root{
  --ga-green:#1a8a3b; --ga-green-d:#136a2c; --ga-gold:#e79a17;
  --ga-line:#e6ede8; --ga-ink:#14231a;
  --ga-shadow:0 14px 34px -22px rgba(15,80,34,.45);
  --ga-radius:14px;
}

/* smoother everything */
a,.btn,.card,.card-product,.nav-link,.form-control,.dropdown-item{
  transition:all .18s cubic-bezier(.4,0,.2,1) !important;
}

/* ---------- BUTTONS ---------- */
.btn{ border-radius:10px !important; font-weight:700 !important; letter-spacing:.01em; }
.btn-lg{ border-radius:12px !important; padding:.7rem 1.4rem !important; }
button.btn.btn-primary,.btn-secondary,.bg-secondary.btn{
  box-shadow:0 8px 18px -10px rgba(241,178,0,.6) !important;
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* ---------- CARDS (services / products) ---------- */
.card,.card-product{
  border-radius:var(--ga-radius) !important;
  border:1px solid var(--ga-line) !important;
  box-shadow:0 1px 2px rgba(16,40,25,.04) !important;
  overflow:hidden;
}
.card-product{ padding-top:6px; }
.card-product:hover{
  transform:translateY(-4px);
  box-shadow:var(--ga-shadow) !important;
  border-color:rgba(26,138,59,.45) !important;
}
.card-img-top{ border-radius:12px !important; }
.card-product .service-name{ font-weight:700 !important; }

/* ---------- INPUTS ---------- */
.form-control,.chosen-container-single .chosen-single,select,.input-group>.form-control{
  border-radius:10px !important;
}
.form-control{ border-color:var(--ga-line) !important; }

/* ---------- TOP GREEN PRODUCTS BAR — hidden per owner (cleaner modern look) ---------- */
.navbar-products, .header-bottom{ display:none !important; }

/* hide broken Font-Awesome-Pro-Light (fal) glyphs that render as tofu boxes in header */
.header-top i.fal, .header-top i.far, .header .btn-login i, .nav-item-curlang i, a.btn-login i{ display:none !important; }

/* ---------- HERO / BANNER ---------- */
.banner-content{ padding:2.2rem 2rem !important; }
.banner-content h1,.banner-content h2{ letter-spacing:-.02em; }

/* ---------- SECTION HEADINGS ---------- */
h3.title,.section-title,.h2,.h3{ letter-spacing:-.01em; }
h3.title span{ padding-bottom:3px; }

/* ---------- DROPDOWN MENUS ---------- */
.dropdown-menu{
  border-radius:12px !important; border:1px solid var(--ga-line) !important;
  box-shadow:var(--ga-shadow) !important; padding:6px !important;
}
.dropdown-item{ border-radius:8px !important; font-weight:500; }

/* ---------- CARDS INSIDE MODALS / PANELS ---------- */
.modal-content{ border-radius:16px !important; overflow:hidden; }
.modal-header{ border-bottom:none; }

/* ---------- TABLES (pricing) ---------- */
.table thead th{ border-top:none; font-weight:700; }
.table td,.table th{ vertical-align:middle; }

/* ---------- FOOTER polish ---------- */
.footer-top{ letter-spacing:.01em; }

/* ---------- subtle page smoothness ---------- */
body{ -webkit-font-smoothing:antialiased; }
img{ max-width:100%; }

/* marker so we can confirm the override loaded */
/* GA-EMERALD-OVERRIDE-ACTIVE */

/* ============================================================
   INNER PAGES — PRO colorful refresh v2 (display-only; no layout/
   feature changes; loads site-wide via gsmalo2026 header).
   Targets Dhru's real markup: .card-product / .col-group-icon /
   .badge-success / .badge-warning / h3.title / .row.group / .service
   ============================================================ */

/* --- soft tinted page canvas so white cards pop (subtle, safe) --- */
body{ background:linear-gradient(180deg,#f3faf5 0%,#eef6f0 46%,#f4f9f6 100%) !important; background-attachment:fixed !important; }

/* --- page title with colored accent bar --- */
.page-title{ font-weight:800 !important; letter-spacing:-.015em; position:relative; padding-left:16px !important; color:#123a24 !important; }
.page-title::before{ content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:6px; border-radius:5px; background:linear-gradient(180deg,#1a8a3b,#0d9488); }
.breadcrumb{ background:transparent !important; padding:4px 0 0 16px !important; font-size:12.5px !important; }

/* --- generic cards: crisp border + soft shadow (no jumpy hover on panels) --- */
.card{ border-radius:16px !important; border:1px solid #e4efe8 !important; box-shadow:0 10px 26px -20px rgba(15,80,34,.28) !important; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important; }

/* --- dashboard stat cards: colored top accent + tinted wash by type --- */
.card-order-success{ border-top:4px solid #18a34a !important; background:linear-gradient(180deg,#f2fbf5,#ffffff 60%) !important; }
.card-order-process{ border-top:4px solid #0ea5a4 !important; background:linear-gradient(180deg,#effbfb,#ffffff 60%) !important; }
.card-order-fail{ border-top:4px solid #e0455e !important; background:linear-gradient(180deg,#fdf1f3,#ffffff 60%) !important; }
.card-unpaid-balance{ border-top:4px solid #e79a17 !important; background:linear-gradient(180deg,#fef7ea,#ffffff 60%) !important; }
.card-othercredit{ border-top:4px solid #6366f1 !important; background:linear-gradient(180deg,#f1f2fe,#ffffff 60%) !important; }

/* --- service GROUP headers: colored band with gradient left bar --- */
h3.title{ position:relative; font-weight:800 !important; font-size:18px !important; color:#123a24 !important;
  padding:11px 16px !important; margin:26px 0 16px !important; border-radius:0 12px 12px 0 !important;
  background:linear-gradient(90deg,#e9f7ee 0%, rgba(233,247,238,.35) 55%, rgba(233,247,238,0) 100%) !important;
  border-left:5px solid transparent !important; border-image:linear-gradient(180deg,#1a8a3b,#0d9488) 1 !important; }
h3.title span{ padding:0 !important; }

/* ============================================================
   PLACE-ORDER / SERVICE CARDS — the big colorful upgrade
   ============================================================ */
.card-product{ border:1px solid #e4efe8 !important; border-radius:16px !important; background:#fff !important;
  box-shadow:0 8px 20px -14px rgba(16,70,40,.20) !important; overflow:hidden !important; position:relative !important;
  transition:transform .17s cubic-bezier(.4,0,.2,1), box-shadow .17s ease, border-color .17s ease !important; }
.service.active:hover .card-product, .card-product:hover{
  transform:translateY(-5px) !important; border-color:#1a8a3b !important;
  box-shadow:0 22px 44px -18px rgba(16,90,45,.38) !important; }

/* left accent strip on every service card */
.card-product::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#1a8a3b,#0d9488); opacity:.85; pointer-events:none; z-index:2; }

/* AVATAR / group-icon squares → vivid gradients (6-color cycle per group) */
.col-group-icon{ color:#fff !important; font-weight:800 !important; font-size:15px !important; letter-spacing:.03em !important;
  border-radius:15px 0 0 15px !important; text-shadow:0 1px 2px rgba(0,0,0,.18);
  background:linear-gradient(135deg,#1a8a3b,#0d9488) !important; }
.row.group .service:nth-child(6n+1) .col-group-icon{ background:linear-gradient(135deg,#12a150,#0d9488) !important; }
.row.group .service:nth-child(6n+2) .col-group-icon{ background:linear-gradient(135deg,#0ea5a4,#2563eb) !important; }
.row.group .service:nth-child(6n+3) .col-group-icon{ background:linear-gradient(135deg,#3b82f6,#6366f1) !important; }
.row.group .service:nth-child(6n+4) .col-group-icon{ background:linear-gradient(135deg,#7c3aed,#a855f7) !important; }
.row.group .service:nth-child(6n+5) .col-group-icon{ background:linear-gradient(135deg,#e0455e,#f97362) !important; }
.row.group .service:nth-child(6n+6) .col-group-icon{ background:linear-gradient(135deg,#e79a17,#f5b73d) !important; }

/* service name typography */
.card-product .searchme{ font-weight:600 !important; color:#1d2b23 !important; }
.card-product .text-muted{ font-size:11px !important; letter-spacing:.02em; }

/* PRICE + TIME badges → gradient pills */
.badge-success{ background:linear-gradient(135deg,#1a8a3b,#12b76a) !important; color:#fff !important;
  font-weight:800 !important; font-size:12px !important; padding:.42em .72em !important; border-radius:8px !important;
  box-shadow:0 5px 12px -5px rgba(18,183,106,.55) !important; }
.badge-warning{ background:linear-gradient(135deg,#e79a17,#f5b73d) !important; color:#3a2a00 !important;
  font-weight:800 !important; font-size:12px !important; padding:.42em .72em !important; border-radius:8px !important; }
.badge-danger{ background:linear-gradient(135deg,#e0455e,#f2709c) !important; color:#fff !important; border-radius:8px !important; }
.badge-primary,.badge-info{ border-radius:8px !important; font-weight:700 !important; }

/* legacy list-box hover (some pages) */
.service-list-box{ border-radius:14px !important; transition:transform .15s ease, box-shadow .15s ease, border-color .15s !important; }
.service-list-box:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(15,80,34,.42) !important; }

/* ============================================================
   TABLES (pricing / order history) — modern colored header + zebra
   ============================================================ */
.table{ border-radius:14px !important; overflow:hidden !important; box-shadow:0 10px 26px -22px rgba(15,80,34,.3) !important; background:#fff; }
.table thead th{ background:linear-gradient(180deg,#eef8f1,#e4f3ea) !important; color:#0f5a24 !important; font-weight:800 !important; border-top:none !important; letter-spacing:.01em; }
.table tbody tr:nth-child(even) > td{ background:#f8fbf9 !important; }
.table tbody tr:hover > td{ background:#eef8f1 !important; }

/* --- nav tabs / pills accents (settings, order-history filters) --- */
.nav-tabs .nav-link.active,.nav-pills .nav-link.active{ color:#fff !important; background:linear-gradient(135deg,#1a8a3b,#0d9488) !important; border-color:transparent !important; border-radius:10px !important; }
.nav-tabs .nav-link,.nav-pills .nav-link{ color:#2b6b45; font-weight:600; border-radius:10px !important; }
.nav-tabs{ border-bottom:2px solid #e4efe8 !important; }

/* --- inputs / search polish + green focus --- */
.form-control,.chosen-container-single .chosen-single,select{ border-radius:10px !important; border-color:#dfeae3 !important; }
.form-control:focus{ border-color:#1a8a3b !important; box-shadow:0 0 0 3px rgba(26,138,59,.14) !important; }
.btn{ border-radius:10px !important; }

/* --- alerts / notices tinted --- */
.alert{ border-radius:12px !important; border:none !important; }
.alert-success{ background:#eafaf0 !important; color:#116b2f !important; }
.alert-warning{ background:#fdf6e7 !important; color:#8a5a00 !important; }
.alert-info{ background:#eaf4fe !important; color:#0b5cad !important; }
.alert-danger{ background:#fdeef1 !important; color:#a12238 !important; }

/* ============================================================
   Restore the SERVICE-VIEW "Style" switcher (top-right gear).
   Dhru's theme-settings dropdown holds the Order-style (1/2/3)
   options; its fal fa-cog icon was tofu + hidden by our icon rule.
   Make it visible with a real gear so users can change view style.
   ============================================================ */
.header-top .nav-item.dropdown .fa-cog,
.header-top .nav-item.dropdown .fal.fa-cog{
  display:inline-block !important;
  font-family:"Segoe UI Symbol","Noto Sans Symbols2","Apple Color Emoji",sans-serif !important;
  font-weight:400 !important; font-size:16px; line-height:1; color:#5a6b62;
}
.header-top .nav-item.dropdown .fa-cog::before{ content:"\2699\FE0F" !important; }
.header-top .nav-item.dropdown > a.dropdown-toggle{ border:1px solid #e3ece6; border-radius:9px; padding:6px 10px !important; margin-left:6px; }
.header-top .nav-item.dropdown > a.dropdown-toggle:hover{ background:#f1f8f3; border-color:#1a8a3b; }
.header-top .nav-item.dropdown > a.dropdown-toggle:hover .fa-cog{ color:#136a2c; }
/* the style options inside the dropdown */
.ordertheme{ cursor:pointer; transition:.15s; }
.ordertheme:hover{ border-color:#1a8a3b !important; }
.ordertheme.active{ border-color:#1a8a3b !important; box-shadow:0 0 0 2px rgba(26,138,59,.28); }

/* ============================================================
   TOP UTILITY BAR (.header-top) — premium emerald→teal gradient
   strip with white text + gold icons. Owner-requested pro polish.
   Placed LAST so it overrides the neutral gear colors above.
   ============================================================ */
.header-top{
  background:linear-gradient(90deg,#0f5a2e 0%,#137a3a 42%,#0d9488 100%) !important;
  border-bottom:none !important;
  box-shadow:0 2px 12px -6px rgba(9,60,32,.55) !important;
  position:relative;
}
/* thin gold hairline under the bar for a finished, premium edge */
.header-top::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,#e79a17,#f5b73d,#e79a17); opacity:.9; }

/* text + links → light, readable on the green bar */
.header-top,
.header-top a,
.header-top span,
.header-top div,
.header-top .nav-link{ color:#eefaf2 !important; }
.header-top a{ text-decoration:none !important; font-weight:500; }
.header-top a:hover,
.header-top a:hover span{ color:#ffffff !important; text-decoration:none !important; }

/* icons (phone / envelope) → warm gold accent = green+gold premium combo */
.header-top i:not(.fa-cog){ color:#ffd66b !important; }

/* the ⚙️ gear on the dark bar → light, with a soft glass pill */
.header-top .nav-item.dropdown .fa-cog,
.header-top .nav-item.dropdown .fal.fa-cog{ color:#eefaf2 !important; }
.header-top .nav-item.dropdown > a.dropdown-toggle{
  border:1px solid rgba(255,255,255,.32) !important;
  background:rgba(255,255,255,.08) !important; }
.header-top .nav-item.dropdown > a.dropdown-toggle:hover{
  background:rgba(255,255,255,.20) !important; border-color:#ffffff !important; }
.header-top .nav-item.dropdown > a.dropdown-toggle:hover .fa-cog{ color:#ffffff !important; }

/* the dropdown PANEL that opens from the gear stays light (readable) */
.header-top .nav-item.dropdown .dropdown-menu,
.header-top .nav-item.dropdown .dropdown-menu *{ color:#14231a !important; }

/* ------------------------------------------------------------
   FIX: top-bar HOVER readability. Dhru theme.css sets
   `.header-top .nav-item:hover{background:#fff; color:black}`,
   which put our light text on a WHITE bg → invisible on hover.
   Re-theme hover for the green bar: soft translucent highlight,
   crisp WHITE text + gold icons — always clearly readable.
   ------------------------------------------------------------ */
.header-top .nav-item{ border-radius:8px; transition:background .15s ease; }
.header-top .nav-item:hover{ background:rgba(255,255,255,.15) !important; }
.header-top .nav-item:hover,
.header-top .nav-item:hover .nav-link,
.header-top .nav-item:hover span,
.header-top .nav-item:hover a,
.header-top .nav-item:hover div{ color:#ffffff !important; }
.header-top .nav-item:hover i:not(.fa-cog){ color:#ffe08a !important; }
/* keep base text crisp on every part of the gradient */
.header-top .nav-item{ text-shadow:0 1px 1px rgba(0,0,0,.14); }

/* ============================================================
   FIX: SERVICE-VIEW modal scroll. Dhru forces the ajax service
   modal (#modal-order / .modal-ajax) to overflow:hidden +
   height:100%, so a service with long details gets CLIPPED with
   no scrollbar. Let the modal scroll (mouse-wheel) when the
   content is taller than the screen; short ones stay centered.
   ============================================================ */
.modal.modal-ajax{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
.modal.modal-ajax .modal-content{ height:auto !important; max-height:none !important; overflow-y:visible !important; }
.modal.modal-ajax .modal-dialog{ margin-top:1.6rem !important; margin-bottom:1.6rem !important; }
/* nice slim green scrollbar for the modal + any overflow-auto area */
.modal.modal-ajax::-webkit-scrollbar,
.modal-body.overflow-auto::-webkit-scrollbar{ width:10px; }
.modal.modal-ajax::-webkit-scrollbar-thumb,
.modal-body.overflow-auto::-webkit-scrollbar-thumb{ background:#1a8a3b; border-radius:8px; border:2px solid rgba(255,255,255,.6); }
.modal.modal-ajax::-webkit-scrollbar-thumb:hover,
.modal-body.overflow-auto::-webkit-scrollbar-thumb:hover{ background:#136a2c; }