/*
|--------------------------------------------------------------------------
| Optional Custom Font: Telegraf Regular
|--------------------------------------------------------------------------
| Upload your licensed font file to:
| public/fonts/telegraf-regular.woff2
|--------------------------------------------------------------------------
*/
@font-face {
  font-family: "Telegraf";
  src: url("/fonts/telegraf-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
|--------------------------------------------------------------------------
| WhatsGulf Public Website Theme
|--------------------------------------------------------------------------
| Change website colors, background, buttons, headings, subheadings,
| paragraph text, cards, borders, and font from this one file.
| This file is for PUBLIC WEBSITE only.
| It does not affect admin/customer dashboards unless they use website layout.
|--------------------------------------------------------------------------
*/

:root {
  /* Font */
  --wg-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Main brand colors */
  --wg-primary: #10b981;
  --wg-primary-dark: #059669;
  --wg-primary-soft: #ecfdf5;

  /* Website backgrounds */
  --wg-bg-main: #ffffff;
  --wg-bg-soft: #f8fafc;
  --wg-bg-dark: #020617;
  --wg-hero-bg: #020617;

  /* Text colors */
  --wg-heading: #0f172a;
  --wg-subheading: #334155;
  --wg-paragraph: #475569;
  --wg-muted: #64748b;
  --wg-white: #ffffff;

  /* Cards and borders */
  --wg-card-bg: #ffffff;
  --wg-card-soft-bg: #f8fafc;
  --wg-border: #e2e8f0;
  --wg-border-soft: #f1f5f9;

  /* Buttons */
  --wg-button-bg: var(--wg-primary);
  --wg-button-bg-hover: var(--wg-primary-dark);
  --wg-button-text: #ffffff;

  /* Layout */
  --wg-section-padding: 80px;
  --wg-card-radius: 24px;
  --wg-button-radius: 999px;
}

/* Global public website font */
body {
  font-family: var(--wg-font-family);
  background: var(--wg-bg-main);
  color: var(--wg-paragraph);
}

/* Reusable theme classes for future website pages */
.wg-theme-section {
  background: var(--wg-bg-main);
  padding-top: var(--wg-section-padding);
  padding-bottom: var(--wg-section-padding);
}

.wg-theme-section-soft {
  background: var(--wg-bg-soft);
  padding-top: var(--wg-section-padding);
  padding-bottom: var(--wg-section-padding);
}

.wg-theme-heading {
  color: var(--wg-heading);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.wg-theme-subheading {
  color: var(--wg-subheading);
  font-weight: 700;
}

.wg-theme-text {
  color: var(--wg-paragraph);
  line-height: 1.8;
}

.wg-theme-muted {
  color: var(--wg-muted);
}

.wg-theme-card {
  background: var(--wg-card-bg);
  border: 1px solid var(--wg-border);
  border-radius: var(--wg-card-radius);
}

.wg-theme-button {
  background: var(--wg-button-bg);
  color: var(--wg-button-text);
  border-radius: var(--wg-button-radius);
  font-weight: 900;
}

.wg-theme-button:hover {
  background: var(--wg-button-bg-hover);
}

/*
|--------------------------------------------------------------------------
| Brand class overrides
|--------------------------------------------------------------------------
| These help many existing website buttons and brand items follow this file.
|--------------------------------------------------------------------------
*/

.bg-brand {
  background-color: var(--wg-primary) !important;
}

.hover\:bg-brandDark:hover {
  background-color: var(--wg-primary-dark) !important;
}

.text-brand {
  color: var(--wg-primary) !important;
}

.hover\:text-brand:hover {
  color: var(--wg-primary) !important;
}

.border-brand {
  border-color: var(--wg-primary) !important;
}

.hover\:border-brand:hover {
  border-color: var(--wg-primary) !important;
}

.from-brand {
  --tw-gradient-from: var(--wg-primary) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-brandDark {
  --tw-gradient-to: var(--wg-primary-dark) var(--tw-gradient-to-position) !important;
}

/*
|--------------------------------------------------------------------------
| Typography helpers
|--------------------------------------------------------------------------
| Later we will add these classes to headings/subheadings page by page.
|--------------------------------------------------------------------------
*/

.wg-main-heading {
  color: var(--wg-heading);
  font-family: var(--wg-font-family);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.wg-section-heading {
  color: var(--wg-heading);
  font-family: var(--wg-font-family);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.wg-section-subheading {
  color: var(--wg-paragraph);
  font-family: var(--wg-font-family);
  font-weight: 500;
  line-height: 1.75;
}

/*
|--------------------------------------------------------------------------
| Easy future color examples
|--------------------------------------------------------------------------
| To change full website brand later, only change the values at top:
|
| Green:  --wg-primary:#10b981; --wg-primary-dark:#059669;
| Blue:   --wg-primary:#2563eb; --wg-primary-dark:#1d4ed8;
| Purple: --wg-primary:#7c3aed; --wg-primary-dark:#5b21b6;
| Orange: --wg-primary:#f97316; --wg-primary-dark:#ea580c;
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Public Footer ChatGPT Style Theme
|--------------------------------------------------------------------------
*/
.wg-footer {
  background: #202123 !important;
  color: #ececf1 !important;
}

.wg-footer .text-slate-300 {
  color: #ececf1 !important;
}

.wg-footer .text-slate-400,
.wg-footer .text-slate-500,
.wg-footer p,
.wg-footer li,
.wg-footer span {
  color: #c5c5d2 !important;
}

.wg-footer .text-white,
.wg-footer h1,
.wg-footer h2,
.wg-footer h3,
.wg-footer .font-black {
  color: #ffffff !important;
}

.wg-footer a {
  color: #ececf1 !important;
}

.wg-footer a:hover {
  color: #ffffff !important;
}

.wg-footer .border-slate-800 {
  border-color: #343541 !important;
}

.wg-footer .bg-white\/10 {
  background-color: rgba(255,255,255,0.08) !important;
}

.wg-footer .hover\:bg-white\/15:hover {
  background-color: rgba(255,255,255,0.14) !important;
}


/*
|--------------------------------------------------------------------------
| Public Website Mega Menu Font Only
|--------------------------------------------------------------------------
| Only changes mega menu font and font weight.
| It does NOT change mega menu colors.
*/
.wg-mega-menu,
.wg-mega-menu * {
  font-family: var(--wg-font-family) !important;
}

.wg-mega-menu .font-black,
.wg-mega-menu .font-bold,
.wg-mega-menu .font-semibold {
  font-weight: var(--wg-heading-weight, 500) !important;
  letter-spacing: -0.01em;
}

.wg-mega-menu .text-xs,
.wg-mega-menu .text-sm {
  font-weight: var(--wg-body-weight, 400) !important;
}


/* WG_PRICE_NUMBER_SIZE_ONLY_V1 */
[data-section-type="pricing"] [data-home-plan-price] {
  font-size: 58px !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
  letter-spacing: -0.05em !important;
  color: #0f172a !important;
  display: inline-block !important;
}

[data-section-type="pricing"] [data-home-plan-cycle] {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #64748b !important;
  display: inline-block !important;
  margin-left: 4px !important;
}

@media (max-width: 640px) {
  [data-section-type="pricing"] [data-home-plan-price] {
    font-size: 46px !important;
  }

  [data-section-type="pricing"] [data-home-plan-cycle] {
    font-size: 14px !important;
  }
}