/* manageyourstore.site shared theme (Forest & Gold, 2026-10) - loaded last on every page.
   Change the colours in :root only; everything else reads from these variables. */
:root {
  --bg: #f5f7f6;            /* page background */
  --surface: #ffffff;  /* cards and boxes */
  --ink: #0a3b36;          /* headings */
  --text: #2b3a37;        /* body text */
  --muted: #66756f;      /* small / secondary text */
  --line: #dbe5e1;        /* borders */
  --primary: #0a4640;  /* header, footer, dark bands */
  --primary-2: #13675d; /* second colour of the hero gradient */
  --on-primary: #ffffff;   /* text on primary */
  --accent: #e3b04b;    /* buttons / calls to action */
  --on-accent: #1d1d1d;
  --link: #0f6b5f;
}

body { background: var(--bg) !important; color: var(--text); font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
h1, h2, h3 { color: var(--ink); }
p { color: var(--text); }
a { color: var(--link); }

/* header / nav / footer */
header, .footer, footer { background: var(--primary) !important; color: var(--on-primary) !important; }
header h1, header h2, header a, nav ul li a, .footer p, footer p, .footer a, footer a { color: var(--on-primary) !important; }
.home-icon i { color: var(--primary) !important; }

/* hero bands (home, features, tutorial) */
.first-section, .second-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%) !important;
}
.first-section h1, .first-section h2, .first-section h3, .first-section p,
.second-section h1, .second-section h2, .second-section h3, .second-section p { color: var(--on-primary) !important; }
.fourth-section, .fifth-section { background: var(--primary) !important; }
.fourth-section h1, .fourth-section h2, .fourth-section h3, .fourth-section p,
.fifth-section h1, .fifth-section h2, .fifth-section h3, .fifth-section p { color: var(--on-primary) !important; }
.third-section { background: var(--bg) !important; }

/* cards and boxes */
.container, .feature, .pricing-card, .pay-box, .explanation, .contact-container {
  background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.container h1, .container h2, .container h3, .feature h3, .pricing-card h2, .pay-box h3, .explanation h3 { color: var(--ink) !important; }
.container p, .feature p, .pay-box p, .explanation p { color: var(--text) !important; }
.price { color: var(--primary) !important; }
.price-period { color: var(--muted) !important; }

/* buttons and calls to action */
button, .button, .download-btn, a.download-btn {
  background: var(--accent) !important; color: var(--on-accent) !important; border: 0 !important;
  border-radius: 10px !important; font-weight: 700;
}
button:hover, .button:hover, .download-btn:hover { filter: brightness(.93); }
/* download buttons sit side by side and wrap cleanly on phones instead of overlapping */
a.download-btn { display: inline-block !important; margin: 6px 4px !important; line-height: 1.35 !important; text-decoration: none; }
.wa-btn { border-radius: 10px !important; }   /* WhatsApp keeps its own green */

/* highlighted banner line (download page) */
.promo-bar, .container .promo-bar, body p.promo-bar { color: var(--on-primary) !important; background: var(--primary) !important; text-align: center;
             border-radius: 10px; padding: 8px 14px; font-weight: 700; line-height: 1.6; }
/* small grey helper notes */
.note-small, [style*="color:#666"], [style*="6c757d"] { color: var(--muted) !important; }

input[type="text"], input[type="email"], textarea, select { border: 1px solid var(--line) !important; border-radius: 8px; }

/* shared top bar (site-nav.js): Home + language on every page */
.site-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--primary); padding: 8px 16px; position: sticky; top: 0; z-index: 50; direction: ltr;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
.site-bar a.site-bar-home { color: var(--on-primary) !important; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); }
.site-bar a.site-bar-home:hover { background: rgba(255, 255, 255, .12); }
.site-bar a.site-bar-home span { direction: inherit !important; text-align: inherit !important; color: inherit !important; }
.site-bar-lang { display: flex; align-items: center; gap: 6px; color: var(--on-primary); font-size: 17px; }
.site-bar-lang select { font: inherit; font-size: 14px; font-weight: 600; padding: 5px 8px; border-radius: 8px !important;
  border: 0 !important; background: #fff; color: var(--ink); cursor: pointer; }
/* the old per-page home icons and the home page's old selector are replaced by the bar */
.home-icon, [class^="home-icon"], .language-selector { display: none !important; }

/* download page: "Email me the Windows link" box */
.email-link-box { margin: 6px auto 18px; max-width: 520px; background: var(--bg); border: 1px dashed var(--line);
  border-radius: 14px; padding: 14px 16px; }
.email-link-box .elb-title { font-size: 15px; font-weight: 600; color: var(--ink) !important; margin: 0 0 10px; text-align: center; }
.elb-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.elb-form input[type="email"] { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; background: #fff; }
.elb-form .elb-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 15px; cursor: pointer; }
.email-link-box .elb-error { color: #b42318 !important; font-size: 14px; margin: 8px 0 0; text-align: center; }
.email-link-box .elb-hint { color: var(--muted) !important; font-size: 13px; margin: 8px 0 0; text-align: center; word-break: break-word; }
/* each line picks its own direction from its text (Arabic right-to-left, others left-to-right) */
.email-link-box .elb-title, .email-link-box .elb-error, .email-link-box .elb-hint, .elb-form .elb-btn { unicode-bidi: plaintext; }
/* download page: small trust lines under the download buttons */
.container p.trust-line { font-size: 13px; color: var(--muted) !important; margin: 4px 0; padding: 0 12px; text-align: center; unicode-bidi: plaintext; }
.container p.trust-line + p.trust-line { margin-bottom: 12px; }

/* trial page: swipeable picture gallery + zoom */
.gallery { margin: 26px 0 18px; text-align: center; }
.gallery .gal-title { font-size: 22px; margin: 0 0 12px; unicode-bidi: plaintext; }
.gal-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; padding: 4px 2px 10px; direction: ltr; scrollbar-width: none; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-slide { flex: 0 0 84%; margin: 0; scroll-snap-align: center; }
.gal-slide img { width: 100%; height: auto; display: block; border-radius: 14px; cursor: zoom-in;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18); background: var(--primary); aspect-ratio: 4 / 5; }
.gal-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; direction: ltr; }
.gal-nav .gal-arrow { width: 38px; height: 38px; padding: 0 !important; border-radius: 50% !important; font-size: 24px; line-height: 1;
  background: var(--primary) !important; color: var(--on-primary) !important; }
.gal-dots { display: flex; gap: 8px; }
.gal-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); cursor: pointer; display: inline-block; }
.gal-dots i.on { background: var(--primary); }
.container p.gal-tip { font-size: 13px; color: var(--muted) !important; margin: 8px 0 14px; unicode-bidi: plaintext; }
.gal-zoom { position: fixed; inset: 0; background: rgba(5, 25, 22, .92); z-index: 100; display: flex; align-items: center;
  justify-content: center; padding: 16px; cursor: zoom-out; }
.gal-zoom[hidden] { display: none; }
.gal-zoom img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.gal-zoom .gal-close { position: fixed; top: 12px; right: 14px; width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important;
  font-size: 28px; line-height: 1; background: #fff !important; color: var(--ink) !important; }