/* MasterPick Premium Mobile Theme */

body{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(180deg,#FFD400 0%,#fff2a0 34%,#f5f6f8 100%) !important;
}

.wrap{
  padding:12px 12px 96px !important;
}

.panel{
  border:0 !important;
  border-radius:30px !important;
  background:rgba(255,255,255,.9) !important;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 45px rgba(0,0,0,.16) !important;
}

.top{
  border-bottom:0 !important;
  border-radius:0 0 34px 34px !important;
  margin-bottom:12px !important;
  box-shadow:0 16px 42px rgba(0,0,0,.18) !important;
}

input,select{
  border:1px solid #e5e5e5 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.btn{
  border-radius:20px !important;
  box-shadow:0 12px 25px rgba(0,0,0,.16) !important;
}

.btn.dark{
  background:#111 !important;
  color:#FFD400 !important;
}

.btn.yellow{
  background:#FFD400 !important;
  color:#111 !important;
}

.msg{
  border-radius:18px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.07);
}

.summary{
  border:0 !important;
  border-radius:24px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.mp-bottom-nav,
.bottom-nav,
#bottomNav{
  backdrop-filter:blur(18px) !important;
  border-radius:28px !important;
  box-shadow:0 18px 48px rgba(0,0,0,.24) !important;
}

#stepForm h2,
#stepLogin h2,
#stepConfirm h2{
  font-size:24px !important;
  font-weight:1000 !important;
  letter-spacing:-.4px;
}

#mpQuickOrderBanner,
#mpRecurringOrderBanner{
  margin-top:14px !important;
}

.mp-qob-card,
.mp-rob-card{
  border-radius:30px !important;
  box-shadow:0 18px 42px rgba(0,0,0,.18) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  overflow:hidden !important;
}

.mp-qob-card img,
.mp-rob-card img,
.mp-qob-card video,
.mp-rob-card video{
  border-radius:24px !important;
}

.mp-qob-pill,
.mp-rob-pill{
  border-radius:18px !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
}

/* Native Premium Header */

.mp-native-header{
  position:relative;
  overflow:hidden;
  padding:22px 18px 26px;
  margin:-12px -12px 18px;
  border-radius:0 0 34px 34px;

  background:
    radial-gradient(circle at top right, rgba(255,255,255,.45), transparent 30%),
    linear-gradient(135deg,#111 0%,#1b1b1b 45%,#2d2d2d 100%);

  color:#fff;

  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.mp-native-header::after{
  content:'';
  position:absolute;
  right:-40px;
  top:-40px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:rgba(255,212,0,.18);
  filter:blur(4px);
}

.mp-native-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.mp-native-user{
  display:flex;
  align-items:center;
  gap:14px;
}

.mp-native-avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  background:linear-gradient(180deg,#FFD400,#ffbf00);
  color:#111;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}

.mp-native-hello{
  font-size:13px;
  opacity:.75;
  margin-bottom:2px;
}

.mp-native-name{
  font-size:20px;
  font-weight:1000;
  line-height:1.1;
  letter-spacing:-.3px;
}

.mp-native-id{
  margin-top:3px;
  font-size:13px;
  opacity:.72;
}

.mp-native-bell{
  width:46px;
  height:46px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.mp-native-card{
  position:relative;
  z-index:2;

  margin-top:20px;
  padding:18px;

  border-radius:24px;

  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 25px rgba(0,0,0,.18);
}

.mp-native-card-label{
  font-size:13px;
  opacity:.72;
}

.mp-native-card-title{
  margin-top:4px;
  font-size:26px;
  font-weight:1000;
  letter-spacing:-.6px;
}

.mp-native-card-sub{
  margin-top:6px;
  font-size:13px;
  opacity:.76;
}

.mp-native-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
}

.mp-native-action{
  flex:1;
  border:0;
  border-radius:18px;
  padding:12px 10px;
  font-weight:800;
  background:#FFD400;
  color:#111;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

.mp-native-action.dark{
  background:rgba(255,255,255,.12);
  color:#fff;
}

/* Premium floating bottom navigation */

body{
  padding-bottom:96px !important;
}

.bottom-nav,
#bottomNav,
.mp-bottom-nav{
  position:fixed !important;
  left:50% !important;
  bottom:14px !important;
  transform:translateX(-50%) !important;

  width:calc(100% - 26px) !important;
  max-width:520px !important;

  padding:9px !important;
  border-radius:30px !important;

  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(22px) saturate(1.35) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.35) !important;

  border:1px solid rgba(255,255,255,.95) !important;

  box-shadow:
    0 18px 48px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.8) !important;

  z-index:9990 !important;
}

.bottom-nav button,
#bottomNav button,
.mp-bottom-nav button,
.bottom-nav a,
#bottomNav a,
.mp-bottom-nav a{
  border:0 !important;
  background:transparent !important;
  color:#667085 !important;

  border-radius:22px !important;
  min-height:48px !important;

  font-size:12px !important;
  font-weight:1000 !important;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}

.bottom-nav button:active,
#bottomNav button:active,
.mp-bottom-nav button:active,
.bottom-nav a:active,
#bottomNav a:active,
.mp-bottom-nav a:active{
  transform:scale(.96) !important;
}

.bottom-nav button.active,
#bottomNav button.active,
.mp-bottom-nav button.active,
.bottom-nav a.active,
#bottomNav a.active,
.mp-bottom-nav a.active{
  background:linear-gradient(180deg,#FFD400,#ffc400) !important;
  color:#111 !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.bottom-nav button.active::after,
#bottomNav button.active::after,
.mp-bottom-nav button.active::after,
.bottom-nav a.active::after,
#bottomNav a.active::after,
.mp-bottom-nav a.active::after{
  content:"";
  display:block;
  width:18px;
  height:4px;
  border-radius:99px;
  background:#111;
  opacity:.9;
  margin:4px auto 0;
}

/* Premium section cards */

.wrap > .panel,
#stepLogin,
#stepForm,
#stepConfirm{
  animation:mpSoftEnter .22s ease both;
}

@keyframes mpSoftEnter{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

#stepLogin,
#stepForm,
#stepConfirm{
  margin-top:12px !important;
}

label{
  color:#222 !important;
  letter-spacing:-.2px;
}

select:focus,
input:focus{
  outline:3px solid rgba(255,212,0,.35) !important;
  border-color:#FFD400 !important;
}

/* Raise bottom nav above Android navigation */

.bottom-nav,
#bottomNav,
.mp-bottom-nav{
  bottom:calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
}


/* Premium order modal */

#stepForm,
#stepConfirm{
  position:relative !important;

  border-radius:34px 34px 0 0 !important;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.98),
      rgba(250,250,250,.96)
    ) !important;

  box-shadow:
    0 -8px 40px rgba(0,0,0,.10),
    0 18px 50px rgba(0,0,0,.14) !important;

  border:1px solid rgba(255,255,255,.95) !important;

  overflow:hidden !important;
}

#stepForm::before,
#stepConfirm::before{
  content:"";

  width:54px;
  height:6px;

  border-radius:999px;

  background:#d0d5dd;

  position:absolute;
  left:50%;
  top:12px;

  transform:translateX(-50%);
}

#stepForm h2,
#stepConfirm h2{
  margin-top:18px !important;

  font-size:26px !important;
  font-weight:1000 !important;

  letter-spacing:-.7px !important;

  color:#111 !important;
}

#stepForm .btn,
#stepConfirm .btn{
  min-height:54px !important;

  border-radius:22px !important;

  font-size:16px !important;
  font-weight:1000 !important;
}

#stepForm input,
#stepForm select{
  min-height:54px !important;

  font-size:16px !important;

  border-radius:20px !important;
}

#stepForm label{
  font-size:13px !important;
  font-weight:900 !important;

  color:#344054 !important;

  margin-bottom:7px !important;

  display:block;
}

#stepForm .summary,
#stepConfirm .summary{
  border-radius:24px !important;

  background:
    linear-gradient(180deg,#fff,#f8f9fb) !important;

  border:1px solid #eef2f6 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 20px rgba(0,0,0,.04) !important;
}

#stepForm{
  animation:mpPremiumSheet .22s ease both;
}

@keyframes mpPremiumSheet{
  from{
    opacity:0;
    transform:translateY(22px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* Strong premium form override */

body #app .wrap #stepForm.panel,
body #app .wrap #stepConfirm.panel{
  border-radius:34px !important;
  padding:26px 18px 20px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.20) !important;
  transform:translateZ(0);
}

body #app .wrap #stepForm.panel h2,
body #app .wrap #stepConfirm.panel h2{
  font-size:28px !important;
  font-weight:1000 !important;
  letter-spacing:-.8px !important;
  margin-top:8px !important;
  margin-bottom:18px !important;
}

body #app .wrap #stepForm.panel label{
  font-size:13px !important;
  font-weight:1000 !important;
  color:#344054 !important;
  margin-top:14px !important;
}

body #app .wrap #stepForm.panel input,
body #app .wrap #stepForm.panel select{
  min-height:56px !important;
  border-radius:22px !important;
  border:1px solid #e6e8ec !important;
  background:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  box-shadow:0 7px 18px rgba(0,0,0,.045) !important;
}

body #app .wrap #stepForm.panel .actions .btn,
body #app .wrap #stepConfirm.panel .actions .btn{
  min-height:56px !important;
  border-radius:24px !important;
  font-size:17px !important;
}

body #app .wrap #stepForm.panel::before,
body #app .wrap #stepConfirm.panel::before{
  content:"";
  display:block;
  width:58px;
  height:6px;
  border-radius:999px;
  background:#d0d5dd;
  margin:0 auto 14px;
}


/* Lift login card closer to header */

#stepLogin,
.login-box,
.login-panel{
  margin-top:-110px !important;
  position:relative !important;
  z-index:40 !important;
}


/* Postbank-style quick login */

.mp-login-hidden-by-quick{
  display:none !important;
}

.mp-quick-login-card{
  margin:18px auto 18px;
  max-width:520px;
  text-align:center;
  padding:26px 18px;
  border-radius:36px;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.9),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92));
  box-shadow:0 22px 60px rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.95);
}

.mp-ql-logo{
  width:118px;
  height:118px;
  margin:0 auto 14px;
  border-radius:50%;
  background:linear-gradient(180deg,#FFD400,#ffc400);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:38px;
  box-shadow:0 18px 44px rgba(0,0,0,.16);
}

.mp-ql-title{
  font-size:34px;
  font-weight:1000;
  letter-spacing:-1px;
  color:#111;
}

.mp-ql-sub{
  font-size:15px;
  font-weight:800;
  color:#667085;
  margin-top:3px;
}

.mp-ql-box{
  margin-top:24px;
  border-radius:30px;
  padding:22px 18px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.mp-ql-avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  margin:0 auto 14px;
  background:#111;
  color:#FFD400;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
}

.mp-ql-hello{
  font-size:24px;
  font-weight:1000;
  color:#111;
}

.mp-ql-mask{
  margin:14px auto 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  padding:10px 14px;
  border-radius:999px;
  background:#f2f4f7;
  font-weight:1000;
  color:#344054;
}

.mp-ql-btn{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:24px;
  background:#111;
  color:#FFD400;
  font-size:18px;
  font-weight:1000;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.mp-ql-change{
  margin-top:12px;
  border:0;
  background:transparent;
  color:#667085;
  font-weight:900;
}

/* Notifications center */

.mp-notif-badge{
  position:absolute;
  right:-4px;
  top:-5px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:#ef233c;
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:1000;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
}

.mp-notif-panel{
  position:fixed;
  right:14px;
  top:88px;
  width:calc(100% - 28px);
  max-width:420px;
  max-height:70vh;
  overflow:auto;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
  border-radius:26px;
  box-shadow:0 22px 60px rgba(0,0,0,.25);
  z-index:99999;
  transform:translateY(-10px);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  border:1px solid rgba(255,255,255,.9);
}

.mp-notif-panel.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.mp-notif-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid #eee;
  font-size:20px;
}

.mp-notif-head button{
  border:0;
  background:#111;
  color:#FFD400;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:22px;
  font-weight:1000;
}

.mp-notif-list{
  padding:12px;
  font-weight:800;
}

.mp-notif-item{
  padding:13px;
  border-radius:18px;
  background:#f8fafc;
  margin-bottom:10px;
  border:1px solid #eef2f6;
}

.mp-notif-item b{
  display:block;
  font-size:15px;
}

.mp-notif-item p{
  margin:5px 0;
  color:#344054;
  font-size:14px;
}

.mp-notif-item small{
  color:#667085;
  font-size:12px;
}

.mp-notif-readall{
  background:#FFD400 !important;
  color:#111 !important;
  font-size:16px !important;
}

.mp-notif-item{
  cursor:pointer;
  transition:.15s ease;
}

.mp-notif-item:active{
  transform:scale(.98);
}

.mp-notif-item.unread{
  background:#fff8d1;
  border-color:#FFD400;
}

.mp-notif-item.unread b::after{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-left:7px;
  border-radius:50%;
  background:#ef233c;
}

.mp-notif-item.read{
  opacity:.68;
}