/* ==================================================
   EO Global — Premium White + Gold
   Fonts: Fraunces (display serif) + Manrope (sans)
   ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg:            #FFFFFF;
  --bg-soft:       #FFFBEE;
  --bg-muted:      #FDF3D0;
  --line:          #E8CE7A;
  --line-soft:     #F3E0A2;
  --ink:           #0F0B05;
  --ink-soft:      #3D2E12;
  --ink-mute:      #6B5320;
  --gold:          #D4AF37;
  --gold-bright:   #F0CB4E;
  --gold-2:        #B8860B;
  --gold-3:        #8B6914;
  --gold-deep:     #5C4508;
  --gold-glow:     rgba(212,175,55,.45);
  --gold-metal:    linear-gradient(135deg, #F4D680 0%, #D4AF37 45%, #B8860B 100%);
  --gold-shine:    linear-gradient(120deg, #E9C647 0%, #FFE68A 25%, #D4AF37 55%, #A67C00 100%);
  --danger:        #A81919;
  --ok:            #1E7A22;
  --radius:        8px;
  --radius-sm:     6px;
  --radius-pill:   999px;
  --shadow-soft:   0 6px 18px rgba(139,105,20,.10);
  --shadow-lift:   0 20px 48px rgba(139,105,20,.22);
  --grain-op:      .028;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(201,169,97,.09), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201,169,97,.06), transparent 60%);
  z-index: 0;
}
::selection { background: var(--gold); color:#fff; }

h1,h2,h3,h4 { font-family:'Fraunces', 'Playfair Display', serif; color: var(--ink); letter-spacing:.2px; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; margin:0 0 8px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; }
a  { color: var(--gold-3); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }
p  { margin: 0 0 12px; color: var(--ink-soft); }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ---------- Top Bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; padding: 14px 24px; max-width:1240px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { height: 44px; width:auto; display:block; }
.brand-text { font-family:'Fraunces',serif; font-size:22px; letter-spacing:.5px; color: var(--gold-3); }
.brand-text span { color: var(--gold); }

.lang-pill {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--gold); background:#fff;
  padding:8px 14px; border-radius:6px; color: var(--gold-3);
  font-size:13px; font-weight:600;
  transition: border-color .2s, box-shadow .2s;
}
.lang-pill:hover { border-color: var(--gold-bright); box-shadow: 0 4px 12px rgba(212,175,55,.25); }
.lang-pill select {
  border:none; background:transparent; color: var(--gold-2); font-family:inherit; font-weight:700; outline:none; cursor:pointer;
}

/* ---------- Hero ---------- */
.hero { padding: 90px 0 40px; text-align: left; }
.hero-logo { display:flex; justify-content:center; margin-bottom: 26px; }
.hero-logo img { height: 180px; filter: drop-shadow(0 16px 30px rgba(138,107,46,.20)); }
.hero-title  { text-align: center; }
.hero-title .g { color: var(--gold); }
.hero-sub    { text-align: center; max-width: 680px; margin: 4px auto 0; font-size: 1.05rem; color: var(--ink-soft); }
.hero-line   { width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 24px auto 0; }

/* ---------- Portal cards ---------- */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 60px 0;
}
.portal-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-soft) 100%);
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  padding: 40px 34px;
  transition: transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(139,105,20,.06), var(--shadow-soft);
}
.portal-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,230,138,.20), transparent 55%);
  pointer-events: none;
}
.portal-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold-shine); opacity: 0; transition: opacity .3s;
}
.portal-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold-bright);
}
.portal-card:hover::after { opacity: 1; }
.portal-icon {
  width: 64px; height: 64px; border-radius: 10px;
  background: var(--gold-metal);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:28px; margin-bottom: 22px;
  box-shadow: 0 10px 22px rgba(184,134,11,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.portal-card h3 { font-size: 1.6rem; color: var(--gold-3); }
.portal-card p  { color: var(--ink-soft); }
.portal-cta {
  display:inline-flex; align-items:center; gap:10px;
  margin-top: 22px;
  color: var(--gold-2); font-weight: 700; letter-spacing:.8px; text-transform: uppercase; font-size: 12px;
}
.portal-cta::after {
  content: '→'; transition: transform .25s;
}
.portal-card:hover .portal-cta::after { transform: translateX(6px); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 24px; border-radius: 6px;
  font-weight: 700; font-size: 13px; letter-spacing:.8px; text-transform: uppercase;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
  font-family: inherit;
  position: relative; overflow: hidden;
}
.btn-primary {
  background: var(--gold-metal);
  color: #fff;
  border-color: var(--gold-2);
  box-shadow: 0 8px 20px rgba(184,134,11,.35), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .55s;
}
.btn-primary:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 14px 30px rgba(184,134,11,.5), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-primary:hover::before { left: 100%; }
.btn-outline { background: #fff; border-color: var(--gold); color: var(--gold-3); }
.btn-outline:hover { background: var(--bg-soft); border-color: var(--gold-bright); }
.btn-ghost { background: transparent; color: var(--gold-3); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 12px; }
.btn-danger { background: #fff; border-color: #E9C4C4; color: var(--danger); }
.btn-danger:hover { background: #FDF3F3; }

/* Pill variants (keep round for specific elements) */
.btn.pill { border-radius: var(--radius-pill); padding: 13px 24px; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-2); font-weight: 700; margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 13px 15px; font-size: 15px; font-family: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 6px;
  color: var(--ink); transition: border-color .18s, box-shadow .18s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow);
}
.form-textarea { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* ---------- Alerts / Flash ---------- */
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; border-left: 4px solid; }
.alert-error { background: #FFF5F5; color: var(--danger); border-left-color: var(--danger); border: 1.5px solid #F3C8C8; border-left-width: 4px; }
.alert-ok    { background: #F4FAF3; color: var(--ok); border-left-color: var(--ok); border: 1.5px solid #CFE6CF; border-left-width: 4px; }
.alert-info  { background: var(--bg-soft); color: var(--gold-3); border-left-color: var(--gold); border: 1.5px solid var(--line); border-left-width: 4px; }

/* ---------- Appointment section ---------- */
.appt-section {
  margin: 80px 0 60px;
  background: linear-gradient(180deg, #FFFFFF, var(--bg-soft));
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.appt-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gold-shine);
}
.appt-section h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--gold-3); }
.appt-section h2 .g { color: var(--gold); font-style: italic; }
.appt-features { list-style: none; padding: 0; margin: 20px 0 0; }
.appt-features li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; color: var(--ink); font-weight: 500;
}
.appt-features li::before {
  content: ''; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-metal);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;
  background-image: var(--gold-metal), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='white' d='M4.5 8.5L2 6l1-1 1.5 1.5L9 2l1 1z'/></svg>");
}
.appt-form { background: #fff; padding: 30px; border-radius: 10px; border: 1.5px solid var(--line); box-shadow: var(--shadow-soft); }
@media (max-width: 900px) { .appt-section { grid-template-columns: 1fr; padding: 36px 24px; } }

/* ---------- Auth Login ---------- */
.auth-wrap {
  min-height: calc(100vh - 80px);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.auth-visual {
  background:
    radial-gradient(700px 400px at 30% 30%, rgba(201,169,97,.35), transparent 60%),
    radial-gradient(600px 400px at 80% 80%, rgba(138,107,46,.25), transparent 60%),
    #FBF7EF;
  border-right: 1px solid var(--line);
  display:flex; flex-direction: column; align-items:center; justify-content: center; padding: 40px;
}
.auth-visual img { max-height: 260px; }
.auth-visual h2 { margin-top: 20px; color: var(--gold-3); text-align: center; }
.auth-visual p  { text-align: center; max-width: 380px; }
.auth-form {
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 8vw; background: #fff;
}
.auth-form h1 { font-size: 2rem; color: var(--gold-3); }
.auth-form .lead { color: var(--ink-soft); margin-bottom: 20px; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; min-height: auto; } .auth-visual { padding: 40px 20px; border-right: 0; border-bottom: 1px solid var(--line); } .auth-form { padding: 40px 24px; } }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 40px 24px 24px;
  color: var(--ink-mute);
  text-align: center;
  font-size: 13px;
  background: var(--bg-soft);
  margin-top: 60px;
}
.site-footer .brand-text { color: var(--gold-3); }