@charset "UTF-8";
/* == ggaix-css == */
.ggaix{--g:#2E7D32;--f:#1B5E20;--t:#BC5028;--ln:#dce3dc;--mut:#5C6B5C;
  background:#fff;border:1px solid #D4E8D5;border-left:4px solid var(--g);border-radius:14px;
  padding:16px;margin:26px 0 6px;box-shadow:0 2px 10px rgba(27,94,32,.06);font-size:15px;line-height:1.6;color:#2D2D2D}
.ggaix *{box-sizing:border-box}
.ggaix-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ggaix-ic{width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#EAF4EA;font-size:18px}
.ggaix-ttl{flex:1;min-width:190px}
.ggaix-ttl b{display:block;font-size:15.5px;color:var(--f);line-height:1.3}
.ggaix-ttl span{font-size:12px;color:var(--mut)}
.ggaix-btn{border:0;background:var(--t);color:#fff;font:inherit;font-weight:700;font-size:14px;
  border-radius:12px;padding:11px 20px;min-height:44px;cursor:pointer}
.ggaix-btn:hover{background:var(--g)}
.ggaix-btn[disabled]{opacity:.55;cursor:default}
.ggaix-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--ln);font-size:14.5px}
.ggaix-body h4{margin:0 0 6px;font-size:15px;color:var(--f)}
.ggaix-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.ggaix-steps li{display:flex;gap:12px;align-items:flex-start;background:#F6F7F6;border:1px solid var(--ln);
  border-radius:10px;padding:10px 12px;font-size:14px}
.ggaix-when{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#fff;background:var(--g);
  border-radius:999px;padding:3px 10px;min-width:78px;text-align:center;line-height:1.5}
.ggaix-when.s2{background:#256C29}.ggaix-when.s3{background:#9AA69A}
.ggaix-src{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:#256C29;text-decoration:none}
.ggaix-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:12px;color:var(--mut)}
.ggaix-pill{background:#fff;border:1px solid #D4E8D5;color:var(--f);border-radius:999px;padding:7px 12px;
  font-weight:600;text-decoration:none;font-size:12px}
.ggaix-pill:hover{background:#EAF4EA;color:var(--f)}
.ggaix-sk{height:10px;border-radius:999px;background:#ECEFEC;margin-bottom:8px}
.ggaix-sk.b{width:82%}.ggaix-sk.c{width:64%}
.ggaix-err{color:var(--t);font-size:13.5px;margin-top:12px}
@media(max-width:520px){.ggaix-btn{width:100%}}
/* == ggbuyrow-css == */
.gg-buyseeds-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:10px 0;}
.gg-buyseeds-row br{display:none;}            /* the flex row does the wrapping now */
.gardeningguider-entrycontent .gg-buyseeds-row a.gg-buy,
.gg-buyseeds-row a.gg-buy{
  display:inline-flex !important;align-items:center;
  min-height:24px;padding:3px 2px;             /* 19px text + padding = 25px target */
  line-height:1.3;text-decoration:underline;text-underline-offset:2px;}
.gg-buyseeds-row a.gg-buy:focus-visible{outline:3px solid #2E7D32;outline-offset:2px;border-radius:6px;}
@media(max-width:600px){
  /* on a phone the row goes one-per-line, and 10px of separation keeps two 24px targets apart */
  .gg-buyseeds-row{gap:10px 12px;}
}
/* == ggtoolfull-css == */
/* hide the widget sidebar(s) on tool pages */
body.gg-tool-full .gardeningguider-primarysidebar,
body.gg-tool-full .gardeningguider-secondarysidebar,
body.gg-tool-full .gardeningguider-sidebar-sticky,
body.gg-tool-full .gardeningguider-secondarycontentarea{ display:none !important; }
/* force the ENTIRE content chain to full width — the real constrainer is .gardeningguider-contentarea
   (float:left content column). Un-float it + 100% and everything inside expands; tools keep their own
   readable max-width and simply centre in the roomier space. */
body.gg-tool-full .gardeningguider-contentarea,
body.gg-tool-full .gardeningguider-primarycontentarea,
body.gg-tool-full [class*="contentareainner"],
body.gg-tool-full .gardeningguider-primarycontentarea > *,
body.gg-tool-full .gardeningguider-entrycontent,
body.gg-tool-full .gardeningguider-entrycontent > article,
body.gg-tool-full .gardeningguider-entrycontent > .type-page{
  width:100% !important; max-width:100% !important; float:none !important; display:block !important;
  padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important;
}
/* == ggstickylast-css == */
@media (min-width:1025px){
  /* the pin. 96px clears the fixed header; the widget keeps its normal card look. */
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets{
    position:sticky;top:96px;z-index:2;}
  /* the theme hides the inner box on some templates — it is a real card here */
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets .gardeningguider-sidebar-sticky{
    display:block;position:static;top:auto;}
  /* MEASURED BLOCKER: position:sticky is dead inside any ancestor whose overflow is not visible, and
     all three of these carried overflow:hidden (the theme uses it to contain the two floated
     columns). display:flow-root contains floats exactly the same way but leaves overflow visible,
     so the pin works and the column layout is untouched.
     `.gardeningguider-content-main-section` is the homepage's own row and carries it too — that is
     why the card still ran away on the homepage after the other two were fixed. */
  .gardeningguider-content-main-section,
  .gardeningguider-sitemaincontent,
  .gardeningguider-siteinner{overflow:visible;display:flow-root;}
  .gardeningguider-primarysidebar,
  .gardeningguider-primarycontentarea{overflow:visible;}
  /* the theme also puts position:sticky on the whole widget column. With both pinning, the card
     landed at viewport top (under the fixed header) instead of the 96px we ask for — so the column
     goes back to normal flow and only the one widget pins. */
  .gardeningguider-primarysidebar{position:static;}
  /* A pinned box with a live `backdrop-filter` (gg-glass puts blur(11px) on every .widget) has to
     re-blur the whole page behind it on every scroll frame — that is the second half of the
     flicker Gaurav saw, and on an ad card the frosted look buys nothing. Blur off, and the box gets
     its own compositor layer so scrolling never repaints it. */
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    will-change:transform;transform:translateZ(0);}
}
/* == ggtoolwidgets-css == */
/* ---------- 1. drop the "Free Garden Tools" widget on a tool page (the page is itself a tool) ---------- */
body.gg-tool-full .widget_gg_tools{display:none!important;}

/* ---------- 2. open both sidebars into a single 3-column grid ----------
   display:contents removes the aside's own box, so the .widget elements inside become direct items of the parent grid,
   so widgets from both sidebars flow in ONE sequence (rather than forming two separate ragged grids). */
body.gg-tool-full .gardeningguider-primarycontentarea{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;}
body.gg-tool-full .gardeningguider-primarycontentarea > *:not(.gardeningguider-primarysidebar):not(.gardeningguider-secondarysidebar){
  grid-column:1/-1;}
body.gg-tool-full .gardeningguider-primarysidebar,
body.gg-tool-full .gardeningguider-secondarysidebar{display:contents!important;}

/* ---------- 3. each widget fits its grid cell (the theme already supplies a white card, so do not double the border) ---------- */
body.gg-tool-full .widget-area > .widget{
  width:auto!important;max-width:100%!important;margin:0!important;box-sizing:border-box;overflow:hidden;}
body.gg-tool-full .widget-area > .widget .gardeningguider-widgettit{margin:0 0 10px!important;padding:0!important;}
body.gg-tool-full .widget-area > .widget .widget-title{font-size:16px!important;margin:0!important;}
body.gg-tool-full .widget-area > .widget img{max-width:100%;height:auto;}

/* ---------- 4. sequence, ordered by what the page is for: content first, then brand, then social ---------- */
body.gg-tool-full .widget_gardeningguider_optin_box{order:1;grid-column:1/-1;}   /* full-width CTA band */
body.gg-tool-full .widget_gg_toppicks{order:2;}                                   /* ⭐ Editor's Top Picks */
body.gg-tool-full .widget_gg_popular{order:3;}                                    /* 🔥 Popular Guides     */
body.gg-tool-full .widget_gg_topics{order:4;}                                     /* 📂 Explore Topics     */
body.gg-tool-full .widget_gardeningguider_popular_post{order:5;}                  /* Recent popular post   */
body.gg-tool-full .widget_gardeningguider_aboutus_widgets{order:6;}               /* About Us (E-E-A-T)    */
body.gg-tool-full .widget_gardeningguider_sticky_widgets{order:7;}                /* Recommended for You   */
body.gg-tool-full .widget_gardeningguider_socialfollow_widget{order:8;}           /* Social Media          */

/* ---------- 4b. show the inner content of "Recommended for You" again ----------
   gg-tool-fullwidth hides `.gardeningguider-sidebar-sticky` (that was for the sticky rail),
   so a tool page showed nothing but an EMPTY heading. In the grid it is now a full card. */
body.gg-tool-full .widget_gardeningguider_sticky_widgets .gardeningguider-sidebar-sticky{
  display:block!important;position:static!important;top:auto!important;}

/* ---------- 5. "Recent popular post" 6 → 4 items (it was a 1,314px column-buster) ---------- */
body.gg-tool-full .widget_gardeningguider_popular_post ul > li:nth-child(n+5){display:none;}

/* ---------- 6. responsive ---------- */
@media(max-width:1100px){
  body.gg-tool-full .gardeningguider-primarycontentarea{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  body.gg-tool-full .gardeningguider-primarycontentarea{grid-template-columns:minmax(0,1fr);gap:16px;}
}
/* == ggsidebaradsticky-css == */
.gg-sas-rec{margin:0 0 22px;}
.gg-sas-rec-t{font-size:16px;line-height:1.3;margin:0 0 10px;color:var(--gg-forest,#1b5e20);font-weight:700;}
/* the pinned card is an ad now — no card chrome around it, the ad brings its own frame */
@media (min-width:1025px){
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets{background:none;border:0;padding:0;box-shadow:none;}
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets .gardeningguider-widgettit{display:none;}
  /* Card chrome off — the ad brings its own frame and label.
     NOTE (measured, do not "fix" by fiddling with padding): the unit renders 262px wide, and removing
     this padding did NOT change that — the sidebar COLUMN itself is ~262px. So the slot registered in
     gg-ad-manager as "300x600" has never actually had 300px, here or at its old spot on top. That is a
     revenue/layout call for Gaurav (widen the column, or register the slot as 160x600/responsive), not
     something to paper over in CSS. */
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets .gardeningguider-sidebar-sticky{
    padding:0;border:0;background:none;box-shadow:none;}
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets .gg-ad-slot{margin:0;}
}
/* SHORT SCREENS: a 600px ad + the 96px header offset needs ~720px of viewport. On a laptop shorter
   than that a pinned ad would eat most of the screen for the whole article, so below 760px tall it
   simply scrolls with the page instead of pinning. */
@media (min-width:1025px) and (max-height:759px){
  .gardeningguider-primarysidebar .widget_gardeningguider_sticky_widgets{position:static;}
}
/* 🔴 MOBILE: no 300x600, ever (2026-08-28 — only visible once every slot was switched on).
   gg-ad-manager hides the sidebar ad under 992px through `.gg-sidebar-ad`, but this file MOVED half2
   into the pinned widget, which never carries that class — so the hide stopped matching and a
   600px-tall unit was rendering on 390px phones (home / post / tool / topic page, all measured).
   Google's density rule (an ad over ~30% of the viewport gets limited or blank serving) makes that a
   revenue bug, not a cosmetic one. Match the SLOT itself so the next move cannot break it again. */
@media (max-width:992px){
  .widget_gardeningguider_sticky_widgets .gg-ad-slot-half2,
  .gardeningguider-primarysidebar .gg-ad-slot-half2{display:none !important;}
}
/* == ggauthsoc-css == */
.gardeningguider-author-social{display:flex;gap:10px;flex-wrap:wrap}.gg-authsoc{display:inline-flex;align-items:center;min-height:24px;font-size:13px;font-weight:700;color:var(--gg-terra-cta,#BC5028);text-decoration:none}.gg-authsoc:hover{text-decoration:underline}
/* == ggresponsive-css == */
/* ===== 1) KILL horizontal overflow (root cause: header right group wider than viewport) =====
   overflow-x:clip (not hidden) so position:sticky (forum sidebar) keeps working; the header fix
   below removes the real overflow source, clip is just a safety net. */
html{ overflow-x:clip; }
body{ max-width:100%; overflow-x:clip; }
/* header: keep logo + menu on ONE row (never wrap the logo onto its own line); just let it shrink.
   min-width:0 scoped to header wrappers only (a global *{min-width:0} can collapse other flex items). */
.gardeningguider-header2-top,.gardeningguider-headerinner,.gardeningguider-header2-right,
.gardeningguider-header2-social-media,.gardeningguider-headertopinner,.gardeningguider-headerbtminner{
  max-width:100% !important; min-width:0 !important; flex-wrap:nowrap !important;
}
.gardeningguider-header2-right,.gardeningguider-header2-social-media{ justify-content:flex-end; }

/* medium screens (desktop menu still shown): shrink the menu font/icons/gaps so the whole row
   fits without overflow instead of wrapping. Below the theme's own mobile breakpoint the hamburger
   takes over, so we don't touch that. */
.gardeningguider_menu .menu{ flex-wrap:nowrap !important; }   /* menu items never wrap to a new row */
@media (min-width:993px) and (max-width:1500px){
  .gardeningguider_menu .menu > li > a{ font-size:14px !important; padding:9px 8px !important; }
  .gardeningguider_menu .menu > li > a::before{ font-size:13px !important; }
  .gardeningguider-header2-right{ gap:8px !important; }
  .gg-lang-switch select.gg-lang-select{ max-width:110px; font-size:12px; }
}
/* tight laptop zone: shrink menu + make the language pill COMPACT (never hidden) so search + account
   still fit on one row (Gaurav: do not hide the language picker on laptops) */
@media (min-width:993px) and (max-width:1300px){
  .gardeningguider_menu .menu > li > a{ font-size:12.5px !important; padding:8px 5px !important; }
  .gardeningguider_menu .menu > li > a::before{ font-size:12px !important; }
  .gardeningguider-header2-right{ gap:6px !important; }
  .gg-lang-switch .gg-lang-globe{ display:none; }
  .gg-lang-switch select.gg-lang-select{ max-width:66px; font-size:11px; padding:4px 20px 4px 7px; }
}

/* ===== 2) media & wide blocks never exceed their box (all browsers) ===== */
img,svg,video,canvas,iframe,embed,object{ max-width:100%; height:auto; }
img[width],img[height]{ height:auto; }
table{ max-width:100%; }
pre,code{ white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.gardeningguider-entrycontent table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }  /* wide tables scroll INSIDE, not the page */

/* ===== 3) box-sizing baseline so padding never causes overflow ===== */
*,*::before,*::after{ box-sizing:border-box; }

/* ===== 4) small screens: tidy header + tool spacing ===== */
@media (max-width:600px){
  .gardeningguider-entrycontent{ padding-left:12px !important; padding-right:12px !important; }
  .gardeningguider-header2-right .gg-lang-switch select.gg-lang-select{ max-width:110px; }
}
/* == ggmg-css == */
.ggmg-intro{background:linear-gradient(135deg,var(--gg-green,#2e7d32),var(--gg-forest,#1b5e20));color:#fff;border-radius:16px;padding:32px 24px;margin-bottom:24px}
    .ggmg-intro h2{color:#fff;margin:0 0 8px;font-size:1.7rem}.ggmg-intro p{color:rgba(255,255,255,.93);max-width:60ch;margin:0}
    /* 2026-08-22 — four .ggmg-cta rules stood here and were DEAD: the logged-out view was rebuilt
       around .ggmg-intro / .ggmg-land-btns and nothing carries `ggmg-cta` any more (only
       `ggmg-cta-btn`, styled separately below). Deleting them changes nothing on screen — they had
       matched no element for some time. Found by the orphaned-CSS sweep that came out of the
       .ggpf-sp bug, where the same drift DID break a visible layout. */
    .ggmg-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
    .ggmg-btns a.ggmg-btn{display:inline-block;background:var(--gg-green,#2e7d32);color:#fff!important;border-radius:99px;padding:10px 22px;font-weight:700;text-decoration:none!important}
    .ggmg-btns a.ggmg-btn.ghost{background:#fff;color:var(--gg-forest,#1b5e20)!important;border:1.5px solid var(--gg-line,#dce3dc)}
    .ggmg-tools a.ggmg-tool{text-decoration:none!important}
    .ggmg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
    @media(max-width:760px){.ggmg-grid{grid-template-columns:1fr}}
    .ggmg-item{background:#fff;border:1px solid var(--gg-line,#dce3dc);border-radius:12px;padding:16px;position:relative}
    .ggmg-item .em{font-size:1.8rem}.ggmg-item h4{margin:6px 0 2px;color:var(--gg-forest,#1b5e20)}.ggmg-item p{margin:0;color:var(--gg-text-muted,#5c6b5c);font-size:.86rem}
    .ggmg-item .rm{position:absolute;top:10px;right:10px;background:#f6f7f6;border:1px solid var(--gg-line,#dce3dc);border-radius:99px;width:26px;height:26px;cursor:pointer;color:#c7552c;font-weight:700}
    .ggmg-empty{background:var(--gg-gray-50,#f6f7f6);border:1px dashed var(--gg-line,#dce3dc);border-radius:12px;padding:28px;text-align:center;color:var(--gg-text-muted,#5c6b5c)}
    .ggmg-sec-h{color:var(--gg-forest,#1b5e20);margin:8px 0 14px;font-size:1.2rem}
    .ggmg-tools{display:flex;gap:8px;flex-wrap:wrap}
    .ggmg-tool{background:var(--gg-green-050,#eaf4ea);color:var(--gg-green-700,#256c29);border:1px solid var(--gg-green-100,#d4e8d5);border-radius:99px;padding:6px 14px;font-weight:600;text-decoration:none;font-size:.9rem}
    /* ===== FINAL ROUND P1 (2026-07-23): logged-out SEO landing ===== */
    .ggmg-land-h .kicker{display:inline-block;background:rgba(255,255,255,.16);color:#fff;border-radius:99px;padding:4px 12px;font-size:.78rem;font-weight:800;letter-spacing:.03em;margin-bottom:10px}
    .ggmg-land-h h2{font-size:1.85rem;line-height:1.25}
    .ggmg-land-h p{color:rgba(255,255,255,.94)}
    .ggmg-land-h p strong{color:#fff}
    .ggmg-land-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
    .ggmg-cta-btn{cursor:pointer;border:0;background:var(--gg-cta,#bc5028);color:#fff;font-weight:800;font-size:.98rem;padding:13px 26px;border-radius:12px}
    .ggmg-cta-btn:hover{background:var(--gg-cta-hover,#a64420)}
    .ggmg-cta-btn.ghost{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);color:#fff}
    .ggmg-cta-btn.ghost:hover{background:rgba(255,255,255,.22)}
    .ggmg-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:14px 0 26px}
    .ggmg-feat{background:#fff;border:1px solid var(--gg-line,#dce3dc);border-top:4px solid var(--gg-green,#2e7d32);border-radius:12px;padding:16px}
    .ggmg-feat .em{font-size:1.7rem}
    .ggmg-feat h4{margin:8px 0 4px;color:var(--gg-forest,#1b5e20);font-size:1rem}
    .ggmg-feat p{margin:0;color:var(--gg-text-muted,#5c6b5c);font-size:.88rem;line-height:1.55}
    .ggmg-cmpwrap{overflow-x:auto;border:1px solid var(--gg-line,#dce3dc);border-radius:12px;background:#fff;margin:12px 0 8px}
    .ggmg-cmp{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
    .ggmg-cmp th{background:var(--gg-forest,#1b5e20);color:#fff;text-align:left;padding:9px 12px}
    .ggmg-cmp th.us{background:var(--gg-green,#2e7d32)}
    .ggmg-cmp td{border-top:1px solid var(--gg-line,#eef2ee);padding:9px 12px;vertical-align:top}
    .ggmg-cmp td.us{background:var(--gg-green-050,#eaf4ea);font-weight:700;color:var(--gg-green-700,#256c29)}
    .ggmg-cmp td.f{font-weight:700;color:var(--gg-forest,#1b5e20)}
    .ggmg-cmp-note{font-size:.78rem;color:var(--gg-text-muted,#5c6b5c);margin:0 0 26px}
    .ggmg-land-mid{background:#fff;border:1px solid var(--gg-line,#dce3dc);border-radius:14px;padding:24px;text-align:center;margin:0 0 10px}
    .ggmg-land-mid h3{color:var(--gg-forest,#1b5e20);margin:0 0 6px}
    .ggmg-land-mid p{color:var(--gg-text-muted,#5c6b5c);max-width:56ch;margin:0 auto 14px}
    .ggmg-land-mid .ggmg-cta-btn{background:var(--gg-cta,#bc5028)}
/* == ggmm-css == */
/* desktop: drawer, overlay and burger hidden (the full nav is present). The search ICON and search bar STAY (same popup as mobile) */
@media (min-width:1024px){ #ggmm-drawer,#ggmm-overlay,.ggmm-burger{display:none!important} }
@media (max-width:1023px){
  .gardeningguider-mb-pm-menu-style{display:none!important} /* hide the theme's non-working hamburger */
  /* 2026-08-17 (UI seat, Gaurav's menu review). The theme brings its DESKTOP nav row back at ~1001px,
     but there is only room for three or four items there — MEASURED at 1001–1015: most of the labels
     were gone and a bare caret was left floating beside "Community". In that band the drawer below is
     the usable navigation, so the desktop row (and the sticky bar's copy) stay hidden until 1024,
     where the full row genuinely fits. Above 1024 nothing here applies. */
  .gardeningguider-header2-top nav.gardeningguider-primary-menu,
  .gardeningguider-header-sticky nav.gardeningguider-sticky-menu{display:none!important}
  /* mobile: hide the desktop inline search (we have our own search icon). The language changer and
     the account button STAY (Gaurav). Header stays compact. */
  .gg-hdr-search{display:none!important}
  /* ===== HEADER SEQUENCE (Gaurav): logo → language(desktop-style) → search → user → menu.
     Everything vertically centred on one line (nothing sitting high or low). Popups must not be CLIPPED. ===== */
  /* Gaurav 2026-07-05: main header STICKY on MOBILE (like the community header) — stays pinned to the top on scroll */
  .gardeningguider-header2-top{position:sticky!important;top:0!important;z-index:500!important;box-shadow:0 2px 10px rgba(20,45,25,.10)}
  .gardeningguider-header2-top .gardeningguider-headerinner{padding-left:12px!important;padding-right:10px!important;gap:8px!important;overflow:visible!important}
  .gardeningguider-header2-left img.custom-logo,.gardeningguider-header2-left .gardeningguider-sitetitle img{height:34px!important}
  .gardeningguider-header2-right,.gardeningguider-header2-social-media{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:nowrap!important;margin:0!important;overflow:visible!important}
  /* icon buttons (search / user / menu) = 40x40 uniform, vertically centered */
  .ggmm-searchbtn,.ggmm-burger,.gg-acct-guest .gg-acct-toggle,.gg-acct-member .gg-acct-toggle{
    width:40px!important;height:40px!important;min-width:40px!important;box-sizing:border-box!important;margin:0!important;padding:0!important;border-radius:11px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;align-self:center!important}
  .ggmm-burger{border:1px solid #dbe8d7!important;background:#eef6ec!important;color:#1b5e20!important}
  /* Gaurav 2026-07-14: the search button matches the user-profile button (green gradient + white icon) */
  .ggmm-searchbtn{border:0!important;background:linear-gradient(135deg,#2e7d32,#1b5e20)!important;color:#fff!important;
    box-shadow:0 3px 10px rgba(27,94,32,.28), inset 0 1px 0 rgba(255,255,255,.22)!important}
  .ggmm-burger:active{background:#e2efe0!important}
  .ggmm-searchbtn:active{filter:brightness(1.06)}
  .ggmm-burger{padding:11px 9px!important}
  /* language wrapper — 2026-09-04: pill chrome GONE (Amazon-style .gg-lang-btn is the pill now;
     the old select-era bg/border here made a second empty box behind the button). Layout only. */
  .gardeningguider-header2-social-media .gg-lang-div{height:40px!important;align-self:center!important;margin:0!important;
    display:inline-flex!important;align-items:center!important;padding:0!important;background:none!important;border:0!important;overflow:visible!important;flex:0 0 auto!important}
  .gardeningguider-header2-social-media .gg-lang-switch{gap:5px!important;margin:0!important;align-items:center!important}
  .gardeningguider-header2-social-media .gg-lang-switch .gg-lang-globe{font-size:15px!important;color:#1d3a28!important;opacity:1!important}
  /* SEQUENCE: all the items are now siblings inside social-media (the JS injected search+burger here) */
  .gardeningguider-header2-social-media > .gg-lang-div{order:1}
  .gardeningguider-header2-social-media > .ggmm-searchbtn{order:2}
  .gardeningguider-header2-social-media > .gg-acct-div{order:3}
  .gardeningguider-header2-social-media > .ggmm-burger{order:4}
  /* the account popup must not get CLIPPED — pull it in from the right edge, inside the screen */
  .gg-acct-div .gg-acct-menu{position:fixed!important;top:58px!important;right:10px!important;left:auto!important;min-width:230px!important;max-width:calc(100vw - 20px)!important}
  .ggmm-searchbtn,.ggmm-burger{display:inline-flex!important;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;margin:0;background:none;border:0;cursor:pointer;border-radius:9px;box-sizing:border-box;color:#1b5e20}
  .ggmm-searchbtn:active,.ggmm-burger:active{background:#eef6ec}
  .ggmm-burger{flex-direction:column;justify-content:center;gap:5px;padding:9px 8px}
  .ggmm-burger span{display:block;height:2.5px;width:100%;background:#1b5e20;border-radius:2px}
  .ggmm-searchbtn svg{display:block}
}
/* a search ICON on DESKTOP too (same as the mobile header) — clicking it slides down the same community-style search bar */
@media (min-width:1024px){
  /* Gaurav 2026-07-14: the search button matches the user-profile button (green gradient + white icon + lift hover) */
  .ggmm-searchbtn{display:inline-flex!important;align-items:center;justify-content:center;
    width:40px;height:40px;min-width:40px;padding:0;margin:0 0 0 8px;border:0;
    background:linear-gradient(135deg,#2e7d32,#1b5e20);color:#fff;border-radius:11px;cursor:pointer;box-sizing:border-box;align-self:center;flex:0 0 auto;
    box-shadow:0 3px 10px rgba(27,94,32,.28), inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .16s,box-shadow .16s,filter .16s}
  .ggmm-searchbtn:hover{transform:translateY(-1px);filter:brightness(1.06);
    box-shadow:0 6px 16px rgba(27,94,32,.4), inset 0 1px 0 rgba(255,255,255,.22)}
  .ggmm-searchbtn svg{display:block}
}
/* a POPUP modal like login/signup (dark blurred backdrop + glass card) — but the card sits just BELOW the MENU, not centred. JS sets the card's top */
#ggmm-searchbar{position:fixed;inset:0;z-index:100050;display:flex;align-items:flex-start;justify-content:center;padding:0 16px 16px;
  background:rgba(15,40,20,.5);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
#ggmm-searchbar.on{opacity:1;visibility:visible}
.ggmm-sb-card{position:relative;width:min(560px,100%);box-sizing:border-box;padding:24px 26px 20px;border-radius:18px;
  background:linear-gradient(160deg,#ffffff,#eef6ee);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 26px 70px rgba(15,40,20,.46),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(16px) scale(.955);transition:transform .32s cubic-bezier(.22,1,.36,1)}
#ggmm-searchbar.on .ggmm-sb-card{transform:none}
.ggmm-sb-title{text-align:center;font-size:1.12rem;font-weight:800;color:#153f1a;margin:2px 0 14px}
.ggmm-sb-hint{text-align:center;font-size:.8rem;color:#5c7361;margin-top:12px}
/* search box inside card: input + green button + orange X (JOINED row) */
#ggmm-searchbar form{display:flex;align-items:stretch;gap:0;width:100%;margin:0;border-radius:8px}
/* make the typing area clearly visible: a distinct GREEN border (2px #2e7d32) + a light tinted bg */
#ggmm-searchbar input{flex:1;min-width:0;height:46px;border:2px solid #2e7d32;border-right:0;border-radius:8px 0 0 8px;padding:0 15px;font-size:15px;color:#173d1c;background:#f4faf3;outline:none;box-sizing:border-box;box-shadow:none}
#ggmm-searchbar input::placeholder{color:#7d9a80}
#ggmm-searchbar input:focus{background:#fff;box-shadow:inset 0 0 0 1px rgba(46,125,50,.4)}
#ggmm-searchbar button[type=submit]{flex:none;width:48px;height:46px;border:1.5px solid #2e7d32;border-radius:0 8px 8px 0;background:#2e7d32;display:flex!important;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s}
#ggmm-searchbar button[type=submit]:hover{background:#1b5e20;border-color:#1b5e20}
#ggmm-searchbar button[type=submit] svg{display:block!important;width:18px!important;height:18px!important;stroke:#fff!important;fill:none!important}
/* the cross (X) — a SQUARE designer button, sitting right up against the search. ORANGE by default, RED on hover. */
#ggmm-searchbar .ggmm-sb-close{flex:none;display:flex!important;align-items:center;justify-content:center;
  width:46px;height:46px;margin-left:6px;border:0;border-radius:8px;padding:0;cursor:pointer;line-height:1;
  font-size:22px;color:#fff;background:#BC5028;box-shadow:0 2px 6px rgba(199,85,44,.28),inset 0 1px 0 rgba(255,255,255,.25);
  transition:background .15s,transform .15s,box-shadow .15s}
#ggmm-searchbar .ggmm-sb-close:hover{background:#C62828;transform:translateY(-1px);box-shadow:0 5px 14px rgba(198,40,40,.4)}
/* hide the native search input's webkit clear (X) — keeps our UI clean */
#ggmm-searchbar input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
#ggmm-overlay{position:fixed;inset:0;background:rgba(12,28,16,.55);backdrop-filter:blur(2px);z-index:100000;opacity:0;transition:opacity .28s}
#ggmm-overlay.on{opacity:1}
.ggmm{position:fixed;top:0;right:0;height:100%;width:min(320px,86vw);z-index:100001;box-sizing:border-box;
  background:linear-gradient(180deg,#ffffff,#f5faf4);box-shadow:-14px 0 40px rgba(0,0,0,.3);
  transform:translateX(102%);transition:transform .3s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.ggmm.on{transform:none}
.ggmm-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #e7efe4}
.ggmm-title{font-weight:800;font-size:17px;color:#1b5e20}
.ggmm-close{background:none;border:0;font-size:30px;line-height:1;color:#5c6b5c;cursor:pointer;padding:0 4px}
.ggmm-close:hover{color:#c7552c}
/* drawer search — like the community one: white input + joined green button (8px square corners) */
.ggmm-search{display:flex;height:44px;margin:14px 16px 8px}
.ggmm-search input{flex:1;min-width:0;border:1.5px solid #DCE3DC;border-right:0;border-radius:8px 0 0 8px;padding:0 14px;font-size:14px;background:#fff;outline:none;box-sizing:border-box}
.ggmm-search input:focus{border-color:#2e7d32}
.ggmm-search button{width:46px;flex:none;border:1.5px solid #2e7d32;border-radius:0 8px 8px 0;background:#2e7d32;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.ggmm-search button:hover{background:#1b5e20;border-color:#1b5e20}
.ggmm-search button svg{stroke:#fff;fill:none}
/* nav (server-rendered wp_nav_menu) — on mobile the theme sets `nav{display:none}`
   (a known gotcha!) which hid our <nav>. display:block!important is the real fix. */
nav.ggmm-nav{display:block!important;flex:1 1 auto!important;padding:6px 10px;visibility:visible!important;opacity:1!important;height:auto!important;max-height:none!important;overflow:visible!important}
.ggmm-nav ul.ggmm-menu{list-style:none!important;margin:0!important;padding:0!important;
  display:block!important;visibility:visible!important;opacity:1!important;
  position:static!important;inset:auto!important;transform:none!important;
  width:auto!important;height:auto!important;max-height:none!important;min-height:0!important;
  background:transparent!important;box-shadow:none!important;border:0!important;float:none!important;overflow:visible!important}
.ggmm-nav ul.ggmm-menu > li,.ggmm-nav .sub-menu > li{list-style:none!important;margin:0!important;
  display:block!important;float:none!important;width:auto!important;position:relative;border-bottom:1px solid #eef3ec;background:transparent!important;
  height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;opacity:1!important;visibility:visible!important}
.ggmm-nav a{display:block!important;padding:12px 34px 12px 10px!important;color:#1d3a28!important;font-size:15px!important;
  font-weight:600!important;text-decoration:none!important;border-radius:8px!important;background:transparent!important;
  border:0!important;box-shadow:none!important;line-height:1.3!important;white-space:normal!important;width:auto!important;text-align:left!important;
  height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;opacity:1!important;visibility:visible!important}
.ggmm-nav a:hover{background:#eef6ec!important;color:#2e7d32!important}
.ggmm-nav .sub-menu{display:none!important;padding:0 0 4px 8px!important;border:0!important;
  position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;box-shadow:none!important;min-width:0!important}
.ggmm-nav li.ggmm-open > .sub-menu{display:block!important}
.ggmm-nav .sub-menu > li{border-bottom:0}
.ggmm-nav .sub-menu a{font-weight:500!important;font-size:14px!important;color:#3c5a44!important;padding:9px 10px!important}
/* 2026-08-23 (G1): the caret button sits at right:2px, width 34 — so a parent label longer than
   the row runs UNDERNEATH it with no ellipsis (white-space is normal, overflow visible). Measured on
   "Americas, Africa & Middle East (4)": 12px of the label hidden behind the caret. Reserve the caret
   lane on ANY item that has children, at every level, so no future long label repeats it. */
.ggmm-nav li.menu-item-has-children > a{padding-right:44px!important}
/* the theme's JS injects an orange "+" toggle (.gardeningguider_submenutoggle) — hide it.
   Only our own clean chevron (.ggmm-caret) remains. */
.ggmm-nav .gardeningguider_submenutoggle,
.ggmm-nav [class*="submenutoggle"],.ggmm-nav [class*="submenu-toggle"],.ggmm-nav [class*="menu-toggle"],
.ggmm-nav .menu-item-has-children > a:after,.ggmm-nav .menu-item-has-children > a:before{
  display:none!important;content:none!important;background:none!important;border:0!important}
.ggmm-nav .ggmm-caret{position:absolute;right:2px;top:5px;width:34px;height:34px;border:0;background:none;cursor:pointer;color:#5c6b5c;font-size:16px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:transform .2s}
.ggmm-nav .ggmm-caret:hover{background:#eef6ec;color:#2e7d32}
.ggmm-nav li.ggmm-open > .ggmm-caret{transform:rotate(180deg)}
.ggmm-cta{padding:12px 16px 22px;border-top:1px solid #e7efe4;display:flex;flex-direction:column;gap:9px}
.ggmm-auth{display:flex;gap:9px}
.ggmm-btn{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;font-weight:800;font-size:14px;text-decoration:none;flex:1}
.ggmm-btn-primary{background:#2e7d32;color:#fff!important}.ggmm-btn-primary:hover{background:#1b5e20}
/* login and signup share one colour (both solid green) */
.ggmm-btn-solid,.ggmm-btn-ghost{background:#2e7d32;color:#fff!important}
.ggmm-btn-solid:hover,.ggmm-btn-ghost:hover{background:#1b5e20;color:#fff!important}
body.ggmm-lock{overflow:hidden}
/* very narrow phones (<=380px): tighten the gaps/pill so logo+language+search+user+menu all still fit and nothing gets cut off */
@media (max-width:380px){
  .gardeningguider-header2-top .gardeningguider-headerinner{padding-left:8px!important;padding-right:6px!important;gap:5px!important}
  .gardeningguider-header2-right,.gardeningguider-header2-social-media{gap:5px!important}
  .gardeningguider-header2-social-media .gg-lang-div{padding:0 4px 0 7px!important}
  .gardeningguider-header2-social-media .gg-lang-switch{gap:3px!important}
  .gardeningguider-header2-social-media .gg-lang-switch select.gg-lang-select{font-size:12px!important;padding:0 15px 0 1px!important}
  .ggmm-searchbtn,.ggmm-burger,.gg-acct-guest .gg-acct-toggle,.gg-acct-member .gg-acct-toggle{width:38px!important;height:38px!important;min-width:38px!important}
}
/* == ggf-ac-css == */
.ggf-ac-pop{position:absolute;z-index:100060;background:#fff;border:1px solid #DCE3DC;border-radius:12px;
  box-shadow:0 18px 50px rgba(27,94,32,.18);overflow:hidden;max-height:64vh;overflow-y:auto;min-width:240px}
.ggf-ac-it{display:flex;flex-direction:column;gap:4px;padding:10px 14px;color:#1B5E20;text-decoration:none;
  font-size:14px;line-height:1.35;border-bottom:1px solid #ECEFEC}
.ggf-ac-it:last-child{border-bottom:0}
.ggf-ac-it.on,.ggf-ac-it:hover{background:#EAF4EA}
.ggf-ac-top{display:flex;gap:8px;align-items:center}
.ggf-ac-t{font-weight:700}
.ggf-ac-k{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:#EAF4EA;
  color:#256C29;padding:2px 7px;border-radius:999px;flex:none}
.ggf-ac-d{font-size:12px;color:#5C6B5C;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ggf-ac-it.gg-empty{color:#5C6B5C;justify-content:center;font-style:italic}
/* == ggaip-css == */
/* 2026-08-12 (Gaurav): this button was sitting OVER the ad rails on both sides — the rail's CTA
   ("Get it FREE") was hidden behind it. It is now positioned from the CONTENT COLUMN edge
   rather than the viewport edge: (100vw - content) / 2 is one gutter, then 18px inside it. So it never sits
   over the rail. Where there are no rails at all (small screens), the media query below
   brings it back to the edge.
   The name is shorter too — an icon plus "AI Help" instead of "Ask the Plant Doctor". */
/* Nudged 5px right and 5px up on Gaurav's call (2026-08-20): bottom 18 -> 23, inset 18 -> 13.
   .ggaip-wrap below carries the same numbers so the open panel stays flush with the button. */
/* --gg-fab-b is the shared "how high do the floating buttons sit" number. The JS at the bottom of
   this file raises it while the footer band is on screen, and the push bell reads the SAME variable
   so the two always stay on one line (2026-08-20). */
/* ── LAUNCHER: messenger-style FAB (2026-09-04, Gaurav: "ise messaging type ka movement wala
   button jo jagah kam le … but engaging and designer")
   Before this it was a permanent 250px-wide pill sitting over the content on every page — on a
   390px phone that is two-thirds of the screen width, and the screenshot of the forum shows it
   covering the category list.
   Now it behaves the way a chat launcher is expected to: a 56px circle at rest, and the label
   slides out on hover/focus (and once, briefly, on the first page of a visit) so it is still
   discoverable rather than a mystery button. The DOM is unchanged — only widths animate — so the
   panel, the shared --gg-fab-b line-up with the push bell, and the unread dot all keep working. */
.ggaip-btn{position:fixed;bottom:var(--gg-fab-b,23px);z-index:99998;display:flex;align-items:center;gap:0;
  /* max() is required: on a screen narrower than the content, (100vw - 1170px)/2 is NEGATIVE and
     the button would go OFF screen. A 9px floor is always kept. */
  right:max(9px, calc((100vw - var(--gg-maxw,1170px))/2 + 13px));
  background:linear-gradient(140deg,#33883a,#1B5E20);color:#fff;border:0;border-radius:999px;
  /* overflow is deliberately NOT hidden here: the unread dot sits at top:-3px/right:-3px and was
     being sliced in half by it (seen in the 390px shot). The label does its own clipping. */
  padding:0;height:56px;min-width:56px;width:56px;cursor:pointer;
  font:700 14px/1.2 inherit;box-shadow:0 8px 26px rgba(27,94,32,.34);
  transition:box-shadow .25s ease, transform .25s ease, background .25s ease}
.ggaip-btn:hover{background:linear-gradient(140deg,#2E7D32,#14501a);color:#fff;
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(27,94,32,.42)}
.ggaip-btn:active{transform:translateY(0)}
.ggaip-btn:focus-visible{outline:3px solid rgba(46,125,50,.5);outline-offset:3px}
/* the icon disc is the whole button when collapsed */
.ggaip-btn .l{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;
  border-radius:50%;background:transparent;font-size:24px;line-height:1}
.ggaip-btn .l svg,.ggaip-btn .gg-mark{width:32px!important;height:32px!important;display:block}
/* a soft breathing ring — movement is what makes a chat button get noticed, so it is here rather
   than in extra width. Stops entirely for anyone who asked for less motion. */
.ggaip-btn::before{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(46,125,50,.55);animation:ggaipPulse 2.8s ease-out infinite}
@keyframes ggaipPulse{0%{box-shadow:0 0 0 0 rgba(46,125,50,.5)}70%{box-shadow:0 0 0 16px rgba(46,125,50,0)}100%{box-shadow:0 0 0 0 rgba(46,125,50,0)}}
@media (prefers-reduced-motion:reduce){
  .ggaip-btn,.ggaip-btn .ggaip-btxt{transition:none}
  .ggaip-btn::before{animation:none}
  .ggaip-btn:hover{transform:none}
}
.ggaip-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  background:#BC5028;border:2px solid #fff}
/* the panel uses the same content edge, otherwise it would open over the rail */
.ggaip-wrap{position:fixed;right:max(9px, calc((100vw - var(--gg-maxw,1170px))/2 + 13px));bottom:23px;z-index:99999;width:min(400px,calc(100vw - 28px));
  /* FIXED height, not just a cap (2026-09-03, approved spec: "the panel is fixed-size; a new
     message scrolls inside the log, it never pushes the page") — before, an empty chat was a
     stubby 357px box that looked nothing like the mockup. */
  height:min(640px,calc(100vh - 36px));max-height:min(660px,calc(100vh - 36px));display:none;flex-direction:column;background:#fff;
  border:1px solid #e3e1d9;border-radius:16px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.26)}
/* launcher label — title + "Free · N answers a day". Collapsed to zero width at rest; max-width is
   what animates, because `width:auto` cannot be transitioned. */
.ggaip-btxt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left;
  max-width:0;opacity:0;white-space:nowrap;overflow:hidden;
  transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .22s ease,padding .3s cubic-bezier(.4,0,.2,1)}
/* the button itself has to grow with the label, otherwise the text spills outside the green pill */
.ggaip-btn:hover,.ggaip-btn:focus-visible,.ggaip-btn.is-peek{width:auto}
.ggaip-btn:hover .ggaip-btxt,
.ggaip-btn:focus-visible .ggaip-btxt,
.ggaip-btn.is-peek .ggaip-btxt{max-width:210px;opacity:1;padding-right:20px}
.ggaip-btxt b{font-size:13.5px;font-weight:800}
.ggaip-btxt i{font-style:normal;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.85)}
.ggaip-on{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7ef29a;margin-right:5px;
  box-shadow:0 0 0 3px rgba(126,242,154,.25);vertical-align:middle}
/* On a phone the launcher stays a pure circle — that is the whole point of the change, and a
   sliding label on a touch screen would only be triggered by the tap that opens the chat anyway. */
@media(max-width:520px){
  .ggaip-btxt{display:none}
  .ggaip-btn{width:54px;height:54px;min-width:54px}
  .ggaip-btn .l{width:54px;height:54px}
}
.ggaip-wrap.on{display:flex}
.ggaip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg,#2E7D32,#1B5E20);color:#fff;padding:13px 14px 13px 16px;flex:0 0 auto}
.ggaip-head b{font-size:15px;display:block;line-height:1.3}
.ggaip-head span{font-size:12px;opacity:.9}
.ggaip-x{background:transparent;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;
  padding:4px 6px;border-radius:8px;min-width:34px;min-height:34px}
.ggaip-x:hover{background:rgba(255,255,255,.18)}
.ggaip-body{overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.ggaip-body .ggai{margin:0;border:0;border-radius:0;max-width:none;padding:14px}
.ggaip-body .ggai-top{display:none}
.ggaip-body .ggai-log{max-height:none}
@media (max-width:520px){
  .ggaip-wrap{right:0;bottom:0;width:100vw;max-height:88vh;border-radius:16px 16px 0 0}
  .ggaip-btn{right:9px;bottom:var(--gg-fab-b,19px)}   /* padding removed: the circle sizes itself now */
}
@media print{.ggaip-btn,.ggaip-wrap{display:none !important}}
/* ── robot-gardener icon (2026-09-04): friendly blink + hello-tilt on hover, engaging not noisy ── */
.ggaip-bot{display:block}
.ggaip-btn .ggaip-bot{width:34px!important;height:34px!important}
.ggaip-eye{transform-origin:center;animation:ggaipBlink 4.6s infinite}
@keyframes ggaipBlink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.12)}}
.ggaip-btn:hover .ggaip-bot{animation:ggaipHello .7s ease}
@keyframes ggaipHello{0%{transform:rotate(0)}30%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.ggaip-eye,.ggaip-btn:hover .ggaip-bot{animation:none}}
/* ── chat composer roomier (2026-09-04, Gaurav: "type karne ki jagah kam, box bhara-bhara") ── */
.ggaip-body .ggai{padding:14px 14px 16px}
.ggaip-body .ggai-form{padding:10px 12px;border-radius:14px;align-items:flex-end}
.ggaip-body .ggai-in{min-height:44px;font-size:14px;line-height:1.45;padding:10px 0}
.ggaip-body .ggai-chips{margin:12px 0 12px}
.ggaip-body .ggai-chip{margin:3px 4px 3px 0}
.ggaip-body .ggai-log{gap:12px;margin-bottom:16px}
.ggaip-body .ggai-meter{margin-top:10px}
.ggaip-body .ggai-meta{margin-top:8px}
/* == ggai-css == */
/* ---------------------------------------------------------------------------
   2026-08-13 REDESIGN (Gaurav: "compact + professional ka bhi baap" (even better than compact + professional)).
   The !important on every font-size and margin is deliberate: this panel prints inside
   the_content, where the prose CSS from gg-article-style.php
   `.gardeningguider-entrycontent p{font-size:17px!important;line-height:1.85!important}`
   and `h2{font-size:26px!important;border-bottom:2px}` apply. Without !important
   the panel's UI text turns into article prose (which is exactly what happened on the tools page).
   --------------------------------------------------------------------------- */
.ggai{--g:#2E7D32;--f:#1B5E20;--t:#BC5028;--th:#A64420;--cr:#F7F6F1;--ink:#2D2D2D;--ln:#e3e1d9;
  max-width:760px;margin:24px auto;background:#fff;border:1px solid var(--ln);border-radius:16px;
  /* /ask/ is this panel's own page, where the 760px cap left an empty gutter on both sides
     while every other block took the full width. On its own page the panel takes the full width. */
  padding:0;overflow:hidden;font-size:17px;line-height:1.6;color:var(--ink);
  box-shadow:0 1px 3px rgba(27,94,32,.07)}
.ggai *{box-sizing:border-box}
/* header bar — makes the panel feel like a product rather than a plain box */
.ggai-top{display:flex;align-items:center;gap:11px;padding:13px 16px;
  background:linear-gradient(135deg,var(--g),var(--f));color:#fff}
.ggai-ava{flex:0 0 auto;width:36px;height:36px;border-radius:10px;font-size:18px;line-height:1;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center}
.ggai-ttlwrap{flex:1 1 auto;min-width:0;display:block}
.gardeningguider-entrycontent .ggai-h,
.ggai-h{margin:0 !important;padding:0 !important;border:0 !important;font-size:17px !important;
  font-weight:800 !important;line-height:1.25 !important;color:#fff !important}
.ggai-sub{display:block;margin:2px 0 0 !important;font-size:12.5px !important;
  line-height:1.4 !important;color:rgba(255,255,255,.86) !important}
.ggai-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:4px 10px;white-space:nowrap}
.ggai-dot{width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.ggai-body{padding:14px 16px 15px}
.ggai-log{display:none;flex-direction:column;gap:10px;margin-bottom:14px;max-height:58vh;overflow-y:auto}
.ggai-log.on{display:flex}
.ggai-msg{padding:11px 14px;border-radius:12px;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.ggai-msg.u{background:var(--g);color:#fff;align-self:flex-end;max-width:88%;border-bottom-right-radius:4px}
.ggai-msg.a{background:#EAF4EA;border:1px solid #D4E8D5;color:var(--ink);align-self:flex-start;max-width:96%;border-bottom-left-radius:4px}
.ggai-msg.e{background:#FDECEA;color:#a4261a;align-self:flex-start;max-width:96%}
.ggai-msg.e a{color:#a4261a;font-weight:700}
/* ===== 2026-08-16 — parts added after benchmarking against Claude/ChatGPT/Gemini ===== */
.ggai-txt{white-space:pre-wrap;overflow-wrap:anywhere}
.ggai-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:9px 0 0;
  padding-top:8px;border-top:1px solid rgba(27,94,32,.12)}
.ggai-actbtn{background:transparent;border:1px solid #CFE3D0;color:#3f513f;border-radius:8px;
  font:inherit;font-size:12.5px;line-height:1;padding:0 10px;min-height:32px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:.15s}
.ggai-actbtn:hover:not(:disabled){background:#fff;border-color:var(--g);color:var(--f)}
.ggai-actbtn:disabled{opacity:.5;cursor:default}
.ggai-actbtn.on{background:var(--g);border-color:var(--g);color:#fff}
.ggai-actnote{font-size:12px;color:#5c6b5c}
.ggai-msg.e .ggai-act{border-top-color:rgba(164,38,26,.18)}
.ggai-msg.e .ggai-actbtn{border-color:#f0c4bd;color:#a4261a}
.ggai-msg.ggai-stopped{background:#F4F4F1;color:#5c6b5c;border:1px solid #e2e2dc}
/* Stop — shown only while an answer is still coming in */
.ggai-stop{background:#fff;border:1.5px solid var(--g);color:var(--f);border-radius:10px;
  font:inherit;font-weight:700;font-size:13.5px;min-height:40px;padding:0 16px;cursor:pointer;
  margin-left:8px;flex:0 0 auto}
.ggai-stop:hover{background:var(--g);color:#fff}
.ggai-send.ggai-busy{opacity:.55}
@media(max-width:520px){
  .ggai-act{gap:5px}
  .ggai-actbtn{font-size:12px;padding:0 8px}
  .ggai-stop{margin:8px 0 0;width:100%}
}
.ggai-dots span{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;
  background:#9bb098;animation:ggaib 1.2s infinite}
.ggai-dots span:nth-child(2){animation-delay:.2s}.ggai-dots span:nth-child(3){animation-delay:.4s}
@keyframes ggaib{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ggai-dots span{animation:none;opacity:.6}}
.ggai-chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:13px}
.ggai-chiplab{flex:0 0 100%;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#5b6358;margin-bottom:1px}
/* margin:0 !important — the theme's button rule puts a 25px margin-bottom on every chip,
   which scattered three chips across three separate rows on mobile (measured 2026-08-13). */
.ggai-chip{margin:0 !important;background:#F6F7F6;border:1px solid var(--ln);border-radius:999px;padding:7px 13px;
  font-size:12.8px;font-weight:600;color:var(--f);cursor:pointer;font-family:inherit;
  line-height:1.35;text-align:left;min-height:34px;transition:background .16s,color .16s,border-color .16s}
.ggai-chip:hover,.ggai-chip:focus-visible{background:var(--g);color:#fff;border-color:var(--g)}
/* composer — input and button share one shell (two separate controls did not look professional) */
.ggai-form{display:flex;align-items:flex-end;gap:8px;background:#fff;
  border:1.5px solid var(--ln);border-radius:14px;padding:7px 7px 7px 13px;
  transition:border-color .16s,box-shadow .16s}
.ggai-form:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(46,125,50,.16)}
.ggai-in{flex:1 1 auto;min-width:0;padding:8px 0;border:0;outline:0;background:transparent;
  font-size:16px;font-family:inherit;line-height:1.5;resize:none;min-height:40px;max-height:150px;
  color:var(--ink)}
/* 2026-08-16: in the floating panel (~300px wide) the placeholder wrapped onto a second line and
   was CUT OFF — the screenshot showed half a letter after "Ask anything about your". The textarea
   is one line tall, so keep the placeholder on one line too and clip it with "…" when it does not fit.
   (Shortening the placeholder was not the right fix — on a large screen the full text reads well.) */
.ggai-in::placeholder{color:#9aa69a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ggai-send{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--t);
  color:#fff;border:0;border-radius:12px;padding:0 18px;font-size:14.5px;font-weight:800;
  cursor:pointer;font-family:inherit;min-height:44px;transition:background .16s}
.ggai-send:hover{background:var(--g)}
.ggai-send:disabled{opacity:.55;cursor:not-allowed}
.ggai-send:focus-visible{outline:3px solid rgba(46,125,50,.5);outline-offset:2px}
.gardeningguider-entrycontent .ggai-meta,
.ggai-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin:10px 0 0 !important;font-size:12.5px !important;line-height:1.45 !important;color:#5b6358}
.ggai-up{color:var(--t);font-weight:800;text-decoration:none}
.ggai-up:hover{color:var(--th);text-decoration:underline}
.gardeningguider-entrycontent .ggai-fine,
.ggai-fine{margin:9px 0 0 !important;padding-top:9px;border-top:1px solid #ECEFEC;
  font-size:11.8px !important;color:#9aa69a;line-height:1.5 !important}
/* LIMIT CARD — in place of a red "error". A limit is not a fault; it is the one moment when the user
   genuinely wanted an answer. So this card stays calm, says what comes next, and offers one
   and gives them a single clear button. */
/* 2026-09-04 — "On Gardening Guider" block under an answer. Deliberately quiet: it is a helpful
   next step, not an ad. The plan pitch stays in .ggai-limit (the moment the reader actually wants
   more), because a sales line inside a gardening answer reads as spam and is what the
   helpful-content rules penalise. */
.ggai-links{margin:8px 0 4px;padding:11px 13px;background:#F4F7F3;border:1px solid #dfe8dc;border-radius:12px}
.ggai-links > b{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#5c6b5c;margin-bottom:7px;font-weight:700}
.ggai-link,.ggai-link:link,.ggai-link:visited{display:block;padding:6px 8px;margin:2px -4px;font-size:13.5px;line-height:1.45;
  color:#1B5E20 !important;text-decoration:none;border-radius:8px;min-height:24px}
.ggai-link:hover,.ggai-link:focus{background:#E7F0E5;color:#14471a !important;text-decoration:underline}
@media (max-width:480px){ .ggai-link{font-size:14px;padding:8px} }

.ggai-limit{margin:10px 0 2px;padding:16px 18px;border-radius:14px;
  background:linear-gradient(165deg,#F3F7F2,#E9F2E8);border:1px solid #d8ebd6}
/* DIRECT children only — otherwise a <b> inside the paragraph ("2 questions every day") also became a block,
   took its own line, and split the sentence into three pieces. */
.ggai-limit > b{display:block;font-size:15.5px;color:#1B5E20;margin-bottom:5px}
.ggai-limit p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:#4a5148}
/* !important is required: the theme's prose-link rule (a{color:var(--gg-green)}) was winning here,
   and the button had GREEN text on an ORANGE background — terrible contrast.
   Measured: color rgb(46,125,50) on rgb(188,80,40). Dark background means white text (brand rule). */
.ggai-limit-cta,.ggai-limit-cta:link,.ggai-limit-cta:visited{display:inline-block;background:#BC5028;
  color:#fff !important;text-decoration:none;font-weight:700;font-size:14px;border-radius:10px;padding:10px 18px}
.ggai-limit-cta:hover,.ggai-limit-cta:focus{background:#A64420;color:#fff !important}
.ggai-limit-or{display:block;margin-top:9px;font-size:12px;color:#7a8177}
.page-ask .ggai,.ggai.is-page{max-width:none;margin:0 0 6px}
.ggai-note{color:#7a8177}
.ggai-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== 2026-09-03 — approved MOCKUPS/ai-chat.html spec parts ===== */
.ggai-cam{flex:0 0 auto;width:44px;min-height:44px;border:1.5px solid var(--ln);border-radius:12px;
  background:#fff;font-size:18px;cursor:pointer;transition:border-color .15s,background .15s;align-self:flex-end}
.ggai-cam:hover{border-color:var(--g);background:#F3F7F2}
.ggai-msg.u .ggai-photo{display:block;max-width:180px;max-height:180px;border-radius:10px;margin:0 0 6px}
.gardeningguider-entrycontent .ggai-meter,
.ggai-meter{margin:9px 0 0 !important;display:flex;flex-direction:column;gap:5px}
.ggai-meter-t{font-size:12px !important;color:#5b6358}
.ggai-meter-t b{color:var(--f)}
.ggai-meter-bar{display:block;height:6px;border-radius:99px;background:#ECEFEC;overflow:hidden}
.ggai-meter-bar i{display:block;height:100%;border-radius:99px;background:var(--g);transition:width .3s ease}
.ggai-meter-bar.full i{background:var(--t)}
.ggai-greet{align-self:flex-start}
@media (max-width:520px){.ggai{margin:20px auto;border-radius:12px}
  .ggai-top{padding:11px 13px}.ggai-body{padding:12px 13px 13px}
  .ggai-sub{display:none}
  .ggai-form{flex-direction:column;align-items:stretch;padding:9px}
  .ggai-send{width:100%;justify-content:center}}
/* == ggauth-css == */
#ggauth-wrap{position:fixed;inset:0;z-index:100050;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,40,20,.5);backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
#ggauth-wrap.on{opacity:1;visibility:visible}
#ggauth-card{position:relative;width:min(410px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:15px 24px 13px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(238,246,238,.85));
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.72);box-shadow:0 26px 70px rgba(15,40,20,.46),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(18px) scale(.955);transition:transform .34s cubic-bezier(.22,1,.36,1)}
#ggauth-wrap.on #ggauth-card{transform:none}
/* reset the theme's global input, label and form margins, otherwise the fields get a double gap */
#ggauth-card form,#ggauth-card .ggauth-field,#ggauth-card .ggauth-field input,#ggauth-card .ggauth-field label{margin:0!important}
/* parent theme ka global `button{margin:0 0 25px;padding:11px 25px}` modal ke tabs/CTA/close pe se hatao —
   otherwise a 25px bottom margin and 25px side padding on every button makes the card tall and scrollable.
   Scoped to the modal only; buttons elsewhere are untouched. The component classes supply their own height and centring. */
#ggauth-card button{margin:0!important;padding:0!important;background-color:transparent}
#ggauth-card .ggauth-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:11px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;
  background:linear-gradient(135deg,#BC5028,#A64420);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 4px 12px rgba(199,85,44,.3);transition:.15s}
#ggauth-card .ggauth-x:hover{filter:brightness(1.07);transform:translateY(-1px)}
.ggauth-head{text-align:center;margin-bottom:9px}
.ggauth-logo{display:block;height:34px;width:auto;max-width:172px;margin:0 auto 5px;object-fit:contain}
.ggauth-ic{width:52px;height:52px;margin:0 auto 8px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:27px;
  background:linear-gradient(135deg,rgba(46,125,50,.18),rgba(27,94,32,.10));border:1px solid rgba(46,125,50,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.ggauth-head h3{margin:0 0 2px;font-size:1.1rem;font-weight:800;color:#153f1a;line-height:1.18}
.ggauth-head p{margin:0;font-size:.8rem;color:#4a6350;line-height:1.35}
/* segmented tabs — square glass */
.ggauth-tabs{display:flex;gap:4px;padding:4px;margin:0 0 9px;border-radius:12px;background:rgba(46,125,50,.09);border:1px solid rgba(46,125,50,.15)}
.ggauth-tab{flex:1;height:34px;border:0;border-radius:9px;cursor:pointer;font-size:.9rem;font-weight:800;color:#5c7361;background:transparent;transition:background .16s,color .16s,box-shadow .16s}
/* Gaurav 2026-07-14: white hover → theme green + white text */
.ggauth-tab:hover:not(.on){color:#fff;background:#2E7D32}
.ggauth-tab.on{background:#fff;color:#1B5E20;box-shadow:0 3px 10px rgba(27,94,32,.14)}
.ggauth-form{display:none;flex-direction:column;gap:6px}
.ggauth-form.on{display:flex}
/* software-style ROW: label left, input right (ek line me) — desktop/laptop */
.ggauth-field{position:relative;display:flex;align-items:center;gap:10px}
.ggauth-field label{flex:0 0 84px;font-size:.82rem;font-weight:700;color:#3c5140;text-align:left;line-height:1.2}
.ggauth-field input{flex:1;min-width:0;height:30px;border-radius:4px;padding:0 12px;font-size:.9rem;color:#173d1c;
  background:rgba(255,255,255,.62);border:1.5px solid rgba(46,125,50,.22);backdrop-filter:blur(6px);outline:none;transition:.15s;box-sizing:border-box;width:100%}
.ggauth-field input::placeholder{color:#8aa08f}
.ggauth-field input:focus{border-color:#2E7D32;background:rgba(255,255,255,.9)}
.ggauth-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
/* primary CTA — square, terracotta with glass sheen */
.ggauth-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:1px;border-radius:12px;
  font-size:1.02rem;font-weight:800;color:#fff;cursor:pointer;letter-spacing:.01em;
  background:linear-gradient(135deg,#BC5028,#A64420);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 12px 28px rgba(199,85,44,.42),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .16s,box-shadow .16s,filter .16s}
/* Gaurav 2026-07-14: HOVER only = theme green with white text (the default stays terracotta)
   the #ggauth-card prefix is required to beat the ID rule #ggauth-card button{background:transparent} */
#ggauth-card .ggauth-cta:hover{background:#2E7D32!important;color:#fff!important;transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(27,94,32,.42),inset 0 1px 0 rgba(255,255,255,.45);filter:none}
.ggauth-cta[disabled]{opacity:.7;cursor:default;transform:none;filter:none}
.ggauth-msg{display:none;margin:2px 0 4px;padding:10px 13px;border-radius:11px;font-size:.86rem;font-weight:600;line-height:1.4}
.ggauth-msg.err{display:block;background:rgba(214,60,40,.10);border:1px solid rgba(214,60,40,.3);color:#a5321f}
.ggauth-msg.ok{display:block;background:rgba(46,125,50,.12);border:1px solid rgba(46,125,50,.3);color:#1B5E20}
.ggauth-alt{margin-top:8px;text-align:center;font-size:.83rem;color:#2c4432;font-weight:600}
/* the switch is a <button> now (it opens the other mode, it does not navigate) — styled to look
   exactly like the link it replaced, and #A64420 instead of #C7552C so the text clears WCAG AA
   on this panel (TESTING/Lighthouse, 18 Aug 2026). */
.ggauth-alt a,.ggauth-alt .ggauth-switch{color:#A64420;font-weight:700;text-decoration:none;cursor:pointer;
  background:none;border:0;padding:0;font:inherit;min-height:24px}
.ggauth-alt a:hover,.ggauth-alt .ggauth-switch:hover{text-decoration:underline}
.ggauth-alt .ggauth-switch:focus-visible{outline:3px solid #2E7D32;outline-offset:2px;border-radius:6px}
.ggauth-forgot{text-align:right;font-size:.8rem;margin-top:-4px}
.ggauth-forgot a{color:#4a6350;text-decoration:none}
.ggauth-forgot a:hover{color:#1B5E20;text-decoration:underline}
.ggauth-note{font-size:.7rem;color:#6b7d70;text-align:center;line-height:1.4;margin-top:1px}
.ggauth-note a{color:#C7552C;font-weight:700;text-decoration:underline}
.ggauth-note a:hover{color:#a5321f}
/* social — OR divider + Google/Facebook/Apple (glass rows, square) */
.ggauth-social{margin-top:9px;display:flex;flex-direction:column;gap:6px}
.ggauth-or{display:flex;align-items:center;gap:10px;color:#3c5140;font-size:.68rem;font-weight:800;letter-spacing:.07em;margin-bottom:1px}
.ggauth-or:before,.ggauth-or:after{content:"";flex:1;height:1px;background:rgba(46,125,50,.18)}
/* 3 social buttons in ONE compact row (icon + short name) */
.ggauth-sbtns{display:flex;gap:7px}
.ggauth-sbtn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:11px;cursor:pointer;
  font-size:.83rem;font-weight:700;color:#2D2D2D;text-decoration:none;
  background:rgba(255,255,255,.6);border:1.5px solid rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.16s}
/* Gaurav 2026-07-15: NO green hover on the social buttons — the original glass hover is back */
.ggauth-sbtn:hover{background:rgba(255,255,255,.92);border-color:#2E7D32;transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,45,25,.12)}
.ggauth-sbtn svg{flex:none}
.ggauth-sbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:360px){.ggauth-sbtn span{display:none}} /* very narrow: icon-only */
/* Nextend (real) buttons, if active — normalize to our square glass look */
.ggauth-social .nsl-container-buttons{display:flex;flex-direction:column;gap:9px}
.ggauth-social .nsl-button{border-radius:12px!important;box-shadow:none!important;width:100%}
/* CAPTCHA row — compact single line: "a + b =" + refresh + answer box (square, brand colors) */
.ggauth-cap{display:flex;align-items:center;gap:7px}
.ggauth-cap-q{flex:none;font-weight:800;font-size:1rem;color:#1B5E20;white-space:nowrap;letter-spacing:.5px;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}
.ggauth-cap-q b{color:#C7552C}
.ggauth-cap-new{flex:none;width:30px;height:30px;border-radius:4px!important;border:1.5px solid rgba(46,125,50,.28)!important;
  background:rgba(255,255,255,.65)!important;color:#2E7D32;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .15s,border-color .15s}
/* Gaurav 2026-07-14: white hover → theme green + white icon */
.ggauth-cap-new:hover{background:#2E7D32!important;border-color:#2E7D32!important;color:#fff!important;transform:rotate(180deg)}
.ggauth-cap input[name="captcha"]{flex:1;min-width:0;height:30px;margin:0!important;border-radius:4px;padding:0 10px;font-size:.9rem;color:#173d1c;text-align:center;
  background:rgba(255,255,255,.62);border:1.5px solid rgba(46,125,50,.22);outline:none;transition:.15s;box-sizing:border-box}
.ggauth-cap input[name="captcha"]:focus{border-color:#2E7D32;background:rgba(255,255,255,.92)}
@media(max-width:480px){#ggauth-card{padding:18px 20px 14px;border-radius:18px}.ggauth-head h3{font-size:1.16rem}
  /* mobile: keep label and input side by side (a row), with 25% more input height for touch */
  .ggauth-field label{flex:0 0 74px}
  .ggauth-field input{height:38px}
  .ggauth-cap input[name="captcha"]{height:38px}.ggauth-cap-new{width:38px;height:38px}}
/* SHORT screens (laptops) — extra compact so the social row fits without scrolling */
@media(max-height:780px){
  #ggauth-card{padding:12px 24px 11px}
  .ggauth-head{margin-bottom:7px}
  .ggauth-logo{height:30px;margin-bottom:4px}
  .ggauth-head p{display:none}
  .ggauth-tabs{margin-bottom:8px}
  .ggauth-form{gap:5px}
  .ggauth-social{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){#ggauth-card{transform:none;transition:opacity .2s}}