/* =====================================================
   eRecepcija – FINAL combined CSS (from snippets)
   ===================================================== */

/* FULL WIDTH FIX FOR BRIZY */
#erec-app .erec-shell{ max-width: 100% !important; }
#erec-app .erec-grid{ max-width: 1600px; margin-left:auto; margin-right:auto; }

/* Phone Preview Premium UI */
#erec-app .erec-phone,
#erec-app .erec-phone *{ font-family: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

#erec-app .erec-phone{ background: transparent; border:none; box-shadow:none; }

#erec-app .phone-frame{
  width:100%;
  max-width:420px;
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  border:none;
  box-shadow:0 30px 90px rgba(111,60,195,.35);
  background:#faf9fe;
}
#erec-app .phone-frame::before{ display:none; }

#erec-app .ph-top{ padding:14px; border-radius:0; }

#erec-app .ph-title{
  width:100%;
  padding:14px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
}

#erec-app .ph-title span{ font-size:15px; font-weight:800; }

#erec-app .ph-tabs{
  display:flex;
  gap:10px;
  padding:8px;
  margin-top:12px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
  box-shadow: 0 14px 40px rgba(111,60,195,.25), inset 0 1px 0 rgba(255,255,255,.6);
}

#erec-app .ph-tabs button{
  flex:1;
  height:48px;
  border-radius:16px;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.25px;
  color:#2f2f3a;
  background: linear-gradient(180deg, #ffffff, #f3f1fa);
  border:none;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.08);
}
#erec-app .ph-tabs button.active{
  background: linear-gradient(135deg, #6F3CC3 0%, #8B63E6 45%, #5A2FA3 100%);
  color:#fff;
  box-shadow: 0 18px 45px rgba(111,60,195,.55), inset 0 1px 0 rgba(255,255,255,.35);
}

#erec-app .ph-body{ padding:16px; }
#erec-app .ph-card{ border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.08); }
#erec-app .ph-card .h{ font-size:14.5px; font-weight:800; }
#erec-app .ph-card .txt{ font-size:13.5px; font-weight:500; }

#erec-app .wifi-box{
  background: linear-gradient(135deg, #6F3CC3 0%, #8B63E6 45%, #5A2FA3 100%);
  color:#fff;
  border-radius:18px;
  box-shadow:0 20px 55px rgba(111,60,195,.6);
}
#erec-app .wifi-box .h{ font-weight:800; font-size:15px; }
#erec-app .wifi-box .copy{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  font-weight:800;
}

/* Fake Map Background (visual) */
#erec-app .map-look{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 35%, rgba(111,60,195,.18), transparent 55%),
    radial-gradient(circle at 30% 65%, rgba(90,47,163,.16), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(245,242,252,.95));
}
#erec-app .map-look::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    repeating-linear-gradient(90deg, rgba(111,60,195,.08) 0, rgba(111,60,195,.08) 2px, transparent 2px, transparent 26px),
    repeating-linear-gradient(0deg, rgba(111,60,195,.06) 0, rgba(111,60,195,.06) 2px, transparent 2px, transparent 26px);
  opacity:.55;
  transform:rotate(-6deg);
}
#erec-app .map-pin{
  position:relative;
  z-index:2;
  background:#fff;
  border:1px solid rgba(111,60,195,.25);
  box-shadow: 0 10px 22px rgba(0,0,0,.08), 0 0 0 8px rgba(111,60,195,.08);
}

/* Mobile edge-to-edge + hide fake status bar */
@media (max-width: 768px) {
  #erec-app .ph-row1{ display:none !important; }
  html, body{ overflow-x:hidden !important; }

  #erec-app{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
  }
  #erec-app .erec-shell,
  #erec-app .erec-grid{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    border-radius:0 !important;
  }
  #erec-app .erec-phone,
  #erec-app .phone-frame{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
  }
  #erec-app .ph-top{ padding-top:12px !important; }
  #erec-app .ph-foot{ padding-bottom: env(safe-area-inset-bottom) !important; }
}

/* Editor Typography Softening */
#erec-app .ed-head h2{ font-size:22px !important; font-weight:700 !important; letter-spacing:-0.2px; }
@media (max-width:768px){ #erec-app .ed-head h2{ font-size:20px !important; } }
#erec-app .ed-actions .btn{ font-weight:700 !important; }
#erec-app #btnPreview, #erec-app #btnSend{ font-weight:700 !important; }
#erec-app .ed-actions .btn .bico{ font-weight:600 !important; }

/* Tabs length & sync + gradient inactive/active light */
#erec-app .pill button{ padding:13px 36px !important; min-width:140px; text-align:center; }
#erec-app .ph-tabs button{ padding:12px 34px !important; min-width:140px; text-align:center; }

#erec-app .pill button:not(.active),
#erec-app .ph-tabs button:not(.active){
  background: linear-gradient(135deg,#6F3CC3 0%,#8B63E6 45%,#5A2FA3 100%) !important;
  color:#fff !important;
  opacity:.95;
}
#erec-app .pill button.active,
#erec-app .ph-tabs button.active{
  background:#ffffff !important;
  color:#4b2d92 !important;
  box-shadow:0 8px 22px rgba(111,60,195,.25);
}
#erec-app .pill, #erec-app .ph-tabs{ gap:16px !important; }

/* Language dropdown styles */
#erec-app #p_lang{
  font-weight:500;
  font-size:13px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  cursor:pointer;
}
#erec-lang-menu{
  position:fixed;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(80,40,160,.30);
  display:none;
  z-index:999999;
  min-width:220px;
  font-size:13px;
  overflow:hidden;
}
#erec-lang-menu div{
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  font-weight:500;
  color:#2b1b4a;
}
#erec-lang-menu div:hover{ background:#f3effc; }
@media (max-width:768px){
  #erec-lang-menu{
    left:50% !important;
    transform:translateX(-50%) !important;
    top:70px !important;
    width:90vw;
    max-width:360px;
  }
}

/* Extra notes text sizing */
#p_extra_notes .txt{ font-size:13px; line-height:1.35; color:#2d2d3b; }

/* Footer powered spacing */
#erec-app .erec-powered{ margin-top:4px; font-size:11.5px; }