@import "tailwindcss";

/* Custom utilities */
@layer utilities {
  .footer-gradient {
    background-image: linear-gradient(to bottom, #EE3523, #1F2937) !important;
    --tw-gradient-from: #EE3523 !important;
    --tw-gradient-to: #1F2937 !important;
  }
}

/* Fonts */
@layer base {
  body,
  input,
  button,
  select,
  textarea {
    font-family: 'Cairo', sans-serif !important;
  }
}

/* rest of your custom CSS */

/* @layer base {
  @font-face {
    font-family: 'Cairo';
    src: url(/../fonts/cairo/Cairo-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Cairo';
    src: url(/../fonts/cairo/Cairo-Bold.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
  }

  body,
  input,
  button,
  select,
  textarea {
    font-family: 'Cairo', sans-serif !important;
  }
} */

.embla {
    max-width: 100rem;
    --slide-height: 24rem;
    --slide-spacing: 2rem;
    --slide-size: 100%;
    --slide-spacing-sm: 1.6rem;
    --slide-size-sm: 50%;
    --slide-spacing-lg: 2rem;
    --slide-size-lg: calc(100% / 3);
  }
  .embla__viewport {
    overflow: hidden;
  }
  .embla__container {
    min-width: 900px;
    backface-visibility: hidden;
    display: flex;
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--slide-spacing) * -1);
  }
  @media (min-width: 750px) {
    .embla__container {
      margin-left: calc(var(--slide-spacing-sm) * -1);
    }
  }
  @media (min-width: 1200px) {
    .embla__container {
      margin-left: calc(var(--slide-spacing-lg) * -1);
    }
  }
  .embla__slide {
    min-width: 0;
    flex: 0 0 var(--slide-size);
    padding-left: var(--slide-spacing);
    max-width: 40%;
  }
  @media (min-width: 750px) {
    .embla__slide {
      flex: 0 0 var(--slide-size-sm);
      padding-left: var(--slide-spacing-sm);
    }
  }
  @media (min-width: 1200px) {
    .embla__slide {
      flex: 0 0 var(--slide-size-lg);
      padding-left: var(--slide-spacing-lg);
    }
  }
  .embla__slide__number {
    box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
    border-radius: 1.8rem;
    font-size: 4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--slide-height);
    user-select: none;
  }
  .embla__controls {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 1.8rem;
  }
  .embla__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    align-items: center;
  }
  .embla__button {
    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
    width: 3.6rem;
    height: 3.6rem;
    z-index: 1;
    border-radius: 50%;
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .embla__button:disabled {
    color: var(--detail-high-contrast);
  }
  .embla__button__svg {
    width: 35%;
    height: 35%;
  }
  .embla__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
  }
  .embla__dot {
    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .embla__dot:after {
    box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    content: '';
  }
  .embla__dot--selected:after {
    box-shadow: inset 0 0 0 0.2rem var(--text-body);
  }

/* ---- Card carousels (video testimonials + products): scoped overrides; do NOT affect the doctors .embla carousel ---- */
.embla--cards {
  --slide-spacing: 1rem;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}
.embla--cards .embla__viewport {
  overflow: hidden;
  padding-block: 0.5rem;
}
.embla--cards .embla__container {
  min-width: 0;
  display: flex;
  touch-action: pan-y pinch-zoom;
  margin-left: calc(var(--slide-spacing) * -1);
}
.embla--cards .embla__slide {
  flex: 0 0 82%;
  min-width: 0;
  max-width: none;
  padding-left: var(--slide-spacing);
}
@media (min-width: 640px) {
  .embla--cards .embla__slide { flex: 0 0 55%; }
}
@media (min-width: 1024px) {
  .embla--cards .embla__slide { flex: 0 0 33.3333%; }
}
.embla--cards .embla__button {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  width: 2.75rem;
  height: 2.75rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  transition: background-color .2s, color .2s, border-color .2s, transform .1s;
}
.embla--cards .embla__button:hover {
  background: #EE3523;
  border-color: #EE3523;
  color: #ffffff;
}
.embla--cards .embla__button:active { transform: scale(0.94); }
.embla--cards .embla__button:disabled {
  opacity: 0.45;
  background: #ffffff;
  color: #94a3b8;
}
.embla--cards .embla__dots {
  justify-content: center;
  margin-right: 0;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.embla--cards .embla__dot {
  width: auto;
  height: auto;
  border-radius: 9999px;
}
.embla--cards .embla__dot::after {
  box-shadow: none;
  background: #cbd5e1;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  transition: width .2s, background-color .2s;
}
.embla--cards .embla__dot.is-selected::after {
  background: #EE3523;
  width: 1.5rem;
}

.product-identification {
  background-image: url(/assets/home-background-a63b98d2445287935d2a4c25a35cb6e6d30241db307d246354603f9ca8369c03.png);
}

.contact-us {
  background-image: url(/assets/contact-us-9bf1ef1c773f0926a68d386a76025688a9bfaf495d4b8489f2d02e0252f3b0a6.png);
}



.field_with_errors .message {
  @apply text-red-500 text-sm mt-1 block;
}

.overlay-container {
  position: relative;
}

.overlay-container::after {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background-color: rgba(255, 255, 255, 0.733); /* black with 40% opacity */
  pointer-events: none; /* so clicks go through */
}

/* Article rich editor and its phone preview. Tailwind's reset flattens
   headings and lists, which would make the toolbar look broken and the
   preview lie about how the app renders the article. */
.admin-rich-editor h1, .admin-article-preview h1 { font-size: 1.5rem; font-weight: 700; margin: .6em 0 .3em; }
.admin-rich-editor h2, .admin-article-preview h2 { font-size: 1.25rem; font-weight: 700; margin: .6em 0 .3em; }
.admin-rich-editor h3, .admin-article-preview h3 { font-size: 1.1rem; font-weight: 600; margin: .6em 0 .3em; }
.admin-rich-editor p, .admin-article-preview p { margin: .5em 0; }
.admin-rich-editor ul, .admin-article-preview ul { list-style: disc; padding-inline-start: 1.4em; margin: .5em 0; }
.admin-rich-editor ol, .admin-article-preview ol { list-style: decimal; padding-inline-start: 1.4em; margin: .5em 0; }
.admin-rich-editor blockquote, .admin-article-preview blockquote {
  border-inline-start: 3px solid #EE3523; padding-inline-start: .75em; color: #475569; margin: .6em 0;
}
.admin-rich-editor a, .admin-article-preview a { color: #EE3523; text-decoration: underline; }


/* Turbo already draws a progress bar for every navigation; the default is a
   thin blue line that is easy to miss, and it only appears after half a
   second, which is most of a page load here. */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, #EE3523, #ff7a6b);
}

/* A submit that ends in a redirect leaves the button looking untouched until
   the next page paints, so it gets a spinner for as long as it is in flight.
   Not `disabled`: disabling a submitter can drop its name from the payload. */
[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.75;
}
[aria-busy="true"] .busy-spinner {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-inline-end: 0.45em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: busy-spin 0.6s linear infinite;
}
@keyframes busy-spin {
  to { transform: rotate(360deg); }
}