/* ============================================================
   Corporate Gifts page (corporate-gifts-in-egypt) - module styles.

   The page owns its own design system inside its content: an inline
   <style id="tg-corp-css"> block defining --acc:#39a2da, --ink:#1a1a1a,
   --grn:#8cc02e, --line:#e9e9e9 and the classes .tg / .btn / .tg-cat /
   .tg-card. None of that is restated here. These rules style only what
   this module renders, and they deliberately reuse the page's class names
   (.btn o, .btn p) so a button added by a shortcode is pixel-identical to
   one typed into the page.

   Enqueued only when tg_corp_is_page() is true (corporate/functions.php),
   versioned by its own filemtime through tg_asset_version().
   ============================================================ */

/* ---------- the button: a .btn with a glyph ---------- */
.tg-wa{display:inline-flex;align-items:center;gap:9px}
.tg-wa-ico{width:19px;height:19px;flex:0 0 19px;fill:currentColor;display:block}

/* WhatsApp variant: white pill, brand-green text, fills green on hover.
   Kept recognisable on purpose - a corporate visitor looks for the green. */
.btn.tg-wa-solid{background:#fff;color:#0f8f7e;border-color:#cfe9e4}
.btn.tg-wa-solid:hover{background:#25d366;border-color:#25d366;color:#fff}

/* ---------- persistent bubble (bottom-left: live chat owns bottom-right) ---------- */
.tg-wa-bubble{position:fixed;left:18px;bottom:18px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  background:#25d366;color:#fff;text-decoration:none;border-radius:999px;
  padding:12px 18px 12px 15px;box-shadow:0 6px 20px rgba(0,0,0,.18);
  font-family:"Nunito Sans",Arial,Helvetica,sans-serif;font-size:14px;font-weight:800;line-height:1}
.tg-wa-bubble:hover{background:#1ebe5b;color:#fff}
.tg-wa-bubble .tg-wa-ico{width:22px;height:22px;flex:0 0 22px}

/* phones: icon-only circle, so it never covers the sticky bars or the chat launcher */
@media (max-width:860px){
  .tg-wa-bubble{left:12px;bottom:12px;padding:13px;border-radius:50%}
  .tg-wa-bubble-t{display:none}
}

/* ---------- category rail (shortcode: corporate/categories-rail.php) ----------
   The page pins #tg-categories .tg-rail at six columns with !important. An attribute selector
   counts as a class, so these selectors are one step more specific than that rule and win among
   important declarations whichever file the browser reads first. Five columns reads 5 + 4 for the
   nine children; data-cols="6" deliberately falls through to the page's own rule. */
#tg-categories .tg-rail[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))!important}
#tg-categories .tg-rail[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:1024px){
  #tg-categories .tg-rail[data-cols="5"],#tg-categories .tg-rail[data-cols="4"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:768px){
  #tg-categories .tg-rail[data-cols="5"],#tg-categories .tg-rail[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:520px){
  #tg-categories .tg-rail[data-cols="5"],#tg-categories .tg-rail[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
}