/*
 * DoctorOnCall - Single Product Styles
 * Loaded conditionally only on product pages.
 */

/* ==========================================
   1. LAYOUT & GRID MATH
   ========================================== */

.product-header {
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 1024px) {
  .product-header {
    flex-direction: row;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .product-header-media,
  .sticky-product-info {
    flex-basis: var(--product-header-media-small-desktop-width);
  }
  .sticky-title {
    max-width: var(--product-header-media-small-desktop-width);
  }
  .product-header-overview,
  .sticky-product-cart-buttons {
    flex-basis: calc(
      100% - var(--product-header-media-small-desktop-width) - 2rem
    );
  }
}

@media (min-width: 1366px) {
  .product-header-media,
  .sticky-product-info {
    flex-basis: var(--product-header-media-big-desktop-width);
  }
  .sticky-title {
    max-width: var(--product-header-media-big-desktop-width);
  }
  .product-header-overview,
  .sticky-product-cart-buttons {
    flex-basis: calc(
      100% - var(--product-header-media-big-desktop-width) - 2rem
    );
  }
}

.glightbox-container .gslide-inner-content {
  padding: 1rem;
}

/* ==========================================
   2. MEDIA VIEWER & LIGHTBOX
   ========================================== */
/* Vertical Gallery Container */
.doc-custom-gallery .gallery-flex-container {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-1);
}

/* Thumbnails */
.thumb-grid {
  flex: 0 0 var(--thumb-column-width);
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
  flex-basis: 17%;
}

@media (max-width: 380px) {
  .thumb-grid {
    flex-basis: 15%;
  }

  .doc-custom-gallery .gallery-flex-container {
    gap: var(--gap-05);
  }
}

.thumb-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--doc-radius);
  box-shadow: var(--box-shadow-4);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .thumb-item:hover img {
    opacity: 0.9;
  }
}

.thumb-item.active {
  border-color: var(--doc-blue-2);
  box-shadow: var(--box-shadow-4-selected);
  transform: translateY(-1px);
}

.thumb-item.active img {
  opacity: 1;
}

/* Main Image & Zoom Engine */
.main-image-viewport {
  flex-grow: 1;
}

.main-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 2px solid var(--doc-gray-4);
  border-radius: var(--doc-radius);
  overflow: hidden;
  cursor: zoom-in;
  touch-action: none;
  backface-visibility: hidden;
}

#main-product-view {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* GLightbox Modal Constraints */
.gslide-image img {
  max-height: 85vh !important;
  width: auto !important;
  object-fit: contain;
  margin: 0 auto;
  border-radius: var(--doc-radius);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

/* ==========================================
   3. PRODUCT INFO, BADGES & RATING
   ========================================== */
/* Badges */
.doc-sale-badge {
  display: none;
}

.doc-sale-badge.active {
  display: initial;
}

.badge-sold {
  background-color: var(--doc-red-2);
  color: var(--doc-red-1);
}

/* Rating System */
.product-rating-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-05);
}

.star-rating {
  position: relative;
  display: inline-block;
  height: 1.2em;
  line-height: 1;
  font-size: 1.4rem;
  width: 5.4em;
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  user-select: none;
}

.star-rating::before {
  content: "\2606\2606\2606\2606\2606";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--doc-gray-3);
  letter-spacing: 2px;
}

.star-rating span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  height: 100%;
}

.star-rating span::before {
  content: "\2605\2605\2605\2605\2605";
  color: var(--doc-orange-1);
  letter-spacing: 2px;
}

.rating-meta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-inter-semibold);
  color: var(--doc-gray-2);
  align-self: flex-start;
}

/* Authorship Box */
.doc-authorship-box {
  background-color: var(--doc-blue-3);
  border-radius: var(--doc-radius);
  padding: 1rem;
}

.doc-authorship-box-label {
  line-height: 1;
}

.authorship {
  flex-direction: column;
}

.doc-author-label {
  font-size: var(--font-size-xxxs);
  color: var(--doc-gray-2);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.doc-author-name {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-inter-semibold);
  line-height: 1.5;
}

.doc-author-credentials {
  font-size: var(--font-size-xxxs);
  color: var(--doc-gray-2);
  line-height: 1;
}

.author-avatar-wrap {
  flex-basis: 5rem;
  border-radius: var(--doc-radius-s);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .authorship {
    flex-direction: initial;
  }
  .doc-authorship-box {
    padding: 2rem;
  }
}

/* ==========================================
   4. PRICING, VOUCHERS & CONSULTATION
   ========================================== */
/* Base Pricing */
.price-section {
  font-family: var(--font-ubuntu);
}

.price-section .screen-reader-text {
  display: none;
}

ins.doc-price,
.current-dynamic-price ins {
  text-decoration: none;
}

.doc-price-wrapper {
  color: var(--doc-blue-2);
}

.doc-price-wrapper .price-label {
  position: initial;
  display: none;
  margin-bottom: 0.5em;
  background-color: var(--doc-red-1);
  color: #fff;
}

.doc-price-wrapper.sale .price-label {
  display: inline-block;
}

.doc-price-wrapper .price-amount {
  font-size: 2.2rem;
  font-family: var(--font-ubuntu);
  font-weight: 600;
  line-height: 1;
  display: block;
}

.doc-price-wrapper.sale .price-amount {
  color: var(--doc-red-1);
}

.doc-price-wrapper .woocommerce-Price-currencySymbol {
  font-family: var(--font-ubuntu);
  font-weight: var(--font-weight-ubuntu);
  font-size: 1rem;
  padding-top: 0.095rem;
}

.woocommerce-Price-amount bdi {
  display: flex;
}

.doc-price-retail {
  color: var(--doc-gray-2);
}

.doc-price-retail del,
.doc-price-savings {
  display: flex;
}

/* Price Savings & Badges */
.doc-price-savings {
  color: var(--doc-green-1);
}

.doc-price-savings .woocommerce-Price-amount {
  font-weight: 600;
}

.doc-price-savings .doc-sale-badge {
  position: initial;
  background-color: initial;
  box-shadow: initial;
  color: var(--doc-green-1);
  border: 1px dashed var(--doc-green-1);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Hide WooCommerce Duplicate Price Strings */
.woocommerce-variation-price,
.current-dynamic-price del,
.current-dynamic-price .screen-reader-text {
  display: none;
}

/* ==========================================
   5. CART, VARIATIONS & WISHLIST
   ========================================== */
.woocommerce-variation-add-to-cart,
.sticky-product-cart-buttons {
  display: flex !important;
  align-items: center;
  gap: var(--gap-05);
  row-gap: var(--gap-1);
  flex-wrap: wrap;
}

/* Action Buttons */
.single_add_to_cart_button {
  background: linear-gradient(180deg, #4760ab 0%, #1d2d5f 100%) !important;
  border: 1px solid #141e41 !important;
  font-family: var(--font-ubuntu);
  font-size: var(--font-size-s);
  color: #fff !important;
  height: 50px;
  padding: 0 25px !important;
  border-radius: var(--doc-radius);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--box-shadow-3);
  transition: all 0.3s ease;
  flex-basis: min-content;
  flex-grow: 1;
  white-space: nowrap;
}

.single_add_to_cart_button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.ts-buy-now-button {
  background: linear-gradient(180deg, #cb3b45 0%, #8f1e26 100%) !important;
  border: 1px solid #6b151b !important;
  font-family: var(--font-ubuntu);
  font-size: var(--font-size-s);
  color: #fff !important;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border-radius: var(--doc-radius);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--box-shadow-3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  flex-basis: 100%;
  white-space: nowrap;
  flex-grow: 1;
}

@media (hover: hover) and (pointer: fine) {
  .single_add_to_cart_button:hover {
    background: linear-gradient(180deg, #4b66b0 0%, #253975 100%) !important;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-3-hover);
  }
  .ts-buy-now-button:hover {
    background: linear-gradient(180deg, #db4a54 0%, #ad2831 100%) !important;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-3-hover);
  }
}

@media (min-width: 768px) {
  .single_add_to_cart_button {
    flex-grow: 0;
    flex-shrink: 1;
  }
  .ts-buy-now-button {
    flex-basis: max-content;
    flex-grow: 1;
  }
}

/* Variations & Swatches */
.variations_form.cart table.variations,
.variations_form.cart table.variations tbody,
.variations_form.cart table.variations tbody tr,
.variations_form.cart table.variations tbody tr th {
  width: 100%;
  display: block;
  text-align: left;
}

.variations_form.cart table.variations {
  border: none;
  margin-bottom: 2rem;
}

/*
.variations .label,
.fields-label,
h3.fields-label {
  display: block;
  font-family: var(--font-ubuntu);
  font-weight: var(--font-weight-ubuntu);
  color: var(--doc-blue-1);
  line-height: 1;
  font-size: 1rem;
}
*/

.variations .label {
  margin-bottom: 0.5rem;
}

.doc-swatch-wrapper {
  display: flex;
  gap: var(--gap-05);
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.variations > tbody > tr:last-child .doc-swatch-wrapper {
  margin-bottom: 0;
}

.swatch-item {
  position: relative;
}

.swatch-input {
  display: none !important;
}

.swatch-label {
  font-family: var(--font-inter);
  font-weight: var(--font-weight-inter-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.875rem;
  height: 50px;
  background: #fff;
  border: 2px solid var(--doc-gray-4);
  border-radius: var(--doc-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--box-shadow-4);
  color: var(--doc-gray-1);
}

@media (hover: hover) and (pointer: fine) {
  .swatch-label:hover {
    border-color: var(--doc-blue-2);
    background: var(--doc-blue-3);
    color: var(--doc-blue-1);
  }
}

.swatch-input:checked + .swatch-label {
  background: #fff;
  border-color: var(--doc-blue-2);
  border-width: 2px;
  color: var(--doc-blue-1);
  box-shadow: var(--box-shadow-4-selected);
}

/* Wishlist Button */
.doc-wishlist-btn {
  display: flex;
  align-items: center;
  gap: var(--gap-05);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-ubuntu);
  color: var(--doc-gray-1);
}

.doc-wishlist-btn svg {
  fill: none;
  stroke: var(--doc-gray-1);
  stroke-width: 2px;
}

.doc-wishlist-btn.active {
  color: var(--doc-red-1);
}

.doc-wishlist-btn.active svg {
  fill: var(--doc-red-1);
  stroke: var(--doc-red-1);
}

.doc-wishlist-btn.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================
   6. BRAND USP FLEX-GRID
   ========================================== */
.product-usp-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  background-color: var(--doc-orange-2);
  border-radius: var(--doc-radius);
  align-items: center;
  list-style-type: none !important;
}

.usp-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--font-ubuntu);
  font-size: var(--font-size-s);
  color: var(--doc-blue-1);
  margin: 0;
}

.usp-icon svg,
.usp-icon img {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  object-fit: contain;
}

.usp-icon svg path,
.usp-icon svg rect,
.usp-icon svg circle,
.usp-icon svg polygon {
  fill: currentColor;
}

/* USP Custom Icon Overrides */
.usp-badge:has(.genuine) {
  color: var(--doc-blue-1);
}
.usp-badge:has(.fast-delivery) {
  color: var(--doc-yellow-1);
}
.usp-badge:has(.discreet-packaging) {
  color: var(--doc-gray-2);
}
.usp-badge:has(.muslim-friendly) {
  color: var(--doc-green-1);
}
.usp-badge:has(.fda-approved) {
  color: var(--doc-red-1);
}
.usp-badge:has(.secure-payment) {
  color: var(--doc-violet-1);
}
.usp-badge:has(.fair-price) {
  color: var(--doc-orange-1);
}
.usp-badge:has(.easy-refund) {
  color: var(--doc-blue-2);
}
.usp-badge:has(.trusted) {
  color: var(--doc-red-3);
}

/* USP Dynamic Math */
.usp-count-6 .usp-badge,
.usp-count-5 .usp-badge,
.usp-count-3 .usp-badge {
  width: calc((100% - 3rem) / 3);
}

.usp-count-4 .usp-badge,
.usp-count-2 .usp-badge {
  width: calc((100% - 1.5rem) / 2);
}

.usp-count-1 .usp-badge {
  width: 100%;
}

/* ==========================================
   7. ACCORDIONS (Sidebar navigation styles moved to style.css)
   ========================================== */

/* Accordions */
.faq-accordion-container {
  counter-reset: faq-counter;
  border-top: 1px solid var(--doc-border);
}

.accordion-header,
.faq-accordion-container h3 {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  padding: 1.125rem 0;
  margin: 0 !important;
  color: var(--doc-gray-1);
  border-bottom: 1px solid var(--doc-border);
  font-family: var(--font-ubuntu);
  font-size: 1rem;
  font-weight: var(--font-weight-ubuntu);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  position: relative;
}

.accordion-header::before,
.faq-accordion-container h3::before {
  counter-increment: faq-counter;
  content: counter(faq-counter) ". ";
  margin-right: 0.5rem;
  color: var(--doc-gray-2);
  font-variant-numeric: tabular-nums;
}

.accordion-header::after,
.faq-accordion-container h3::after {
  content: "+";
  margin-left: auto;
  padding-left: 1rem;
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

.accordion-header.active,
.faq-accordion-container h3.active {
  color: var(--doc-blue-2);
  border-bottom-color: transparent;
}

.accordion-header.active::after,
.faq-accordion-container h3.active::after {
  content: "−";
  transform: rotate(180deg);
}

.accordion-content,
.faq-accordion-container h3 + p {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition:
    grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s ease,
    border-color 0.3s ease;
  margin: 0 !important;
  padding-left: 1.5rem;
  color: var(--doc-gray-2);
}

.accordion-header.active + .accordion-content,
.faq-accordion-container h3.active + p {
  grid-template-rows: 1fr;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--doc-border);
}

.accordion-inner,
.accordion-content > * {
  min-height: 0;
}

.accordion-content p {
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  /* USP Flex Grid Math - safely drops 3-column setups to 2-columns */
  .usp-count-6 .usp-badge,
  .usp-count-5 .usp-badge,
  .usp-count-4 .usp-badge,
  .usp-count-3 .usp-badge,
  .usp-count-2 .usp-badge {
    width: calc((100% - 1.5rem) / 2);
  }

  .product-usp-row {
    padding: 1rem;
  }
}

.sticky-title {
  font-family: var(--font-ubuntu);
  font-weight: var(--font-weight-ubuntu);
  line-height: 1;
}

.sticky-qty-wrapper {
  height: 50px;
}

.sticky-product-info {
  color: #fff;
  gap: 0.4rem;
}

.sticky-product-cart-buttons {
  flex-basis: 100%;
  flex-wrap: nowrap;
}

.sticky-product-cart-buttons .ts-buy-now-button {
  flex-basis: initial;
}

.sticky-product-cart-buttons .single_add_to_cart_button {
  flex-basis: min-content;
  flex-grow: 0;
}

.sticky-variant {
  font-size: var(--font-size-xs);
  padding: 0.2rem 0.4rem;
  border: 1px dashed rgba(255, 255, 255, 0.75);
  color: rgba(255, 255, 255, 0.75);
}

.single-product #doc-global-toast {
  position: sticky;
  margin-bottom: 1rem;
}

.single-product .vouchers-header h2.h3 {
  line-height: 1;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .single-product #doc-global-toast {
    margin-bottom: 2rem;
  }
}