/* =====================================================
   EASY PARK - GLOBAL DESIGN SYSTEM
   Shared across all EasyPark pages
===================================================== */


/* =====================================================
   FONT
===================================================== */

@import url(
  "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap"
);


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root{

  /* FONT */

  --font-family:
    "Roboto",
    Arial,
    sans-serif;

  --font-regular:400;
  --font-medium:500;
  --font-semibold:600;
  --font-bold:700;
  --font-extrabold:800;


  /* MAIN COLORS */

  --navy:#12244d;

  --blue:#315d9b;
  --blue-light:#4778bd;
  --blue-soft:#67a8ff;

  --text:#111827;
  --muted:#65758b;

  --success:#32cb64;
  --danger:#ef3440;
  --warning:#f5a623;


  /* LIGHT MODE */

  --light-phone:#d8e9ff;

  --light-glass:
    rgba(255,255,255,.14);

  --light-glass-strong:
    rgba(255,255,255,.22);

  --light-border:
    rgba(255,255,255,.74);


  /* DARK MODE */

  --dark-bg:#0a101b;

  --dark-card:
    rgba(27,48,77,.56);

  --dark-card-soft:
    rgba(18,29,47,.58);

  --dark-border:
    rgba(255,255,255,.11);

  --dark-text:#f4f7fb;
  --dark-muted:#9eabba;


  /* GLASS */

  --glass:
    rgba(255,255,255,.14);

  --glass-strong:
    rgba(255,255,255,.22);

  --glass-soft:
    rgba(255,255,255,.09);

  --glass-border:
    rgba(255,255,255,.74);

  --glass-border-soft:
    rgba(255,255,255,.44);


  /* RADIUS */

  --radius-small:1.4rem;
  --radius-medium:1.8rem;
  --radius-card:2.4rem;
  --radius-large:2.7rem;
  --radius-pill:99rem;


  /* SHADOWS */

  --shadow-soft:
    0 1rem 2.5rem
    rgba(34,63,103,.06);

  --shadow-button:
    0 .8rem 2rem
    rgba(42,91,181,.18);

  --shadow-glass:
    inset 0 .1rem .1rem
    rgba(255,255,255,.35),
    0 1rem 2.5rem
    rgba(34,63,103,.055);


  /* GLOBAL SIZES */

  --header-height:6.5rem;

  --bottom-nav-height:5.8rem;

  --button-height:5rem;

  --input-height:5rem;

}


/* =====================================================
   RESET
===================================================== */

html{

  font-size:10px;

  -webkit-text-size-adjust:100%;

}


*,
*::before,
*::after{

  box-sizing:border-box;

}


*{

  margin:0;
  padding:0;

  -webkit-tap-highlight-color:
    transparent;

}


body,
button,
input,
textarea,
select,
option{

  font-family:
    var(--font-family);

}


button,
input,
textarea,
select{

  font:inherit;

}


button,
a{

  -webkit-user-select:none;
  user-select:none;

}


/* =====================================================
   DESKTOP SCALE
===================================================== */

@media (min-width:501px){

  html{

    font-size:
      min(
        10px,
        calc((100dvh - 3.2rem) / 96),
        calc((100vw - 3.2rem) / 45.8)
      );

  }

}


/* =====================================================
   MOBILE SCALE
===================================================== */

@media (max-width:500px){

  html{

    font-size:
      calc(100vw / 43);

  }

}


/* =====================================================
   BODY
===================================================== */

body{

  width:100%;
  min-height:100vh;
  min-height:100dvh;

  display:grid;

  place-items:center;

  overflow:hidden;

  color:
    var(--text);

  background:#171c24;

}


/* =====================================================
   TRANSITIONS
===================================================== */

body,
.phone,
.theme-toggle,
.theme-btn,
.back-btn,
.glass,
.glass-card,
.glass-card-soft,
.bottom-nav,
.nav-link,
.input-shell,
.option-btn,
.status-pill,
button,
input,
a{

  transition:
    background .28s ease,
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    opacity .28s ease,
    transform .2s ease;

}


/* =====================================================
   TYPOGRAPHY
===================================================== */

.text-page-title{

  font-size:2rem;

  font-weight:
    var(--font-bold);

}


.text-main-title{

  font-size:2.4rem;

  font-weight:
    var(--font-extrabold);

}


.text-section-title{

  font-size:1.15rem;

  font-weight:
    var(--font-bold);

}


.text-body{

  font-size:.95rem;

  font-weight:
    var(--font-regular);

  line-height:1.55;

}


.text-small{

  font-size:.82rem;

  font-weight:
    var(--font-regular);

}


.text-label{

  font-size:.85rem;

  font-weight:
    var(--font-semibold);

}


.text-muted{

  color:
    var(--muted);

}


/* =====================================================
   FONT HELPERS
===================================================== */

.font-regular{
  font-weight:var(--font-regular);
}

.font-medium{
  font-weight:var(--font-medium);
}

.font-semibold{
  font-weight:var(--font-semibold);
}

.font-bold{
  font-weight:var(--font-bold);
}

.font-extrabold{
  font-weight:var(--font-extrabold);
}


/* =====================================================
   IPHONE DEVICE
===================================================== */

.device{

  position:relative;

  width:45.8rem;
  height:96rem;

  padding:1.4rem;

  flex:none;

  border-radius:6.8rem;

  background:
    linear-gradient(
      145deg,
      #8a8d93 0%,
      #3a3c41 22%,
      #1c1d20 50%,
      #2f3135 78%,
      #7c7f85 100%
    );

  box-shadow:
    inset 0 0 0 .15rem
    rgba(255,255,255,.35),

    inset 0 0 0 .45rem
    #0d0d0f,

    0 3rem 8rem
    rgba(0,0,0,.65);

  overflow:visible;

}


/* =====================================================
   IPHONE SIDE BUTTONS
===================================================== */

.phone-btn{

  position:absolute;

  z-index:5;

  width:.5rem;

  border-radius:.3rem;

  background:
    linear-gradient(
      90deg,
      #4a4c51,
      #8d9096 50%,
      #4a4c51
    );

}


.action-btn{

  left:-.4rem;
  top:15rem;

  height:3.4rem;

}


.volume-up{

  left:-.4rem;
  top:21.5rem;

  height:6.4rem;

}


.volume-down{

  left:-.4rem;
  top:30rem;

  height:6.4rem;

}


.power-btn{

  right:-.4rem;
  top:26rem;

  height:10rem;

}


/* =====================================================
   PHONE
   IMPORTANT:
   Fills the inside of .device completely.
===================================================== */

.phone{

  position:relative;

  display:block;

  width:100% !important;
  height:100% !important;

  min-width:0;
  min-height:0;

  overflow:hidden;

  border-radius:5.4rem;

  box-shadow:
    0 0 0 .6rem #050505;

  /*
    Remove every old page background image
    such as background-light.png
  */

  background-image:
    radial-gradient(
      circle at 40% 35%,
      rgba(255,255,255,.16) 0%,
      transparent 42%
    )
    !important;

  background-color:
    var(--light-phone)
    !important;

  background-repeat:
    no-repeat
    !important;

  background-position:
    center
    !important;

  background-size:
    cover
    !important;

}


/* =====================================================
   SCREEN
===================================================== */

.screen{

  position:relative;

  z-index:1;

  display:block;

  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  overflow:hidden;

}


/* =====================================================
   DYNAMIC ISLAND
===================================================== */

.island{

  position:absolute;

  z-index:100;

  top:2.5rem;
  left:50%;

  transform:
    translateX(-50%);

  width:12.6rem;
  height:3.7rem;

  border-radius:
    var(--radius-pill);

  background:#000;

}


/* =====================================================
   STATUS BAR
===================================================== */

.status-bar{

  position:relative;

  z-index:20;

  width:100%;
  height:5.4rem;

  padding:
    2.8rem 1.2rem 0;

  display:flex;

  align-items:flex-start;

  justify-content:
    space-between;

  flex:none;

  color:
    var(--text);

  font-size:1.45rem;

  font-weight:
    var(--font-semibold);

}


.status-icons{

  display:flex;

  align-items:center;

  gap:.4rem;

}


.signal{

  height:1.2rem;

  display:flex;

  align-items:flex-end;

  gap:.15rem;

}


.signal i{

  display:block;

  width:.28rem;

  background:
    var(--text);

}


.signal i:nth-child(1){
  height:.4rem;
}

.signal i:nth-child(2){
  height:.6rem;
}

.signal i:nth-child(3){
  height:.9rem;
}

.signal i:nth-child(4){
  height:1.2rem;
}


.battery{

  position:relative;

  width:2rem;
  height:1rem;

  border:
    .18rem solid
    var(--text);

  border-radius:.2rem;

}


.battery::before{

  content:"";

  position:absolute;

  right:-.38rem;
  top:.2rem;

  width:.2rem;
  height:.4rem;

  background:
    var(--text);

}


.battery::after{

  content:"";

  position:absolute;

  left:.15rem;
  top:.15rem;

  width:1.45rem;
  height:.5rem;

  background:
    var(--text);

}


/* =====================================================
   HEADER
===================================================== */

.header{

  position:relative;

  z-index:80;

  width:100%;

  height:
    var(--header-height);

  padding:
    0 2.4rem;

  display:grid;

  grid-template-columns:
    4rem minmax(0,1fr) 4rem;

  align-items:center;

  flex:none;

}


.header h1{

  min-width:0;

  overflow:hidden;

  color:
    var(--text);

  font-size:2rem;

  font-weight:
    var(--font-bold);

  text-align:center;

  text-overflow:ellipsis;

  white-space:nowrap;

}


/* =====================================================
   BACK BUTTON
===================================================== */

.back-btn{

  width:3.8rem;
  height:3.8rem;

  display:grid;

  place-items:center;

  border:
    .1rem solid
    rgba(255,255,255,.72);

  border-radius:50%;

  background:
    rgba(255,255,255,.13);

  color:
    var(--text);

  font-size:2.3rem;

  line-height:1;

  backdrop-filter:
    blur(1.4rem);

  -webkit-backdrop-filter:
    blur(1.4rem);

  cursor:pointer;

}


.back-btn:active{

  transform:
    scale(.94);

}


/* =====================================================
   THEME BUTTON
===================================================== */

.theme-toggle,
.theme-btn{

  width:3.8rem;
  height:3.8rem;

  display:grid;

  place-items:center;

  border:
    .1rem solid
    rgba(255,255,255,.72);

  border-radius:50%;

  background:
    rgba(255,255,255,.15);

  color:#183361;

  font-size:1.5rem;

  backdrop-filter:
    blur(1.6rem);

  -webkit-backdrop-filter:
    blur(1.6rem);

  box-shadow:
    inset 0 .1rem .1rem
    rgba(255,255,255,.30);

  cursor:pointer;

}


.theme-toggle:active,
.theme-btn:active{

  transform:
    scale(.94);

}


/* =====================================================
   STANDARD PAGE CONTENT
===================================================== */

.content{

  position:relative;

  width:100%;

  height:
    calc(
      100% -
      11.9rem
    );

  min-height:0;

  padding:
    1.2rem 2.2rem 11rem;

  overflow-x:hidden;
  overflow-y:auto;

  overscroll-behavior-y:
    contain;

  scrollbar-width:none;

  -webkit-overflow-scrolling:
    touch;

}


.content::-webkit-scrollbar{

  display:none;

}


/* =====================================================
   GLASS
===================================================== */

.glass{

  border:
    .14rem solid
    var(--glass-border);

  background:
    var(--glass);

  backdrop-filter:
    blur(1.7rem);

  -webkit-backdrop-filter:
    blur(1.7rem);

  box-shadow:
    var(--shadow-glass);

}


/* =====================================================
   GLASS CARD
===================================================== */

.glass-card{

  border:
    .14rem solid
    var(--glass-border);

  border-radius:
    var(--radius-large);

  background:
    var(--glass);

  backdrop-filter:
    blur(1.7rem);

  -webkit-backdrop-filter:
    blur(1.7rem);

  box-shadow:
    var(--shadow-glass);

}


/* =====================================================
   SOFT GLASS CARD
===================================================== */

.glass-card-soft{

  border:
    .14rem solid
    var(--glass-border-soft);

  border-radius:
    var(--radius-card);

  background:
    var(--glass-soft);

  backdrop-filter:
    blur(1.5rem);

  -webkit-backdrop-filter:
    blur(1.5rem);

}


/* =====================================================
   FIELD
===================================================== */

.field{

  margin-bottom:1.35rem;

}


.field-label,
.field label{

  display:block;

  margin:
    0 0 .6rem .4rem;

  color:#5f6976;

  font-size:.85rem;

  font-weight:
    var(--font-semibold);

}


/* =====================================================
   INPUT
===================================================== */

.input-shell{

  position:relative;

  width:100%;

  height:
    var(--input-height);

  border:
    .14rem solid
    rgba(255,255,255,.76);

  border-radius:
    var(--radius-medium);

  background:
    rgba(255,255,255,.13);

  backdrop-filter:
    blur(1.4rem);

  -webkit-backdrop-filter:
    blur(1.4rem);

  box-shadow:
    inset 0 .1rem .1rem
    rgba(255,255,255,.27);

}


.input-shell input{

  width:100%;
  height:100%;

  padding:
    0 1.5rem;

  border:0;

  outline:0;

  background:
    transparent;

  color:
    var(--text);

  font-size:1rem;

}


.input-shell.password input{

  padding-right:4.8rem;

}


.input-shell input::placeholder{

  color:#7d8b9e;

}


/* =====================================================
   EYE BUTTON
===================================================== */

.eye-btn{

  position:absolute;

  right:.7rem;
  top:50%;

  transform:
    translateY(-50%);

  width:3.5rem;
  height:3.5rem;

  display:grid;

  place-items:center;

  border:0;

  border-radius:50%;

  background:
    transparent;

  color:#697482;

  cursor:pointer;

}


.eye-btn svg{

  width:1.9rem;
  height:1.9rem;

  fill:none;

  stroke:
    currentColor;

  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;

}


/* =====================================================
   BUTTON
===================================================== */

.btn{

  width:100%;

  height:
    var(--button-height);

  display:flex;

  align-items:center;

  justify-content:center;

  border:0;

  border-radius:
    var(--radius-pill);

  font-size:1rem;

  font-weight:
    var(--font-bold);

  cursor:pointer;

}


.btn:active{

  transform:
    scale(.985);

}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.btn-primary{

  background:
    linear-gradient(
      105deg,
      #15556f,
      #315fbd
    );

  color:#fff;

  box-shadow:
    var(--shadow-button);

}


/* =====================================================
   SECONDARY BUTTON
===================================================== */

.btn-secondary{

  border:
    .14rem solid
    var(--glass-border);

  background:
    rgba(255,255,255,.11);

  color:#536070;

  backdrop-filter:
    blur(1.3rem);

  -webkit-backdrop-filter:
    blur(1.3rem);

}


/* =====================================================
   DANGER BUTTON
===================================================== */

.btn-danger{

  background:#df3c49;

  color:#fff;

}


/* =====================================================
   SUCCESS BUTTON
===================================================== */

.btn-success{

  background:#249f52;

  color:#fff;

}


/* =====================================================
   SMALL BUTTON
===================================================== */

.btn-small{

  width:auto;

  min-width:8.5rem;

  height:4rem;

  padding:
    0 1.3rem;

  font-size:.85rem;

}


/* =====================================================
   HORIZONTAL OPTIONS
===================================================== */

.horizontal-options{

  position:relative;

  width:100%;
  max-width:100%;

  display:flex;

  align-items:center;

  gap:.8rem;

  padding:
    .3rem .2rem .7rem;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;

  scroll-snap-type:
    x proximity;

  scrollbar-width:none;

  -ms-overflow-style:none;

  -webkit-overflow-scrolling:
    touch;

  overscroll-behavior-x:
    contain;

  touch-action:
    pan-x pan-y;

  cursor:grab;

}


.horizontal-options::-webkit-scrollbar{

  display:none;

}


.horizontal-options.dragging{

  cursor:grabbing;

  user-select:none;

  scroll-behavior:auto;

}


/* =====================================================
   OPTION BUTTON
===================================================== */

.option-btn{

  flex:
    0 0 auto;

  min-width:
    max-content;

  height:3.8rem;

  padding:
    0 1.5rem;

  display:flex;

  align-items:center;

  justify-content:center;

  border:
    .14rem solid
    rgba(255,255,255,.76);

  border-radius:
    var(--radius-pill);

  background:
    rgba(255,255,255,.12);

  color:
    var(--text);

  font-size:.82rem;

  font-weight:
    var(--font-semibold);

  white-space:nowrap;

  scroll-snap-align:start;

  backdrop-filter:
    blur(1.4rem);

  -webkit-backdrop-filter:
    blur(1.4rem);

  cursor:pointer;

}


.option-btn:active{

  transform:
    scale(.96);

}


.option-btn.active{

  border-color:
    transparent;

  background:#315d9b;

  color:#fff;

  box-shadow:
    0 .5rem 1.4rem
    rgba(42,91,181,.16);

}


.horizontal-hint{

  margin-top:.2rem;

  color:
    var(--muted);

  font-size:.72rem;

  text-align:center;

  opacity:.72;

}


/* =====================================================
   STATUS PILLS
===================================================== */

.status-pill{

  min-width:7.5rem;

  height:2.8rem;

  padding:
    0 1rem;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:
    var(--radius-pill);

  font-size:.75rem;

  font-weight:
    var(--font-bold);

  white-space:nowrap;

}


.status-active{

  background:
    rgba(50,203,100,.12);

  color:#1ca44e;

}


.status-pending{

  background:
    rgba(245,166,35,.14);

  color:#d18910;

}


.status-cancelled{

  background:
    rgba(239,52,64,.12);

  color:#d93845;

}


.status-expired{

  background:
    rgba(109,118,131,.15);

  color:#6d7683;

}


.status-arrived{

  background:
    rgba(49,93,155,.12);

  color:
    var(--blue);

}


/* =====================================================
   MESSAGE
===================================================== */

.message{

  margin-top:1.2rem;

  padding:
    1rem 1.2rem;

  border-radius:1.5rem;

  font-size:.84rem;

  line-height:1.45;

  text-align:center;

}


.message-error{

  background:
    rgba(232,57,73,.09);

  color:#db3342;

}


.message-success{

  background:
    rgba(37,190,91,.10);

  color:#20af54;

}


.message-warning{

  background:
    rgba(245,166,35,.12);

  color:#cc840e;

}


/* =====================================================
   AVATAR
===================================================== */

.avatar{

  width:7.4rem;
  height:7.4rem;

  display:grid;

  place-items:center;

  border:
    .14rem solid
    var(--glass-border);

  border-radius:50%;

  background:
    rgba(255,255,255,.13);

  backdrop-filter:
    blur(1.6rem);

  -webkit-backdrop-filter:
    blur(1.6rem);

  box-shadow:
    inset 0 .1rem .15rem
    rgba(255,255,255,.36),

    0 1rem 2.5rem
    rgba(34,63,103,.05);

}


.avatar svg{

  width:3.6rem;
  height:3.6rem;

  fill:none;

  stroke:
    var(--blue);

  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;

}


/* =====================================================
   BOTTOM NAVIGATION
===================================================== */

.bottom-nav{

  position:absolute;

  z-index:90;

  left:2.2rem;
  right:2.2rem;

  bottom:4rem;

  height:
    var(--bottom-nav-height);

  padding:.45rem;

  display:grid;

  grid-template-columns:
    1fr 1.55fr 1fr;

  gap:.35rem;

  align-items:center;

  border:
    .14rem solid
    rgba(255,255,255,.76);

  border-radius:3.2rem;

  background:
    rgba(255,255,255,.12);

  backdrop-filter:
    blur(2rem)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(2rem)
    saturate(125%);

  box-shadow:
    inset 0 .1rem .15rem
    rgba(255,255,255,.35),

    0 .8rem 2.5rem
    rgba(28,50,82,.07);

}


/* =====================================================
   NAV LINK
===================================================== */

.nav-link{

  min-width:0;

  height:4.65rem;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:.65rem;

  border-radius:
    var(--radius-pill);

  color:
    var(--text);

  text-decoration:none;

  font-size:.78rem;

  font-weight:
    var(--font-medium);

  white-space:nowrap;

}


.nav-link svg{

  flex:none;

  width:2rem;
  height:2rem;

  fill:none;

  stroke:
    currentColor;

  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;

}


.nav-link.active{

  background:#315d9b;

  color:#fff;

  box-shadow:
    0 .5rem 1.5rem
    rgba(38,86,177,.17);

}


/* =====================================================
   HOME INDICATOR
===================================================== */

.home-indicator{

  position:absolute;

  z-index:100;

  left:50%;
  bottom:1.4rem;

  transform:
    translateX(-50%);

  width:13.4rem;
  height:.45rem;

  border-radius:
    var(--radius-pill);

  background:#000;

}


/* =====================================================
   UTILITIES
===================================================== */

.center{

  display:flex;

  align-items:center;

  justify-content:center;

}


.text-center{

  text-align:center;

}


.hidden{

  display:none !important;

}


.full-width{

  width:100%;

}


.mt-05{
  margin-top:.5rem;
}

.mt-1{
  margin-top:1rem;
}

.mt-15{
  margin-top:1.5rem;
}

.mt-2{
  margin-top:2rem;
}


.mb-05{
  margin-bottom:.5rem;
}

.mb-1{
  margin-bottom:1rem;
}

.mb-15{
  margin-bottom:1.5rem;
}

.mb-2{
  margin-bottom:2rem;
}


.success{

  color:
    var(--success);

}


.danger{

  color:
    var(--danger);

}


/* =====================================================
   DARK MODE BODY
===================================================== */

body.dark-mode{

  background:#090d13;

}


/* =====================================================
   DARK MODE PHONE
===================================================== */

body.dark-mode .phone{

  background-image:
    radial-gradient(
      circle at 20% 18%,
      rgba(49,93,155,.25) 0%,
      transparent 33%
    ),

    radial-gradient(
      circle at 86% 75%,
      rgba(37,65,104,.20) 0%,
      transparent 35%
    ),

    linear-gradient(
      160deg,
      #182335 0%,
      #101827 45%,
      #0a101b 100%
    )
    !important;

  background-color:
    #0a101b
    !important;

  background-repeat:
    no-repeat
    !important;

  background-position:
    center
    !important;

  background-size:
    cover
    !important;

}


/* =====================================================
   DARK MODE TEXT
===================================================== */

body.dark-mode .status-bar,
body.dark-mode .header h1,
body.dark-mode .back-btn{

  color:
    var(--dark-text);

}


/* =====================================================
   DARK MODE SIGNAL
===================================================== */

body.dark-mode .signal i{

  background:
    var(--dark-text);

}


/* =====================================================
   DARK MODE BATTERY
===================================================== */

body.dark-mode .battery{

  border-color:
    var(--dark-text);

}


body.dark-mode .battery::before,
body.dark-mode .battery::after{

  background:
    var(--dark-text);

}


/* =====================================================
   DARK MODE BACK
===================================================== */

body.dark-mode .back-btn{

  border-color:
    rgba(255,255,255,.11);

  background:
    rgba(255,255,255,.05);

}


/* =====================================================
   DARK MODE THEME BUTTON
===================================================== */

body.dark-mode .theme-toggle,
body.dark-mode .theme-btn{

  border-color:
    rgba(255,255,255,.11);

  background:
    rgba(255,255,255,.06);

  color:#f1c75b;

  box-shadow:
    0 .8rem 2rem
    rgba(0,0,0,.16);

}


/* =====================================================
   DARK MODE GLASS
===================================================== */

body.dark-mode .glass,
body.dark-mode .glass-card,
body.dark-mode .glass-card-soft{

  border-color:
    var(--dark-border);

  background:
    var(--dark-card);

}


/* =====================================================
   DARK MODE INPUT
===================================================== */

body.dark-mode .input-shell{

  border-color:
    rgba(255,255,255,.10);

  background:
    rgba(255,255,255,.04);

}


body.dark-mode .input-shell input{

  color:
    var(--dark-text);

}


body.dark-mode .input-shell input::placeholder{

  color:#8996a7;

}


body.dark-mode .field-label,
body.dark-mode .field label{

  color:#95a2b2;

}


body.dark-mode .eye-btn{

  color:#a3afbf;

}


/* =====================================================
   DARK MODE SECONDARY
===================================================== */

body.dark-mode .btn-secondary{

  border-color:
    rgba(255,255,255,.11);

  background:
    rgba(255,255,255,.04);

  color:#d5deea;

}


/* =====================================================
   DARK MODE OPTIONS
===================================================== */

body.dark-mode .option-btn{

  border-color:
    rgba(255,255,255,.10);

  background:
    rgba(255,255,255,.05);

  color:#dce5ef;

}


body.dark-mode .option-btn.active{

  border-color:
    transparent;

  background:#4778bd;

  color:#fff;

}


body.dark-mode .horizontal-hint{

  color:
    var(--dark-muted);

}


/* =====================================================
   DARK MODE STATUS
===================================================== */

body.dark-mode .status-active{

  background:
    rgba(50,203,100,.15);

  color:#63df8a;

}


body.dark-mode .status-pending{

  background:
    rgba(245,166,35,.14);

  color:#ffc565;

}


body.dark-mode .status-cancelled{

  background:
    rgba(239,52,64,.14);

  color:#ff6974;

}


body.dark-mode .status-expired{

  background:
    rgba(180,190,205,.09);

  color:#aeb9c8;

}


body.dark-mode .status-arrived{

  background:
    rgba(103,168,255,.12);

  color:#78adff;

}


/* =====================================================
   DARK MODE AVATAR
===================================================== */

body.dark-mode .avatar{

  border-color:
    var(--dark-border);

  background:
    var(--dark-card);

}


body.dark-mode .avatar svg{

  stroke:
    var(--blue-soft);

}


/* =====================================================
   DARK MODE BOTTOM NAV
===================================================== */

body.dark-mode .bottom-nav{

  border-color:
    rgba(255,255,255,.12);

  background:
    rgba(11,24,42,.58);

}


body.dark-mode .nav-link{

  color:#dce5ef;

}


body.dark-mode .nav-link.active{

  color:#fff;

}


/* =====================================================
   DARK MODE HOME INDICATOR
===================================================== */

body.dark-mode .home-indicator{

  background:
    var(--dark-text);

}


/* =====================================================
   DARK MODE MUTED
===================================================== */

body.dark-mode .text-muted{

  color:
    var(--dark-muted);

}


body.dark-mode .success{

  color:#63df8a;

}


body.dark-mode .danger{

  color:#ff6974;

}


/* =====================================================
   DESKTOP HOVER
===================================================== */

@media (hover:hover) and (pointer:fine){

  .back-btn:hover{

    background:
      rgba(255,255,255,.21);

  }


  .theme-toggle:hover,
  .theme-btn:hover{

    background:
      rgba(255,255,255,.22);

  }


  .option-btn:hover{

    background:
      rgba(255,255,255,.18);

  }


  body.dark-mode .back-btn:hover{

    background:
      rgba(255,255,255,.085);

  }


  body.dark-mode .theme-toggle:hover,
  body.dark-mode .theme-btn:hover{

    background:
      rgba(255,255,255,.10);

  }


  body.dark-mode .option-btn:hover{

    background:
      rgba(255,255,255,.085);

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:500px){

  body{

    display:block;

    width:100vw;

    height:100dvh;

    min-height:100dvh;

    overflow:hidden;

  }


  .device{

    width:100vw;
    height:100dvh;

    padding:0;

    border-radius:0;

    background:none;

    box-shadow:none;

    overflow:hidden;

  }


  .phone{

    width:100% !important;
    height:100% !important;

    border-radius:0;

    box-shadow:none;

  }


  .screen{

    width:100%;
    height:100%;

  }


  .phone-btn{

    display:none;

  }


  .island{

    display:none;

  }


  .horizontal-options{

    cursor:auto;

  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}