:root{--bg:#000000;--card:rgba(255,255,255,0.05);--muted:rgba(255,255,255,.60);--text:#ffffff;--accent:#ff6100;--accent-glow:rgba(255,97,0,0.4);--line:rgba(255,255,255,.10);--glass:rgba(255,255,255,0.03);--glass-border:rgba(255,255,255,0.12)}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:#000;
  color:var(--text);
  min-height:100vh;
  position:relative;
}

/* Make images a bit crisper on mobile Safari without changing design */
img{ image-rendering: -webkit-optimize-contrast; }

/* Faint branded wallpaper on dark pages (mobile + iPad) */
@media (max-width: 1024px){
  body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:url('/app/public/assets/app-bg.jpg');
    background-size:cover;
    background-position:center;
    /* clearer wallpaper (option 1: balanced) */
    opacity:.70;
    filter: none;
    pointer-events:none;
    z-index:-2;
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    /* lighter overlay so the background shows more, while keeping text readable */
    background:
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.62)),
      radial-gradient(1200px 500px at 40% 20%, rgba(255,97,0,.16), transparent);
    pointer-events:none;
    z-index:-1;
  }
}

/* Sharper images on mobile Safari without over-processing */
img{ image-rendering: -webkit-optimize-contrast; }


/* =============================
   Unified mobile header tweaks
   ============================= */
/* Login page: keep unified header visible */
.page-login .site-header{ display:block !important; }
.page-login .mobile-header-spacer{ display:block !important; height:64px; }
/* Raise login/register box higher (final) */
.page-login .rf-auth{ align-items:flex-start; }
.page-login .rf-auth-inner{ padding-top: calc(10px + env(safe-area-inset-top)) !important; }


/* App header: solid black (no transparency) */
.site-header,
.site-header .mobile-header{ background:#000 !important; }

/* Remove logo image on questionnaire page (keep text) */
.page-questionnaire .mobile-logo-img{ display:none !important; }

/* Bell + auth icon should always be white */
.mobile-bell,
.mobile-login{ color:#fff !important; }
.mobile-bell svg,
.mobile-login svg{ color:#fff !important; }

/* =============================
   iOS-style boxes: white/yellow accents (comfortable)
   ============================= */
.ios-card{
  border-color: rgba(255,255,255,.22);
}
.page-register .ios-field,
.page-questionnaire .ios-field,
.page-packages .ios-field,
.page-terms .ios-field,
.page-pay_checkout .ios-field{
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.26);
}
.page-register .ios-field:focus-within,
.page-questionnaire .ios-field:focus-within,
.page-packages .ios-field:focus-within,
.page-terms .ios-field:focus-within,
.page-pay_checkout .ios-field:focus-within{
  border-color: rgba(245,158,11,.85);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 2px rgba(245,158,11,.18);
}
.page-register .ios-input,
.page-questionnaire .ios-input,
.page-packages .ios-input,
.page-terms .ios-input,
.page-pay_checkout .ios-input{
  caret-color:#f59e0b;
}

/* Fix: textarea fields were constrained by fixed height causing overlapping text */
.ios-field.ios-field-area{
  height:auto !important;
  align-items:stretch;
  padding: 12px 14px;
}
.ios-field.ios-field-area .ios-input{
  padding:0 !important;
  line-height:22px;
}
a{color:a{color:var(--accent) !important;text-decoration:none !important} a:hover{text-decoration:underline !important}
.container{max-width:980px;margin:18px auto;padding:0 14px}ding:0 14px}
.card{
  background: var(--glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
  padding: 16px;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.brand img{height:18px}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:12px;border:1px solid rgba(255,97,0,.45);background:transparent!important;color:var(--text)!important;cursor:pointer}
.btn:hover{background:rgba(255,97,0,.10)!important}
.btn-accent{background:rgba(255,97,0,.15)!important;border-color:rgba(255,97,0,.35)!important}

/* =============================
   Pro Profile (trainee/admin)
   ============================= */
.rf-profile{max-width:1100px;margin:16px auto;padding:0 14px}
.rf-profile-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rf-profile-hero-left{display:flex;align-items:center;gap:12px;min-width:260px}
.rf-profile-hero-right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rf-profile-name{font-size:18px;font-weight:900;letter-spacing:.2px}
.rf-profile-sub{color:rgba(255,255,255,.78);margin-top:3px}
.rf-profile-hint{color:rgba(255,255,255,.70);font-size:12px;margin-top:6px}

.rf-avatar{position:relative;height:64px;width:64px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);flex:0 0 auto}
.rf-avatar img{height:100%;width:100%;object-fit:cover;display:block}
.rf-avatar-edit{position:absolute;bottom:-2px;left:-2px;background:rgba(0,0,0,.75);border:1px solid rgba(255,97,0,.45);color:#fff;border-radius:999px;padding:4px 6px;font-size:12px}

.rf-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
.rf-step{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px;min-height:92px;transition:transform .12s ease}
.rf-step:hover{transform:translateY(-1px)}
.rf-step.done{border-color:rgba(255,97,0,.55);box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(255,97,0,.14)}
.rf-step-num{height:28px;width:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font-weight:900}
.rf-step.done .rf-step-num{background:rgba(255,97,0,.15);border-color:rgba(255,97,0,.45)}
.rf-step-label{font-weight:900}
.rf-step-action{margin-top:auto;color:rgba(255,255,255,.72);font-size:12px}

.rf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.rf-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.32)}
.rf-card-title{font-weight:900;margin-bottom:10px}
.rf-muted{color:rgba(255,255,255,.72)}
.rf-empty{color:rgba(255,255,255,.70);padding:10px;border:1px dashed rgba(255,255,255,.18);border-radius:14px;background:rgba(0,0,0,.18)}
.rf-divider{height:1px;background:rgba(255,255,255,.10);margin:12px 0}

.rf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rf-kpi{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px}
.rf-kpi-l{color:rgba(255,255,255,.72);font-size:12px}
.rf-kpi-v{font-weight:900;font-size:16px;margin-top:6px}
.rf-unit{font-size:12px;color:rgba(255,255,255,.70);font-weight:700}

.rf-row{display:flex;gap:8px;flex-wrap:wrap}
.rf-pill{background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 10px}

.rf-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.rf-mini-table{border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden}
.rf-mini-head,.rf-mini-row{display:grid;grid-template-columns:70px 1.2fr 1.2fr 1.6fr;gap:10px;padding:10px 12px;align-items:center}
.rf-mini-head{background:rgba(255,255,255,.06);font-weight:900;color:rgba(255,255,255,.85)}
.rf-mini-row{background:rgba(0,0,0,.16);border-top:1px solid rgba(255,255,255,.08)}

.rf-form{display:grid;gap:10px}
.rf-form-row label{display:block;font-weight:800;margin-bottom:6px}
.rf-pass{margin-top:6px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.rf-pass-title{font-weight:900;margin-bottom:10px}
.rf-pass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

@media (max-width: 980px){
  .rf-steps{grid-template-columns:repeat(2,1fr)}
  .rf-grid{grid-template-columns:1fr}
  .rf-kpis{grid-template-columns:repeat(2,1fr)}
  .rf-pass-grid{grid-template-columns:1fr}
}
.btn-accent:hover{background:rgba(255,97,0,.22)!important}
.input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:var(--text);font-size:16px}
.input:focus,select:focus,textarea:focus{
  outline:none;
  border-color: rgba(245,158,11,.85);
  box-shadow: 0 0 0 2px rgba(245,158,11,.18);
}
label{display:block;margin:8px 0 6px;color:var(--muted);font-size:13px}
.grid{display:grid;gap:14px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Mobile/Tablet: use the unified site-like header (drawer + logo).
   Keep the legacy app topbar for desktop only. */
@media (max-width:1024px){
  .topbar{display:none}
}

@media (max-width:800px){
  .grid2{grid-template-columns:1fr}
  .nav{justify-content:flex-start}
  .container{margin:14px auto}
  .topbar{align-items:flex-start;flex-direction:column}
  .btn{padding:9px 12px;border-radius:12px}
}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:right}
.table-wrap{width:100%;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.table-wrap .table{margin:0;min-width:720px}
.table-wrap .table th{position:sticky;top:0;background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}

/* Trainee profile card */
.profile-hero{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.avatar-wrap{position:relative;width:110px;height:110px}
.avatar{width:110px;height:110px;border-radius:999px;object-fit:cover;border:2px solid rgba(255,97,0,.35);box-shadow:0 12px 35px rgba(0,0,0,.45)}
.avatar-edit{position:absolute;right:6px;bottom:6px;width:42px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.20);background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:12px;color:var(--muted)}
.flash{padding:10px 12px;border-radius:12px;margin:10px 0}
.flash.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25)}
.flash.err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25)}

/* Small icons in tables & meals */
.food-thumb{
  width:34px;height:34px;border-radius:10px;object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  flex:0 0 auto;
}
.food-thumb.ph{
  display:inline-block;
}

/* Modal (mobile friendly) */
.modal{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);
  padding:18px;
  z-index:9999;
}
.modal-card{
  width:min(520px, 100%);
  background:rgba(20,20,20,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}


/* Alternatives grid (meals) */
.alt-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:8px;
}
@media(max-width:560px){
  .alt-grid{ grid-template-columns: 1fr; }
}
.food-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  overflow:hidden;
}



/* --- UI Overrides: transparent buttons + orange border + no underline --- */
a, a:visited, a:hover { text-decoration: none !important; }

/* Default buttons: transparent with orange outline */
.btn, a.btn, button.btn,
.btn-primary, .btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255,97,0,.85) !important;
  color: #fff !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.btn:hover, a.btn:hover, button.btn:hover,
.btn-primary:hover, .btn-secondary:hover {
  background: rgba(255,97,0,.14) !important;
  border-color: rgba(255,97,0,1) !important;
}

/* Accent (primary call-to-action) */
.btn-accent, .btn.btn-accent {
  background: rgba(255,97,0,.18) !important;
  border-color: rgba(255,97,0,1) !important;
  color: #fff !important;
}


.food-row{ display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.food-row:last-child{ border-bottom:0; }
.food-thumb{ width:44px; height:44px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,0.12); }
.alt-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; margin-top:8px; }
@media(max-width:700px){ .alt-grid{ grid-template-columns: 1fr; } }
.food-chip{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* Remove any link underlines coming from browser defaults */
a * { text-decoration: none !important; }
.food-chip, .food-row { min-width:0; }
.food-chip div { min-width:0; }
.alt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:640px){ .alt-grid{ grid-template-columns:1fr; } }



/* Nutrition tables alignment */
.nutri-card table{width:100%;table-layout:fixed;border-collapse:collapse;}
.nutri-card th,.nutri-card td{padding:8px 6px;vertical-align:middle;}
.nutri-card th{font-size:12px;opacity:.9;}
.nutri-card td input,.nutri-card td select{max-width:100%;}
.nutri-card td.imgcell{width:70px;}
.nutri-card td.actioncell{width:140px;}
.nutri-card td.altcell{width:110px;}

/* نفس الستايل ولكن لبطاقات التغذية الحالية (nut-card) */
.nut-card .table-wrap{overflow:auto;}
.nut-card table{width:100%;border-collapse:collapse;min-width:980px;}
.nut-card th,.nut-card td{padding:10px 10px;vertical-align:middle;}
.nut-card th{font-size:12px;opacity:.9;white-space:nowrap;}
.nut-card td{font-size:13px;}
.nut-card td input,.nut-card td select,.nut-card td textarea{max-width:100%;box-sizing:border-box;}
.nut-card td:nth-child(1){width:72px;}
.nut-card td:nth-child(2){min-width:180px;}
.nut-card td:nth-child(3){min-width:200px;}
.nut-card td:nth-child(4){min-width:90px;text-align:center;}
.nut-card td:nth-child(5),.nut-card td:nth-child(6),.nut-card td:nth-child(7){min-width:70px;text-align:center;}
.nut-card td:nth-child(8){min-width:90px;text-align:center;}
.nut-card td:nth-child(9){min-width:240px;}
.nut-card td:nth-child(10){min-width:140px;}
@media (max-width:900px){
  .nutri-card table{table-layout:auto;}
  .nutri-card td.actioncell{width:auto;}
}

@media (max-width:900px){
  .nut-card table{min-width:900px;}
}
@media (max-width:640px){
  .nut-card table{min-width:840px;}
  .nut-card th,.nut-card td{padding:8px 8px;}
}


/* Notifications bell */
.notif-bell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:12px;
  color:#fff !important; /* bell white */
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
}
.notif-bell:hover{background:rgba(255,97,0,.10)}
.notif-count{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px;height:18px;
  padding:0 5px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff8c00,#ff6a00);
  color:#fff;
  font-size:11px;
  line-height:18px;
  text-align:center;
  font-weight:800;
  border:2px solid #0b0b0b;
}

/* ================================
   Login / Splash (mobile-first)
   ================================ */
body.page-login{
  background: #000 url("/app/public/assets/login-bg.jpg") center top/cover no-repeat;
  background-attachment: scroll;
}
body.page-login::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 900px at 50% 38%, rgba(0,0,0,.08), rgba(0,0,0,.55) 70%),
              linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
body.page-splash{
  background:#000 !important;
  background-attachment:scroll !important;
}

body.page-login .container,
body.page-splash .container{
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

.rf-auth{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.rf-auth-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center top;
  filter:saturate(1.04) contrast(1.05);
  transform:scale(1.03);
}
.rf-auth-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(700px 700px at 50% 35%, rgba(255,97,0,.18), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.58) 40%, rgba(0,0,0,.92)),
    radial-gradient(circle at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,.86) 100%);
  pointer-events:none;
}
.rf-auth-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:520px;
  padding:calc(28px + env(safe-area-inset-top)) 18px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.rf-auth-brand{
  text-align:center;
  padding-top:8px;
}
.rf-auth-logo{
  width:min(240px, 72vw);
  height:auto;
  display:block;
  margin:0 auto 10px;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
}
.rf-auth-name{
  font-weight:900;
  letter-spacing:.2px;
  font-size:20px;
}
.rf-auth-tag{
  color:rgba(255,255,255,.72);
  font-size:12px;
  margin-top:2px;
}
.rf-auth-card{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.38);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  padding:18px 16px;
}
.rf-auth-title{
  margin:0;
  font-size:26px;
  font-weight:900;
}
.rf-auth-sub{
  margin:6px 0 14px;
  color:rgba(255,255,255,.70);
  font-size:13px;
}
.rf-auth-form{display:grid;gap:12px;}
.rf-auth-label{margin:0;color:rgba(255,255,255,.72);font-size:13px;}
.rf-auth-field{position:relative;}
.rf-auth-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.8;}
.rf-auth-input{padding-left:40px;}
.rf-auth-btn{width:100%;padding:12px 14px;border-radius:14px;font-weight:900;}
.rf-auth-footer{margin-top:auto;text-align:center;color:rgba(255,255,255,.55);font-size:12px;}

/* Mockup-style fields (match the provided iPhone design) */
.rf-auth-card--mock{padding:18px 16px 16px;}
.rf-auth-form--mock{gap:14px;}

.rf-mock-field{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.rf-mock-ico{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.85;
  font-size:16px;
}
.rf-mock-input{
  width:100%;
  height:54px;
  border:0 !important;
  background:transparent !important;
  color:#fff;
  padding:0 46px 0 14px; /* RTL: icon on the right */
  font-size:16px;
  outline:none;
}
.rf-mock-input::placeholder{color:rgba(255,255,255,.55);}

.rf-mock-field--pass .rf-mock-input{padding-left:132px;}
.rf-mock-forgot{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:rgba(255,255,255,.72);
  text-decoration:none;
}
.rf-mock-forgot:active{opacity:.8;}

.rf-mock-btn{
  margin-top:2px;
  height:54px;
  border-radius:18px;
  font-size:16px;
}


/* =========================
   iOS 100% Login Style (Final)
   Applies only to .page-login
   ========================= */

.page-login{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, "Noto Sans Arabic", "Cairo", sans-serif;
  color:#fff;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  -webkit-text-size-adjust: 100%;
}

/* Remove any shadows/overlays on login */
.page-login *, .page-login *::before, .page-login *::after{
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.page-login .ios-login{
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding: clamp(220px, 38vh, 440px) 16px 20px;
  gap:6px;
}

.page-login .ios-title{
  text-align:center;
  font-weight:800;
  letter-spacing:-0.4px;
  font-size:22px;
  line-height:1.1;
  margin:0;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.page-login .ios-subtitle{
  text-align:center;
  font-size:12px;
  opacity:.72;
  margin:2px 0 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.page-login .ios-form{
  width:100%;
  max-width:420px;
  margin: 4px auto 0;
  direction: rtl;
}

.page-login .ios-field{
  position:relative;
  margin-top:10px;
  display:flex;
  flex-direction:row-reverse; /* icon on the right for RTL */
  align-items:center;
  gap:10px;
  height:48px;
  padding:0 12px;
  border-radius:14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.page-login .ios-input{
  flex:1;
  width:auto;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  color:#fff !important;
  font-size:16px !important; /* prevents iOS zoom */
  line-height:20px;
  padding:0 !important;
  caret-color:#ff7a00;
}

.page-login .ios-input::placeholder{
  color: rgba(255,255,255,.65) !important;
}

.page-login .ios-input:focus{
  outline:none !important;
}

/* =========================
   Auth Pages (Register / Questionnaire / Packages)
   Reuse the same iOS look and prevent layout overflow on mobile
   ========================= */

.page-register,
.page-questionnaire,
.page-packages,
.page-terms,
.page-pay_checkout,
.page-pay_success,
.page-pay_cancel{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, "Noto Sans Arabic", "Cairo", sans-serif;
  color:#fff;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  -webkit-text-size-adjust: 100%;
}

.page-register *,
.page-questionnaire *,
.page-packages *,
.page-terms *,
.page-pay_checkout *{
  box-shadow:none;
}

/* Full-screen background like login */
.page-register,
.page-questionnaire,
.page-packages,
.page-terms,
.page-pay_checkout{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Shared auth container */
.page-register .ios-login,
.page-questionnaire .ios-login,
.page-packages .ios-login,
.page-terms .ios-login,
.page-pay_checkout .ios-login{
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding: clamp(96px, 18vh, 200px) 16px 20px;
  gap:10px;
}

/* Ultra-compact variant for long forms */
.page-questionnaire .ios-login{ padding-top: clamp(88px, 16vh, 170px); }

.page-register .ios-title,
.page-questionnaire .ios-title,
.page-packages .ios-title,
.page-terms .ios-title{
  text-align:center;
  font-weight:800;
  letter-spacing:-0.4px;
  font-size:22px;
  line-height:1.1;
  margin:0;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.page-register .ios-subtitle,
.page-questionnaire .ios-subtitle,
.page-packages .ios-subtitle,
.page-terms .ios-subtitle{
  text-align:center;
  font-size:12px;
  opacity:.72;
  margin:2px 0 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.page-register .ios-form,
.page-questionnaire .ios-form,
.page-packages .ios-form,
.page-terms .ios-form,
.page-pay_checkout .ios-form{
  width:100%;
  max-width:420px;
  margin: 0 auto;
  direction: rtl;
}

.page-register .ios-field,
.page-questionnaire .ios-field,
.page-packages .ios-field,
.page-terms .ios-field,
.page-pay_checkout .ios-field{
  position:relative;
  margin-top:10px;
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:10px;
  height:48px;
  padding:0 12px;
  border-radius:14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Old templates sometimes include <span class="ios-label">..</span>.
   Keep it hidden to match the iOS mockup (placeholders only). */
.ios-label{ display:none; }

.page-register .ios-input,
.page-questionnaire .ios-input,
.page-packages .ios-input,
.page-terms .ios-input,
.page-pay_checkout .ios-input{
  flex:1;
  width:auto;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  color:#fff !important;
  font-size:16px !important; /* prevents iOS zoom */
  line-height:20px;
  padding:0 !important;
  caret-color:#ff7a00;
}

.page-register .ios-input::placeholder,
.page-questionnaire .ios-input::placeholder,
.page-packages .ios-input::placeholder,
.page-terms .ios-input::placeholder,
.page-pay_checkout .ios-input::placeholder{
  color: rgba(255,255,255,.65) !important;
}

.ios-icon{
  width:18px;
  height:18px;
  opacity:.85;
  color: rgba(255,255,255,.9);
  flex: 0 0 auto;
}

.ios-btn{
  margin-top:14px;
  width:100%;
  height:52px;
  border-radius:16px;
  border:none;
  background: linear-gradient(180deg, #ff8a00, #ff5c00);
  color:#fff;
  font-weight:900;
  font-size:16px;
}

.ios-btn:active{ transform: translateY(1px); }

.ios-link{
  display:block;
  text-align:center;
  margin-top:10px;
  color: rgba(255,255,255,.86);
  text-decoration:none;
  font-size:14px;
}

/* Cards for long auth flows (questionnaire / packages) */
.ios-card{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
 }
.ios-card-title{
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 16px;
  margin: 2px 0 10px;
 }
.ios-check{
  display:flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  margin: 2px 0 10px;
 }
.ios-check input{ width:18px; height:18px; }
.ios-textarea{
  height: auto;
  min-height: 110px;
  padding-top: 14px;
  resize: vertical;
 }

/* Back button for all new pages */
.ios-back{
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 12px);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,.95);
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}
.ios-back svg{ width:18px; height:18px; }

.ios-row{
  display:flex;
  gap:10px;
}

.ios-row > *{ flex:1; }

.ios-textarea{
  width:100%;
  min-height:96px;
  padding:12px 14px;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color:#fff;
  font-size:16px;
  line-height:20px;
  outline:none;
  resize: vertical;
}

.ios-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding: 8px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
}

.ios-toggle input[type="checkbox"]{
  width:22px;
  height:22px;
}

.page-login .ios-icon{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}

.page-login .ios-eye{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:rgba(255,255,255,.78);
  padding:6px;
}

.page-login .ios-eye svg{ display:block; width:16px; height:16px; }
.page-login .ios-eye:active{ opacity:1; transform:translateY(-50%) scale(.98); }

/* leave space for eye inside the password field */
.page-login #pass.ios-input{ padding-left:44px !important; }

.page-login .ios-btn{
  width:100%;
  margin-top:12px;
  border:none;
  border-radius:10px;
  padding:9px 12px;
  font-size:14px;
  font-weight:700;
  letter-spacing:-0.2px;
  color:#fff;
  background: linear-gradient(180deg, #ff8a1f, #ff6a00);
  box-shadow:none;
  filter:none;
}

.page-login .ios-btn:active{
  transform:scale(.99);
  filter:none;
}

.page-login .ios-register{
  display:block;
  width:100%;
  max-width:420px;
  margin:10px auto 0;
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  /* match Login button (no shadow / no blur) */
  background: linear-gradient(180deg, #ff8a1f, #ff6a00);
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.page-login .ios-register:active{ transform: scale(.99); opacity:.95; }

.page-login .ios-footer{
  text-align:center;
  opacity:.7;
  font-size:12px;
  margin-top:12px;
}


/* ===== LOGIN + SPLASH: full-screen, same background image ===== */
.page-login, .page-splash{
  background: url("/app/public/assets/login-bg.jpg") center top/cover no-repeat fixed !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* Remove app chrome wrapper spacing on login/splash */
.page-login .container, .page-splash .container{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh;
}

/* Ensure splash fills even with container wrapper */
.page-splash .rf-splash{ height:100vh; width:100%; }

/* ===== iOS ULTRA COMPACT (MAX DENSITY) ===== */
@media (max-width: 480px) {
  .page-login .ios-input {
    font-size: 14px !important;
    padding: 8px 30px 8px 6px !important;
    border-bottom-width: 1px !important;
    line-height: 18px;
  }
  .page-login .ios-icon { font-size: 15px; right: 2px; opacity: 0.7; }
  .page-login .ios-eye { padding: 4px 2px; }
  .page-login .ios-eye svg { width: 16px; height: 16px; }
  .page-login .ios-btn {
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 10px;
    margin-top: 10px;
  }
  .page-login .ios-title { font-size: 24px; margin-bottom: 2px; }
  .page-login .ios-subtitle { font-size: 12px; opacity: 0.65; }
  .page-login .ios-login { gap: 10px; }
  .page-login .ios-form { margin-top: 6px; 
  /* position form lower under Personal training */
  .page-login .ios-login{
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding: clamp(260px, 43vh, 520px) 18px 22px;
  gap:6px;
}
  /* tighten spacing between title and email */
  .page-login .ios-subtitle{
  text-align:center;
  font-size:12px;
  opacity:.72;
  margin:2px 0 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
  .page-login .ios-field{
  position:relative;
  margin-top:10px;
  display:flex;
  flex-direction:row-reverse; /* icon on the right for RTL */
  align-items:center;
  gap:10px;
  height:48px;
  padding:0 12px;
  border-radius:14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
  .page-login .ios-form{
  width:100%;
  max-width:420px;
  margin: 4px auto 0;
  direction: rtl;
}
}



/* ===== LOGIN POSITION UNDER 'Personal training' (match background) ===== */
@media (max-width: 520px){
  .page-login .ios-login{
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding: clamp(260px, 43vh, 520px) 18px 22px;
  gap:6px;
}
  .page-login .ios-form{
  width:100%;
  max-width:420px;
  margin: 4px auto 0;
  direction: rtl;
}
}
/* ensure background is applied */
.page-login{
  background: url("/app/public/assets/login-bg.jpg") center top / cover no-repeat fixed !important;
  filter: none !important;
}


/* --- UX polish: smoother buttons + better touch --- */
:root{
  --rf-radius: 16px;
  --rf-radius-lg: 22px;
}
button, .btn, a.btn, .rf-btn{
  border-radius: var(--rf-radius);
  transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active, .btn:active, a.btn:active, .rf-btn:active{
  transform: scale(.98);
}
input, select, textarea{
  -webkit-tap-highlight-color: transparent;
}
img{ image-rendering: -webkit-optimize-contrast; }


/* small buttons for admin lists */
.btn-sm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  font-size:12px;
}
.btn-sm:hover{ background: rgba(255,255,255,.12); }
.badge.ok{ border-color: rgba(0,255,160,.35); background: rgba(0,255,160,.10); }



/* Show field labels on registration (so selects/date have clear meaning) */
.page-register .ios-label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-bottom:6px;
}

/* FINAL UI FIXES */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Prevent content overlap */
body {
  padding-bottom: 90px !important;
}

.container, .rf-profile, .page-content, .nutrition-container, .training-container, .weekly-program-container {
  margin-bottom: 100px !important;
  padding-bottom: 20px !important;
}

/* Ensure images don't overflow or get covered */
img {
  max-width: 100%;
  height: auto;
}

.card, .ios-card {
  margin-bottom: 15px;
}

/* Right alignment for profile info */
.profile-info-item {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  text-align: right;
  width: 100%;
}

.profile-info-text {
  text-align: right;
  direction: rtl;
}


/* ===== Topbar / Admin Header ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  background: rgba(0,0,0,0.85);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}
.topbar__brand{display:flex;align-items:center;gap:10px;}
.topbar__logo{height:40px;width:40px;border-radius:10px;object-fit:cover;}
.topbar__title{font-weight:800;color:#fff;font-size:18px;line-height:1;}
.topbar__subtitle{font-size:12px;color:#cfcfcf;line-height:1.2;margin-top:2px;}
.topbar__nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.topbar__burger{display:none;border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:10px 12px;font-size:18px;cursor:pointer}
.topbar__mobileMenu{display:none;position:absolute;top:60px;right:12px;left:12px;padding:12px;border-radius:16px;background:rgba(0,0,0,0.92);border:1px solid rgba(255,255,255,.12)}
body.menu-open .topbar__mobileMenu{display:flex;flex-direction:column;gap:10px;}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,138,0,.55);
  background: rgba(0,0,0,.20);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  transition:.15s;
  white-space:nowrap;
}
.nav-btn:hover{background:rgba(255,138,0,.12);}
.nav-btn--accent{background:rgba(255,138,0,.22);}

@media (max-width: 640px){
  .topbar__nav{display:none;}
  .topbar__burger{display:inline-flex;}
}
@media (min-width: 641px){
  .topbar__nav{display:flex !important;}
  .topbar__burger{display:none !important;}
  .topbar__mobileMenu{display:none !important;}
}
  .topbar__burger{display:inline-flex;}
}