/*
 Theme Name: Easy Chip Starter
 Theme URI: https://easychip.com.br
 Description: Clean, Holafly-inspired eSIM store theme for Easy Chip.
 Author: Easy Chip
 Version: 1.0.0
 Template: hello-elementor
 Text Domain: easychip-starter
*/

/* ============================================================
   DESIGN SYSTEM — CSS Variables
   ============================================================ */
:root {
  /* Brand */
  --ec-primary: #494797;
  --ec-primary-dark: #3a3a7d;
  --ec-primary-light: #5c5aab;
  --ec-lilas: #beacd4;
  --ec-gelo: #f4fafe;
  --ec-preto: #0e0c19;

  /* Functional */
  --ec-bg: #f8f8fb;
  --ec-surface: #ffffff;
  --ec-text: #292b2e;
  --ec-text-light: #6b7280;
  --ec-text-lighter: #9ca3af;
  --ec-border: #e5e7eb;
  --ec-success: #22c55e;
  --ec-error: #ef4444;

  /* Typography */
  --ec-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;

  /* Spacing (4px base) */
  --ec-sp-1: 4px; --ec-sp-2: 8px; --ec-sp-3: 12px; --ec-sp-4: 16px;
  --ec-sp-5: 20px; --ec-sp-6: 24px; --ec-sp-8: 32px; --ec-sp-10: 40px;
  --ec-sp-12: 48px; --ec-sp-16: 64px; --ec-sp-20: 80px;

  /* Radii */
  --ec-radius-sm: 8px;
  --ec-radius: 12px;
  --ec-radius-lg: 16px;
  --ec-radius-xl: 24px;
  --ec-radius-full: 9999px;

  /* Shadows */
  --ec-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --ec-shadow: 0 4px 12px rgba(0,0,0,.08);
  --ec-shadow-lg: 0 12px 32px rgba(0,0,0,.12);

  /* Layout */
  --ec-max-w: 1280px;
  --ec-header-h: 72px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ec-font);
  color: var(--ec-text);
  background: var(--ec-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; } .ec-btn--solid, a.ec-btn--solid, a.ec-btn--solid:visited { color: #fff !important; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.ec-container { max-width: var(--ec-max-w); margin: 0 auto; padding: 0 var(--ec-sp-6); }
.ec-section { padding: var(--ec-sp-16) 0; }

/* ============================================================
   HEADER
   ============================================================ */
.ec-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--ec-surface);
  height: var(--ec-header-h);
  transition: box-shadow .2s;
}
.ec-header.is-scrolled { box-shadow: var(--ec-shadow); }
.ec-header__inner {
  max-width: var(--ec-max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--ec-sp-6); height: 100%;
}
.ec-header__logo { display: flex; align-items: center; }
.ec-header__logo img { height: 36px; width: auto; }
.ec-header__nav { display: flex; gap: var(--ec-sp-8); align-items: center; }
.ec-header__nav a {
  color: var(--ec-text); font-weight: 500; font-size: 15px;
  padding: var(--ec-sp-2) 0;
  border-bottom: 2px solid transparent; transition: all .2s;
}
.ec-header__nav a:hover,
.ec-header__nav a.active { color: var(--ec-primary); border-bottom-color: var(--ec-primary); }
.ec-header__actions { display: flex; gap: var(--ec-sp-3); align-items: center; }

/* Buttons */
.ec-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ec-sp-2);
  padding: var(--ec-sp-2) var(--ec-sp-5); border-radius: var(--ec-radius-full);
  font-size: 14px; font-weight: 600; transition: all .2s; white-space: nowrap;
}
.ec-btn--outline {
  border: 1.5px solid var(--ec-primary); color: var(--ec-primary); background: transparent;
}
.ec-btn--outline:hover { background: var(--ec-primary); color: #fff; }
.ec-btn--solid { background: var(--ec-primary); color: #fff !important; border: none; }
.ec-btn--solid:hover { background: var(--ec-primary-dark); }
.ec-btn--white { background: #fff; color: var(--ec-primary); border: none; }
.ec-btn--white:hover { background: var(--ec-gelo); }
.ec-btn--lg { padding: var(--ec-sp-3) var(--ec-sp-8); font-size: 16px; }

/* Cart icon */
.ec-cart { position: relative; color: var(--ec-text); padding: var(--ec-sp-2); }
.ec-cart svg { width: 24px; height: 24px; }
.ec-cart__badge {
  position: absolute; top: -2px; right: -4px;
  background: var(--ec-primary); color: #fff;
  font-size: 11px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Hamburger */
.ec-hamburger { display: none; padding: var(--ec-sp-2); color: var(--ec-text); }
.ec-hamburger svg { width: 28px; height: 28px; }

/* ============================================================
   HERO
   ============================================================ */
.ec-hero {
  background: linear-gradient(135deg, var(--ec-primary) 0%, var(--ec-primary-dark) 100%);
  color: #fff; padding: var(--ec-sp-20) 0 var(--ec-sp-16);
  text-align: center;
}
.ec-hero__title { font-size: clamp(28px, 5vw, 48px); font-weight: 700; line-height: 1.2; margin-bottom: var(--ec-sp-4); }
.ec-hero__subtitle { font-size: clamp(16px, 2.5vw, 20px); opacity: .85; margin-bottom: var(--ec-sp-8); max-width: 600px; margin-left: auto; margin-right: auto; }
.ec-hero__badge {
  display: inline-flex; align-items: center; gap: var(--ec-sp-2);
  background: rgba(255,255,255,.15); border-radius: var(--ec-radius-full);
  padding: var(--ec-sp-2) var(--ec-sp-4); font-size: 14px; margin-top: var(--ec-sp-6);
}

/* ============================================================
   DESTINATION BROWSER
   ============================================================ */
.ec-destinations { background: var(--ec-bg); }
.ec-destinations__title { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: var(--ec-sp-8); }

/* Search */
.ec-search {
  position: relative; max-width: 520px; margin: 0 auto var(--ec-sp-8);
}
.ec-search__input {
  width: 100%; padding: var(--ec-sp-4) var(--ec-sp-6) var(--ec-sp-4) var(--ec-sp-12);
  border: 2px solid var(--ec-border); border-radius: var(--ec-radius-full);
  font-size: 16px; background: var(--ec-surface); outline: none;
  transition: border-color .2s;
}
.ec-search__input:focus { border-color: var(--ec-primary); }
.ec-search__icon {
  position: absolute; left: var(--ec-sp-4); top: 50%; transform: translateY(-50%);
  color: var(--ec-text-light); width: 20px; height: 20px;
}

/* Tabs */
.ec-tabs { display: flex; gap: var(--ec-sp-2); justify-content: center; margin-bottom: var(--ec-sp-8); flex-wrap: wrap; }
.ec-tab {
  padding: var(--ec-sp-2) var(--ec-sp-6); border-radius: var(--ec-radius-full);
  font-size: 14px; font-weight: 600; color: var(--ec-text-light);
  background: var(--ec-surface); border: 1px solid var(--ec-border);
  transition: all .15s;
}
.ec-tab:hover { border-color: var(--ec-primary); color: var(--ec-primary); }
.ec-tab.active { background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }

/* Country Grid */
.ec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ec-sp-4); }
.ec-card {
  display: flex; align-items: center; gap: var(--ec-sp-4);
  padding: var(--ec-sp-4) var(--ec-sp-5);
  background: var(--ec-surface); border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius); transition: all .2s;
}
.ec-card:hover { box-shadow: var(--ec-shadow); transform: translateY(-2px); border-color: var(--ec-primary); }
.ec-card[hidden] { display: none !important; }
.ec-card__flag { width: 48px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.ec-card__flag-ph { font-size: 28px; width: 48px; text-align: center; flex-shrink: 0; }
.ec-card__info { flex: 1; min-width: 0; }
.ec-card__name { font-weight: 600; font-size: 15px; display: block; }
.ec-card__price { font-size: 13px; color: var(--ec-primary); font-weight: 600; }
.ec-card__plans { font-size: 12px; color: var(--ec-text-lighter); }

/* Letter groups */
.ec-letter-group { margin-bottom: var(--ec-sp-8); }
.ec-letter-group[hidden] { display: none !important; }
.ec-letter {
  font-size: 20px; font-weight: 700; color: var(--ec-primary);
  padding-bottom: var(--ec-sp-2); border-bottom: 2px solid var(--ec-border);
  margin-bottom: var(--ec-sp-4);
}

/* Section hidden */
.ec-section-panel[hidden] { display: none !important; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.ec-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ec-sp-8); text-align: center; }
.ec-step__number {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ec-primary); color: #fff;
  font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--ec-sp-4);
}
.ec-step__title { font-size: 18px; font-weight: 600; margin-bottom: var(--ec-sp-2); }
.ec-step__desc { font-size: 14px; color: var(--ec-text-light); line-height: 1.5; }

/* ============================================================
   FAQ
   ============================================================ */
.ec-faq__title { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: var(--ec-sp-8); }
.ec-faq details {
  border: 1px solid var(--ec-border); border-radius: var(--ec-radius);
  margin-bottom: var(--ec-sp-3); background: var(--ec-surface);
  overflow: hidden;
}
.ec-faq summary {
  padding: var(--ec-sp-5) var(--ec-sp-6); font-weight: 600; font-size: 15px;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.ec-faq summary::after { content: "+"; font-size: 20px; color: var(--ec-primary); transition: transform .2s; }
.ec-faq details[open] summary::after { content: "-"; }
.ec-faq details > div { padding: 0 var(--ec-sp-6) var(--ec-sp-5); color: var(--ec-text-light); font-size: 14px; line-height: 1.7; }

/* ============================================================
   FOOTER
   ============================================================ */
.ec-footer { background: var(--ec-preto); color: rgba(255,255,255,.7); padding: var(--ec-sp-16) 0 var(--ec-sp-8); }
.ec-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--ec-sp-10); margin-bottom: var(--ec-sp-12); }
.ec-footer__brand-desc { font-size: 14px; line-height: 1.6; margin: var(--ec-sp-4) 0; }
.ec-footer__logo img { height: 32px; width: auto; }
.ec-footer__heading { color: #fff; font-weight: 600; font-size: 16px; margin-bottom: var(--ec-sp-4); }
.ec-footer__links { display: flex; flex-direction: column; gap: var(--ec-sp-3); }
.ec-footer__links a { font-size: 14px; transition: color .2s; }
.ec-footer__links a:hover { color: #fff; }
.ec-footer__social { display: flex; gap: var(--ec-sp-3); margin-top: var(--ec-sp-4); }
.ec-footer__social a { color: rgba(255,255,255,.5); transition: color .2s; }
.ec-footer__social a:hover { color: #fff; }
.ec-footer__social svg { width: 20px; height: 20px; }
.ec-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--ec-sp-6); text-align: center; font-size: 13px; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.ec-product-header {
  display: flex; align-items: center; gap: var(--ec-sp-6);
  padding: var(--ec-sp-8) 0; margin-bottom: var(--ec-sp-6);
}
.ec-product-header__flag { width: 80px; height: 56px; border-radius: var(--ec-radius-sm); object-fit: cover; }
.ec-product-header__name { font-size: 28px; font-weight: 700; }
.ec-product-header__badge {
  display: inline-flex; align-items: center; gap: var(--ec-sp-1);
  background: var(--ec-gelo); color: var(--ec-primary);
  padding: var(--ec-sp-1) var(--ec-sp-3); border-radius: var(--ec-radius-full);
  font-size: 13px; font-weight: 500;
}

/* Plan cards */
.ec-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ec-sp-5); }
.ec-plan {
  background: var(--ec-surface); border: 2px solid var(--ec-border);
  border-radius: var(--ec-radius-lg); padding: var(--ec-sp-6);
  text-align: center; position: relative; transition: all .2s;
}
.ec-plan:hover { border-color: var(--ec-primary); box-shadow: var(--ec-shadow); }
.ec-plan.is-popular { border-color: var(--ec-primary); }
.ec-plan__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--ec-primary); color: #fff;
  padding: var(--ec-sp-1) var(--ec-sp-4); border-radius: var(--ec-radius-full);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.ec-plan__data { font-size: 32px; font-weight: 700; color: var(--ec-text); margin-bottom: var(--ec-sp-1); }
.ec-plan__duration { font-size: 14px; color: var(--ec-text-light); margin-bottom: var(--ec-sp-4); }
.ec-plan__price { font-size: 24px; font-weight: 700; color: var(--ec-primary); margin-bottom: var(--ec-sp-4); }
.ec-plan__price small { font-size: 14px; font-weight: 400; color: var(--ec-text-light); }
.ec-plan__features { text-align: left; margin-bottom: var(--ec-sp-6); }
.ec-plan__feature {
  display: flex; align-items: center; gap: var(--ec-sp-2);
  font-size: 13px; color: var(--ec-text-light); padding: var(--ec-sp-1) 0;
}
.ec-plan__feature svg { width: 16px; height: 16px; color: var(--ec-success); flex-shrink: 0; }
.ec-plan__btn { width: 100%; }
.ec-plan__btn.is-disabled { opacity: .5; pointer-events: none; }

/* ============================================================
   PAGE (cart, checkout, etc)
   ============================================================ */
.ec-page { background: var(--ec-surface); min-height: 60vh; }
.ec-page__content { max-width: 960px; margin: 0 auto; padding: var(--ec-sp-10) var(--ec-sp-6); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .ec-grid { grid-template-columns: repeat(2, 1fr); }
  .ec-plans-grid { grid-template-columns: repeat(2, 1fr); }
  .ec-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ec-header__nav { display: none; position: fixed; top: var(--ec-header-h); left: 0; right: 0; bottom: 0; background: var(--ec-surface); flex-direction: column; padding: var(--ec-sp-6); gap: var(--ec-sp-4); z-index: 999; }
  .ec-header__nav.is-open { display: flex; }
  .ec-hamburger { display: flex; }
  /* buttons visible on mobile */
  .ec-hero { padding: var(--ec-sp-12) 0 var(--ec-sp-10); }
  .ec-grid { grid-template-columns: 1fr; }
  .ec-steps { grid-template-columns: 1fr; gap: var(--ec-sp-6); }
  .ec-plans-grid { grid-template-columns: 1fr; }
  .ec-footer__grid { grid-template-columns: 1fr; gap: var(--ec-sp-8); }
  .ec-product-header { flex-direction: column; text-align: center; }
}

/* === Mobile fixes === */
@media (max-width: 768px) {
  .ec-header__actions .ec-btn { display: inline-flex; padding: 6px 14px; font-size: 13px; }
  .ec-header__inner { padding: 0 12px; gap: 8px; }
  .ec-cart { padding: 4px; }
}

/* === Force white text on Cadastrar button (fixes Elementor override) === */
.ec-header .ec-btn--solid,
.ec-header a.ec-btn--solid,
a.ec-btn.ec-btn--solid {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}