/* =====================================================================
   Brand: Green — "Switch up, don't look back" (#GoGreen)
   Loaded after assets/css/kiosk.css; only overrides what differs.
   Positions are in the 1080 x 1920 design grid.
   ===================================================================== */

.brand-green {
  --green: #2fa943;
  --green-bright: #2fa943;
  --pill-fill: #262c28;
  --pill-edge: linear-gradient(180deg, #d2d4d2 0%, #a6a8a6 45%, #8d8f8d 60%, #c9cbc9 100%);
}

.brand-green .stage { background: #000; }

/* Language button: white globe, white label */
.brand-green .lang-btn { color: #fff; left: 50px; top: 38px; }
.brand-green .lang-btn .lang-label { font-size: 34px; }

/* ---------- Backgrounds (from the designs) ---------- */

.brand-green .screen { --edge-top: #000; --edge-bottom: #040b06; --edge-top-img: linear-gradient(#000, #000); }
.brand-green .screen-splash { background: #000; }
.brand-green .stage .screen-form,
.brand-green .stage .screen-step,
.brand-green .stage .screen-done { background: #000 center / 100% 100% no-repeat; }

.brand-green .stage[data-lang="en"] .screen-form { background-image: url('bg/form-en.webp'); }
.brand-green .stage[data-lang="ar"] .screen-form { background-image: url('bg/form-ar.webp'); }
.brand-green .stage[data-lang="en"] .screen-step { background-image: url('bg/step-en.webp'); }
.brand-green .stage[data-lang="ar"] .screen-step { background-image: url('bg/step-ar.webp'); }
.brand-green .stage[data-lang="en"] .screen-done { background-image: url('bg/done-en.webp'); }
.brand-green .stage[data-lang="ar"] .screen-done { background-image: url('bg/done-ar.webp'); }

/* ---------- Start screen ---------- */

.brand-green .splash-bg { position: absolute; inset: 0; width: 1080px; height: 1920px; }
.brand-green .screen-splash.is-active .splash-bg { animation: fadeIn .8s ease both; }
.brand-green .splash-start { left: 291px; top: 1706px; width: 498px; height: 98px; font-size: 50px; animation: greenGlow 2.8s ease-in-out infinite; }
.brand-green .splash-closed { top: 1720px; }
@keyframes greenGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 169, 67, 0), 0 10px 30px rgba(0, 0, 0, .4); }
  50% { box-shadow: 0 0 34px 6px rgba(47, 169, 67, .45), 0 10px 30px rgba(0, 0, 0, .4); }
}

/* Dark glass buttons (PRESS TO START / START YOUR MIX / MIX) */
.brand-green .glass-btn { box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }

/* ---------- Customer details ---------- */

.brand-green .reg-input { background: #b2b3b2; color: #111; }
.brand-green .reg-input::placeholder { color: rgba(20, 20, 20, .45); }
.brand-green .reg-input:focus { background: #cfd0cf; border-color: #2fa943; box-shadow: 0 0 0 4px rgba(47, 169, 67, .25); }
.brand-green .reg-consent .box { border-color: #fff; border-radius: 4px; }
.brand-green .reg-error { color: #ffb3b3; }

/* ---------- Step screens ---------- */

.brand-green .step-title { color: #fff; }
.brand-green .step-count { border-color: #2fa943; }
.brand-green .screen-step { --arrow: #034a12; }

.brand-green .opt { color: #fff; }
.brand-green .opt.is-selected { color: var(--accent, #2fa943); }
.brand-green .kind-pack .opt-label { font-weight: 700; }

/* option spacing per screen (matches the designs) */
.brand-green .screen-step[data-step="flavor"] .opts { top: 640px; height: 890px; --gap-max: 107px; }
.brand-green .screen-step[data-step="mix"] .opts { top: 540px; height: 960px; --gap-two: 259px; }
.brand-green .screen-step[data-step="addon"] .opts,
.brand-green .screen-step[data-step="topping"] .opts { top: 560px; height: 960px; --gap-max: 145px; --gap-two: 260px; }

/* cans and ingredient pictures on the buttons */
.brand-green .kind-pack .opt-img { left: 25px; bottom: 2px; width: 104px; height: 162px; }
.brand-green .kind-ing .opt-img { left: 8px; width: 186px; height: 150px; transform: translateY(-60%); }
.brand-green .stage[dir="rtl"] .kind-pack .opt-img { left: auto; right: 25px; }
.brand-green .stage[dir="rtl"] .kind-ing .opt-img { left: auto; right: 8px; }
.brand-green .opts.dense .kind-ing .opt-img { width: 150px; height: 120px; }

.brand-green .mix-btn { left: 705px; top: 1722px; width: 241px; height: 128px; }
.brand-green .stage[dir="rtl"] .mix-btn { left: 134px; }
.brand-green .mix-btn:not(:disabled) { animation: greenGlow 2.4s ease-in-out infinite; }

/* ---------- Order placed ---------- */

.brand-green .done-head.en-only { top: 140px; }
.brand-green .done-head.en-only .l2 { font-weight: 400; }
.brand-green .done-head.ar-only { top: 110px; }
.brand-green .done-head.ar-only .l1 { font-size: 132px; }

.brand-green .done-card {
  top: 705px; height: 471px; border-radius: 18px;
  background: #2fa943; color: #fff;
  box-shadow: 0 0 60px rgba(47, 169, 67, .35), 0 20px 50px rgba(0, 0, 0, .5);
}
.brand-green .done-card .t1, .brand-green .done-card .t2 { font-weight: 400; }

.brand-green .done-collect {
  top: 1270px; font-size: 88px; line-height: 1.25;
  color: #fff;
  text-shadow:
    4px 0 0 #2fa943, -4px 0 0 #2fa943, 0 4px 0 #2fa943, 0 -4px 0 #2fa943,
    3px 3px 0 #2fa943, -3px 3px 0 #2fa943, 3px -3px 0 #2fa943, -3px -3px 0 #2fa943,
    0 0 26px rgba(47, 169, 67, .6);
}
.brand-green .stage[data-lang="ar"] .done-collect { top: 1230px; font-size: 100px; }

.brand-green .done-new { top: 1810px; }