/* ==========================================================================
   Product Detail Page Styles
   ========================================================================== */

.accordion-content {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .accordion-item.active svg {
    transform: rotate(180deg);
  }
  
  /* Stepper number input styling overrides */
  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
  }
  input[type=number] {
    -moz-appearance: textfield;
  }
  
  /* Smooth thumb scrolling on hover */
  .scrollbar-thin::-webkit-scrollbar {
    height: 4px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(202, 132, 113, 0.2);
    border-radius: 2px;
  }
  .scrollbar-thin:hover::-webkit-scrollbar-thumb {
    background: rgba(202, 132, 113, 0.4);
  }

  /* Prevent wishlist button from zooming too huge when badge-pop class is added by base.js */
  button.badge-pop {
    animation: btn-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes btn-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.05); }
    70%  { transform: scale(0.97); }
    100% { transform: scale(1); }
  }

  /* Lightbox Modal custom animations and styling */
  #image-modal {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #modal-container {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Hide native video control elements completely */
  video::-webkit-media-controls {
    display: none !important;
  }
  video::-webkit-media-controls-enclosure {
    display: none !important;
  }
  video::-moz-media-controls {
    display: none !important;
  }
  
  /* Custom timeline slider input */
  input[type=range].timeline-slider {
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    height: 4px;
    outline: none;
  }
  input[type=range].timeline-slider:hover {
    background: rgba(255, 255, 255, 0.35);
  }
  input[type=range].timeline-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: transparent;
  }
  input[type=range].timeline-slider::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #CA8471; /* primary brand color */
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -4px;
    transition: transform 0.1s ease;
  }
  input[type=range].timeline-slider:hover::-webkit-slider-thumb {
    transform: scale(1.2);
  }
  input[type=range].timeline-slider::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #CA8471;
    cursor: pointer;
    border: none;
  }

  /* Custom volume slider input */
  input[type=range].volume-slider {
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    height: 4px;
    outline: none;
    transition: width 0.3s ease, opacity 0.3s ease;
  }
  input[type=range].volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: transparent;
  }
  input[type=range].volume-slider::-webkit-slider-thumb {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #ffffff; /* white thumb for volume */
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3px;
  }
  input[type=range].volume-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: transparent;
  }
  input[type=range].volume-slider::-moz-range-thumb {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    border: none;
  }

  /* Volume hover slider expansion */
  #main-volume-group:hover .volume-slider,
  #modal-volume-group:hover .volume-slider {
    width: 64px !important;
    opacity: 1 !important;
  }

  /* ── Quill description output normalizer ─────────────────────────────
     The description is stored as Quill-generated HTML (p, h1-h3, ul, ol...).
     Tailwind resets all margins/padding by default, so we need to restore
     sensible styles here — mirroring what Quill Snow CSS does in the editor. */
  .product-description p {
    margin-bottom: 0.75em;
  }
  .product-description p:empty,
  .product-description p > br:only-child {
    display: none; /* Hide Quill's trailing empty paragraphs */
  }
  .product-description h1, .product-description h2, .product-description h3,
  .product-description h4, .product-description h5, .product-description h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0.75em;
    margin-bottom: 0.4em;
  }
  .product-description h1 { font-size: 1.4em; }
  .product-description h2 { font-size: 1.2em; }
  .product-description h3 { font-size: 1.05em; }
  .product-description ul, .product-description ol {
    padding-left: 1.5em;  /* container indent same as Quill */
    margin-bottom: 0.75em;
    list-style-type: none; /* remove native markers — use ::before instead */
    counter-reset: ol-counter;
  }
  .product-description li {
    margin-bottom: 0.2em;
    padding-left: 1.5em;
    position: relative;
  }
  /* Bullet marker — fixed width so text always starts at same x */
  .product-description ul li::before {
    content: '\2022'; /* • */
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: right;
    padding-right: 0.4em;
  }
  /* Numbered marker via CSS counter */
  .product-description ol {
    counter-reset: ol-counter;
  }
  .product-description ol li {
    counter-increment: ol-counter;
  }
  .product-description ol li::before {
    content: counter(ol-counter) '.';
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: right;
    padding-right: 0.4em;
  }
  .product-description a { color: #ca8471; text-decoration: underline; }
  .product-description strong { font-weight: 700; }
  .product-description em { font-style: italic; }
  .product-description u  { text-decoration: underline; }
  .product-description s  { text-decoration: line-through; }

/* Dark mode styling for product description & scrollbar */
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(217, 141, 120, 0.2);
}
.dark .scrollbar-thin:hover::-webkit-scrollbar-thumb {
  background: rgba(217, 141, 120, 0.4);
}
.dark .product-description {
  color: #C7B9B3;
}
.dark .product-description h1,
.dark .product-description h2,
.dark .product-description h3,
.dark .product-description h4,
.dark .product-description h5,
.dark .product-description h6,
.dark .product-description strong {
  color: #F4ECE8;
}
.dark .product-description a {
  color: #E6A08D;
}