/* Imagine Holidays theme layer over the Tripora Webflow template.
   Rule: only colours, fonts and small new components live here. Layout, spacing and
   proportions stay exactly as the template CSS defines them. */

:root {
  /* brand (taken from the logo) */
  --ih-navy: #133f86;          /* logo "Imagine" blue: buttons, links */
  --ih-navy-hover: #1b56b0;
  --ih-ink: #0f2745;           /* deep navy: headings, dark panels */
  --ih-turq: #1bb3c1;          /* logo wave turquoise */
  --ih-turq-deep: #0b8e9b;     /* accent words, icons on light */
  --ih-turq-tint: #d2f1ef;
  --ih-gold: #f2a900;          /* logo sun */
  --ih-gold-deep: #d98a00;
  --ih-gold-tint: #fff3d1;
  --ih-sand: #fbe9c6;
  --ih-sky: #d5ebf7;
  --ih-promo: #e8590c;         /* sun orange for discounts */

  /* template palette remapped (same roles, new hues) */
  --color--primary-1: var(--ih-gold-tint);   /* was cream yellow */
  --color--primary-2: var(--ih-turq-tint);   /* was pink */
  --color--primary-3: var(--ih-sand);        /* was peach */
  --color--primary-4: var(--ih-sky);         /* was light blue */
  --color--secondary-1: #7360f2;             /* was WhatsApp green, now Viber */
  --color--secondary-2: var(--ih-turq-deep);
  --color--secondary-3: var(--ih-promo);
  --color--secondary-3-op50: #e8590c80;
  --color--secondary-3-op20: #e8590c33;
  --color--secondary-3-op10: #e8590c1a;
  --color--secondary-4: var(--ih-gold);
  --color--gray-1: var(--ih-ink);
  --color--gray-1-op10: #0f27451a;
  --color--gray-1-op30: #0f27454d;
  --color--gray-1-op70: #0f2745b3;
  --color--gray-4: #f5f7fa;

  /* body font: Stack Sans Headline has no Cyrillic; Manrope is the closest metric match */
  --_typography---font-family--body: "Manrope", "Stack Sans Headline", Arial, sans-serif;
}

/* ---------- brand accents ---------- */
.accent-word-text { color: var(--ih-turq-deep); }
.text-white .accent-word-text,
.accent-word-text.text-white,
.hero-title .accent-word-text,
.subscribe-title .accent-word-text,
.tours-hero .accent-word-text,
.about-hero-section .accent-word-text,
.step-section .grid-step .accent-word-text,
.categories-hero .accent-word-text { color: inherit; }

/* dark buttons: template black becomes logo navy */
.button-black,
.button-primary,
.button-primary.button-subscribe { background-color: var(--ih-navy); }
.button-primary:hover,
.button-primary.button-subscribe:hover { background-color: var(--ih-navy-hover); }
.button-black:where(.w-variant-2fbc6b96-0789-bfea-7264-5e6c2fd5a699) { background-color: var(--color--white); color: var(--ih-ink); }
.button-black:where(.w-variant-34dfffa8-4842-149d-6b4d-ef06bf968439) { background-color: var(--color--primary-2); color: var(--ih-ink); }
.button-black:where(.w-variant-5f1ca978-ef6b-8eea-93a4-92ba70d9a491) { background-color: var(--color--primary-3); color: var(--ih-ink); }
.duration-badge,
.badge:where(.w-variant-5345bc4c-5615-85e2-4b20-4ba39866672a) { background-color: var(--ih-navy); }
.nav-icon-wrapper.left-icon:where(.w-variant-e1eed9f3-2c03-4a43-3b35-85301ee647b0) { background-color: var(--ih-navy); }

/* ---------- logo (keeps the template's 50px logo slot, lockup is taller so it gets a bit more height) ---------- */
.logo { width: auto; height: 58px; }
.footer-logo { width: auto; height: 64px; }

/* ---------- offers: promo badge + old price (new, sized like the template's small pills) ---------- */
.ih-promo-badge {
  z-index: 1; position: absolute; top: 20px; left: 20px;
  border-radius: var(--border-radius--xl); background-color: var(--ih-promo); color: #fff;
  font-size: var(--_typography---body--body-xs); line-height: var(--_typography---body--line-height-2);
  font-weight: 600; padding: .25rem .625rem .2rem; letter-spacing: .01em;
}
.ih-old-price {
  color: var(--color--gray-2); text-decoration: line-through; text-decoration-thickness: 1px;
  font-size: var(--_typography---body--body-sm); margin-right: 6px; white-space: nowrap;
}
.tours-detail-top .ih-old-price { color: var(--color--white-op70); font-size: var(--_typography---body--body-md); }
.ih-price-from { font-size: var(--_typography---body--body-xs); color: var(--color--gray-2); margin-right: 4px; }

/* ---------- small helpers ---------- */
.ih-nowrap { white-space: nowrap; }
.ih-hidden { display: none !important; }

/* lang="bg" makes Chrome switch the body font to Bulgarian letterforms while the heading
   fonts stay standard; keep one consistent (standard) Cyrillic style everywhere. */
html { font-feature-settings: "locl" 0; }
.nav-menu-round.bg-black { background-color: var(--ih-ink); }