@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

*, *::before, *::after {box-sizing: border-box;}
* {margin: 0; padding: 0;}
img, picture, video, canvas, svg {display: block; max-width: 100%;}
input, button, textarea, select {font: inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
ul, ol {list-style: none;}
a {text-decoration: none; color: inherit;}
button, .btn{
  border-radius: var(--border-radius);
  background: var(--primary);
  box-shadow: none;
  padding: 12px;
  cursor: pointer;
  border: none;
  color: var(--white);
  font: inherit;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  align-self: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:root {
  --primary: #0DA485;
  --primary-50: #E7F9F5FF;
  --primary-100: #BCEEE3FF;
  --primary-200: #91E3D2FF;
  --primary-300: #65D7C0FF;
  --primary-400: #3ACCAEFF;
  --primary-500: #0FC19CFF;
  --primary-600: #0DA485FF;
  --primary-700: #0B876DFF;
  --primary-800: #086A56FF;
  --primary-900: #064D3EFF;
  --secondary: #D6FD44;
  --secondary-50: #FBFFECFF;
  --secondary-100: #F4FECBFF;
  --secondary-200: #ECFEA9FF;
  --secondary-300: #E5FE87FF;
  --secondary-400: #DDFD66FF;
  --secondary-500: #D6FD44FF;
  --secondary-600: #B6D73AFF;
  --secondary-700: #96B130FF;
  --secondary-800: #768B25FF;
  --secondary-900: #56651BFF;
  --danger-100: #FFD8D6FF;
  --danger-200: #FFB1ACFF;
  --danger-300: #FF8983FF;
  --danger-400: #FF6259FF;
  --danger-500: #FF3B30FF;
  --danger-600: #D93229FF;
  --danger-700: #B32922FF;
  --danger-800: #8C201AFF;
  --danger-900: #661813FF;
  --success-100: #D6F4DEFF;
  --success-200: #AEE9BDFF;
  --success-300: #85DD9BFF;
  --success-400: #5DD27AFF;
  --success-500: #34C759FF;
  --success-600: #2CA94CFF;
  --success-700: #248B3EFF;
  --success-800: #1D6E31FF;
  --success-900: #155024FF;
  --gray-20: #FAFAFAFF;
  --gray-40: #F5F5F5FF;
  --gray-60: #F0F0F0FF;
  --gray-80: #EBEBEBFF;
  --gray-100: #E5E5E5FF;
  --gray-200: #CCCCCCFF;
  --gray-300: #B2B2B2FF;
  --gray-400: #999999FF;
  --gray-500: #808080FF;
  --gray-600: #666666FF;
  --gray-700: #4D4D4DFF;
  --gray-800: #333333FF;
  --gray-900: #1A1A1AFF;
  --gray: #F5F5F5;
  --white: #FFFFFFFF;
  --black: #000000FF;
  --black-alpha-10: #0000001A;
  --black-alpha-20: #00000033;
  --black-alpha-30: #0000004D;
  --black-alpha-40: #00000066;
  --black-alpha-50: #00000080;
  --black-alpha-60: #00000099;
  --black-alpha-70: #000000B2;
  --black-alpha-80: #000000CC;
  --black-alpha-90: #000000E5;
  --white-alpha-10: #FFFFFF1A;
  --white-alpha-20: #FFFFFF33;
  --white-alpha-30: #FFFFFF4D;
  --white-alpha-40: #FFFFFF66;
  --white-alpha-50: #FFFFFF80;
  --white-alpha-60: #FFFFFF99;
  --white-alpha-70: #FFFFFFB2;
  --white-alpha-80: #FFFFFFCC;
  --white-alpha-90: #FFFFFFE5;
  
  --border-radius: 8px;
  
}

.cloak {display: none !important;}

a{color: var(--primary-500);}

.bg-primary{background-color: var(--primary);}
.fg-primary{color: var(--primary);}
.bg-secondary{background-color: var(--secondary);}
.fg-secondary{color: var(--secondary);}
.bg-gray{background-color: var(--gray);}
.fg-gray{color: var(--gray);}
.bg-white{background-color: var(--white);}
.fg-white{color: var(--white);}
.bg-black{background-color: var(--black);}
.fg-black{color: var(--black);}



h1, h2, h3, h4, h5, h6 {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1, .h1 {font-size: 32px;}
h2, .h2 {font-size: 24px;}
h3, .h3 {font-size: 20px;}
h4, .h4 {font-size: 18px;}

.b1 {font-size: 16px;}
.b1-bold {font-size: 16px; font-weight: 500;}
.b2 {font-size: 14px;}
.b2-bold {font-size: 14px; font-weight: 500;}
.b3 {font-size: 12px;}
.b3-bold {font-size: 12px; font-weight: 500;}


body {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-900);
  background-color: var(--white);
  touch-action: pan-x pan-y;
}

/* --BUTTONS-- */

.btn-primary{background-color: var(--primary); color: var(--white);}
.btn-secondary{background-color: var(--secondary); color: var(--gray-900);}
.btn-neutral{background-color: var(--gray-40); color: var(--gray-900);}
.btn-ghost{background-color: transparent; color: var(--gray-900);}
.btn-white{background-color: var(--white); color: var(--gray-900); box-shadow: 0 1px 5px 0px var(--black-alpha-20);}

.btn-primary .ji:before{background: var(--white);}
.btn-secondary .ji:before{background: var(--gray-900);}

.btn-xl{padding: 20px; gap: 5px;}
.btn-large{padding: 15px; gap: 4px;}
.btn-medium{padding: 12px; gap: 3px;}
.btn-small{padding: 8px; gap: 2px;}

.btn-xl:has(*:nth-last-child(n + 2)){padding: 20px 20px 20px 15px;}
.btn-large:has(*:nth-last-child(n + 2)){padding: 15px 15px 15px 11px;}
.btn-medium:has(*:nth-last-child(n + 2)){padding: 12px 12px 12px 9px;}
.btn-small:has(*:nth-last-child(n + 2)){padding: 8px 8px 8px 5px;}




/* --ICONS-- */


.ji{width: 24px; height: 24px; position: relative; display: block; border-radius: 8px;}
.ji:before{content: ''; background: var(--gray-900); position: absolute; top: 0; left: 0; right: 0; bottom: 0;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center; -webkit-mask-size: cover; mask-repeat: no-repeat; mask-position: center; mask-size: contain;}

.ji-21{width: 21px; height: 21px;}
.ji-28{width: 28px; height: 28px;}
.ji-32{width: 32px; height: 32px;}

.ji-primary:before{background: var(--primary);}
.ji-secondary:before{background: var(--secondary);}
.ji-black:before{background: var(--gray-900);}
.ji-white:before{background: var(--white);}
.ji-danger:before{background: var(--danger-500);}


.ji-location:before {-webkit-mask-image: url(junkericons/location.svg); mask-image: url(junkericons/location.svg);}
.ji-audio:before {-webkit-mask-image: url(junkericons/audio.svg); mask-image: url(junkericons/audio.svg);}
.ji-search:before {-webkit-mask-image: url(junkericons/search.svg); mask-image: url(junkericons/search.svg);}
.ji-close:before {-webkit-mask-image: url(junkericons/close.svg); mask-image: url(junkericons/close.svg);}
.ji-keyboard-arrow-up:before {-webkit-mask-image: url(junkericons/keyboard-arrow-up.svg); mask-image: url(junkericons/keyboard-arrow-up.svg);}
.ji-keyboard-arrow-down:before {-webkit-mask-image: url(junkericons/keyboard-arrow-down.svg); mask-image: url(junkericons/keyboard-arrow-down.svg);}
.ji-keyboard-arrow-left:before {-webkit-mask-image: url(junkericons/keyboard-arrow-left.svg); mask-image: url(junkericons/keyboard-arrow-left.svg);}
.ji-keyboard-arrow-right:before {-webkit-mask-image: url(junkericons/keyboard-arrow-right.svg); mask-image: url(junkericons/keyboard-arrow-right.svg);}
.ji-lang:before {-webkit-mask-image: url(junkericons/lang.svg); mask-image: url(junkericons/lang.svg);}
.ji-mic:before {-webkit-mask-image: url(junkericons/mic.svg); mask-image: url(junkericons/mic.svg);}
.ji-bell:before {-webkit-mask-image: url(junkericons/bell.svg); mask-image: url(junkericons/bell.svg);}
.ji-water:before {-webkit-mask-image: url(junkericons/water.svg); mask-image: url(junkericons/water.svg);}
.ji-add:before {-webkit-mask-image: url(junkericons/add.svg); mask-image: url(junkericons/add.svg);}
.ji-barcode:before {-webkit-mask-image: url(junkericons/barcode.svg); mask-image: url(junkericons/barcode.svg);}
.ji-heart_empty:before {-webkit-mask-image: url(junkericons/heart_empty.svg); mask-image: url(junkericons/heart_empty.svg);}
.ji-heart:before {-webkit-mask-image: url(junkericons/heart.svg); mask-image: url(junkericons/heart.svg);}
.ji-leaf:before {-webkit-mask-image: url(junkericons/leaf.svg); mask-image: url(junkericons/leaf.svg);}
.ji-location:before {-webkit-mask-image: url(junkericons/location.svg); mask-image: url(junkericons/location.svg);}
.ji-location_ok:before {-webkit-mask-image: url(junkericons/location_ok.svg); mask-image: url(junkericons/location_ok.svg);}
.ji-photo:before {-webkit-mask-image: url(junkericons/photo.svg); mask-image: url(junkericons/photo.svg);}
.ji-symbols:before {-webkit-mask-image: url(junkericons/symbols.svg); mask-image: url(junkericons/symbols.svg);}
.ji-txt:before {-webkit-mask-image: url(junkericons/txt.svg); mask-image: url(junkericons/txt.svg);}
.ji-calendar:before {-webkit-mask-image: url(junkericons/calendar.svg); mask-image: url(junkericons/calendar.svg);}
.ji-check_empty:before {-webkit-mask-image: url(junkericons/check_empty.svg); mask-image: url(junkericons/check_empty.svg);}
.ji-check:before {-webkit-mask-image: url(junkericons/check.svg); mask-image: url(junkericons/check.svg);}
.ji-home:before {-webkit-mask-image: url(junkericons/home.svg); mask-image: url(junkericons/home.svg);}
.ji-map:before {-webkit-mask-image: url(junkericons/map.svg); mask-image: url(junkericons/map.svg);}
.ji-user:before {-webkit-mask-image: url(junkericons/user.svg); mask-image: url(junkericons/user.svg);}
.ji-waveform:before {-webkit-mask-image: url(junkericons/waveform.svg); mask-image: url(junkericons/waveform.svg);}
.ji-filter:before {-webkit-mask-image: url(junkericons/filter.svg); mask-image: url(junkericons/filter.svg);}
.ji-map_search:before {-webkit-mask-image: url(junkericons/map_search.svg); mask-image: url(junkericons/map_search.svg);}
.ji-shirt:before {-webkit-mask-image: url(junkericons/shirt.svg); mask-image: url(junkericons/shirt.svg);}
.ji-simple_check:before {-webkit-mask-image: url(junkericons/simple_check.svg); mask-image: url(junkericons/simple_check.svg);}
.ji-warning:before {-webkit-mask-image: url(junkericons/warning.svg); mask-image: url(junkericons/warning.svg);}
.ji-arrow_down:before {-webkit-mask-image: url(junkericons/arrow_down.svg); mask-image: url(junkericons/arrow_down.svg);}
.ji-arrow_left:before {-webkit-mask-image: url(junkericons/arrow_left.svg); mask-image: url(junkericons/arrow_left.svg);}
.ji-arrow_right:before {-webkit-mask-image: url(junkericons/arrow_right.svg); mask-image: url(junkericons/arrow_right.svg);}
.ji-arrow_up:before {-webkit-mask-image: url(junkericons/arrow_up.svg); mask-image: url(junkericons/arrow_up.svg);}
.ji-shout:before {-webkit-mask-image: url(junkericons/shout.svg); mask-image: url(junkericons/shout.svg);}
.ji-add_note:before {-webkit-mask-image: url(junkericons/add_note.svg); mask-image: url(junkericons/add_note.svg);}
.ji-camera:before {-webkit-mask-image: url(junkericons/camera.svg); mask-image: url(junkericons/camera.svg);}
.ji-delete:before {-webkit-mask-image: url(junkericons/delete.svg); mask-image: url(junkericons/delete.svg);}
.ji-document:before {-webkit-mask-image: url(junkericons/document.svg); mask-image: url(junkericons/document.svg);}
.ji-edit:before {-webkit-mask-image: url(junkericons/edit.svg); mask-image: url(junkericons/edit.svg);}
.ji-expand:before {-webkit-mask-image: url(junkericons/expand.svg); mask-image: url(junkericons/expand.svg);}
.ji-ext_link:before {-webkit-mask-image: url(junkericons/ext_link.svg); mask-image: url(junkericons/ext_link.svg);}
.ji-feedback:before {-webkit-mask-image: url(junkericons/feedback.svg); mask-image: url(junkericons/feedback.svg);}
.ji-image:before {-webkit-mask-image: url(junkericons/image.svg); mask-image: url(junkericons/image.svg);}
.ji-info:before {-webkit-mask-image: url(junkericons/info.svg); mask-image: url(junkericons/info.svg);}
.ji-more:before {-webkit-mask-image: url(junkericons/more.svg); mask-image: url(junkericons/more.svg);}
.ji-note:before {-webkit-mask-image: url(junkericons/note.svg); mask-image: url(junkericons/note.svg);}
.ji-qr:before {-webkit-mask-image: url(junkericons/qr.svg); mask-image: url(junkericons/qr.svg);}
.ji-refresh:before {-webkit-mask-image: url(junkericons/refresh.svg); mask-image: url(junkericons/refresh.svg);}
.ji-settings:before {-webkit-mask-image: url(junkericons/settings.svg); mask-image: url(junkericons/settings.svg);}
.ji-visibility_no:before {-webkit-mask-image: url(junkericons/visibility_no.svg); mask-image: url(junkericons/visibility_no.svg);}
.ji-visibility:before {-webkit-mask-image: url(junkericons/visibility.svg); mask-image: url(junkericons/visibility.svg);}




/* --FORM-- */

label {font-size: 14px; font-weight: 500; margin-left: 10px;}
input, textarea, select{border: 1px solid var(--gray-300);
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 10px 10px;
  font-size: 14px;
  outline: none;
  width: 100%;
}


input:disabled, textarea:disabled, select:disabled{opacity: .4; background: #f0f0f0;}

.input-field{display: flex; flex-direction: column; gap: 3px; margin: 5px 0; position: relative;}

  .input-with-icon{position: relative;}
    .input-with-icon input{padding: 10px 40px 10px 10px;}
      .input-field i{position: absolute; right: 6px; top: 50%; transform: translateY(-50%);}
      
      .input-field .ji-close {
        display: none;
      }
      .input-field input.search-has-value ~ .ji-search {
        display: none;
      }
      
      .input-field input.search-has-value ~ .ji-close {
        display: block;
      }

  
  .switch-row {
    display: flex;
    align-items: center;
    width: auto;
    font-size: 14px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .switch-label {
    color: #000;
  }
  label.ios-switch {
    position: relative;
    width: 50px;
    height: 28px;
  }
  
  label.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  span.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #e5e5ea;
    border-radius: 34px;
    transition: 0.3s;
  }
  
  span.slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: var(--white);
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  
  label.ios-switch input:checked + .slider {
    background-color: var(--primary); /* verde iOS */
  }
  label.ios-switch input:checked + .slider::before {
    transform: translateX(22px);
  }


.j_checkbox {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    position: relative;
    margin: 5px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .j_checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: relative;
    height: 24px;
    width: 24px;
    border: 2px solid var(--gray-500);
    border-radius: 3px;
  }
  
  
  /* When the checkbox is checked, add a blue background */
  .j_checkbox input:checked ~ .checkmark {
    background-color: var(--primary);
    border: 2px solid var(--primary);
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .j_checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .j_checkbox .checkmark:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  
  
  .j_radio {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    position: relative;
    cursor: pointer;
    margin: 5px 0;
    font-size: 14px;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .j_radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
  }
  
  /* Create a custom radio button */
  .radio_checkmark {
    position: relative;
    height: 24px;
    width: 24px;
    border: 2px solid var(--gray-500);
    border-radius: 50%;
  }
  
  
  /* When the radio button is checked, add a blue background */
  .j_radio input:checked ~ .radio_checkmark {
    background-color: var(--primary);
    border: 2ox solid var(--primary);
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .radio_checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .j_radio input:checked ~ .radio_checkmark:after {
    display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .j_radio .radio_checkmark:after {
    left: 9px;
    top: 6px;
    width: 6px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  


  /* --LOADER-- */
  
  .loader {
          width: var(--w);
          aspect-ratio: 1;
          --c:no-repeat linear-gradient(var(--white) 0 0);
          --w: 24px;
          background: var(--c), var(--c), var(--c);
          animation: 
            l18-1 1s infinite,
            l18-2 1s infinite;
        }
        @keyframes l18-1 {
         0%,100% {background-size:20% 100%}
         33%,66% {background-size:20% 20%}
        }
        @keyframes l18-2 {
         0%,33%   {background-position: 0    0,50% 50%,100% 100%}
         66%,100% {background-position: 100% 0,50% 50%,0    100%}
        }
  
  .loader.loader-primary{--c:no-repeat linear-gradient(var(--primary) 0 0);}
  .loader.loader-secondary{--c:no-repeat linear-gradient(var(--secondary) 0 0);}
  .loader.loader-black{--c:no-repeat linear-gradient(var(--black) 0 0);}

  .loader.loader-12{--w: 12px;}
  .loader.loader-16{--w: 16px;}
  .loader.loader-21{--w: 21px;}
  .loader.loader-28{--w: 28px;}
  .loader.loader-32{--w: 32px;}
  .loader.loader-36{--w: 36px;}
  .loader.loader-40{--w: 40px;}
  


  /* --MODAL-- */
  
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end; /* Aligns modal to bottom */
    
    /* Hiding logic */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  
  .modal-content {
    width: 100%;
    background: white;
    padding: 20px 20px 40px 20px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    will-change: transform;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    
    /* Start off-screen */
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  /* The 'Open' State */
  .modal-overlay.is-active {
    visibility: visible;
    opacity: 1;
  }
  .modal-overlay.is-active .modal-content {
    transform: translateY(0);
  }
  
  .modal-content h3.modal-title{display: flex; align-items: center; padding: 10px 0; gap: 10px;}
    .modal-content .bg-secondary{padding: 8px; border-radius: 8px;}
  .modal-content p{padding: 10px 0;}




  /* --LISTS-- */

  ul.list-style{display: flex; flex-direction: column; width: 100%;}
    ul.list-style li{border-bottom: 1px solid var(--gray-100);}
      ul.list-style li a, ul.list-style li > span{padding: 20px; display: block; font-size: 16px; font-weight: 400; color: var(--black); width: 100%; display: flex; align-items: center; justify-content: space-between; }

      ul.list-style li .ji:before{background: var(--gray-500);}
      ul.list-style li.selected a{background: var(--primary); color: var(--white);}
      ul.list-style li.selected .ji:before{background: var(--white);}

    ul.list-style li .j_radio{justify-content: space-between; font-size: 16px; width: 100%;}
    
    
    
    
    
    /* --TABS-- */

    
    
    .tab_nav{display: flex; width: 100%; align-items: center; justify-content: stretch;}
      .tab_nav li{flex: 1; text-align: center;}
        .tab_nav li a{display: flex; justify-content: center; gap: 5px; text-align: center; color: var(--black); font-weight: 500; padding: 10px; border-bottom: 1px solid var(--gray-100);}
          .tab_nav li.selected a{color: var(--primary-500); border-bottom: 2px solid var(--primary-500);}
            .tab_nav li.selected .ji:before{background-color: var(--primary-500);}