/* Blazor-specific glue on top of the ported global + component styles. */

/* Mobile nav open state (interactive toggle handled in Blazor) */
/* Mobile / tablet navigation. hba-components.css hides the nav and shows the
   hamburger below 1024px, so the open-state styling must cover the same range —
   it used to stop at 900px, leaving 901–1023px with a hamburger that did nothing. */
@media (max-width: 1023px) {
  .header__nav {
    display: none;
  }

  .header__nav--open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-gray-100);
    padding: 0.75rem 4% 1.25rem;
    gap: 0;
    z-index: 60;
  }

  .header__nav--open .header__nav-link {
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid var(--color-gray-100);
    border-radius: 0;
    text-align: start;
  }

  .header__nav--open .header__dropdown {
    display: flex;
    flex-direction: column;
  }

  /* The hover mega-menu can't be opened by touch; on small screens the groups
     are listed inline under Products instead. */
  .header__nav--open .header__dropdown-menu {
    display: none;
  }

  .header__nav--open .header__chevron {
    display: none;
  }

  .header__mobile-groups {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0 0.5rem 1.25rem;
    border-bottom: 1px solid var(--color-gray-100);
  }

  [dir="rtl"] .header__mobile-groups {
    padding: 0.25rem 1.25rem 0.5rem 0;
  }

  .header__mobile-group {
    padding: 0.6rem 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-600);
    text-align: start;
  }

  .header__mobile-group:hover,
  .header__mobile-group:active {
    color: var(--color-red);
  }
}

@media (min-width: 1024px) {
  .header__mobile-groups {
    display: none;
  }
}

/* iOS Safari zooms the page when a focused field's text is under 16px.
   Listed with the site's own form selectors so this out-ranks their 15px. */
@media (max-width: 767px) {
  input,
  select,
  textarea,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .search-input,
  .videos-toolbar__search input,
  .videos-toolbar__sort {
    font-size: 16px;
  }
}

/* Hero copy on phones was set at 10–17px, which is hard to read over a photo;
   nudge it up while keeping the same hierarchy. */
@media (max-width: 767px) {
  .hero-carousel__brand {
    font-size: 0.75rem;
  }

  .hero-carousel__title {
    font-size: 1.375rem;
  }

  .hero-carousel__tagline {
    font-size: 0.8125rem;
  }

  .hero-carousel__actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}

/* Contact form status messages */
.form-success {
  background: #ECFDF5;
  border: 1px solid #10B981;
  color: #065F46;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
}

.form-error {
  background: #FEF2F2;
  border: 1px solid #EF4444;
  color: #991B1B;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* Toast notifications (admin) */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.25s ease;
}

.toast--success { background: #10B981; }
.toast--error { background: #EF4444; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Homepage "Explore Categories" strip */
.category-strip__header {
  text-align: center;
  margin-bottom: 2rem;
}

.category-strip__header .accent-line {
  margin-left: auto;
  margin-right: auto;
}

.category-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-red);
}

.category-card__image {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-gray-100);
}

.category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card__label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-900);
  text-align: center;
}

/* Secondary (category / subcategory) filter rows on the products page */
.filters-section__tabs--sub {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-gray-200);
}

/* Filter chips: a little larger and higher-contrast so the options read as
   deliberate choices rather than muted background text. */
.filter-tab {
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Only the idle chips get the darker text and border; the active chip keeps the
   white-on-red from hba-components.css (same specificity, so it must be scoped). */
.filter-tab:not(.filter-tab--active) {
  color: var(--color-gray-700);
  border-color: var(--color-gray-200);
}

.filter-tab:not(.filter-tab--active):hover {
  color: var(--color-black);
}

.filter-tab--small {
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
}

/* "All" reset chip on the category/subcategory rows — visually distinct from
   real category/subcategory chips so it can't be mistaken for one. */
.filter-tab--all:not(.filter-tab--active) {
  font-style: italic;
  color: var(--color-gray-500);
}

/* Product option chips (colors / sizes) */
.product-detail__option-group {
  margin: 1rem 0;
}

.product-detail__option-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-600);
  margin-bottom: 0.5rem;
}

.product-detail__option-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.option-chip {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.option-chip:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

.option-chip--active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.option-chip--mini {
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  cursor: default;
}

.product-card__subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.125rem 0 0.25rem;
}

.product-card__video-indicator {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-white);
  border-radius: var(--radius-full);
  z-index: 2;
}

/* Chips input (admin product form colors/sizes) */
.chips-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.chips-input:focus-within {
  border-color: var(--color-royal-blue);
}

.chips-input input {
  flex: 1;
  min-width: 180px;
  border: none !important;
  outline: none;
  padding: 0.25rem !important;
  font-size: 0.875rem;
  font-family: inherit;
}

.chips-input__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.chips-input__remove {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--color-gray-500);
  padding: 0;
}

.chips-input__remove:hover {
  color: var(--color-red);
}

/* Testimonials page grid */
.reviews-page__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.reviews-page__header .accent-line {
  margin-left: auto;
  margin-right: auto;
}

.reviews-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.reviews-page__grid .review-card {
  width: auto;
  max-width: none;
}

/* Video card channel line (videos page) */
.video-card__channel {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-red);
  margin-top: 0.375rem;
}

/* Admin sidebar: nav scrolls, Logout footer stays pinned.
   (We added Categories / Sub Categories / Enquiries links, so the nav can
   overflow the viewport height the original design assumed.) */
.admin-sidebar__nav {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.admin-sidebar__nav::-webkit-scrollbar {
  width: 6px;
}

.admin-sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
}

/* Admin modals: cap height and scroll internally so tall forms (Category /
   Sub Category) never push their Cancel/Save buttons off-screen.
   The original design only used this modal for short confirm dialogs. */
.modal-overlay {
  padding: 1.5rem;
}

.modal {
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Keep the action row pinned to the bottom of the scroll area with a divider,
   so Save/Cancel are always visible once the user scrolls to the end. */
.modal__actions {
  position: sticky;
  bottom: -2rem;
  margin: 1rem -2rem -2rem;
  padding: 1rem 2rem;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Admin: per-image color tag chip on the Media page */
.image-card__color-tag {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

/* Blazor error UI (replaces template default) */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FEF3C7;
  padding: 0.75rem 1.25rem;
  z-index: 300;
  box-shadow: var(--shadow-lg);
}

/* ---- Product detail: color swatches ---- */
.product-detail__swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.product-detail__option-selected {
  margin-inline-start: 0.5rem;
  color: var(--color-black);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.color-swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  background-size: cover;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.color-swatch:hover {
  transform: translateY(-2px);
  border-color: var(--color-gray-400);
}

.color-swatch--active {
  border-color: var(--color-red);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-red);
}

.color-swatch:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .color-swatch {
    width: 30px;
    height: 30px;
  }
}

/* ---- Home: reviews carousel (replaces the CSS marquee) ---- */
.reviews-carousel {
  position: relative;
  padding: 0 3rem;
}

.reviews-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 1rem 0;
  direction: ltr; /* scroll maths stay LTR; the cards themselves still flip for Arabic */
}

.reviews-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.reviews-carousel__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
}

.reviews-carousel .review-card {
  scroll-snap-align: start;
}

.reviews-carousel__control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.reviews-carousel__control:hover {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.reviews-carousel__control--prev { left: 0; }
.reviews-carousel__control--next { right: 0; }

@media (max-width: 767px) {
  .reviews-carousel {
    padding: 0 0.25rem;
  }

  /* swipe is the natural control on touch; keep the buttons small and out of the way */
  .reviews-carousel__control {
    width: 36px;
    height: 36px;
    top: auto;
    bottom: -0.5rem;
    transform: none;
  }

  .reviews-carousel__control--prev { left: 0.25rem; }
  .reviews-carousel__control--next { right: 0.25rem; }
}

/* ---- Videos page: toolbar, clickable cards, in-page player ---- */
.videos-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: -1rem 0 2rem;
}

.videos-toolbar__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  max-width: 520px;
  color: var(--color-gray-400);
}

.videos-toolbar__search svg {
  position: absolute;
  inset-inline-start: 0.875rem;
  pointer-events: none;
}

.videos-toolbar__search input {
  width: 100%;
  padding: 0.7rem 2.5rem 0.7rem 2.75rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-black);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[dir="rtl"] .videos-toolbar__search input {
  padding: 0.7rem 2.75rem 0.7rem 2.5rem;
}

.videos-toolbar__search input:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(196, 33, 38, 0.12);
}

.videos-toolbar__search input::-webkit-search-cancel-button {
  display: none;
}

.videos-toolbar__clear {
  position: absolute;
  inset-inline-end: 0.5rem;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.videos-toolbar__clear:hover {
  background: var(--color-red);
  color: var(--color-white);
}

.videos-toolbar__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.videos-toolbar__count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-500);
  white-space: nowrap;
}

.videos-toolbar__sort {
  padding: 0.6rem 2.25rem 0.6rem 1rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  cursor: pointer;
}

/* Cards are buttons now (they open the player) — strip the native button chrome
   so the existing .video-card look applies unchanged. */
.video-card--btn {
  padding: 0;
  margin: 0;
  width: 100%;
  font: inherit;
  text-align: start;
  cursor: pointer;
  color: inherit;
}

.video-card--btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

.video-card__meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.video-card__meta span + span::before {
  content: "\00b7";
  margin-inline-end: 0.5rem;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  outline: none;
  animation: fadeIn 0.2s ease;
}

.video-modal__panel {
  position: relative;
  width: min(960px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: fadeInUp 0.25s ease;
}

.video-modal__close {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.video-modal__close:hover {
  background: var(--color-red);
}

.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-black);
}

.video-modal__frame iframe,
.video-modal__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video-modal__body {
  padding: 1.5rem;
}

.video-modal__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-black);
  margin-bottom: 0.25rem;
}

.video-modal__channel {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-red);
  margin-bottom: 0.75rem;
}

.video-modal__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin-bottom: 1.25rem;
}

.video-modal__yt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .videos-toolbar__right {
    width: 100%;
    justify-content: space-between;
  }

  .video-modal {
    padding: 0.5rem;
  }

  .video-modal__body {
    padding: 1rem;
  }
}

/* ---- Product detail: "Enquire Now" menu opens downward ----
   Upward, it sat on top of the colour and size options. The ::before is the
   invisible hover bridge across the gap, so it moves to the top edge too. */
.enquire-dropdown__menu {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.enquire-dropdown__menu::before {
  bottom: auto;
  top: -10px;
}

/* The grid clips horizontally so the AOS slide-ins don't cause a sideways scrollbar,
   but "hidden" also cut off the enquire menu now that it drops below the button
   (always, in the stacked mobile layout). "clip" contains the x axis without turning
   the grid into a scroll container, so the y axis can stay visible. */
.product-detail__grid {
  overflow-x: clip;
  overflow-y: visible;
}

/* Keep the open menu above whatever section follows the grid. */
.product-detail__info {
  position: relative;
  z-index: 2;
}

/* Videos toolbar controls are declared above at 15/14px; on phones they need the
   same 16px floor as every other field (must sit after those rules to win). */
@media (max-width: 767px) {
  .videos-toolbar__search input,
  .videos-toolbar__sort {
    font-size: 16px;
  }
}

/* Product detail on phones: the info column stacks under the image, so put the
   colour/size options and the enquire buttons right after the name and move the
   long description to the end — otherwise the options sit below the fold. */
@media (max-width: 767px) {
  .product-detail__info {
    display: flex;
    flex-direction: column;
  }

  .product-detail__desc {
    order: 10;
    margin-top: 1.5rem;
  }
}

/* hba-global.css only puts overflow-x: hidden on <body>. Desktop browsers honour
   that, but iOS Safari (and some Android browsers) let the page pan sideways
   anyway whenever anything pokes past the edge. Clipping at the root as well
   is the standard fix; vertical scrolling is unaffected. */
html {
  overflow-x: hidden;
}

/* Grid columns are "1fr", i.e. minmax(auto, 1fr): they refuse to shrink below
   their content's intrinsic width. The thumbnail strip (72px x N, no shrink) made
   the image column ~750px wide on a 360px phone, so the main image rendered at
   that size and was cut off at the screen edge. min-width: 0 lets the columns
   shrink to the viewport; the strip then scrolls sideways inside its column. */
.product-detail__grid > * {
  min-width: 0;
}