/* Fokat Loot Premium Clean UI v4
   Goal: unified premium light UI without destructive layout overrides. */
:root{
  --fl-blue:#0b73f6;--fl-blue-2:#2a91ff;--fl-blue-soft:#eef6ff;
  --fl-ink:#0b1736;--fl-text:#16233f;--fl-muted:#596a87;--fl-line:#dfe8f3;
  --fl-bg:#f5f8fc;--fl-card:#ffffff;--fl-green:#0aa957;--fl-red:#e83b52;
  --fl-shadow:0 10px 30px rgba(31,65,111,.09);--fl-radius:22px;
}
html{background:var(--fl-bg)!important;-webkit-text-size-adjust:100%}
body[data-fl-page]{
  background:linear-gradient(180deg,#edf5ff 0,#f8fbff 250px,#f5f8fc 100%)!important;
  color:var(--fl-text)!important;font-family:Inter,Poppins,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  padding-top:138px!important;padding-bottom:94px!important;min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body[data-fl-page] *,body[data-fl-page] *::before,body[data-fl-page] *::after{box-sizing:border-box}
body[data-fl-page] img{max-width:100%;height:auto}

/* Header: intentionally isolated from page layouts */
body.has-user-shared-header .user-shared-header{
  position:fixed!important;inset:0 0 auto 0!important;height:138px!important;min-height:138px!important;
  padding:22px 20px 34px!important;margin:0!important;border:0!important;border-radius:0 0 28px 28px!important;
  background:linear-gradient(135deg,#2693ff 0%,#0d75f5 54%,#0867e8 100%)!important;
  box-shadow:0 10px 28px rgba(17,103,213,.18)!important;backdrop-filter:none!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;z-index:9998!important;
}
.user-shared-header::after{content:"";position:absolute;right:-52px;bottom:-74px;width:255px;height:190px;border-radius:50%;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.user-shared-header .ush-left{display:flex!important;align-items:center!important;gap:14px!important;min-width:0!important;position:relative;z-index:1}
.user-shared-header .ush-logo{width:68px!important;height:68px!important;flex:0 0 68px!important;border-radius:50%!important;overflow:hidden!important;background:#071326!important;border:2px solid rgba(255,255,255,.95)!important;box-shadow:0 6px 18px rgba(3,39,91,.18)!important}
.user-shared-header .ush-logo img{width:100%!important;height:100%!important;object-fit:cover!important}
.user-shared-header .ush-copy{min-width:0!important}
.user-shared-header .ush-name{font-size:24px!important;line-height:1.12!important;font-weight:800!important;letter-spacing:-.45px!important;color:#fff!important;max-width:min(58vw,520px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.user-shared-header .ush-sub{margin-top:6px!important;font-size:14px!important;line-height:1.3!important;font-weight:500!important;color:rgba(255,255,255,.92)!important;max-width:min(58vw,520px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.user-shared-header .ush-notification{width:54px!important;height:54px!important;flex:0 0 54px!important;border-radius:50%!important;border:0!important;background:#fff!important;color:#10213f!important;box-shadow:0 8px 24px rgba(3,45,103,.18)!important;display:grid!important;place-items:center!important;position:relative!important;z-index:1!important}
.user-shared-header .ush-notification svg{width:24px!important;height:24px!important}
.user-shared-header .ush-badge{top:4px!important;right:4px!important;width:11px!important;min-width:11px!important;height:11px!important;padding:0!important;border-radius:50%!important;background:#247af3!important;border:2px solid #fff!important;font-size:0!important}

/* Readability and premium surfaces; no forced grid/flex rewrites */
body[data-fl-page] h1,body[data-fl-page] h2,body[data-fl-page] h3,body[data-fl-page] h4,
body[data-fl-page] .section-title,body[data-fl-page] .offer-title,body[data-fl-page] .card-title,
body[data-fl-page] .title,body[data-fl-page] strong{color:var(--fl-ink)!important}
body[data-fl-page] p,body[data-fl-page] .muted,body[data-fl-page] .subtitle,body[data-fl-page] .offer-desc,
body[data-fl-page] .description,body[data-fl-page] .helper,body[data-fl-page] small{color:var(--fl-muted)!important;line-height:1.5!important}
body[data-fl-page] .card,body[data-fl-page] .offer-card,body[data-fl-page] .wallet-card,
body[data-fl-page] .balance-card,body[data-fl-page] .activity-card,body[data-fl-page] .notification-card,
body[data-fl-page] .transaction-card,body[data-fl-page] .ticket-card,body[data-fl-page] .history-card,
body[data-fl-page] .stat-card,body[data-fl-page] .referral-hero,body[data-fl-page] .hero-card{
  background:#fff!important;color:var(--fl-text)!important;border-color:var(--fl-line)!important;
  border-radius:var(--fl-radius)!important;box-shadow:var(--fl-shadow)!important;
}
body[data-fl-page] input,body[data-fl-page] select,body[data-fl-page] textarea{
  background:#fff!important;color:var(--fl-text)!important;border-color:#cfdbea!important;border-radius:13px!important;
  font-size:16px!important;box-shadow:none!important;
}
body[data-fl-page] input::placeholder,body[data-fl-page] textarea::placeholder{color:#8290a6!important;opacity:1!important}
body[data-fl-page] input:focus,body[data-fl-page] select:focus,body[data-fl-page] textarea:focus{border-color:#2a83f3!important;box-shadow:0 0 0 3px rgba(42,131,243,.11)!important;outline:0!important}

/* Primary actions only, preserve component geometry */
body[data-fl-page] .btn-primary,body[data-fl-page] .primary-btn,body[data-fl-page] .claim-btn,
body[data-fl-page] .submit-btn,body[data-fl-page] .start-btn,body[data-fl-page] .earn-btn,
body[data-fl-page] button[type="submit"]{
  background:linear-gradient(135deg,#258eff,#0769ee)!important;color:#fff!important;border-color:transparent!important;
  border-radius:14px!important;font-weight:750!important;box-shadow:0 8px 19px rgba(11,105,236,.22)!important;
}
body[data-fl-page] .status-approved,body[data-fl-page] .approved,body[data-fl-page] .credit{color:var(--fl-green)!important}
body[data-fl-page] .status-rejected,body[data-fl-page] .rejected,body[data-fl-page] .debit{color:var(--fl-red)!important}

/* Prevent the text-breaking regression seen in V3 */
body[data-fl-page] .offer-card,body[data-fl-page] .offer-card *{word-break:normal!important;overflow-wrap:normal!important}
body[data-fl-page] .offer-title,body[data-fl-page] .offer-name,body[data-fl-page] .card-title{white-space:normal!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important}

/* Bottom nav – compact, centered, fully visible */
.bottom-nav.shared-user-nav{
  position:fixed!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  bottom:8px!important;width:min(calc(100% - 18px),900px)!important;height:76px!important;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;margin:0!important;
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:center!important;
  background:rgba(255,255,255,.985)!important;border:1px solid #dfe7f1!important;border-radius:24px!important;
  box-shadow:0 12px 30px rgba(28,63,108,.15)!important;backdrop-filter:blur(14px)!important;overflow:hidden!important;z-index:9999!important;
}
.bottom-nav.shared-user-nav .nav-item{min-width:0!important;height:60px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#66758d!important;text-decoration:none!important;font-size:10.5px!important;font-weight:650!important;line-height:1!important}
.bottom-nav.shared-user-nav .nav-item svg{width:23px!important;height:23px!important;flex:0 0 auto!important}
.bottom-nav.shared-user-nav .nav-item span{display:block!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.bottom-nav.shared-user-nav .nav-item.active{color:#0a72f4!important;font-weight:800!important}
body.has-shared-user-nav{padding-bottom:98px!important}
.floating-btn.shared-user-float{width:48px!important;height:48px!important;right:17px!important}
.floating-btn.shared-user-float.telegram-btn{bottom:160px!important}.floating-btn.shared-user-float.whatsapp-btn{bottom:104px!important}

/* Notification popup should match light user UI */
.fokat-notification-popup{background:#fff!important;border:1px solid var(--fl-line)!important;box-shadow:0 18px 50px rgba(28,63,108,.18)!important}
.fokat-notification-popup .fnp-title{color:var(--fl-ink)!important}.fokat-notification-popup .fnp-message{color:var(--fl-muted)!important}.fokat-notification-popup .fnp-close{background:#f2f6fb!important;color:#53637b!important}

@media(max-width:520px){
  body[data-fl-page]{padding-top:126px!important;padding-bottom:94px!important}
  body.has-user-shared-header .user-shared-header{height:126px!important;min-height:126px!important;padding:18px 16px 30px!important;border-radius:0 0 24px 24px!important}
  .user-shared-header .ush-logo{width:60px!important;height:60px!important;flex-basis:60px!important}
  .user-shared-header .ush-name{font-size:20px!important;max-width:58vw!important}.user-shared-header .ush-sub{font-size:12px!important;margin-top:4px!important}
  .user-shared-header .ush-notification{width:48px!important;height:48px!important;flex-basis:48px!important}
  body[data-fl-page] .card,body[data-fl-page] .offer-card,body[data-fl-page] .wallet-card,body[data-fl-page] .balance-card,
  body[data-fl-page] .activity-card,body[data-fl-page] .notification-card,body[data-fl-page] .transaction-card,
  body[data-fl-page] .ticket-card,body[data-fl-page] .history-card,body[data-fl-page] .stat-card{border-radius:18px!important}
  .bottom-nav.shared-user-nav{width:calc(100% - 14px)!important;height:72px!important;bottom:7px!important;border-radius:22px!important}
  .bottom-nav.shared-user-nav .nav-item{height:56px!important;font-size:10px!important}.bottom-nav.shared-user-nav .nav-item svg{width:22px!important;height:22px!important}
}
@media(max-width:360px){
  .user-shared-header .ush-name{font-size:18px!important;max-width:55vw!important}.user-shared-header .ush-logo{width:56px!important;height:56px!important;flex-basis:56px!important}
  .bottom-nav.shared-user-nav .nav-item{font-size:9px!important}
}