/* ============================================
   UNIFIED DESIGN SYSTEM — Forest Green Premium
   Extracted from Reference Image
   #F7FCF5 · #E5F5E0 · #C7E9C0 · #A1D99B
   #74C476 · #41AB5D · #238B45 · #006D2C · #00441B

   60% Light Sage (Page BG / Cards)
   30% Forest Green (Primary actions / Dark accents)
   10% Accent Fern / Muted Pine
   ============================================ */


/* ——— 1. Global Page Foundation ——— */

html,
body {
  background-color: var(--sand-beige) !important;
  color: var(--charcoal) !important;
  transition: var(--transition-color);
}

body::before,
body::after {
  background: transparent !important;
}


/* ——— 2. Section Backgrounds ——— */

section,
.why-choose,
.skiing,
.trekking,
.activities,
.sightseeing,
.rentals,
.transport,
.packages,
.testimonials,
.gallery,
.about {
  background-color: var(--sand-beige) !important;
  color: var(--charcoal) !important;
  border-color: var(--border-subtle) !important;
  background-image: none !important;
}


/* ——— 3. Card System ——— */

/* NORMAL CARDS */
.skiing__package-card,
.trekking__card,
.testimonials__card,
.detail-card,
.trek-card,
.activities__item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--charcoal) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.3s var(--ease-premium),
    box-shadow 0.3s var(--ease-premium),
    border-color 0.3s ease !important;
}

/* Normal card hover */
.skiing__package-card:hover,
.trekking__card:hover,
.testimonials__card:hover,
.detail-card:hover,
.trek-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--forest-green) !important;
}

.activities__item:hover {
  transform: translateX(4px) !important;
  border-color: var(--border-medium) !important;
}

/* PREMIUM CARDS */
.why-choose__card,
.wc-card,
.packages__card {
  transition: transform 0.35s var(--ease-premium),
    box-shadow 0.35s var(--ease-premium),
    border-color 0.35s ease !important;
}

/* Tour/experience cards */
.tour-card,
.experience-card,
.activity-card {
  transition: transform 0.35s var(--ease-premium),
    box-shadow 0.35s var(--ease-premium),
    border-color 0.35s ease !important;
}


/* ——— 4. Text Inside Cards ——— */

.skiing__package-card *,
.trekking__card-content,
.trekking__card-content *,
.testimonials__card *,
.detail-card__body *,
.trek-card__body *,
.activities__item * {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Restore correct text hierarchy in cards */
.trekking__card-title,
.testimonials__author-name,
.detail-card__title,
.trek-card__title {
  color: var(--charcoal) !important;
}

.trekking__card-info span,
.testimonials__text,
.detail-card__desc,
.trek-card__desc {
  color: var(--text-secondary) !important;
}


/* ——— 5. Icons & Visual Accents ——— */

.wc-card__icon svg,
.why-choose__icon svg {
  color: var(--forest-green) !important;
}

.rentals__card-icon svg,
.transport__card-icon svg {
  color: var(--earth-brown) !important;
}

.wc-card__num,
.testimonials__star,
.testimonials__author-source {
  color: var(--sunset-gold) !important;
}

.testimonials__avatar {
  background: var(--forest-green) !important;
  color: #fff !important;
  border-radius: 50% !important;
}

.trekking__card-info svg {
  color: var(--forest-green) !important;
}

.detail-card__price,
.trek-card__price {
  color: var(--sunset-gold) !important;
}


/* ——— 6. Buttons ——— */

.btn--primary,
.btn-primary,
.button-primary,
.cta-button {
  background: var(--primary-600) !important;
  border: 1px solid var(--primary-600) !important;
  color: #ffffff !important;
  font-weight: var(--weight-bold) !important;
  border-radius: var(--radius-md) !important;
  transition: var(--transition-color), transform 0.25s var(--ease-premium) !important;
}

.btn--primary:hover,
.btn-primary:hover,
.button-primary:hover,
.cta-button:hover {
  background: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-gold) !important;
}

.btn--secondary,
.btn-secondary,
.button-secondary {
  background: transparent !important;
  border: 1px solid var(--primary-600) !important;
  color: var(--primary-600) !important;
  border-radius: var(--radius-md) !important;
  transition: var(--transition-color), transform 0.25s var(--ease-premium) !important;
}

.btn--secondary:hover,
.btn-secondary:hover,
.button-secondary:hover {
  background: var(--primary-600) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Buttons inside premium containers */
.packages__card .btn--primary,
.trekking__card .btn--primary {
  background: var(--primary-600) !important;
  color: #ffffff !important;
  border-color: var(--primary-600) !important;
}

.packages__card .btn--primary:hover,
.trekking__card .btn--primary:hover {
  background: var(--primary-700) !important;
  color: #ffffff !important;
  border-color: var(--primary-700) !important;
}


/* ——— 7. Section Typography ——— */

.section-title {
  color: var(--charcoal) !important;
  font-family: var(--font-heading) !important;
}

.section-subtitle {
  color: var(--text-secondary) !important;
}

.section-label {
  color: var(--primary-600) !important;
}

.section-label::before {
  background: var(--primary-600) !important;
}

.section-title .text-gradient {
  display: inline-block !important;
  padding-bottom: 0.15em !important;
  margin-bottom: -0.15em !important;
  background: linear-gradient(135deg, var(--primary-700), var(--primary-500)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}


/* ——— 8. Navbar ——— */

.navbar {
  background: rgba(0, 68, 27, 0.12) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.navbar.scrolled {
  background: var(--charcoal) !important;
}

.navbar a,
.navbar__logo,
.navbar__logo-text {
  color: #fff !important;
}

.navbar a:hover,
.navbar__link.active {
  color: var(--primary-300) !important;
}

.nav-sheet__item.active {
  border-color: var(--primary-400) !important;
  color: var(--primary-300) !important;
}


/* ——— 9. Footer ——— */

footer,
.site-footer,
.footer {
  background: var(--primary-800) !important;
  color: #ffffff !important;
}

footer a,
.site-footer a,
.footer a,
.footer__link,
.footer__bottom-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer a:hover,
.site-footer a:hover,
.footer a:hover,
.footer__link:hover,
.footer__bottom-link:hover {
  color: var(--primary-200) !important;
}

.footer__column-title,
.footer__logo {
  color: var(--primary-200) !important;
}

.footer__brand-desc,
.footer__copyright {
  color: rgba(255, 255, 255, 0.75) !important;
}

.footer__social-link svg {
  color: var(--primary-200) !important;
}


/* ——— 10. Forms ——— */

.cta__input,
input,
textarea,
select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--charcoal) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

input::placeholder,
textarea::placeholder,
.cta__input::placeholder {
  color: var(--text-muted) !important;
}

/* iOS Safari date input support */
input[type="date"] {
  position: relative;
}

input[type="date"]::-webkit-datetime-edit {
  color: transparent !important;
}

input[type="date"]:focus::-webkit-datetime-edit,
input[type="date"]:valid::-webkit-datetime-edit,
input[type="date"]:not([value=""])::-webkit-datetime-edit {
  color: var(--charcoal) !important;
}

input[type="date"]::before {
  content: attr(placeholder);
  color: var(--text-muted) !important;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

input[type="date"]:focus::before,
input[type="date"]:valid::before,
input[type="date"]:not([value=""]):before {
  content: "" !important;
  display: none !important;
}

input:focus,
textarea:focus,
.cta__input:focus {
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px rgba(35, 139, 69, 0.15) !important;
  outline: none !important;
}


/* ——— 11. Hero & Page Heroes ——— */

.page-hero,
.hero,
.adv-hero {
  background-color: var(--primary-700) !important;
}

.hero__slider {
  background: var(--primary-700) !important;
}


/* ——— 12. CTA Section ——— */

.cta__grid,
.cta__form-side {
  background: var(--sand-beige) !important;
  border-color: var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
}

.cta__form-side input,
.cta__form-side textarea,
.cta__form-side select,
.cta__form-side .cta__input {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
}

.cta__form-side input:focus,
.cta__form-side textarea:focus,
.cta__form-side .cta__input:focus {
  border-color: var(--primary-600) !important;
  box-shadow: 0 0 0 3px rgba(35, 139, 69, 0.15) !important;
}

.cta__form-side .cta__input::placeholder {
  color: var(--text-muted) !important;
}

.experiences,
.experiences__sidebar,
.experiences__stage {
  background-color: var(--sand-beige) !important;
}


/* ——— 13. Section Spacing ——— */

section {
  padding-top: clamp(64px, 8vw, 120px) !important;
  padding-bottom: clamp(64px, 8vw, 120px) !important;
}

.hero,
.experiences {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ——— 14. Dividers & Accents ——— */

.why-choose__inner {
  border-color: rgba(0, 109, 44, 0.2) !important;
}

.sh-modal {
  border-color: rgba(0, 109, 44, 0.2) !important;
  border-radius: var(--radius-xl) !important;
}


/* ——— 15. Focus States (Accessibility — WCAG 2.1 AA) ——— */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary-500) !important;
  outline-offset: 2px !important;
}


/* ——— 16. Links ——— */

section a:not(.btn):not(.navbar__link):not(.footer__link):not(.nav-sheet__item) {
  color: var(--primary-600);
  transition: color 0.2s ease;
}

section a:not(.btn):not(.navbar__link):not(.footer__link):not(.nav-sheet__item):hover {
  color: var(--primary-700);
}

/* Experiences Sidebar Light Theme */
.experiences__sidebar-title {
  color: var(--charcoal) !important;
}

.experiences__sidebar-label {
  color: var(--primary-600) !important;
}

.experiences__nav-btn {
  border-bottom-color: var(--border-medium) !important;
}

.experiences__nav-num {
  color: var(--text-muted) !important;
}

.experiences__nav-title {
  color: var(--text-secondary) !important;
}

.experiences__nav-sub {
  color: var(--text-muted) !important;
}

.experiences__nav-arrow {
  border-color: var(--border-medium) !important;
  color: var(--text-muted) !important;
}

.experiences__nav-btn.is-active .experiences__nav-title {
  color: var(--charcoal) !important;
}

.experiences__nav-btn.is-active .experiences__nav-sub {
  color: var(--primary-600) !important;
}

.experiences__nav-btn:not(.is-active):hover .experiences__nav-title {
  color: var(--charcoal) !important;
}

.experiences__nav-btn:not(.is-active):hover .experiences__nav-arrow {
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

.experiences__sidebar::after {
  background: linear-gradient(to bottom, transparent, var(--border-medium) 30%, var(--border-medium) 70%, transparent) !important;
}

/* Page Hero Override */
.page-hero {
  background-color: var(--sand-beige) !important;
}

.page-hero::before {
  background: none !important;
}

.page-hero__title {
  color: var(--charcoal) !important;
}

.page-hero__subtitle {
  color: var(--text-secondary) !important;
}

.page-hero__label {
  color: var(--primary-600) !important;
  background: rgba(35, 139, 69, 0.10) !important;
  border-color: rgba(35, 139, 69, 0.22) !important;
}

.page-hero__breadcrumb a {
  color: var(--text-secondary) !important;
}

.page-hero__breadcrumb a:hover {
  color: var(--charcoal) !important;
}

.page-hero__breadcrumb-sep {
  color: var(--border-medium) !important;
}

.page-hero__breadcrumb-current {
  color: var(--charcoal) !important;
}

.page-hero__media::after {
  background: linear-gradient(to top, var(--sand-beige), transparent) !important;
}

.page-hero__media {
  border-color: var(--border-medium) !important;
}

/* Seasonal Toggle */
.seasonal-toggle-capsule {
  background: var(--bg-card) !important;
  border-color: var(--border-medium) !important;
}

.seasonal-toggle-btn {
  color: var(--text-secondary) !important;
  transition: color 0.3s ease !important;
}

.seasonal-toggle-btn:hover {
  color: var(--charcoal) !important;
}

.seasonal-toggle-slider {
  background: var(--primary-600) !important;
}

.seasonal-toggle-btn.active {
  color: #ffffff !important;
}

/* WhatsApp CTA */
.cta__whatsapp {
  background: rgba(37, 211, 102, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(37, 211, 102, 0.45) !important;
}

.cta__whatsapp span {
  color: #ffffff !important;
}

.cta__whatsapp svg {
  color: #25D366 !important;
  fill: #25D366 !important;
}

.cta__whatsapp:hover {
  background: rgba(37, 211, 102, 0.22) !important;
  border-color: rgba(37, 211, 102, 0.75) !important;
  color: #ffffff !important;
}

.cta__whatsapp:hover span {
  color: #ffffff !important;
}

/* Activities CTA */
.activities-cta__text h3 {
  color: var(--charcoal) !important;
}

.activities-cta__text p {
  color: var(--text-secondary) !important;
}

.activities-cta {
  border-top-color: var(--border-medium) !important;
}

/* Packages Page CTA Text */
.cta__content .cta__title {
  color: #ffffff !important;
}

.cta__content .cta__subtitle {
  color: rgba(255, 255, 255, 0.8) !important;
}

.cta__content .section-label {
  color: var(--primary-300) !important;
}

/* Loading Screen */
#sh-loader {
  background-color: var(--sand-beige) !important;
}

.loader__brand {
  color: var(--charcoal) !important;
}

.loader__sub {
  color: var(--primary-600) !important;
  opacity: 1 !important;
}

.loader__ring-bg {
  stroke: var(--border-medium) !important;
}

.loader__mountain svg {
  fill: rgba(35, 139, 69, 0.05) !important;
}