/* =========================================================
   OM Fun Day — Soft UI (pastel) redesign
   Same IDs / classes as before: only presentation changed.
   ========================================================= */

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  text-rendering:optimizeLegibility;
  color-scheme:light;
}
body{
  margin:0;
  min-height:100dvh;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color:var(--bg);
  background-image:
    radial-gradient(56rem 56rem at 112% -14%, rgba(242,217,166,.46), transparent 62%),
    radial-gradient(46rem 46rem at -16% 12%, rgba(217,243,233,.62), transparent 64%),
    radial-gradient(38rem 38rem at 108% 82%, rgba(255,226,232,.46), transparent 66%),
    linear-gradient(180deg, #FFFDF9 0%, var(--bg) 48%, #F6F2EA 100%);
  background-attachment:fixed;
}
body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
}
body::before{
  width:44vmax;
  height:44vmax;
  inset-block-start:-18vmax;
  inset-inline-start:-14vmax;
  background:radial-gradient(circle at 38% 38%, rgba(242,217,166,.34), rgba(242,217,166,0) 66%);
}
body::after{
  width:38vmax;
  height:38vmax;
  inset-block-end:-16vmax;
  inset-inline-end:-12vmax;
  background:radial-gradient(circle at 58% 42%, rgba(191,233,218,.38), rgba(191,233,218,0) 68%);
}
::selection{background:var(--honey);color:var(--honey-ink)}

h1,h2,h3{line-height:1.25;margin:0;text-wrap:balance}
p{margin:0 0 .9rem;color:var(--muted);font-size:clamp(.97rem,1.6vw,1.02rem)}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
a{color:var(--teal);text-underline-offset:3px}
img{max-width:100%}
:focus-visible{
  outline:3px solid rgba(31,111,99,.35);
  outline-offset:3px;
}
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* ---------- Decorative eyebrow ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.3rem .85rem;
  margin-bottom:.7rem;
  border-radius:999px;
  background:var(--honey-soft);
  border:1px solid rgba(217,178,102,.16);
  color:var(--honey-ink);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--honey-deep);
  box-shadow:0 0 0 4px rgba(217,178,102,.18);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:center;
  padding:
    clamp(34px,6vw,56px)
    clamp(18px,5vw,24px)
    clamp(104px,12vw,150px);
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(ellipse 62% 58% at 50% -6%, rgba(255,255,255,.92), transparent 70%);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset-block-start:12%;
  inset-inline-end:4%;
  width:clamp(96px,20vw,190px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%, rgba(242,217,166,.52), rgba(242,217,166,.05) 70%);
  filter:blur(2px);
}
.hero.sm{padding-bottom:clamp(92px,11vw,128px)}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.35rem,8.6vw,4.2rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
}
.hero h1::after{
  content:"";
  display:block;
  width:clamp(54px,12vw,72px);
  height:6px;
  margin:clamp(12px,2.6vw,18px) auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--honey-strong), var(--mint-deep));
  opacity:.9;
}
.hero .event-date{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  margin:clamp(10px,2vw,14px) auto 0;
  padding:.34rem .95rem;
  border:1px solid rgba(196,148,74,.2);
  border-radius:999px;
  background:linear-gradient(135deg, #FFFDF8 0%, #F8E8C7 100%);
  color:var(--honey-ink);
  font-family:var(--font-display);
  font-size:clamp(.98rem,2.6vw,1.12rem);
  font-weight:800;
  line-height:1.45;
  letter-spacing:.05em;
  box-shadow:
    0 10px 20px -18px rgba(196,148,74,.55),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.hero .event-date-icon{
  width:16px;
  height:16px;
  max-width:16px;
  max-height:16px;
  flex:none;
  display:block;
  color:var(--honey-deep);
}
.hero p{
  color:var(--muted);
  max-width:38rem;
  margin:.9rem auto 0;
  font-size:clamp(1rem,2.4vw,1.1rem);
}
.hero .eyebrow{margin-top:.15rem}
.logo{
  display:block;
  height:clamp(70px,11vw,96px);
  width:auto;
  max-width:min(82vw,340px);
  margin:0 auto clamp(16px,3vw,22px);
  padding:10px 20px;
  object-fit:contain;
  background:rgba(255,255,255,.7);
  border:1px solid var(--white-ring);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(8px);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem 1.1rem;
  border-radius:999px;
  margin-bottom:clamp(.8rem,2.4vw,1.1rem);
  font-weight:700;
  font-size:.92rem;
  color:var(--teal-deep);
  background:rgba(255,255,255,.78);
  border:1px solid var(--white-ring);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
}
.badge::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--honey-deep);
  box-shadow:0 0 0 4px rgba(217,178,102,.18);
}
.hero .banner{
  width:min(100%,920px);
  margin:clamp(18px,4vw,28px) auto 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--white-ring);
  box-shadow:var(--shadow-float);
  background:var(--surface);
}
.hero .banner img{
  display:block;
  width:100%;
  height:clamp(180px,36vw,310px);
  object-fit:cover;
}

/* ---------- Layout ---------- */
.wrap{
  width:min(100%,780px);
  margin:0 auto;
  padding-inline:clamp(16px,4vw,22px);
}
.wrap.wide{width:min(100%,1180px)}
.lift{
  position:relative;
  margin-top:clamp(-96px,-9vw,-64px);
  margin-bottom:clamp(42px,9vw,72px);
}

/* ---------- Cards ---------- */
.card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(180deg, #FFFFFF 0%, var(--surface-2) 100%);
  border:1px solid var(--white-ring);
  border-radius:var(--radius-lg);
  padding:clamp(20px,5vw,38px);
  box-shadow:var(--shadow), 0 0 0 1px var(--line);
}
.card::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:220px;height:220px;
  inset-block-end:-130px;
  inset-inline-end:-84px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(191,233,218,.5), transparent 70%);
  pointer-events:none;
}
.card::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:190px;height:190px;
  inset-block-start:-118px;
  inset-inline-start:-74px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,217,166,.5), transparent 70%);
  pointer-events:none;
}
.card > *{position:relative;z-index:1}
.card.span{grid-column:1/-1}
.card-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(14px,3vw,20px);
}
.card-badge{
  position:relative;
  width:58px;height:58px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--mint) 0%, var(--honey-soft) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 24px -18px rgba(31,111,99,.55);
}
.card-badge::after{
  content:"";
  position:absolute;
  inset-block-end:2px;
  inset-inline-end:2px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--mint-deep);
  border:3px solid #fff;
  box-shadow:0 2px 6px rgba(31,111,99,.25);
}
.card-badge svg{
  width:26px;height:26px;
  color:var(--teal-deep);
}
.card-head-text{display:grid;gap:3px;min-width:0}
.card-head-text h3{
  font-family:var(--font-display);
  font-size:clamp(1.12rem,3vw,1.3rem);
  font-weight:700;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.card-head-text .sub{
  color:var(--muted);
  font-size:.89rem;
  line-height:1.7;
  overflow-wrap:anywhere;
}

/* Smooth lift on admin cards (pointer devices only) */
.cards .card,
#list .card{
  transition:transform .2s ease, box-shadow .25s ease;
}
@media(hover:hover){
  .cards .card:hover,
  #list .card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-float), 0 0 0 1px var(--line);
  }
}

/* ---------- Steps ---------- */
.step{
  counter-increment:s;
  padding:clamp(20px,4vw,30px) 0;
  border-top:1px solid var(--line);
}
.step:first-of-type{border:0;padding-top:0}
.step > h2{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:clamp(.95rem,3vw,1.2rem);
  font-family:var(--font-display);
  font-size:clamp(1.14rem,3.2vw,1.34rem);
  font-weight:700;
  color:var(--ink);
}
.step > h2::before{
  content:counter(s);
  flex:none;
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border-radius:50%;
  color:var(--honey-ink);
  font-family:var(--font);
  font-size:1rem;
  font-weight:800;
  background:linear-gradient(135deg, #F8E7C3, var(--honey));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 12px 24px -16px rgba(217,178,102,.75);
}
form{counter-reset:s}

/* ---------- Grid ---------- */
.grid{display:grid;gap:clamp(12px,3vw,16px)}
@media(min-width:680px){.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.full{grid-column:1/-1}

/* ---------- Form fields ---------- */
label{
  display:block;
  margin:0 0 .5rem;
  font-weight:700;
  font-size:.94rem;
  color:var(--ink-2);
}
input,select,textarea{
  width:100%;
  min-height:56px;
  padding:.8rem 1.2rem;
  font-size:16px;
  color:var(--ink);
  background-color:#F6F4EE;
  border:1.5px solid transparent;
  border-radius:var(--radius-sm);
  box-shadow:inset 0 1px 2px rgba(31,42,46,.04);
  appearance:none;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
textarea{
  min-height:112px;
  border-radius:var(--radius);
  line-height:1.9;
  resize:vertical;
}
select{
  padding-inline-end:2.8rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7378' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 1.1rem center;
  background-size:17px;
  cursor:pointer;
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{
  outline:0;
  background-color:#fff;
  border-color:var(--honey-strong);
  box-shadow:
    0 0 0 4px rgba(242,217,166,.34),
    inset 0 1px 2px rgba(31,42,46,.03);
}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
.fld{margin-top:clamp(12px,3vw,16px)}
.fld:first-of-type{margin-top:0}

/* Field icons (only the public registration + search fields) */
#name,#phone,#email,#q{
  background-repeat:no-repeat;
  background-position:right 1.05rem center;
  background-size:20px;
  padding-right:3rem;
}
#name{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7378' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.8-3.2 5-5 8-5s6.2 1.8 8 5'/%3E%3C/svg%3E");
}
#phone{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7378' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3h3l1.5 4-2 1.4a12 12 0 0 0 6.5 6.5l1.4-2 4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.2 2 2 0 0 1 6.6 3z'/%3E%3C/svg%3E");
}
#email{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7378' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.fn,.fe{
  background-repeat:no-repeat;
  background-position:right 1.05rem center;
  background-size:20px;
  padding-right:3rem;
}
.fn{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7378' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.8-3.2 5-5 8-5s6.2 1.8 8 5'/%3E%3C/svg%3E");
}
.fe{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7378' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
#q{
  background-color:#FFFFFF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7378' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  box-shadow:var(--shadow-soft);
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:54px;
  min-width:44px;
  padding:.72rem clamp(1.35rem,4vw,2rem);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  color:var(--honey-ink);
  font-weight:800;
  font-size:1rem;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
  overflow:hidden;
  background:linear-gradient(135deg, #F6DFAF 0%, var(--honey-strong) 100%);
  box-shadow:
    0 12px 26px -16px rgba(196,148,74,.7),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
@media(hover:hover){
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:
      0 18px 34px -18px rgba(196,148,74,.75),
      inset 0 1px 0 rgba(255,255,255,.75);
    filter:brightness(1.02);
  }
}
.btn:active{transform:translateY(0) scale(.975)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn.block{width:100%;min-height:56px;font-size:1.02rem}
.btn.ghost{
  color:var(--mint-ink);
  background:linear-gradient(135deg, #EAF9F3 0%, var(--mint) 100%);
  border-color:rgba(255,255,255,.65);
  box-shadow:
    0 10px 22px -16px rgba(45,128,106,.5),
    inset 0 1px 0 rgba(255,255,255,.8);
}
@media(hover:hover){
  .btn.ghost:hover{
    box-shadow:
      0 16px 30px -18px rgba(45,128,106,.55),
      inset 0 1px 0 rgba(255,255,255,.85);
  }
}
.btn.ok{
  color:var(--honey-ink);
  background:linear-gradient(135deg, #F6DFAF 0%, var(--honey-strong) 100%);
}
.btn.bad{
  color:var(--rose-ink);
  background:linear-gradient(135deg, #FFE7ED 0%, var(--rose-strong) 100%);
  border-color:rgba(255,255,255,.6);
  box-shadow:
    0 12px 26px -16px rgba(190,78,100,.5),
    inset 0 1px 0 rgba(255,255,255,.8);
}
@media(hover:hover){
  .btn.bad:hover{
    box-shadow:
      0 18px 34px -18px rgba(190,78,100,.55),
      inset 0 1px 0 rgba(255,255,255,.85);
  }
}
.btn.sm{min-height:44px;padding:.5rem 1.05rem;font-size:.92rem;gap:.45rem}
.btn.btn-whatsapp{
  color:#FFFFFF;
  background:linear-gradient(135deg, #25D366 0%, #128C7E 58%, #0B6B5C 100%);
  border-color:rgba(255,255,255,.4);
  box-shadow:
    0 14px 28px -18px rgba(18,140,126,.7),
    inset 0 1px 0 rgba(255,255,255,.28);
}
@media(hover:hover){
  .btn.btn-whatsapp:hover{
    background:linear-gradient(135deg, #2BE06F 0%, #139B83 58%, #0C7564 100%);
    box-shadow:
      0 20px 36px -20px rgba(18,140,126,.8),
      inset 0 1px 0 rgba(255,255,255,.38);
  }
}
.btn.btn-whatsapp .btn-wa-icon{
  width:20px;
  height:20px;
  max-width:20px;
  max-height:20px;
  flex:none;
  display:block;
}
.btn .btn-ico,
.btn .copy-icon,
.btn .rm-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  flex:none;
}
.btn svg{width:18px;height:18px;display:block}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--white-ring);
  background:var(--mint-soft);
  color:var(--mint-ink);
  box-shadow:var(--shadow-xs);
}
.icon-btn svg{width:22px;height:22px}

/* ---------- Messages ---------- */
.msg{
  margin-top:1rem;
  min-height:1.6em;
  text-align:center;
  font-weight:700;
  font-size:.95rem;
  border-radius:var(--radius-sm);
}
.msg:not(:empty){padding:.7rem 1rem}
.msg.ok-t{color:var(--mint-ink);background:var(--mint-soft)}
.msg.bad-t{color:var(--rose-ink);background:var(--rose-soft)}
.ok-t{color:var(--mint-ink)}
.bad-t{color:var(--rose-ink)}

/* ---------- Friends ---------- */
.friend{
  display:grid;
  gap:clamp(12px,3vw,16px);
  margin-bottom:clamp(12px,3vw,16px);
  padding:clamp(14px,4vw,20px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(217,243,233,.38), transparent 78%), var(--surface);
  box-shadow:var(--shadow-xs);
}
.friend header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
  color:var(--ink);
}
.friend header .btn{
  color:var(--rose-ink);
  background:linear-gradient(135deg, #FFF0F3, var(--rose));
  box-shadow:none;
  border-color:rgba(140,34,56,.08);
}
.friend header .btn .rm-icon svg{width:17px;height:17px}

/* ---------- Payment ---------- */
.pay{
  display:grid;
  gap:clamp(10px,3vw,14px);
  margin-bottom:clamp(16px,4vw,24px);
  padding:clamp(14px,4vw,18px);
  border:1px solid rgba(217,178,102,.24);
  border-radius:var(--radius);
  background:linear-gradient(180deg, #FFFDF8, #FBF5E8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.pay p{color:var(--honey-ink);font-weight:700;margin:0}
.pay-grid{display:grid;gap:clamp(10px,3vw,14px)}
.pay-row{
  display:grid;
  gap:.7rem;
  padding:clamp(12px,4vw,16px);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  box-shadow:var(--shadow-xs);
}
.pay-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pay-row-title{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
  color:var(--ink);
}
.pay-row-title::before{
  content:"";
  width:34px;height:34px;
  flex:none;
  border-radius:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A3512' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='3'/%3E%3Cpath d='M3 10h18M16 15h2'/%3E%3C/svg%3E") center/18px no-repeat,
    linear-gradient(135deg, var(--honey-soft), #F7E3BB);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.pay-row-value{
  display:flex;
  align-items:center;
  gap:clamp(8px,3vw,12px);
  flex-wrap:wrap;
}
.pay-row-value b{
  font-size:clamp(1.12rem,4.8vw,1.55rem);
  font-weight:800;
  letter-spacing:.05em;
  direction:ltr;
  word-break:break-all;
  color:var(--ink);
}

/* ---------- Upload drop zone ---------- */
.drop{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-height:184px;
  padding:clamp(18px,6vw,28px);
  text-align:center;
  border:2px dashed rgba(31,111,99,.22);
  border-radius:var(--radius);
  background:linear-gradient(180deg, #F4FBF8, #ECF8F2);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .2s ease;
}
.drop::before{
  content:"";
  width:56px;height:56px;
  border-radius:18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C5445' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") center/24px no-repeat,
    linear-gradient(135deg, #E8F8F1, var(--mint));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 20px -14px rgba(31,111,99,.5);
  transition:transform .18s ease;
}
@media(hover:hover){
  .drop:hover,.drop:focus-within{
    border-color:rgba(31,111,99,.42);
    background:linear-gradient(180deg, #F8FDFB, #E8F7F0);
    box-shadow:0 18px 36px -30px rgba(31,111,99,.4);
  }
  .drop:hover::before{transform:translateY(-2px)}
}
.drop:active{transform:scale(.995)}
.drop input{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  opacity:0;
  cursor:pointer;
}
.drop img{
  display:none;
  width:clamp(104px,26vw,150px);
  height:clamp(104px,26vw,150px);
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.drop span{color:var(--ink-2);font-weight:700}
.drop small{color:var(--muted);font-size:.84rem}
.drop.has::before{display:none}
.drop.has img{display:block}
.drop.has span{font-size:.95rem}

/* ---------- Summary ---------- */
.sum{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:clamp(14px,4vw,20px);
  padding:8px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  font-weight:700;
  color:var(--ink);
}
.sum span{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .9rem;
  border-radius:999px;
  line-height:1.6;
  font-size:.95rem;
}
.sum span:first-child{background:var(--mint-soft);color:var(--mint-ink)}
.sum span:last-child{background:var(--honey-soft);color:var(--honey-ink)}

/* ---------- Honeypot ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Success ---------- */
.done{
  display:grid;
  justify-items:center;
  gap:.9rem;
  padding:clamp(26px,8vw,44px) clamp(10px,4vw,18px);
  text-align:center;
}
.done h2{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,7vw,2.7rem);
  font-weight:800;
  color:var(--ink);
}
.done p{max-width:34rem;margin:0;color:var(--muted)}
.tick{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(86px,18vw,100px);
  height:clamp(86px,18vw,100px);
  border-radius:50%;
  background:radial-gradient(circle at 30% 28%, #7FE3BE, var(--teal));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    0 26px 54px -26px rgba(31,111,99,.6);
}
.tick::after{
  content:"";
  width:18px;height:38px;
  border:solid #fff;
  border-width:0 7px 7px 0;
  transform:rotate(45deg) translate(-4px,-4px);
}

/* ---------- Volunteer scanner ---------- */
.scan{margin:0 auto;max-width:560px}
#reader{
  min-height:300px;
  margin:clamp(10px,3vw,16px) 0;
  border-radius:var(--radius);
  overflow:hidden;
  background:#0E1A1C;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:var(--shadow-soft);
}
#reader video{width:100%!important;height:100%!important;object-fit:cover}
#reader:empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:radial-gradient(circle at 50% 30%, #182B2E, #0E1A1C 70%);
}
#reader:empty::before{
  content:"";
  width:64px;height:64px;
  border-radius:22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD8C3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l1.5-2h7L17 7h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/28px no-repeat,
    rgba(255,255,255,.06);
  border:1px solid rgba(143,216,195,.24);
}
#reader:empty::after{
  content:"الكاميرا هتظهر هنا";
  color:rgba(255,255,255,.62);
  font-size:.88rem;
  font-weight:600;
}
.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  margin:.75rem auto 0;
  padding:.45rem 1rem;
  border-radius:999px;
  background:var(--mint-soft);
  color:var(--mint-ink);
  font-weight:700;
  font-size:.94rem;
  text-align:center;
}
.status:empty{display:none}
.status.bad-t{background:var(--rose-soft);color:var(--rose-ink)}
.status.ok-t{background:var(--mint-soft);color:var(--mint-ink)}
.step-t{
  margin:clamp(18px,4vw,24px) 0 10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
}
.res{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-content:center;
  padding:clamp(18px,6vw,30px);
  text-align:center;
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.res > div{
  display:grid;
  gap:.5rem;
  padding:clamp(24px,7vw,46px) clamp(22px,7vw,58px);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 80px -34px rgba(0,0,0,.4);
}
.res.ok{background:radial-gradient(circle at 50% 12%, #7FE3BE, var(--teal) 72%)}
.res.bad{background:radial-gradient(circle at 50% 12%, #F5A9B8, var(--rose-ink) 74%)}
.res b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.2rem,10vw,3.7rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.3;
}
.res small{font-size:clamp(.98rem,4vw,1.18rem);opacity:.95}
.list{
  display:grid;
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:clamp(12px,4vw,16px);
  border:1px solid rgba(31,111,99,.09);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, #FAFEFC, #F4FBF8);
  box-shadow:var(--shadow-xs);
}
.list li > div{
  position:relative;
  display:grid;
  gap:2px;
  padding-inline-start:46px;
  font-weight:700;
  color:var(--ink);
}
.list li > div::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:2px;
  width:34px;height:34px;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317564D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.8-3.2 5-5 8-5s6.2 1.8 8 5'/%3E%3C/svg%3E") center/18px no-repeat,
    linear-gradient(135deg, #E8F8F1, var(--mint));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 10px -6px rgba(31,111,99,.5);
}
@media(min-width:560px){
  .list li{flex-direction:row;align-items:center;justify-content:space-between}
}
.center{display:grid;gap:.8rem;justify-items:center;text-align:center}
#locked::before{
  content:"";
  width:66px;height:66px;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A3512' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/28px no-repeat,
    linear-gradient(135deg, var(--honey-soft), #F7E3BB);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 28px -20px rgba(217,178,102,.7);
}

/* ---------- Admin ---------- */
.top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(14px,4vw,18px);
  margin:clamp(16px,3vw,24px) 0 clamp(12px,3vw,18px);
  padding:clamp(20px,5vw,30px);
  border:1px solid var(--white-ring);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,252,246,.8));
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(12px);
}
.top h1{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,5.5vw,2.55rem);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
}
.top p{margin:.3rem 0 0;color:var(--muted);font-size:.97rem}
.row2{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
}
@media(min-width:720px){
  .top{flex-direction:row;align-items:center}
  .top .row2{width:auto;justify-content:flex-end}
}
.top .row2 .btn{flex:1 1 auto}
@media(min-width:720px){.top .row2 .btn{flex:0 0 auto}}
.row2 > input{flex:1;min-width:min(100%,260px)}
.tabs{
  display:flex;
  gap:6px;
  margin:12px 0 10px;
  padding:6px;
  position:sticky;
  top:12px;
  z-index:30;
  overflow-x:auto;
  border:1px solid var(--white-ring);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(16px);
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:44px;
  padding:.5rem 1.15rem;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-weight:700;
  font-size:.93rem;
  white-space:nowrap;
  cursor:pointer;
  scroll-snap-align:start;
  transition:background .18s ease, color .18s ease, box-shadow .2s ease, transform .12s ease;
}
@media(hover:hover){.tab:hover{background:var(--mint-soft);color:var(--mint-ink)}}
.tab:active{transform:scale(.98)}
.tab.on{
  color:var(--honey-ink);
  background:linear-gradient(135deg, #F6DFAF 0%, var(--honey-strong) 100%);
  box-shadow:
    0 10px 20px -12px rgba(196,148,74,.65),
    inset 0 1px 0 rgba(255,255,255,.7);
}
@media(max-width:700px){
  .tabs{
    flex-wrap:wrap;
    overflow:visible;
    justify-content:center;
    border-radius:26px;
  }
  .tab{
    flex:1 1 auto;
    min-width:max-content;
    padding:.45rem .8rem;
    font-size:.86rem;
    background:rgba(246,244,238,.8);
    border:1px solid rgba(31,42,46,.035);
    scroll-snap-align:unset;
  }
}
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,4vw,24px);
  padding:clamp(10px,4vw,20px) 0 clamp(44px,12vw,86px);
}
@media(min-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.meta{
  color:var(--muted);
  font-size:.85rem;
  direction:ltr;
  text-align:right;
  word-break:break-word;
}
.imgs{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:clamp(12px,4vw,18px) 0;
}
.imgs figure{margin:0}
.imgs img{
  display:block;
  width:100%;
  height:clamp(230px,58vw,330px);
  object-fit:cover;
  border-radius:20px;
  border:1px solid var(--line);
  cursor:zoom-in;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
@media(hover:hover){
  .imgs img:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
}
.imgs figcaption{margin-top:6px;font-size:.85rem;color:var(--muted);text-align:center}
.people{
  display:grid;
  gap:10px;
  margin:clamp(12px,4vw,18px) 0;
  padding:0;
  list-style:none;
}
.people li{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:clamp(10px,3.5vw,14px) clamp(12px,3.5vw,16px);
  border:1px solid rgba(31,111,99,.09);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, #FAFEFC, #F4FBF8);
}
.people li > div{
  position:relative;
  display:block;
  min-width:0;
  padding-inline-start:46px;
  line-height:1.7;
}
.people li > div .meta{margin-top:2px}
.people li > div::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:2px;
  width:34px;height:34px;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317564D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.8-3.2 5-5 8-5s6.2 1.8 8 5'/%3E%3C/svg%3E") center/18px no-repeat,
    linear-gradient(135deg, #E8F8F1, var(--mint));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 10px -6px rgba(31,111,99,.5);
}
.people li b{
  font-weight:800;
  color:var(--ink);
}
.people li > .ok-t,
.people li > .bad-t{
  display:inline-flex;
  align-items:center;
  padding:.22rem .7rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
}
.people li > .ok-t{background:var(--mint-soft);color:var(--mint-ink)}
.people li > .bad-t{background:var(--rose-soft);color:var(--rose-ink)}
.people li .meta{font-size:.8rem}
@media(min-width:560px){
  .people li{flex-direction:row;align-items:center;justify-content:space-between}
}
.tag{
  display:inline-flex;
  align-items:center;
  margin-inline-start:.35rem;
  padding:.1rem .6rem;
  border-radius:999px;
  background:var(--honey-soft);
  color:var(--honey-ink);
  border:1px solid rgba(217,178,102,.16);
  font-size:.78rem;
  font-weight:700;
  vertical-align:middle;
}
.acts{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:clamp(12px,4vw,18px);
}
@media(min-width:560px){
  .acts{flex-direction:row;flex-wrap:wrap}
  .acts .btn{flex:1 1 220px}
}
.card > .btn,
.card > a.btn{width:100%;margin-top:8px}
@media(min-width:560px){
  .card > .btn,
  .card > a.btn{width:auto;min-width:220px}
}
.stack{display:grid;gap:10px}
.lb{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:clamp(12px,6vw,22px);
  background:radial-gradient(circle, rgba(15,24,26,.94), rgba(15,24,26,.99));
  cursor:zoom-out;
  backdrop-filter:blur(6px);
}
.lb img{
  max-width:100%;
  max-height:100%;
  border-radius:var(--radius);
  box-shadow:0 64px 126px -84px rgba(0,0,0,.8);
}

/* =========================================
   التعديلات الجديدة (الأزرار والأيقونات)
   ========================================= */

/* 1. شريط الأدوات العلوي */
.top-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 0 clamp(10px, 2.5vw, 16px);
}

/* 2. أيقونة الواتساب العلوية */
.top-wa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  flex: none;
}
@media (hover: hover) {
  .top-wa-icon:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.5);
    background-color: #20b858;
  }
}
.top-wa-icon:active {
  transform: scale(0.95);
}
.top-wa-icon svg {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex: none;
}

/* 3. زر الواتساب السفلي */
.btn-wa-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 14px 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(18, 140, 126, 0.5);
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}
@media (hover: hover) {
  .btn-wa-footer:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -14px rgba(18, 140, 126, 0.7);
  }
}
.btn-wa-footer:active {
  transform: translateY(0) scale(0.98);
}
.btn-wa-footer .wa-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}
.btn-wa-footer .wa-badge svg {
  width: 26px;
  height: 26px;
  max-width: 26px;
  max-height: 26px;
  flex: none;
}
.btn-wa-footer .support-text strong {
  color: #FFFFFF;
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  font-weight: 800;
}
.btn-wa-footer .support-text small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}
.btn-wa-footer .support-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #128C7E;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-wa-footer .support-arrow svg {
  width: 17px;
  height: 17px;
  max-width: 17px;
  max-height: 17px;
  flex: none;
}

/* 4. زر تفاصيل الفعالية داخل المودال */
.details-channel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.details-channel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.5);
}
.details-channel-btn svg {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  margin-left: 8px;
  flex: none;
  color: #FFFFFF;
}



/* =========================================================
   Fun Day registration — final responsive action / modal polish
   ========================================================= */

/* Keep details on the visual left and WhatsApp on the visual right,
   including in the RTL Arabic document. */
.top-actions-bar {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 clamp(10px, 2.5vw, 16px);
}

.details-btn {
  direction: rtl;
  min-height: 44px;
  padding: .55rem 1rem;
  gap: .45rem;
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(135deg, #FFFDF8 0%, #F6E7C9 100%);
  color: var(--honey-ink);
  box-shadow: 0 8px 20px -13px rgba(120, 91, 43, .45),
              inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
}
.details-btn .details-info-icon {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex: none;
}
.details-btn .details-chev {
  width: 15px;
  height: 15px;
  max-width: 15px;
  max-height: 15px;
  flex: none;
  transition: transform .2s ease;
}
.details-btn[aria-expanded="true"] .details-chev {
  transform: rotate(180deg);
}
@media (hover: hover) {
  .details-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.025);
    box-shadow: 0 13px 25px -14px rgba(120, 91, 43, .55),
                inset 0 1px 0 rgba(255,255,255,.95);
  }
}
.details-btn:active { transform: translateY(0) scale(.98); }

.top-wa-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: #25D366;
  color: #fff;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 5px 14px rgba(37,211,102,.28),
              inset 0 1px 0 rgba(255,255,255,.28);
}
.top-wa-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
}

/* Event date capsule */
.hero .event-date {
  position: relative;
  z-index: 1;
  width: fit-content;
  min-height: 36px;
  margin: 12px auto 0;
  padding: .32rem .95rem;
}

/* WhatsApp footer CTA: full green button with readable white text. */
.btn-wa-footer {
  box-sizing: border-box;
  background: #25D366;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 12px 26px -14px rgba(18,140,80,.58),
              inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-wa-footer .support-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.btn-wa-footer .support-text strong,
.btn-wa-footer .support-text small {
  color: #fff !important;
}
.btn-wa-footer .support-arrow {
  background: rgba(255,255,255,.2);
  color: #fff;
}
@media (hover: hover) {
  .btn-wa-footer:hover {
    background: #20C45E;
    box-shadow: 0 17px 32px -15px rgba(18,140,80,.68),
                inset 0 1px 0 rgba(255,255,255,.3);
  }
}

/* WhatsApp channel button at the end of the event details modal. */
.details-channel {
  display: grid;
  justify-items: stretch;
  gap: 12px;
  margin-top: 20px;
  padding: clamp(14px, 3.5vw, 20px);
  border: 1px solid rgba(37,211,102,.2);
  border-radius: 20px;
  background: linear-gradient(145deg, #F3FFF7 0%, #E9FAEF 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 10px 24px -22px rgba(18,140,80,.5);
}
.details-channel-text {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.8;
}
.details-channel-btn {
  width: 100%;
  min-height: 48px;
  padding: .7rem 1.1rem;
  gap: .55rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: #25D366;
  color: #fff !important;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 9px 20px -12px rgba(18,140,80,.65),
              inset 0 1px 0 rgba(255,255,255,.25);
}
.details-channel-btn .btn-wa-icon {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  margin: 0;
  flex: none;
}
@media (hover: hover) {
  .details-channel-btn:hover {
    transform: translateY(-2px);
    background: #20C45E;
    box-shadow: 0 13px 24px -13px rgba(18,140,80,.72);
  }
}
.details-channel-btn:active { transform: scale(.985); }

/* Dialog surface and responsive scrolling. */
.details-modal {
  width: min( min(92vw, 760px), calc(100% - 24px));
  max-width: 760px;
  max-height: min(88dvh, 900px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  background: transparent;
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(22,35,32,.25);
}
.details-modal::backdrop {
  background: rgba(28,39,36,.48);
  backdrop-filter: blur(7px);
}
.details-sheet {
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, 900px);
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, #fff 0%, #FCFAF5 100%);
}
.details-head,
.details-foot {
  flex: none;
  padding: 16px clamp(16px, 4vw, 24px);
  background: rgba(255,255,255,.88);
}
.details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.details-heading { min-width: 0; }
.details-heading p { margin: 6px 0 0; }
.details-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.details-close-icon {
  display: block;
  width: 20px;
  height: 20px;
}
.details-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 4vw, 28px);
  -webkit-overflow-scrolling: touch;
}
.event-details-content h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  line-height: 1.5;
}
.event-details-content p {
  margin: 0 0 14px;
  line-height: 1.9;
}
.event-details-content ul {
  margin: 0 0 16px;
  padding-inline-start: 1.5rem;
  color: var(--ink-2);
  line-height: 1.9;
}
.event-details-content .details-alert {
  padding: 14px 16px;
  border: 1px solid rgba(217,178,102,.22);
  border-radius: 16px;
  background: var(--honey-soft);
  color: var(--honey-ink);
}
.event-details-content .details-cta {
  color: var(--ink);
}
.details-foot {
  border-top: 1px solid var(--line);
}
.details-done { margin: 0; }

@media (max-width: 480px) {
  .hero {
    padding-inline: 16px;
  }
  .top-actions-bar {
    gap: 8px;
    margin-bottom: 12px;
  }
  .details-btn {
    min-height: 42px;
    padding: .45rem .72rem;
    gap: .35rem;
    font-size: .84rem;
  }
  .details-btn .details-info-icon {
    width: 17px;
    height: 17px;
    max-width: 17px;
    max-height: 17px;
  }
  .details-btn .details-chev {
    width: 13px;
    height: 13px;
    max-width: 13px;
    max-height: 13px;
  }
  .top-wa-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .btn-wa-footer {
    gap: 10px;
    padding: 12px 14px;
    border-radius: 20px;
  }
  .btn-wa-footer .wa-badge {
    width: 42px;
    height: 42px;
  }
  .btn-wa-footer .wa-badge svg {
    width: 23px;
    height: 23px;
    max-width: 23px;
    max-height: 23px;
  }
  .btn-wa-footer .support-arrow {
    width: 30px;
    height: 30px;
  }
  .details-modal {
    width: calc(100% - 16px);
    max-height: 92dvh;
    border-radius: 20px;
  }
  .details-sheet { max-height: 92dvh; }
  .details-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .details-btn,
  .details-btn .details-chev,
  .top-wa-icon,
  .btn-wa-footer,
  .details-channel-btn {
    transition: none !important;
  }
}
/* ===== Final icon & button fixes (390px) ===== */

/* 4) شريط الأدوات: space-between + gap ثابت، ومفيش نزول لسطر جديد */
.top-actions-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 1) أيقونة الواتساب العلوية: 40px والـ SVG 20px متمركز */
.top-wa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 3px 8px rgba(37, 211, 102, .25);
}
.top-wa-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  flex: none;
  margin: 0;
}

/* 3) زر التفاصيل */
.btn.sm.details-btn {
  min-width: 0;
  max-width: calc(100% - 50px);
  min-height: 40px;
  padding: .45rem .95rem;
  gap: .5rem;
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1.2;
}
.btn.sm.details-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn.sm.details-btn .details-info-icon,
.btn.sm.details-btn .details-chev {
  display: block;
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  flex: none;
}

/* 2) الفوتر: الدائرة 48px والأيقونة 22px في النص تماماً */
.btn-wa-footer {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
}
.btn-wa-footer:hover { background: linear-gradient(135deg, #2BE06F 0%, #139B83 100%); }
.btn-wa-footer .wa-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  line-height: 0;
  overflow: visible;
  border: 0;
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
.btn-wa-footer .wa-badge svg,
.btn-wa-footer .wa-badge .wa-icon {
  display: block;
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  flex: none;
  margin: 0;
  overflow: visible;
}

@media (max-width: 480px) {
  .top-actions-bar { gap: 10px; }
  .top-wa-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .btn.sm.details-btn { padding: .4rem .8rem; font-size: .86rem; gap: .4rem; }
  .btn-wa-footer .wa-badge { flex-basis: 44px; width: 44px; height: 44px; }
  .btn-wa-footer .wa-badge svg,
  .btn-wa-footer .wa-badge .wa-icon { width: 22px; height: 22px; max-width: 22px; max-height: 22px; }
}