@use "@angular/material" as mat;
@import "../itinerary-app/_styles/media-queries.scss";
@import "../itinerary-app/_styles/colors";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-gilroy-regular: "Gilroy-Regular", serif;
  --font-gilroy-bold: "Gilroy-Bold", serif;
  --font-gilroy-medium: "Gilroy-Medium", serif;
  --font-gilroy-semibold: "Gilroy-SemiBold", serif;
  --font-gilroy-thin: "Gilroy-Thin", serif;
  --font-size-small: 9.85px;
  --font-size-medium: 11.49px;
  --primary-color: $background-color-5;
  --secondary-color: $scroll-color;
}

@include mat.core();

// Material 20+ dark theme using CSS custom properties
// Material 3 uses CSS variables for theming - overriding prebuilt theme colors
html {
  // Indigo primary palette (dark theme)
  --mat-sys-primary: #9fa8da;
  --mat-sys-on-primary: #1a237e;
  --mat-sys-primary-container: #303f9f;
  --mat-sys-on-primary-container: #e8eaf6;

  // Pink accent palette (dark theme)
  --mat-sys-secondary: #f48fb1;
  --mat-sys-on-secondary: #880e4f;
  --mat-sys-secondary-container: #c2185b;
  --mat-sys-on-secondary-container: #fce4ec;

  // Red error/warn palette (dark theme)
  --mat-sys-error: #ef5350;
  --mat-sys-on-error: #ffffff;
  --mat-sys-error-container: #c62828;
  --mat-sys-on-error-container: #ffebee;

  // Dark theme surface colors
  --mat-sys-surface: #27242c;
  --mat-sys-on-surface: #ffffff;
  --mat-sys-surface-variant: #3e3b44;
  --mat-sys-on-surface-variant: #bdbdbd;

  --mat-sys-background: #27242c;
  --mat-sys-on-background: #ffffff;

  --mat-sys-outline: #666666;
  --mat-sys-outline-variant: #444444;

  color-scheme: dark;
}

@font-face {
  font-family: "Gilroy-Regular";
  src: url("../../assets/fonts/gilroy/Gilroy-Regular_0.ttf");
}

@font-face {
  font-family: "Gilroy-Bold";
  src: url("../../assets/fonts/gilroy/Gilroy-Bold_0.ttf");
}

@font-face {
  font-family: "Gilroy-Medium";
  src: url("../../assets/fonts/gilroy/Gilroy-Medium_0.ttf");
}

@font-face {
  font-family: "Gilroy-SemiBold";
  src: url("../../assets/fonts/gilroy/Gilroy-SemiBold_0.ttf");
}

@font-face {
  font-family: "Gilroy-Thin";
  src: url("../../assets/fonts/gilroy/Gilroy-Thin_0.ttf");
}

@layer base {
  .active-link {
    @apply px-3 py-2 rounded-full bg-primary text-white;
  }

  .h1 {
    @apply text-[48px] leading-tight md:text-[55px] md:leading-[1.3] mb-4 font-bold;
  }

  .h2 {
    @apply text-[33px] leading-tight md:text-[46px] md:leading-[1.3] mb-4 font-bold;
  }

  .h3 {
    @apply text-[26px] leading-tight md:text-[36px] md:leading-[1.3] mb-4 font-semibold;
  }

  p {
    @apply leading-[1.3] text-gray-30 text-[14px];
  }
}

@layer utilities {
  .btn-white {
    @apply medium-15 bg-white px-7 py-3 text-tertiary;
  }

  .btn-light {
    @apply medium-15 bg-primary  px-7 py-3 text-tertiary;
  }

  .btn-dark {
    @apply ring-1 ring-tertiary medium-12  px-[14px] py-[7px] text-white transition-all rounded-full outset-shadow hover:bg-primary;
  }

  .btn-dark-outline {
    @apply ring-1 ring-tertiary medium-15 bg-transparent px-7 py-[10px] text-tertiary transition-all hover:bg-tertiary hover:text-white;
  }

  .btn-secondary {
    @apply ring-1 ring-secondary medium-15 bg-secondary px-7 py-[10px] text-white transition-all hover:bg-tertiary hover:ring-tertiary;
  }

  .max-container {
    @apply mx-auto max-w-[1440px];
  }

  .padding-container {
    @apply px-6 lg:px-14 3xl:px-0;
  }

  .max-padd-container {
    @apply mx-auto max-w-[1440px] px-5 lg:px-14 3xl:px-0;
  }
  .max-padd-container-none {
    @apply mx-auto max-w-[1440px] px-0 lg:px-0 3xl:px-0;
  }
  .max-padd-container2 {
    @apply mx-auto max-w-[1440px] px-6 lg:px-7 3xl:px-0;
  }

  .flexCenter {
    @apply flex items-center justify-center;
  }

  .flexBetween {
    @apply flex items-center justify-between;
  }

  .flexStart {
    @apply flex items-center justify-start;
  }

  .flexEnd {
    @apply flex items-center justify-end;
  }
}

.active {
  color: var(--secondary-color) !important;
  opacity: 100% !important;
}

.lib-menu-bg-none {
  --lib-list-button-padding: 10px !important;
  --lib-button-container-background: transparent !important;
  --lib-button-background: transparent !important;
  --lib-button-border-radius: 0 !important;
  --lib-button-border: 0 !important;
  --box-shadow: none !important;
}

.lib-menu-bg-none button.mat-ripple {
  background-color: black !important;
  border-radius: 0 !important;
  border: 0 !important;
}


body {
  background: linear-gradient(
    191deg,
    $background-color-1 61.33%,
    $background-color-10 101.43%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  font-family: Gilroy-Regular;

  * {
    color: $text-color-3;
  }
}

.check-box svg {
  padding: 1.5px !important;
}

.shadow-inset {
  box-shadow: inset -3px -3px 10px rgba(255, 255, 255, 0.3);
}

.button-shadow {
  box-shadow:
    -5.744px -5.744px 11.487px 0px rgba(16, 16, 16, 0) inset,
    3.282px 1.641px 3.282px 0px $box-shadow-1 inset,
    2.462px 2.462px 4.923px 0px $box-shadow-2 inset,
    -2.462px -2.462px 4.923px 0px rgba(0, 0, 0, 0.32) inset,
    4.923px 4.923px 9.846px 0px $box-shadow-3,
    -4.102px -4.102px 8.205px 0px $box-shadow-4,
    9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65),
    -4.102px -4.102px 13.128px -2.462px rgba(203, 199, 209, 0.25);
  background: $background-color-1;
}

.bg-color {
  background: linear-gradient(
    100deg,
    $background-color-1,
    $background-color-10
  );
 }

  .text-shadow {
    text-shadow:
      0px 0px 3.282px $text-color-3,
      0px 0px 16.41px $scroll-color,
      0px 0px 16.41px $scroll-color;
  }

  input[type="checkbox"]:checked {
    color: white;
    background-color: $scroll-color;
  }

  .searchbar-shadow {
    box-shadow:
      13.949px 18.051px 16.41px 2.051px rgba(17, 16, 20, 0.7) inset,
      -1.641px -1.641px 6.564px 0px rgba(203, 199, 209, 0.5) inset;
  }

  .searchbar-shadow:checked {
    box-shadow: transparent !important ;
  }
  .searchbar-shadow:focus {
    box-shadow: transparent !important ;
  }
  .inset-shadow {
    box-shadow:
      13.949px 18.051px 16.41px 2.051px rgba(17, 16, 20, 0.7) inset,
      -1.641px -1.641px 6.564px 0px rgba(0, 0, 0, 0.5) inset;
  }

  .modal-height {
    --lib-max--content-height: 1000px !important;
  }

.textbox-1 {
  width: 100% !important;
  padding: 0px !important;
}

.card-menu-bg {
  border-radius: 6.564px !important;
  background: linear-gradient(
    180deg,
    $background-color-12 0%,
    $background-color-13 100%
  ) !important;
  box-shadow:
    0px 1.641px 3.282px 0px rgba(0, 0, 0, 0.25),
    0px 3.282px 3.282px 0px rgba(0, 0, 0, 0.25),
    1.641px -1.641px 2.462px 0px rgba(0, 0, 0, 0.4) inset,
    0px -1.641px 6.564px 0px rgba(255, 255, 255, 0.2) inset !important;
}

.custom-heading-section-heading {
  width: 100%;
  padding: 8px 4px;
}

.bottom-rounded-container {
  width: 100%;
  height: 60px;
  border-bottom-right-radius: 13px;
  border-bottom-left-radius: 13px;
  background: #27242c;

  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.6),
    -4px -4px 8px rgba(60, 60, 60, 0.3);
}

.top-rounded-container {
  width: 100%;
  border-top-left-radius: 13.13px;
  border-top-right-radius: 13.13px;
  background: rgba(33, 31, 36, 1);
  box-shadow: 4.1px 4.1px 77.95px 0px rgba(255, 255, 255, 0.32);
  box-shadow: -2.46px -2.46px 13.13px 0px rgba(255, 255, 255, 0.1);
}

.small-radio {
  height: 27px;
  width: 27px;
}

::-webkit-scrollbar-track {
  background-color: var(
    --secondary-color
  ) !important; /* Change this to your desired track color */
}

/* Customize scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: var(
    --secondary-color
  ) !important; /* Change this to your desired thumb color */
  border-radius: 5px; /* Optional: Rounded corners on scrollbar thumb */
}

/* Customize scrollbar corners */
::-webkit-scrollbar-corner {
  background-color: var(
    --secondary-color
  ) !important; /* Change this to your desired corner color */
}

.primary-percentage-bar {
  --lib-percentage-buffer-background-color: rgb(44, 41, 48);
  --lib-percentage-inner-background-color: white;
  --lib-percentage-inner-box-shadow: 0px 0px 10px 2px rgba(255, 52, 125, 1);
  --lib-percentage-height: 5px;
}

.maps-100vh .map-container {
  height: calc(100vh - 75px) !important;
}

ion-range::part(knob) {
  top: 26% !important;
}

.checkbox-sm {
  --size: 20px !important;
}

.rounded-2 .input-group-wrapper {
  border-radius: 24px !important;
}

.outset-shadow {
  box-shadow: -4.1px -4.1px 13.13px -2.46px rgba(203, 199, 209, 0.25);
}

.background-gradient {
  background:
    linear-gradient(
      180deg,
      rgba(156, 156, 156, 0.2) 3.76%,
      rgba(138, 138, 138, 0.13) 4.93%,
      rgba(100, 100, 100, 0) 14.33%
    ),
    $background-color-1;
}

.pinkTextColor {
  font-style: normal;
  font-weight: 500;
  font-size: 13.128px;
  line-height: 15px;
  color: #fe3c72;
  margin-left: 10px;
}

.divider {
  width: 100%;
  border: 4.1px solid white;
  border-image-source: radial-gradient(
    80% 46% at 50% 50%,
    #f7f5dd 0%,
    rgba(247, 245, 221, 0) 100%
  );
  border-image-slice: 1;
}

.normal-text-xs {
  font-weight: 700;
  font-size: 6.56px;
  line-height: 150%;
  letter-spacing: 0%;
}

.normal-text-sm {
  font-weight: 400;
  font-size: 9.85px;
  line-height: 150%;
  letter-spacing: -1.1%;
}

.normal-text-md {
  font-weight: 400;
  font-size: 11.49px;
  line-height: 150%;
  letter-spacing: -1.1%;
}

.normal-text-lg {
  font-weight: 500;
  font-size: 13.13px;
  line-height: 160%;
  letter-spacing: 0%;
}

.normal-text-gray {
  color: #bdbdbd;
}

.normal-text-gray-2 {
  color: #939195;
}

.discard {
  color: $text-color-3;
  text-shadow:
    0px 0px 4.896px $text-color-3,
    0px 0px 24.479px $scroll-color,
    0px 0px 24.479px $scroll-color;
  font-family: Calistoga;
  font-size: 11.487px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.drawer-shadow {
  box-shadow:
    -2.462px -2.462px 13.128px 0px rgba(255, 255, 255, 0.1),
    4.102px 4.102px 77.948px 0px rgba(255, 255, 255, 0.32);
}

.btn-selectable {
  --padding-start: 1.1em !important;
  --padding-end: 1.1em !important;
}

:host .button-native {
  border-radius: var(--border-radius);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-padding-start: var(--padding-start);
  padding-inline-start: var(--padding-start);
  -webkit-padding-end: var(--padding-end);
  padding-inline-end: var(--padding-end);
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-indent: inherit;
  text-overflow: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: inherit;
  color: inherit;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  outline: none;
  background: var(--background);
  line-height: 1;
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
  contain: layout style;
  cursor: pointer;
  opacity: var(--opacity);
  overflow: var(--overflow);
  z-index: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent !important;
}


.toggle-sm .lib-toggle-wrapper {
  width: 75px !important;
}

.toggle-sm .lib-toggle-container__thumb--move-right {
  cx: 45px !important;
}

.toggle-sm .lib-toggle-container {
  width: 4em !important;
}

// lib-image-deck {
//   left: 0;
// }

// .mat-mdc-menu-panel.lib-btn-menu-panel .mat-mdc-menu-content:not(:empty) {
//   padding-top: 3px !important;
//   padding-bottom: 8px !important;
// }
// .mat-mdc-menu-item {
//   margin-bottom: -7px !important;
// }
// .select-all-confirm {
//   display: none;
// }

// .p-float-label .p-inputwrapper-filled ~ label {
//   top: -0.5rem !important;
//   font-size: 12px;
// }

// .p-dropdown-item {
//   padding: 0 0.5rem;
// }

// .foodbox {
//   border-radius: 82.05px;
//   background: var(--Secondary, $background-color-11);
//   box-shadow:
//     -1.641px -1.641px 10.667px 0px rgba(255, 255, 255, 0.5),
//     3.282px 3.282px 6.564px 0px rgba(0, 0, 0, 0.89);
// }

// .fading-line {
//   display: none;
// }


::-webkit-scrollbar-track {
  background-color: var(
    --secondary-color
  ) !important; /* Change this to your desired track color */
}

/* Customize scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: var(
    --secondary-color
  ) !important; /* Change this to your desired thumb color */
  border-radius: 5px; /* Optional: Rounded corners on scrollbar thumb */
}

/* Customize scrollbar corners */
::-webkit-scrollbar-corner {
  background-color: var(
    --secondary-color
  ) !important; /* Change this to your desired corner color */
}

.min-screen-main {
  background-color: $background-color-1 !important;
}