@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* ===== Theme ===== */
:root{
  --dank-green:#006E54;
  --dank-peach:#FFC272;
  --text:#FBFCFC;
  --btn-text:#006E54;  /* button text color */
}

/* ===== Reset / Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Cairo',sans-serif;
  font-weight:700; 
  background:var(--dank-green);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}

.wrapper {
  min-height: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding:28px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                  /* small gap between logo & socials */
  margin-bottom: 24px;       /* reduced space before buttons */
}

.logo {
  height: auto;
  max-height: 200px;         /* slightly smaller logo for fit */
  max-width: 220px;
  width: auto;
  display: block;
}


/* ===== Socials ===== */
.social{
  display:flex;
  gap:15px;
}

.social a{
  color:var(--text) !important;
  text-decoration:none;
  opacity:.95;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,0.06); /* faint circle */
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.social a:hover{
  opacity:1;
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,.25);
}
.social i{
  font-size:26px;
  color:var(--text) !important;
  filter:drop-shadow(1px 1px 2px rgba(0,0,0,.35));
  transition:filter .15s ease, transform .15s ease;
}
.social i:hover{
  filter:drop-shadow(2px 2px 3px rgba(0,0,0,.5));
  transform:translateY(-1px);
}

/* ===== Main / Buttons ===== */
.main{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:0;                  /* header controls the spacing now */
}

.btn{
  display:grid;
  grid-template-columns:1fr auto 1fr;  /* English | Divider | Arabic */
  align-items:center;
  width:100%;
  background:var(--dank-peach);
  color:var(--btn-text);
  padding:16px 22px;
  font-weight:600;
  border-radius:9999px;
  text-decoration:none;
  /* flat look (no border/finish) */
  transition:transform .06s ease, box-shadow .12s ease;
  text-align:center;
}
.btn:active{
  transform:translateY(1px);
}

.divider{
  opacity:.6;
  font-weight:700;
  padding:0 8px;
  text-align:center;
}

.en{ text-align:left; }
.ar{ text-align:right; }

/* Icons inside buttons */
.btn i{ color:#000; }
.en i{ margin-right:8px; }
.ar i{ margin-left:8px; }

/* ===== Tabs (optional use elsewhere) ===== */
.tabs{ display:flex; gap:12px; width:100%; }
.tab{
  flex:1; border:0; border-radius:9999px; padding:14px 18px; font-weight:700;
  background:#fff; color:#111; cursor:pointer;
}
.tab.active{ background:var(--dank-peach); }
.panel.hidden{ display:none; }

/* ===== Small phones ===== */
@media (max-width:360px){
  .btn{ padding:14px 18px; }
}

/* Panels container */
.panels{ width:100%; }

/* panel base */
.panel{ display:none; }

/* show current panel */
.panel.active{ display:block; }

/* animated reveal for panel items (buttons inside panel) */
.panel .btn{
  opacity:0;
  transform:translateY(8px) scale(.98);
  transition:opacity .35s ease, transform .35s ease;
}
.panel.active .btn{
  opacity:1;
  transform:none;
}
/* stagger effect */
.panel.active .btn:nth-child(1){ transition-delay:.02s; }
.panel.active .btn:nth-child(2){ transition-delay:.06s; }
.panel.active .btn:nth-child(3){ transition-delay:.10s; }
.panel.active .btn:nth-child(4){ transition-delay:.14s; }
.panel.active .btn:nth-child(5){ transition-delay:.18s; }
.panel.active .btn:nth-child(6){ transition-delay:.22s; }

/* Floating Home chip (top-right) */
.home-fab{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top, 0));
  right:14px;
  z-index:2000;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;

  background:#f9f9f9;
  color:var(--dank-green);
  border:1px solid #d4af37;       /* muted gold */
  box-shadow:0 2px 6px rgba(0,0,0,.15);

  text-decoration:none;
  transition:transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}
.home-fab i{ font-size:20px; }
.home-fab:hover{ opacity:.95; }
.home-fab:active{
  transform:translateY(1px);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
/* .home-fab{ border-radius:50%; } */