/*
Theme Name: EagleSIM
Theme URI: https://eagle-sim.com
Author: EagleSIM
Description: Dark WooCommerce eSIM theme built with Full Site Editing and ACF Pro custom blocks.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: eaglesim
Tags: full-site-editing, woocommerce, dark, custom-colors, block-patterns
*/

:root {
  --es-red: #e31b23;
  --es-red-dark: #9f1016;
  --es-bg: #07090c;
  --es-surface: #0f1318;
  --es-surface-2: #151a21;
  --es-border: #252c35;
  --es-text: #f7f8fa;
  --es-muted: #9ba4b0;
  --es-success: #36b37e;
  --es-radius: 20px;
  --es-shadow: 0 20px 50px rgba(0,0,0,.28);
}

html { scroll-behavior: smooth; }
body { background: var(--es-bg); color: var(--es-text); }
a { text-underline-offset: .18em; }
img { max-width: 100%; height: auto; }

.es-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.es-section { padding-block: clamp(64px, 8vw, 112px); }
.es-card { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); border: 1px solid var(--es-border); border-radius: var(--es-radius); box-shadow: var(--es-shadow); }
.es-eyebrow { display:inline-flex; gap:.5rem; align-items:center; color:#ff767c; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem; }
.es-btn, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.15rem; border:0; border-radius:12px; background:linear-gradient(135deg,var(--es-red),#ff3e46); color:#fff; font-weight:700; text-decoration:none; transition:.2s ease;
}
.es-btn:hover, .wp-element-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { transform:translateY(-2px); filter:brightness(1.06); }
.es-btn--ghost { background:transparent; border:1px solid var(--es-border); }
.es-grid { display:grid; gap:24px; }
.es-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.es-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

.site-header { position:sticky; top:0; z-index:100; backdrop-filter:blur(16px); background:rgba(7,9,12,.82); border-bottom:1px solid rgba(255,255,255,.06); }
.site-header__inner { display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:24px; }
.site-logo img { width:190px; max-height:52px; }
.site-nav ul { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.site-nav a { color:var(--es-text); text-decoration:none; font-size:.95rem; }
.site-nav a:hover { color:#ff555c; }
.site-actions { display:flex; align-items:center; gap:12px; }

.es-hero { position:relative; overflow:hidden; min-height:720px; display:grid; align-items:center; border-bottom:1px solid rgba(255,255,255,.06); }
.es-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 38%,rgba(227,27,35,.28),transparent 32%),radial-gradient(circle at 20% 10%,rgba(255,255,255,.05),transparent 22%); pointer-events:none; }
.es-hero__grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; padding-block:90px; }
.es-hero h1 { font-size:clamp(3rem,7vw,6.7rem); line-height:.92; letter-spacing:-.055em; margin:.8rem 0 1.25rem; max-width:850px; }
.es-hero h1 em { color:var(--es-red); font-style:normal; }
.es-hero p { color:#c2c8d0; font-size:clamp(1rem,2vw,1.2rem); max-width:640px; }
.es-hero__visual { position:relative; min-height:520px; }
.es-hero__visual img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 45px 80px rgba(227,27,35,.28)); }
.es-search { display:flex; gap:10px; padding:10px; margin-top:32px; max-width:650px; background:rgba(15,19,24,.92); border:1px solid var(--es-border); border-radius:16px; }
.es-search input { flex:1; min-width:0; color:#fff; background:transparent; border:0; padding-inline:12px; outline:none; }

.es-benefits { margin-top:-54px; position:relative; z-index:4; }
.es-benefits__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; overflow:hidden; background:var(--es-border); border:1px solid var(--es-border); border-radius:20px; }
.es-benefit { background:var(--es-surface); padding:24px; }
.es-benefit strong { display:block; margin-bottom:6px; }
.es-benefit span { color:var(--es-muted); font-size:.9rem; }

.es-heading-row { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
.es-heading-row h2 { font-size:clamp(2rem,4vw,3.5rem); margin:0; letter-spacing:-.04em; }
.es-heading-row p { color:var(--es-muted); max-width:580px; }

.es-destination-card { overflow:hidden; position:relative; }
.es-destination-card__image { aspect-ratio:4/3; overflow:hidden; }
.es-destination-card__image img { width:100%; height:100%; object-fit:cover; transition:.35s ease; }
.es-destination-card:hover img { transform:scale(1.05); }
.es-destination-card__body { padding:20px; }
.es-destination-card__meta { display:flex; justify-content:space-between; gap:12px; color:var(--es-muted); font-size:.9rem; }

.es-steps { padding:38px; background:linear-gradient(135deg,rgba(227,27,35,.16),rgba(15,19,24,.92)); }
.es-steps__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.es-step { position:relative; padding:20px; }
.es-step__number { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--es-red); font-weight:800; margin-bottom:18px; }

.es-plan-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.es-plan-card { padding:24px; }
.es-plan-card__price { font-size:2rem; font-weight:800; margin-block:18px; }
.es-plan-card ul { color:var(--es-muted); padding-left:18px; }

.es-product-hero { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.es-product-gallery img { border-radius:24px; }
.es-plan-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-block:24px; }
.es-plan-option { border:1px solid var(--es-border); border-radius:14px; padding:16px; cursor:pointer; }
.es-plan-option.is-active { border-color:var(--es-red); box-shadow:0 0 0 2px rgba(227,27,35,.18); }

.woocommerce div.product { padding-block:64px; }
.woocommerce div.product .product_title { font-size:clamp(2.3rem,5vw,4.3rem); line-height:1; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color:#fff; font-weight:800; }
.woocommerce div.product form.cart .variations select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
  background:var(--es-surface); color:#fff; border:1px solid var(--es-border); border-radius:10px; padding:12px;
}
.woocommerce table.shop_table { border-color:var(--es-border); border-radius:16px; overflow:hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color:var(--es-border); }
.woocommerce-checkout #payment { background:var(--es-surface); border:1px solid var(--es-border); border-radius:16px; }
.woocommerce-checkout #payment div.payment_box { background:var(--es-surface-2); color:#fff; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color:var(--es-surface-2); }
.woocommerce-message, .woocommerce-info { background:var(--es-surface); color:#fff; border-top-color:var(--es-red); }

.es-footer { padding:64px 0 32px; border-top:1px solid var(--es-border); background:#050608; }
.es-footer__grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:36px; }
.es-footer h4 { margin-top:0; }
.es-footer a, .es-footer p { color:var(--es-muted); text-decoration:none; }
.es-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }

@media (max-width: 980px) {
  .site-nav { display:none; }
  .es-hero__grid, .es-product-hero { grid-template-columns:1fr; }
  .es-hero__visual { min-height:380px; order:-1; }
  .es-benefits__grid { grid-template-columns:repeat(2,1fr); }
  .es-grid--4, .es-plan-grid { grid-template-columns:repeat(2,1fr); }
  .es-footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .es-container { width:min(100% - 24px,1180px); }
  .site-actions .es-btn { display:none; }
  .es-hero { min-height:auto; }
  .es-hero__grid { padding-block:48px 88px; }
  .es-search { flex-direction:column; }
  .es-benefits__grid, .es-grid--3, .es-grid--4, .es-plan-grid, .es-steps__grid, .es-footer__grid { grid-template-columns:1fr; }
  .es-heading-row { align-items:start; flex-direction:column; }
}