/* ============================================================
   Glo n Go Toolkit — brand styles + homepage + plugin overrides
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --tg-teal: #00a99d;
  --tg-teal-dark: #008c82;
  --tg-teal-50: #e6f7f5;
  --tg-teal-100: #c2ede9;
  --tg-ink: #16313e;
  --tg-ink-soft: #4a6573;
  --tg-ink-50: #f4f7f8;
  --tg-line: #e4ebee;
  --tg-sun: #ffc224;
  --tg-radius: 16px;
  --tg-pill: 999px;
  --tg-shadow: 0 10px 30px rgba(15, 37, 48, 0.08);
}

body.glongo-landing {
  font-family: "Inter", system-ui, sans-serif;
}

/* ============================================================
   HOMEPAGE ([glongo_home] shortcode)
   ============================================================ */

.tg-wrap {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--tg-ink-soft);
  line-height: 1.6;
}
.tg-wrap h1, .tg-wrap h2, .tg-wrap h3, .tg-wrap h4 {
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--tg-ink);
  line-height: 1.15;
  margin: 0;
}
.tg-wrap p { margin: 0; }
.tg-wrap img { max-width: 100%; display: block; }

.tg-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Buttons */
.tg-btn {
  display: inline-block;
  background: var(--tg-teal);
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: var(--tg-pill);
  text-decoration: none !important;
  transition: background 0.2s ease;
  border: none;
}
.tg-btn:hover { background: var(--tg-teal-dark); color: #fff; }
.tg-btn--sun { background: var(--tg-sun); color: var(--tg-ink) !important; }
.tg-btn--sun:hover { background: #f5a623; }
.tg-btn--ghost {
  background: var(--tg-teal-50);
  color: var(--tg-teal-dark) !important;
}
.tg-btn--ghost:hover { background: var(--tg-teal-100); }

/* Eyebrow + headings */
.tg-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tg-teal-dark);
  margin-bottom: 10px;
}
.tg-h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 700; }
.tg-sub { margin-top: 12px; font-size: 16px; max-width: 560px; }

/* ---------- Hero ---------- */
.tg-hero {
  background: linear-gradient(180deg, var(--tg-teal-50) 0%, #ffffff 100%);
  padding: 70px 0 80px;
}
.tg-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.tg-hero__badge {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--tg-teal-100);
  color: var(--tg-teal-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--tg-pill);
  box-shadow: var(--tg-shadow);
}
.tg-hero h1 {
  margin-top: 20px;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
}
.tg-hero h1 span { color: var(--tg-teal); }
.tg-hero__text { margin-top: 18px; font-size: 18px; max-width: 540px; }
.tg-hero__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.tg-hero__trust {
  margin-top: 26px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 14px;
}
.tg-hero__trust strong { color: var(--tg-ink); }
.tg-hero__img img {
  border-radius: 24px;
  width: 100%;
  height: 480px;
  object-fit: cover;
  box-shadow: 0 25px 60px rgba(0, 90, 84, 0.18);
}

/* ---------- Stats bar ---------- */
.tg-stats {
  border-top: 1px solid var(--tg-line);
  border-bottom: 1px solid var(--tg-line);
  padding: 32px 0;
}
.tg-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.tg-stats__num {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--tg-teal-dark);
}
.tg-stats__label { font-size: 14px; }

/* ---------- Services grid ---------- */
.tg-section { padding: 72px 0; }
.tg-section--alt { background: var(--tg-ink-50); }

.tg-cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tg-card {
  background: #fff;
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  overflow: hidden;
  text-decoration: none !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  display: block;
}
.tg-card:hover { box-shadow: var(--tg-shadow); border-color: var(--tg-teal-100); }
.tg-card img { width: 100%; height: 190px; object-fit: cover; }
.tg-card__body { padding: 18px 20px 20px; }
.tg-card__title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--tg-ink);
}
.tg-card__meta { margin-top: 8px; font-size: 14px; color: var(--tg-ink-soft); }
.tg-card__meta strong { color: var(--tg-teal-dark); }

/* ---------- How it works ---------- */
.tg-steps {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tg-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  padding: 36px 26px 26px;
}
.tg-step__num {
  position: absolute;
  top: -16px;
  left: 26px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tg-sun);
  color: var(--tg-ink);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-step__icon { font-size: 30px; }
.tg-step h3 { margin-top: 12px; font-size: 18px; font-weight: 600; }
.tg-step p { margin-top: 8px; font-size: 14px; }

/* ---------- Testimonials ---------- */
.tg-quotes { background: var(--tg-teal); }
.tg-quotes .tg-eyebrow { color: var(--tg-teal-100); }
.tg-quotes .tg-h2 { color: #fff; }
.tg-quotes__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tg-quote {
  background: #fff;
  border-radius: var(--tg-radius);
  padding: 28px;
  box-shadow: 0 12px 30px rgba(0, 66, 62, 0.25);
}
.tg-quote__stars { color: var(--tg-sun); font-size: 16px; letter-spacing: 2px; }
.tg-quote__text { margin-top: 14px; font-size: 14px; }
.tg-quote__who { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.tg-quote__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--tg-teal-50);
  color: var(--tg-teal-dark);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tg-quote__name { font-size: 14px; font-weight: 600; color: var(--tg-ink); }
.tg-quote__area { font-size: 12px; }

/* ---------- Become a pro CTA ---------- */
.tg-pro {
  background: var(--tg-ink);
  border-radius: 24px;
  padding: clamp(36px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.tg-pro .tg-eyebrow { color: var(--tg-teal-100); }
.tg-pro h2 { color: #fff; font-size: clamp(26px, 4vw, 36px); font-weight: 700; }
.tg-pro p { margin-top: 14px; color: rgba(255, 255, 255, 0.7); }
.tg-pro ul { margin: 22px 0 0; padding: 0; list-style: none; }
.tg-pro li {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}
.tg-pro li::before {
  content: "✓";
  display: inline-flex;
  width: 22px; height: 22px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(0, 169, 157, 0.25);
  color: #54cfc4;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.tg-pro img {
  border-radius: 18px;
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .tg-hero__grid, .tg-pro { grid-template-columns: 1fr; }
  .tg-hero__img { display: none; }
  .tg-cards, .tg-steps, .tg-quotes__grid { grid-template-columns: 1fr 1fr; }
  .tg-pro img { height: 260px; }
}
@media (max-width: 600px) {
  .tg-cards, .tg-steps, .tg-quotes__grid { grid-template-columns: 1fr; }
  .tg-stats__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PLUGIN OVERRIDES — Dokan / WooCommerce / Bookings / Amelia
   (safe to keep even if a plugin isn't installed)
   ============================================================ */

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.dokan-btn,
.dokan-btn-theme,
.wc-bookings-booking-form-button {
  background: var(--tg-teal) !important;
  border-color: var(--tg-teal) !important;
  color: #fff !important;
  border-radius: var(--tg-pill) !important;
  font-weight: 600 !important;
}
.woocommerce a.button:hover,
.dokan-btn:hover,
.dokan-btn-theme:hover,
.wc-bookings-booking-form-button:hover {
  background: var(--tg-teal-dark) !important;
  border-color: var(--tg-teal-dark) !important;
}

/* Dokan vendor cards */
.dokan-seller-wrap .dokan-single-seller {
  border-radius: var(--tg-radius) !important;
  border: 1px solid var(--tg-line) !important;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.dokan-seller-wrap .dokan-single-seller:hover { box-shadow: var(--tg-shadow); }
.dokan-single-seller .store-img img,
.dokan-store-sidebar .profile-img img {
  border-radius: 50% !important;
  border: 4px solid #fff;
}
.dokan-single-seller .featured-favourite .featured-label {
  background: var(--tg-sun) !important;
  color: var(--tg-ink) !important;
  border-radius: var(--tg-pill);
  font-weight: 700;
}

/* Stars */
.dokan-seller-rating .fa-star,
.woocommerce .star-rating span::before { color: var(--tg-sun) !important; }

/* Woo product cards */
.woocommerce ul.products li.product {
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--tg-shadow); }
.woocommerce ul.products li.product .price { color: var(--tg-teal-dark) !important; }

/* WooCommerce Bookings calendar */
.wc-bookings-date-picker .ui-datepicker td.bookable a {
  background: var(--tg-teal-50);
  color: var(--tg-teal-dark);
  border-radius: 10px;
  font-weight: 600;
}
.wc-bookings-date-picker .ui-datepicker td a.ui-state-active,
.wc-bookings-date-picker .ui-datepicker td.bookable a:hover {
  background: var(--tg-teal) !important;
  color: #fff !important;
}
#wc-bookings-booking-form .block-picker li a {
  border-radius: 12px !important;
  border: 2px solid var(--tg-line) !important;
}
#wc-bookings-booking-form .block-picker li a:hover,
#wc-bookings-booking-form .block-picker li a.selected {
  border-color: var(--tg-teal) !important;
  background: var(--tg-teal-50) !important;
  color: var(--tg-teal-dark) !important;
}

/* Amelia booking widget (v2 step form uses CSS vars) */
#amelia-app-booking,
.amelia-v2-booking {
  --amelia-c-primary: var(--tg-teal) !important;
  --amelia-c-primary-op-25: rgba(0, 169, 157, 0.25) !important;
  --amelia-c-primary-op-10: rgba(0, 169, 157, 0.1) !important;
  --amelia-font-family: "Inter", system-ui, sans-serif !important;
}

/* Forms */
.dokan-form-control:focus,
.woocommerce input:focus { border-color: var(--tg-teal) !important; }