@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));

/* Theme Style */
:root {
  /***** Font Family section *****/
  --font-family: "Outfit", sans-serif;
  /***** End Font Family section *****/

  --theme-primary: #0194ff;
  --theme-primary-shade: #e5f4ff;

  --dark-primary: #1a1a1a;
  --dark-shade: #292929;

  --light-primary: #ffffff;
  --light-shade: #ffffff;

  --blue-shade: #f4f9ff;

  --gray-primary: #878e96;
  --gray-one: #b7b6b6;
  --gray-two: #f7f7f7;
  --gray-three: #f7f8f8;
  --gray-four: #fafafc;
  --gray-five: #f8f8f8;

  --required: #ff0000;
  --required-shade: #ffe5e5;

  --success: #197e23;
  --success-shade: #eaffec;

  --fail: #ff0010;
  --fail-shade: #ffecee;

  --warning: #b56d00;
  --warning-shade: #ffdd7e;

  --initial: #6b7280;
  --initial-shade: #f3f4f6;

  --approved: #065f46;
  --approved-shade: #d1fae5;

  --waiting: #b45309;
  --waiting-shade: #fef3c7;

  --processing: #1d4ed8;
  --processing-shade: #dbeafe;

  --expired: #374151;
  --expired-shade: #e5e7eb;

  --rejected: #b91c1c;
  --rejected-shade: #e5e7eb;

  --cancelled: #6b7280;
  --cancelled-shade: #f9fafb;

  --link: #1f73b7;

  --border-one: #dee2e6;

  --radius-8x: 8px;
  --radius-12x: 12px;
  --radius-max: 100vmax;

  --shadow-one: rgba(149, 157, 165, 0.2) 0px 8px 24px;

  --sidebar: var(--dark-primary);

  --sidebar-foreground: hsl(240 5.3% 26.1%);

  --sidebar-primary: hsl(240 5.9% 10%);

  --sidebar-primary-foreground: hsl(0 0% 98%);

  --sidebar-accent: hsl(240 4.8% 95.9%);

  --sidebar-accent-foreground: hsl(240 5.9% 10%);

  --sidebar-border: #464646;

  --sidebar-ring: hsl(217.2 91.2% 59.8%);

  --cell-size: 10px;

  --popover: #fff;
  --border: 0;

  --warning-text: #ff9700;
}

a {
  text-decoration: none !important;
}

body {
  font-family: "Outfit", sans-serif !important;
}

@theme {
  --title-color: theme(colors.gray.900);
  --title-font-weight: 700;
  --title-size: text-3xl;
  --spacing: 5px;
}

@layer components {
  .shade-one {
    box-shadow:
      rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
      rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }

  .shade-two {
    box-shadow: var(--shadow-one);
  }

  .title_white {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--light-primary);
    line-height: 1.2;
  }

  .title_dark {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark-primary);
    line-height: 1.2;
  }

  .title_red {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--fail);
    line-height: 1.2;
  }

  .subtitle_dark {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-primary);
    line-height: 1.2;
  }

  .caption_gray {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--gray-primary);
    line-height: 1.6;
  }

  .field-label:has(+ .field-control:required)::after,
  .field-label:has(+ .field-group .field-control:required)::after {
    content: "*";
    color: var(--required);
    /* from your :root tokens */
  }
}

@layer utilities {
  .rounded {
    border-radius: 10px !important;
  }

  .rounded-max {
    border-radius: 100vmax !important;
  }

  .border-standard {
    border-color: #dee2e6;
  }

  .border-primary {
    border-color: #0194ff;
  }
}

.dark {
  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

@theme inline {
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  /* * {
    @apply border-border outline-ring/50;
  } */
  /* body {
    @apply bg-background text-foreground;
  } */
}

.swiper-wrapper {
  padding: 1em 2em;
}

.register-phone-input .PhoneInput {
  display: flex;
  align-items: center;
  gap: 1em;
  border: 0;
  border-radius: 0.37rem;
  width: 100%;
  font-size: 0.9em;
  font-weight: 500;
  background: var(--light-color) !important;
  padding: 0 18px 0 14px;
}

.register-phone-input .PhoneInputCountrySelect {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.register-phone-input .PhoneInputCountryIconImg {
  width: 2em;
  height: auto;
  object-fit: contain;
}

.register-phone-input .PhoneInputCountryIcon--border {
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.register-phone-input .PhoneInputCountry {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.register-phone-input Input {
  border: none;
  outline: none;
  background: transparent;
  height: 45px;
  color: #212529;
  width: 100%;
}

.PhoneInputCountrySelectArrow {
  display: block;
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.35em;
  border-style: solid;
  border-color: #61707e;
  border-top-width: 0;
  border-bottom-width: 1px;
  border-left-width: 0;
  border-right-width: 1px;
  transform: rotate(45deg);
  opacity: 0.45;
}

.register-phone-input {
  border: 1px solid #dee2e6 !important;
  background: #fff !important;
  border-radius: 8px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
}

.rfm-child,
.rfm-initial-child-container {
  width: 100%;
}

/* Tour */
.tour-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 12px;
  max-width: 260px;
}

.tour-step img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.tour-step p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

/***** custom css *****/
/* .select-react .css-19bb58m {
  margin: 0 !important;
  padding: 0 !important;
} */

.select-react .css-1jqq78o-placeholder {
  color: var(--gray-one);
}

.select-react .css-13cymwt-control {
  border-color: #dee2e6;
}

/***** End custom css *****/
.swiper-slideActive {
  background-color: var(--theme-primary-shade);
  border-radius: 50px;
}