@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import "tailwindcss";

@custom-variant gridView {
  .gridView &,
  &.gridView {
    @slot;
  }
}
@custom-variant activeBtn {
  .activeBtn &,
  &.activeBtn {
    @slot;
  }
}
@custom-variant current {
  .current &,
  &.current {
    @slot;
  }
}
@custom-variant complete {
  .complete &,
  &.complete {
    @slot;
  }
}
@theme {
  /* Primary Colors */
  --color-dark-red: #170005;
  --color-red: #c0002d;
  --color-light-red: #fff1f2;

  /* Text Colors */
  --color-headline: #111827;
  --color-paragraph: #323b49;
  --color-sub-paragraph: #718096;
  --color-white: #ffffff;

  /* Grey Scale */
  --color-grey-50: #f9fafb;
  --color-grey-100: #f3f4f6;
  --color-grey-200: #e5e7eb;
  --color-grey-300: #eeeff2;
  --color-grey-400: #9ca3af;
  --color-grey-500: #6b7280;
  --color-grey-600: #4b5563;
  --color-grey-700: #374151;
  --color-grey-800: #1c2431;
  --color-grey-900: #111827;
  --color-black: #101521;

  /* Alert Colors - Success */
  --color-success-dark: #16a34a;
  --color-success-base: #22c55e;
  --color-success-light: #4ade80;
  --color-success-new: #b7ffd1;

  /* Alert Colors - Warning */
  --color-warning-dark: #eab308;
  --color-warning-base: #facc15;
  --color-warning-light: #fde047;

  /* Alert Colors - Error */
  --color-error-dark: #dd3333;
  --color-error-base: #ff4747;
  --color-error-light: #ff7171;
  --color-purple: #5a07ff;
  --color-blue: #366fff;
  /* Typography */
  --text-52: clamp(2.5rem, 5vw, 3.25rem); /* 52px */
  --text-38: clamp(1.875rem, 4vw, 2.375rem); /* 38px */
  --text-32: clamp(1.5rem, 3.5vw, 2rem); /* 32px */
  --text-28: clamp(1.375rem, 3vw, 1.75rem); /* 28px */
  --text-24: clamp(1.25rem, 2.5vw, 1.5rem); /* 24px */
  --text-20: clamp(1.125rem, 2vw, 1.25rem); /* 20px */
  --text-18: clamp(1rem, 1.8vw, 1.125rem); /* 18px */
  --text-16: clamp(0.9375rem, 1.6vw, 1rem); /* 16px */
  --text-14: clamp(0.8125rem, 1.4vw, 0.875rem); /* 14px */

  /* Line heights for each text size */
  --leading-72: clamp(3rem, 6vw, 4.5rem); /* 72px */
  --leading-52: clamp(2.25rem, 5vw, 3.25rem); /* 52px */
  --leading-30: clamp(1.4375rem, 3.2vw, 1.875rem); /* 30px */
  --leading-36: clamp(1.75rem, 3.6vw, 2.25rem); /* 36px */
  --leading-28: clamp(1.375rem, 3vw, 1.75rem); /* 28px */
  --leading-22: clamp(1.25rem, 2.5vw, 1.375rem); /* 22px */
  --leading-full: 100%;

  /* Letter spacing for each text size */
  --tracking-3: -0.03em;
  --tracking-1: -0.01em;
  --tracking-0.5: -0.005em;

  /* container  */
  --container-max: 1352px;
  --shadow-common: 4px 4px 40px 0px #0000000f;
}
@layer base {
  /* Typography using clamp for responsive sizing */
  h1,
  .h1 {
    @apply text-52 leading-72 font-medium tracking-3 text-headline;
  }

  h2,
  .h2 {
    @apply text-38 leading-52 font-semibold text-headline;
  }

  h3,
  .h3 {
    @apply text-32 font-semibold text-headline;
  }

  h4,
  .h4 {
    @apply text-28 font-medium text-headline;
  }

  h5,
  .h5 {
    @apply text-24 font-medium text-headline;
  }

  h6,
  .h6 {
    @apply text-20 leading-30 tracking-1 text-headline;
  }
  p,
  .p {
    @apply text-18 leading-28 tracking-0.5 text-paragraph;
  }

  body {
    @apply text-18 leading-28  tracking-0.5 text-paragraph;
    font-family: "DM Sans", sans-serif;
  }
  img {
    @apply w-full h-full object-cover;
  }
  input,
  textarea,
  select {
    @apply outline-none focus:outline-none;
  }
  button,
  a {
    @apply cursor-pointer;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

@layer components {
  .container-x {
    @apply mx-auto max-w-[var(--container-max)] w-full px-4;
  }
  .btn-primary {
    @apply text-18 tracking-1 leading-none text-white bg-red px-6 py-3.5 rounded-full hover:bg-dark-red transition-all duration-300 ease-in-out flex justify-center items-center gap-2 border border-red hover:border-dark-red cursor-pointer;
  }
  .btn-secondary {
    @apply text-18 tracking-1 leading-none text-headline bg-transparent px-6 py-3.5 rounded-full hover:bg-red transition-all duration-300 ease-in-out flex justify-center items-center gap-2 border border-grey-300 hover:border-red hover:text-white cursor-pointer;
  }
  .btn-dark {
    @apply text-18 tracking-1 leading-none text-white bg-headline px-6 py-3.5 rounded-full hover:bg-red transition-all duration-300 ease-in-out flex justify-center items-center gap-2 border border-headline hover:border-red cursor-pointer;
  }
}

/* custom select  */
/* The container must be positioned relative: */

.select-selected {
  @apply bg-transparent !text-headline;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  @apply absolute content-[''] top-3.5 right-2.5 w-0 h-0 border border-transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  @apply border border-transparent top-1.5;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
  @apply text-paragraph text-18  pl-5 pr-10 py-2 cursor-pointer;
}

/* Style items (options): */
.select-items {
  @apply absolute bg-white border border-grey-300 rounded  top-full left-0 right-0 z-50;
}

/* Hide the items when the select box is closed: */
.select-hide {
  @apply hidden;
}

.select-items div:hover,
.same-as-selected {
  @apply bg-gray-100 !text-headline;
}

.select-items div {
  @apply py-2 text-nowrap;
}

.select-items,
.modal-content {
  animation: smooth-up 0.3s ease-out; /* Adjusted timing for a smoother effect */
  overflow: hidden;
}
.suggestion-box {
  animation: smooth-up 0.3s ease-out; /* Adjusted timing for a smoother effect */
}
.suggestion-box-top {
  animation: smooth-down 0.3s ease-out; /* Adjusted timing for a smoother effect */
}
/* custom select end  */

@keyframes smooth-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes smooth-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.breadcrumb-section {
  background: url("/frontend/assets/images/breadcrumb-bg.png");
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.fun-fact-section-wrapper {
  background: url("/frontend/assets/images/fun-fact-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* video modal  */
/* Play button pulse animation */
.play-btn-pulse {
  position: relative;
  z-index: 2;
  overflow: visible !important;
}

/* Main ring animation */
.play-btn-pulse::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: -1;
  animation: pulse1 2s ease-out infinite;
}

/* Second ring animation */
.play-btn-pulse::after {
  content: "";
  position: absolute;
  top: -15px;
  right: -15px;
  bottom: -15px;
  left: -15px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: -2;
  animation: pulse2 2s ease-out infinite;
  animation-delay: 0.3s;
}

/* Outer ring animation */
.play-btn-pulse-ring {
  position: absolute !important;
  top: -25px !important;
  right: -25px !important;
  bottom: -25px !important;
  left: -25px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  z-index: -3 !important;
  animation: pulse3 2s ease-out infinite !important;
  animation-delay: 0.6s !important;
  display: block !important;
  pointer-events: none !important;
}

@keyframes pulse1 {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes pulse2 {
  0% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes pulse3 {
  0% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Video player modal */
#videoPlayer {
  transition: opacity 0.3s ease;
}

#videoPlayer.hidden {
  display: none;
  opacity: 0;
}

#videoPlayer:not(.hidden) {
  display: flex;
  opacity: 1;
}

.cta-main-wrapper {
  background-image: url("/frontend/assets/images/cta-lawyer-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24px;
}

/* Platform-specific aspect ratios */
.aspect-square {
  aspect-ratio: 1/1; /* Instagram classic */
}

.aspect-portrait {
  aspect-ratio: 4/5; /* Instagram portrait */
}

.aspect-landscape {
  aspect-ratio: 16/9; /* YouTube, standard video */
}

.aspect-tiktok {
  aspect-ratio: 9/16; /* TikTok, vertical video */
}

.aspect-twitter {
  aspect-ratio: 16/9; /* Twitter video */
}

.aspect-facebook {
  aspect-ratio: 16/9; /* Facebook video */
}

.aspect-spotify {
  aspect-ratio: 1/1; /* Spotify embed */
}
/* blogs details styling  */
.blog-details-body h5 {
  @apply mb-6;
}
.blog-details-body ul > li {
  @apply list-disc ml-5 font-medium text-headline;
}

/* Step transition animations */
.step-content {
  transition: all 0.5s ease-in-out;
}

.step-enter {
  opacity: 0;
  transform: translateX(50px);
}

.step-enter-active {
  opacity: 1;
  transform: translateX(0);
}

.step-exit {
  opacity: 1;
  transform: translateX(0);
}

.step-exit-active {
  opacity: 0;
  transform: translateX(-50px);
}

/* Step indicator animations */
.step-indicator {
  transition: all 0.3s ease-in-out;
}

.step-indicator.active {
  background-color: #c0002d;
  color: white;
  border-color: #c0002d;
}

.step-indicator.completed {
  background-color: #c0002d;
  color: white;
  border-color: #c0002d;
}

.step-line {
  transition: all 0.5s ease-in-out;
}

.step-line.active {
  background-color: #c0002d;
}

.page-content {
  display: none;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
  transition: opacity 0.3s ease;
}
.page-content.active {
  display: grid;
  opacity: 1;
}

/* status */
.status {
  @apply px-3 py-[2px] rounded-[100px] flex items-center justify-center gap-1;
}
.status-success {
  @apply bg-[#EEFBF2] text-success-base;
}
.status-active {
  @apply bg-[#E6EFFF] text-blue;
}
.status-warning {
  @apply bg-[#FFFCEF] text-warning-dark;
}

.status-cancel {
  @apply bg-[#FFE1BD] text-red;
}

.privacyPolicy h5,
.termsCondition h5 {
  @apply mb-4 mt-5 font-medium;
}
.privacyPolicy ul,
.termsCondition ul {
  @apply list-disc ml-5;
}

tbody tr:nth-last-child(-n + 2) .dropdown-menu {
  @apply bottom-11 top-auto;
}
.tableDropdown a:last-child {
  @apply border-b-0;
}
.opacity-anim {
  animation: fadeIn 0.5s forwards;
  transition: opacity 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.close-btn {
  @apply absolute -top-2 -right-2 text-14 leading-none pb-0.5 w-4 aspect-square rounded-full bg-red/10  font-bold text-red cursor-pointer hover:bg-red hover:text-white transition-all duration-300 ease-in-out;
}