/* ============================================================
   FANTA — POSON GREETING CARD  (responsive, mobile/tablet)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'FantaCondensed';
  src:url('../assets/fonts/Fanta-Condensed-Web.ttf') format('truetype');
  font-weight:400 900; font-display:swap;
}
@font-face{
  font-family:'FantaRegular';
  src:url('../assets/fonts/Fanta-Regular-Web.ttf') format('truetype');
  font-weight:400 900; font-display:swap;
}
@font-face{
  font-family:'Apura';                  /* legacy FM font — fed converted ASCII */
  src:url('../assets/fonts/apura.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'DeranaSinhala';
  src:url('../assets/fonts/FM-DeranaX.ttf') format('truetype');
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --frame:#ef5a24;          /* orange-red border             */
  --orange:#f26a21;         /* headings / labels             */
  --orange-deep:#e9531a;
  --btn-a:#f9a23c;          /* submit gradient top           */
  --btn-b:#f47a20;          /* submit gradient bottom        */
  --pill-border:#f3b07c;    /* input pill outline            */
  --ink:#2b2b2b;            /* typed text                    */
  --muted:#7a7a7a;          /* consent text                  */
  --bg:#e9e9e9;             /* behind the frame              */
  --card-text:#e8541e;      /* greeting text on the card     */

  --eng:'FantaCondensed','Nirmala UI','Iskoola Pota','Noto Sans Sinhala','Arial Narrow',sans-serif;
  --apura:'Apura',sans-serif;   /* legacy font; only fed converted ASCII */
  --sin:'Apura',sans-serif;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* scale UI with the screen: grows on tablet, never overflows short screens */
html{font-size:clamp(14px, min(4.9vw, 2.55vh), 27px);}
html,body{ height:100%; }
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--eng);
  display:flex; flex-direction:column;
}

/* ---------- Frame (fills the full screen; orange border = the edge) ---------- */
.frame{
  position:relative; width:100%; flex:1 1 auto; min-height:0;
  background:#fff;
  border:0.3rem solid var(--frame);
  border-radius:0;
  padding:1.6rem 1.5rem 1.6rem;
  overflow:hidden;
  display:flex; flex-direction:column;
}
/* let the scrolling-prone views handle overflow on very short screens */
.view--register, .view--greeting{ overflow-y:auto; }

/* ---------- Views ---------- */
.view{ display:none; flex:1 1 auto; flex-direction:column; min-height:0; }
.view.is-active{ display:flex; animation:fade .35s ease; }
.view--templates{ overflow:hidden; }
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Brand logo ---------- */
.brand{ text-align:center; }
.brand__logo{ width:74%; max-width:560px; height:auto; }
.view--register .brand{ margin:clamp(.4rem,2.5vh,2.4rem) 0 0; }
.brand--foot{ padding-top:.5rem; }
.brand--foot .brand__logo{ width:48%; max-width:340px; }

/* ---------- Headings ---------- */
.heading{
  font-family:var(--eng); color:var(--orange);
  text-align:center; font-weight:800; letter-spacing:.02em;
  font-size:1.78rem; line-height:1.04; margin:.4rem 0 1.5rem;
  text-transform:uppercase;
}
.heading--sm{ font-size:1.55rem; margin:.4rem 0 .8rem; }

/* ---------- Form / fields ---------- */
.form{ display:flex; flex-direction:column; }
.field{ margin-bottom:1.15rem; }
.field--top{ display:flex; flex-direction:column; }

/* fill the panel height and distribute content evenly (matches reference) */
.view--register .form,
.view--greeting .form{ flex:1 1 auto; justify-content:space-evenly; gap:.4rem; }
.view--register .form .field,
.view--greeting .form .field,
.view--greeting .form .dropdown{ margin-bottom:0; }
.view--greeting .form .btn-submit{ margin-top:.2rem; }

.pill{
  background:#fff;
  border:1.5px solid var(--pill-border);
  border-radius:999px;
  height:3.15rem;
  display:flex; align-items:center; justify-content:center;
  padding:0 1.1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .15s, box-shadow .15s;
}
.pill:focus-within{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,106,33,.15); }

.pill input{
  width:100%; border:0; outline:0; background:transparent;
  text-align:center; color:var(--ink);
  font-family:var(--eng); font-weight:700; font-size:1.42rem;
  letter-spacing:.02em;
}
.pill input::placeholder{ color:#b9b9b9; font-weight:700; letter-spacing:.06em; }

/* label below the pill (register screen) */
.label{
  display:block; text-align:center; color:var(--orange);
  font-family:var(--eng); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; font-size:1.52rem; margin-top:.5rem;
}
/* label above the pill (greeting screen) */
.field--top .label{ margin:0 0 .45rem; }

/* ---------- Submit button ---------- */
.btn-submit{
  align-self:center;
  margin-top:.5rem;
  min-width:48%;
  padding:.62rem 2rem;
  border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  color:#fff; font-family:var(--eng); font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; font-size:1.18rem;
  box-shadow:0 4px 10px rgba(242,106,33,.35);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn-submit:hover{ filter:brightness(1.03); }
.btn-submit:active{ transform:translateY(1px); box-shadow:0 2px 6px rgba(242,106,33,.3); }
.btn-submit[disabled]{ opacity:.5; cursor:not-allowed; }

.btn-ghost{
  align-self:center; margin-top:.2rem;
  background:none; border:0; cursor:pointer;
  color:var(--orange); font-family:var(--eng); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; font-size:1rem;
  text-decoration:underline; text-underline-offset:3px;
}

/* ---------- Consent ---------- */
.consent{
  display:flex; gap:.55rem; align-items:flex-start;
  margin-top:1.1rem; color:var(--muted);
  font-family:Arial,system-ui,sans-serif; font-size:.72rem; line-height:1.3;
}
.consent input{ width:1rem; height:1rem; margin-top:.1rem; accent-color:var(--orange); flex:0 0 auto; }

/* ---------- Watermark (faint mandala bottom) ---------- */
.watermark{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:108%; aspect-ratio:1235/520; pointer-events:none;
  mix-blend-mode:multiply; z-index:0;
  background:url('../assets/img/mandala.png?v=2') center bottom / contain no-repeat;
}
.view--register .brand,
.view--register .form{ position:relative; z-index:1; }

/* ---------- Template grid ---------- */
.grid{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr);
  gap:clamp(.6rem,1.6vh,1.2rem); flex:1 1 auto; min-height:0;
}
.grid__item{
  position:relative; min-height:0; border-radius:.45rem; overflow:hidden;
  cursor:pointer; border:2px solid transparent; background:#f2f2f2;
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.grid__item img{ width:100%; height:100%; object-fit:cover; display:block; }
.grid__item:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.16); }
.grid__item.is-selected{ border-color:var(--frame); box-shadow:0 0 0 3px rgba(239,90,36,.25); }

/* ---------- Custom dropdown ---------- */
.dropdown{ position:relative; margin-bottom:1.15rem; }
.dropdown__toggle{
  width:100%; height:3.1rem; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--sin); color:var(--ink);
}
.dropdown__value{
  flex:1 1 auto; text-align:center; font-size:1.18rem; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dropdown__value.is-placeholder{ color:#b9b9b9; }
.dropdown__chev{
  flex:0 0 auto; width:.7rem; height:.7rem; border-right:2px solid var(--orange);
  border-bottom:2px solid var(--orange); transform:rotate(45deg) translateY(-2px);
  transition:transform .2s;
}
.dropdown.is-open .dropdown__chev{ transform:rotate(225deg) translateY(0); }
.dropdown__menu{
  list-style:none; margin:.4rem 0 0; padding:.4rem;
  position:absolute; z-index:30; left:0; right:0; top:100%;
  background:#fff; border:1.5px solid var(--pill-border); border-radius:1rem;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  max-height:60vh; overflow:auto; display:none;
}
.dropdown.is-open .dropdown__menu{ display:block; }
.dropdown__opt{
  display:flex; gap:.5rem; align-items:center; justify-content:center;
  text-align:center;
  padding:.65rem .6rem; border-radius:.7rem; cursor:pointer;
  font-family:var(--sin); color:var(--card-text); font-size:1.12rem; line-height:1.4;
}
.dropdown__opt:hover{ background:#fff4ec; }
.dropdown__opt.is-active{ background:#fff1e6; }
.dropdown__opt .tick{ flex:0 0 1rem; color:var(--orange); font-weight:700; visibility:hidden; font-family:Arial,sans-serif; }
.dropdown__opt.is-active .tick{ visibility:visible; }

/* ---------- Result ---------- */
.view--result{ justify-content:center; gap:.4rem; }
.result-card{
  position:relative; width:100%; aspect-ratio:1280/720;
  border-radius:.6rem; overflow:hidden; background:#f3efe6;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.result-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.result-card__loader{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:#f3efe6;
}
.result-card.is-ready .result-card__loader{ display:none; }

.result-actions{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.2rem; }
.result-actions .btn-submit{ min-width:70%; }
.btn-outline{
  background:#fff; color:var(--orange);
  border:2px solid var(--orange); box-shadow:none;
}
.btn-outline:hover{ filter:none; background:#fff6f0; }

.result-note{
  text-align:center; color:var(--muted); font-family:Arial,sans-serif;
  font-size:.78rem; margin:.9rem 0 0;
}

/* ---------- Loader ---------- */
.loader{
  width:42px; aspect-ratio:1; border-radius:50%;
  border:5px solid rgba(242,106,33,.25); border-top-color:var(--orange);
  animation:spin .8s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px);
  background:#2b2b2b; color:#fff; padding:.7rem 1.1rem; border-radius:.6rem;
  font-family:Arial,sans-serif; font-size:.85rem; max-width:88%;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:100;
}
.toast.is-show{ opacity:1; transform:translate(-50%,0); }