/* Product Header 2 Section Styles */

.btn.btn-filled-primary.btn-md {
  font-size: 16px; 
}

@media (max-width: 1023px) {
  .btn.btn-filled-primary.btn-md {
    font-size: 13px;
  }
}

@media (max-width: 370px) {
  .btn.btn-filled-primary.btn-md {
    font-size: 12px;
  }
}

.error-message {
  padding: 1.2rem 1rem;
  background-color: #f9cfcf;
  border-radius: 10px;
  color: #900808;
}

.product-header-2 {
  overflow: visible !important;
  position: relative;
}

.product-header-2 .container {
  overflow: visible !important;
}

.product-header-inner {
  overflow: visible !important;
  position: relative;
}

/* Light gray background color */
.bg-cream {
  background-color: #f6f7f9;
}

.product-layout {
  display    : flex;
  gap        : var(--space-xl);
  align-items: flex-start;
  position   : relative;
}

@media (max-width: 1023px) {
  .product-layout {
    flex-direction: column;
  }
}

/* Media Column with Side Thumbnails - New Layout */
.media-column.gallery-with-side-thumbnails {
  flex          : 1 1 auto;
  width         : 58%;
  max-width     : 900px;
  display       : flex;
  flex-direction: row;
  gap           : 12px;
  align-items   : flex-start;
}

@media (max-width: 1023px) {
  .media-column.gallery-with-side-thumbnails {
    width         : 100%;
    max-width     : 100%;
    flex-direction: column;
  }
}

/* Vertical Thumbnails Column */
.gallery-thumbnails-vertical {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
  flex-shrink   : 0;
  width         : 80px;
  max-height    : 640px;
  overflow-y    : auto;
  overflow-x    : hidden;
}

.gallery-thumbnails-vertical::-webkit-scrollbar {
  width: 4px;
}

.gallery-thumbnails-vertical::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-thumbnails-vertical::-webkit-scrollbar-thumb {
  background   : rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

@media (max-width: 1023px) {
  .gallery-thumbnails-vertical {
    flex-direction            : row;
    width                     : 100%;
    max-height                : none;
    overflow-x                : auto;
    overflow-y                : hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom            : 8px;
  }

  .gallery-thumbnails-vertical::-webkit-scrollbar {
    height: 4px;
  }
}

.thumbnail-item {
  position     : relative;
  width        : 80px;
  height       : 80px;
  border-radius: 12px;
  overflow     : hidden;
  cursor       : pointer;
  border       : 1px solid transparent;
  transition   : all 0.2s ease;
  flex-shrink  : 0;
}

.thumbnail-item:hover {
  opacity: 0.8;
}

.thumbnail-item.active {
  border-color: #01ac46;
  border-width: 2px;
}

.thumbnail-item img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.thumbnail-item .video-thumbnail-indicator {
  position        : absolute;
  bottom          : 5px;
  right           : 5px;
  width           : 32px;
  height          : 32px;
  background-color: #f6f7f9;
  border          : 1px solid rgba(37, 37, 37, 0.1);
  border-radius   : 16px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : #252525;
  pointer-events  : none;
}

/* Main Gallery Display */
.gallery-main-display {
  flex     : 1;
  min-width: 0;
}

/* Hero Media */
.hero-media {
  width        : 100%;
  border-radius: 16px;
  overflow     : hidden;
  min-height   : 720px;
  max-height   : 720px;
  background   : transparent;
  cursor       : pointer;
}

@media (max-width: 1023px) {
  .hero-media {
    min-height: 400px;
    max-height: 400px;
  }
}

.hero-media img,
.hero-media video {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

/* Info Column (Right - 42% width, sticky) */
.info-column {
  flex     : 0 0 42%;
  width    : 42%;
  min-width: 0;
  overflow : visible !important;
}

@media (min-width: 1024px) {
  .info-column {
    padding-top: 0;
  }
}

@media (max-width: 1023px) {
  .info-column {
    width: 100%;
    flex : 0 0 100%;
  }
}

.info-sticky {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-lg);
}

.info-sticky>*+* {
  margin-top: 0;
}

/* Category Label */
.category-label {
  margin-bottom: -8px;
}

.category-label span {
  letter-spacing: 0.04em;
  opacity       : 0.75;
}

/* Device Options Selector */
.device-options-selector {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
}

.device-options-label {
  padding       : 0 2px;
  letter-spacing: 0.04em;
}

.device-options-list {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.device-option-item {
  border       : 1px solid rgba(37, 37, 37, 0.3);
  border-radius: 8px;
  padding      : 5px 13px;
  cursor       : pointer;
  transition   : all 0.2s ease;
}

.device-option-item:hover {
  border-color: rgba(37, 37, 37, 0.5);
}

.device-option-item.selected {
  background-color: #f0e9db;
  border-color    : #252525;
}

.device-option-content {
  display    : flex;
  align-items: center;
  gap        : 15px;
}

.device-option-image {
  width          : 64px;
  height         : 64px;
  flex-shrink    : 0;
  border-radius  : 8px;
  overflow       : hidden;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.device-option-image img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.device-option-info {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  min-width     : 0;
}

.device-option-title {
  line-height: 1.35;
}

.device-option-savings {
  display    : flex;
  align-items: center;
  gap        : 8px;
  line-height: 1;
}

.device-option-price {
  flex-shrink: 0;
  line-height: 1.25;
}

/* Product Title */
.product-title-wrapper {
  display    : flex;
  align-items: center;
  gap        : var(--space-sm);
  flex-wrap  : wrap;
}

.product-code-badge {
  border       : 1px solid currentColor;
  border-radius: 573px;
  padding      : 5px 9.5px;
  display      : inline-flex;
  align-items  : center;
  height       : 27px;
}

.product-code-badge sup {
  font-size     : 0.75em;
  vertical-align: super;
  line-height   : 0;
}

.product-title-wrapper h1 {
  line-height: 1.2;
  margin     : 0;
}

/* Rating */
.rating-wrapper {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.stars {
  display    : flex;
  align-items: center;
  gap        : 3.5px;
}

.stars img {
  display: block;
}

.stars svg {
  width : 15px;
  height: 15px;
}

.rating-text {
  padding-top: 2px;
}

.reviews-link {
  text-decoration: underline;
}

/* Product Description */
.product-description p {
  line-height: 1.5;
}

/* Quantity and Cart Wrapper */
.qty-and-cart-wrapper {
  display    : flex;
  gap        : var(--space-sm);
  align-items: flex-end;
  width      : 100%;
}

/* Add to Cart Section */
.add-to-cart-section {
  flex   : 1;
  display: none;
  /* Hidden by default until gating check completes */
}

/* Show add to cart when gating check determines it should be visible */
.add-to-cart-section.gating-checked {
  display: block;
}

/* Hide enrollment pack buttons by default until gating check completes */
[data-fluid-add-enrollment-pack] {
  display: none !important;
}

/* Show enrollment pack buttons when gating check determines they should be visible */
[data-fluid-add-enrollment-pack].gating-checked {
  display: inline-flex !important;
}

/* Loading state for buy options */
.buy-options-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 40px 16px;
  background     : #f6f7f9;
  border-radius  : 12px;
  gap            : 12px;
}

.buy-options-loading.hidden {
  display: none;
}

.buy-options-loading-spinner {
  display         : inline-block;
  width           : 20px;
  height          : 20px;
  border          : 2px solid #e0e0e0;
  border-top-color: #00a859;
  border-radius   : 50%;
  animation       : spinner-rotate 0.6s linear infinite;
}

.buy-options-loading-text {
  font-size  : 14px;
  color      : #666;
  font-weight: 500;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.add-to-cart-section .btn {
  min-height      : 52px;
  padding         : 14px 24px;
  justify-content : center;
  font-weight     : 500;
  line-height     : 1.3;
  width           : 100%;
  border-radius   : 10px;
  background-color: var(--clr-primary);
  color           : var(--clr-accent-2);
  font-size       : var(--font-size-lg);
}

/* Product Action Cards */
.product-action-cards {
  display              : none;
  /* Hidden by default until gating check completes */
  grid-template-columns: 1fr 1fr;
  gap                  : 12px;
  background           : #e6e7e9;
  border-radius        : 12px;
  padding              : 16px;
}

/* Show action cards when gating check determines they should be visible */
.product-action-cards.gating-checked {
  display: grid;
}

@media (max-width: 600px) {
  .product-action-cards {
    grid-template-columns: 1fr;
    gap                  : 8px;
    padding              : 12px;
  }
}

.action-card {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  text-decoration: none;
  color          : #252525;
  padding        : 12px;
  background     : #fff;
  border-radius  : 10px;
  border         : none;
  cursor         : pointer;
  text-align     : left;
  transition     : all 0.2s ease;
}

.action-card:hover {
  background: #f5f5f5;
  transform : translateY(-1px);
}

.action-card-icon {
  width          : 32px;
  height         : 32px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  color          : #01ac46;
}

.action-card-icon svg {
  width : 28px;
  height: 28px;
}

.action-card-icon--green,
.action-card-icon--gray,
.action-card-icon--orange,
.action-card-icon--purple {
  color     : #01ac46;
  background: none;
  border    : none;
}

.action-card-content {
  display       : flex;
  flex-direction: column;
  gap           : 2px;
  min-width     : 0;
}

.action-card-title {
  font-size  : 14px;
  font-weight: 600;
  line-height: 1.3;
  color      : #252525;
}

.action-card-subtitle {
  font-size  : 12px;
  font-weight: 400;
  line-height: 1.3;
  color      : #888;
}

@media (max-width: 767px) {
  .action-card {
    padding: 10px;
  }

  .action-card-icon {
    width : 28px;
    height: 28px;
  }

  .action-card-icon svg {
    width : 24px;
    height: 24px;
  }

  .action-card-title {
    font-size: 13px;
  }

  .action-card-subtitle {
    font-size: 11px;
  }
}

/* Consultant Booking Modal */
.consultant-modal {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  z-index        : 10000;
  display        : none;
  align-items    : center;
  justify-content: center;
  padding        : 20px;
}

.consultant-modal.active {
  display: flex;
}

.consultant-modal-overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(0, 0, 0, 0.6);
}

.consultant-modal-container {
  position     : relative;
  display      : flex;
  width        : 100%;
  max-width    : 1000px;
  max-height   : 90vh;
  background   : #fff;
  border-radius: 16px;
  overflow     : hidden;
  box-shadow   : 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
  .consultant-modal-container {
    flex-direction: column;
    max-height    : 95vh;
    overflow-y    : auto;
  }
}

/* Modal Left Side */
.consultant-modal-left {
  position  : relative;
  width     : 42%;
  min-height: 600px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
  overflow  : hidden;
}

@media (max-width: 900px) {
  .consultant-modal-left {
    width     : 100%;
    min-height: 280px;
  }
}

.modal-bg-image {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  z-index   : 0;
}

.modal-bg-placeholder {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index   : 0;
}

.modal-testimonial {
  position: absolute;
  bottom  : 0;
  left    : 0;
  right   : 0;
  padding : 32px;
  color   : #fff;
  z-index : 1;
}

.modal-testimonial::before {
  content       : '';
  position      : absolute;
  bottom        : 0;
  left          : 0;
  right         : 0;
  height        : 100%;
  min-height    : 350px;
  background    : linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
  z-index       : -1;
  pointer-events: none;
}

.testimonial-stars {
  display      : flex;
  gap          : 4px;
  margin-bottom: 16px;
}

.testimonial-quote {
  font-size    : 18px;
  font-style   : italic;
  line-height  : 1.5;
  margin-bottom: 20px;
}

.testimonial-author {
  display    : flex;
  align-items: center;
  gap        : 12px;
}

.author-avatar {
  width          : 40px;
  height         : 40px;
  border-radius  : 50%;
  background     : rgba(255, 255, 255, 0.2);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 14px;
  font-weight    : 600;
}

.author-info {
  display       : flex;
  flex-direction: column;
  gap           : 2px;
}

.author-name {
  font-size     : 13px;
  font-weight   : 600;
  letter-spacing: 0.02em;
}

.author-title {
  font-size: 12px;
  opacity  : 0.8;
}

/* Modal Right Side */
.consultant-modal-right {
  flex          : 1;
  position      : relative;
  display       : flex;
  flex-direction: column;
  background    : #fff;
  overflow-y    : auto;
}

/* Progress Bar Header Row */
.modal-header-row {
  display    : flex;
  align-items: center;
  gap        : 16px;
  padding    : 24px 32px 0;
}

.modal-progress {
  flex: 1;
}

.progress-bar {
  height       : 4px;
  background   : #e5e5e5;
  border-radius: 2px;
  overflow     : hidden;
}

.progress-fill {
  height       : 100%;
  background   : #00ac46;
  border-radius: 2px;
  transition   : width 0.3s ease;
  width        : 33%;
}

.progress-fill[data-step="1"] {
  width: 33%;
}

.progress-fill[data-step="2"] {
  width: 66%;
}

.progress-fill[data-step="3"] {
  width: 100%;
}

.progress-fill[data-step="4"] {
  width: 100%;
}

.modal-close-btn {
  background : none;
  border     : none;
  cursor     : pointer;
  color      : #252525;
  padding    : 4px;
  transition : opacity 0.2s;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  opacity: 0.7;
}

/* Modal Steps */
.modal-step {
  display: none;
  flex   : 1;
}

.modal-step.active {
  display: block;
}

.step-content {
  padding: 20px 32px 24px;
}

.back-btn {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  background    : none;
  border        : none;
  color         : #2E7D32;
  font-size     : 12px;
  font-weight   : 500;
  letter-spacing: 0.04em;
  cursor        : pointer;
  padding       : 0;
  margin-bottom : 16px;
  transition    : opacity 0.2s;
}

.back-btn:hover {
  opacity: 0.7;
}

.step-label {
  display       : block;
  font-size     : 11px;
  font-weight   : 600;
  color         : #01ac46;
  letter-spacing: 0.08em;
  margin-bottom : 6px;
}

.step-title {
  font-size  : 28px;
  font-weight: 700;
  color      : #252525;
  margin     : 0 0 8px;
  line-height: 1.2;
}

.step-description {
  font-size    : 14px;
  color        : #666;
  line-height  : 1.5;
  margin-bottom: 20px;
}

/* Features Grid - 2x2 */
/* Features Grid in Consultant Modal */
.consultant-modal .features-grid,
.step-content .features-grid {
  display              : grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap                  : 16px 24px !important;
  margin-bottom        : 24px;
}

@media (max-width: 600px) {

  .consultant-modal .features-grid,
  .step-content .features-grid {
    grid-template-columns: 1fr !important;
    gap                  : 16px !important;
  }
}

.consultant-modal .feature-item,
.step-content .feature-item {
  display       : flex !important;
  flex-direction: column !important;
  gap           : 0 !important;
}

.consultant-modal .feature-icon,
.step-content .feature-icon {
  width          : 44px;
  height         : 44px;
  background     : rgba(1, 172, 70, 0.1);
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  margin-bottom  : 4px;
  color          : #01ac46;
}

.consultant-modal .feature-icon svg,
.step-content .feature-icon svg {
  width : 22px;
  height: 22px;
  stroke: #01ac46;
}

.consultant-modal .feature-title,
.step-content .feature-title {
  display      : block;
  font-size    : 14px;
  font-weight  : 600;
  color        : #252525;
  margin-bottom: 0;
}

.consultant-modal .feature-desc,
.step-content .feature-desc {
  display    : block;
  font-size  : 13px;
  color      : #666;
  line-height: 1.45;
}

/* Consultant Card */
.consultant-card {
  display      : flex;
  align-items  : center;
  gap          : 14px;
  background   : #f8f8f8;
  border-radius: 12px;
  padding      : 16px;
  margin-bottom: 20px;
}

.consultant-avatar {
  width          : 48px;
  height         : 48px;
  border-radius  : 50%;
  background     : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  font-size      : 16px;
  font-weight    : 600;
  flex-shrink    : 0;
  overflow       : hidden;
}

.consultant-avatar img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.consultant-info {
  flex: 1;
}

.consultant-info p {
  font-size  : 14px;
  color      : #252525;
  line-height: 1.5;
  margin     : 0;
}

.consultant-info strong {
  font-weight: 600;
}

/* Zip Code Section */
.zip-section-divider {
  height    : 1px;
  background: #e5e5e5;
  margin    : 20px 0;
}

.zip-section {
  margin-top: 0;
}

.zip-label {
  display       : block;
  font-size     : 11px;
  font-weight   : 600;
  color         : #01ac46;
  letter-spacing: 0.08em;
  margin-bottom : 12px;
}

.zip-input-wrapper {
  display: flex;
  gap    : 12px;
}

@media (max-width: 500px) {
  .zip-input-wrapper {
    flex-direction: column;
  }
}

.zip-input-container {
  flex         : 1;
  display      : flex;
  align-items  : center;
  gap          : 12px;
  border       : 1px solid #e0e0e0;
  border-radius: 8px;
  padding      : 12px 16px;
  background   : #fafafa;
}

.zip-input {
  flex      : 1;
  border    : none;
  background: transparent;
  font-size : 15px;
  outline   : none;
}

.zip-input::placeholder {
  color: #999;
}

.btn-check-area {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  background    : #00ac46;
  color         : #fff;
  border        : none;
  border-radius : 8px;
  padding       : 14px 24px;
  font-size     : 13px;
  font-weight   : 600;
  letter-spacing: 0.02em;
  cursor        : pointer;
  transition    : background 0.2s;
  white-space   : nowrap;
}

.btn-check-area:hover {
  background: #009a3e;
}

/* Calendar - Compact */
.calendar-container {
  background   : #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.calendar-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : 12px;
}

.calendar-month {
  font-size  : 15px;
  font-weight: 600;
  color      : #252525;
}

.calendar-nav {
  display: flex;
  gap    : 6px;
}

.calendar-nav-btn {
  width          : 28px;
  height         : 28px;
  border         : 1px solid #e0e0e0;
  border-radius  : 4px;
  background     : #fff;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : all 0.2s;
}

.calendar-nav-btn:hover {
  background: #f5f5f5;
}

.calendar-days-header {
  display              : grid;
  grid-template-columns: repeat(7, 1fr);
  text-align           : center;
  margin-bottom        : 4px;
}

.calendar-days-header span {
  font-size  : 11px;
  font-weight: 500;
  color      : #999;
  padding    : 6px 4px;
}

.calendar-days {
  display              : grid;
  grid-template-columns: repeat(7, 1fr);
  gap                  : 2px;
}

.calendar-day {
  height         : 36px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 13px;
  border-radius  : 6px;
  cursor         : pointer;
  transition     : all 0.2s;
  border         : none;
  background     : transparent;
  color          : #252525;
}

.calendar-day:hover:not(.disabled):not(.empty) {
  background: #e8f5e9;
}

.calendar-day.selected {
  background : #c8e6c9;
  font-weight: 600;
}

.calendar-day.disabled {
  color : #ccc;
  cursor: not-allowed;
}

.calendar-day.empty {
  cursor: default;
}

/* Continue Button */
.btn-continue {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  width          : 100%;
  background     : #00ac46;
  color          : #fff;
  border         : none;
  border-radius  : 8px;
  padding        : 16px 24px;
  font-size      : 14px;
  font-weight    : 600;
  letter-spacing : 0.02em;
  cursor         : pointer;
  transition     : background 0.2s;
}

.btn-continue:not(:disabled):hover {
  background: #009a3e;
}

.btn-continue:disabled {
  opacity: 0.6;
  cursor : not-allowed;
}

/* Booking Form */
.booking-form {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.form-group {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

.form-row {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 16px;
}

@media (max-width: 500px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-label {
  font-size     : 11px;
  font-weight   : 500;
  color         : #252525;
  letter-spacing: 0.04em;
}

.form-input {
  border       : 1px solid #e0e0e0;
  border-radius: 8px;
  padding      : 14px 16px;
  font-size    : 15px;
  background   : #fafafa;
  outline      : none;
  transition   : border-color 0.2s;
}

.form-input:focus {
  border-color: #2E7D32;
  background  : #fff;
}

.form-textarea {
  min-height: 100px;
  resize    : vertical;
}

.btn-confirm {
  width         : 100%;
  background    : #00ac46;
  color         : #fff;
  border        : none;
  border-radius : 8px;
  padding       : 16px 24px;
  font-size     : 14px;
  font-weight   : 600;
  letter-spacing: 0.02em;
  cursor        : pointer;
  transition    : background 0.2s;
  margin-top    : 8px;
}

.btn-confirm:hover {
  background: #009a3e;
}

.terms-text {
  font-size : 12px;
  color     : #999;
  text-align: center;
  margin    : 12px 0 0;
}

.terms-text a {
  color: #2E7D32;
}

/* Success State */
.step-success {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  min-height     : 400px;
}

.success-icon {
  margin-bottom: 24px;
}

.step-success .step-title {
  margin-bottom: 16px;
}

.step-success .step-description {
  max-width: 320px;
}

.step-success .btn-confirm {
  max-width : 200px;
  margin-top: 24px;
}

/* Virtual Demo Modal */
.virtual-modal {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  z-index        : 10000;
  display        : none;
  align-items    : center;
  justify-content: center;
  padding        : 20px;
}

.virtual-modal.active {
  display: flex;
}

.virtual-modal-overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(0, 0, 0, 0.6);
}

.virtual-modal-container {
  position     : relative;
  display      : flex;
  width        : 100%;
  max-width    : 1000px;
  max-height   : 90vh;
  background   : #fff;
  border-radius: 16px;
  overflow     : hidden;
  box-shadow   : 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
  .virtual-modal-container {
    flex-direction: column;
    max-height    : 95vh;
    overflow-y    : auto;
  }
}

/* Virtual Modal Left Side */
.virtual-modal-left {
  position      : relative;
  width         : 42%;
  min-height    : 600px;
  background    : #1a1a1a;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .virtual-modal-left {
    width     : 100%;
    min-height: 300px;
  }
}

.virtual-modal-bg-image {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  opacity   : 0.85;
}

.virtual-modal-bg-placeholder {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
}

.virtual-studio-header {
  position: relative;
  padding : 32px;
  z-index : 1;
}

.virtual-studio-icon {
  width          : 56px;
  height         : 56px;
  background     : rgba(255, 255, 255, 0.1);
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  margin-bottom  : 24px;
}

.virtual-studio-title {
  font-size  : 28px;
  font-weight: 600;
  color      : #fff;
  margin     : 0 0 8px;
}

.virtual-studio-subtitle {
  font-size: 15px;
  color    : rgba(255, 255, 255, 0.7);
  margin   : 0;
}

.virtual-testimonial-card {
  position     : absolute;
  bottom       : 24px;
  left         : 24px;
  right        : 24px;
  background   : rgba(30, 30, 30, 0.95);
  border-radius: 12px;
  padding      : 20px;
  z-index      : 1;
}

.virtual-testimonial-badge {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  font-size     : 11px;
  font-weight   : 600;
  color         : #fff;
  letter-spacing: 0.04em;
  margin-bottom : 12px;
}

.badge-dot {
  width        : 8px;
  height       : 8px;
  background   : #2E7D32;
  border-radius: 50%;
}

.virtual-testimonial-quote {
  font-size  : 14px;
  color      : rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin     : 0;
}

/* Virtual Modal Right Side */
.virtual-modal-right {
  flex          : 1;
  position      : relative;
  display       : flex;
  flex-direction: column;
  background    : #fff;
  overflow-y    : auto;
}

/* Virtual Modal Theme Variants (Green) */
.progress-bar--blue {
  background: #e5e5e5;
}

.progress-fill--blue {
  background: #00ac46;
}

.step-label--blue {
  color: #00ac46;
}

.back-btn--blue {
  color: #00ac46;
}

.feature-icon--blue {
  background: rgba(0, 172, 70, 0.1);
}

.btn-find-time {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  width          : 100%;
  background     : #00ac46;
  color          : #fff;
  border         : none;
  border-radius  : 8px;
  padding        : 16px 24px;
  font-size      : 14px;
  font-weight    : 600;
  letter-spacing : 0.02em;
  cursor         : pointer;
  transition     : background 0.2s;
}

.btn-find-time:hover {
  background: #3651de;
}

.timezone-note {
  font-size : 12px;
  color     : #999;
  text-align: center;
  margin    : 16px 0 0;
}

.calendar-container--bordered {
  border       : 1px solid #e5e5e5;
  border-radius: 12px;
  padding      : 20px;
}

.calendar-day.selected-blue {
  background: #c7d2fe;
}

.btn-continue--blue {
  background: #00ac46;
}

.btn-continue--blue:not(:disabled):hover {
  background: #009a3e;
}

.btn-confirm--blue {
  background: #00ac46;
}

.btn-confirm--blue:hover {
  background: #009a3e;
}

.success-icon--blue svg {
  stroke: #00ac46;
}

/* Form Select */
.form-select {
  appearance         : none;
  background-image   : url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: right 16px center;
  padding-right      : 44px;
  cursor             : pointer;
}

/* Features Grid Virtual Variant */
.virtual-modal .features-grid--virtual,
.features-grid--virtual {
  display              : grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap                  : 20px !important;
  margin-bottom        : 32px;
}

.features-grid--virtual .feature-item--virtual {
  display       : flex;
  flex-direction: row;
  align-items   : flex-start;
  gap           : 12px;
}

.features-grid--virtual .feature-icon {
  margin-bottom: 0;
  flex-shrink  : 0;
  width        : 44px;
  height       : 44px;
}

.features-grid--virtual .feature-text {
  display       : flex;
  flex-direction: column;
  gap           : 2px;
  flex          : 1;
  min-width     : 0;
}

.features-grid--virtual .feature-title {
  display      : block;
  margin-bottom: 0;
  font-size    : 14px;
  font-weight  : 600;
  color        : #252525;
}

.features-grid--virtual .feature-desc {
  display    : block;
  font-size  : 13px;
  color      : #666;
  line-height: 1.4;
}

@media (max-width: 600px) {

  .virtual-modal .features-grid--virtual,
  .features-grid--virtual {
    grid-template-columns: 1fr !important;
    gap                  : 16px !important;
  }
}

/* 4 Column Action Cards Grid */
.product-action-cards--4col {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .product-action-cards--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Call Modal - Premium */
.call-modal {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  z-index        : 10000;
  display        : none;
  align-items    : center;
  justify-content: center;
  padding        : 20px;
}

.call-modal.active {
  display: flex;
}

.call-modal-overlay {
  position       : absolute;
  inset          : 0;
  background     : rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.call-modal-container--premium {
  position     : relative;
  display      : flex;
  width        : 100%;
  max-width    : 900px;
  max-height   : 90vh;
  background   : #fff;
  border-radius: 20px;
  overflow     : hidden;
  box-shadow   : 0 25px 80px -12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 800px) {
  .call-modal-container--premium {
    flex-direction: column;
    max-height    : 95vh;
    overflow-y    : auto;
  }
}

/* Call Modal Left */
.call-modal-left {
  position  : relative;
  width     : 42%;
  min-height: 500px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  overflow  : hidden;
}

@media (max-width: 800px) {
  .call-modal-left {
    width     : 100%;
    min-height: 220px;
  }
}

.call-modal-bg-image {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  opacity   : 0.4;
}

.call-modal-bg-gradient {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #3d3d3d 100%);
}

.call-modal-left-content {
  position      : relative;
  z-index       : 1;
  padding       : 40px;
  height        : 100%;
  display       : flex;
  flex-direction: column;
  color         : #fff;
}

.call-modal-brand {
  width          : 64px;
  height         : 64px;
  background     : rgba(255, 255, 255, 0.1);
  border         : 1px solid rgba(255, 255, 255, 0.2);
  border-radius  : 16px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 32px;
}

.call-modal-brand svg {
  color: #fff;
}

.call-modal-left-title {
  font-size     : 28px;
  font-weight   : 600;
  margin        : 0 0 12px;
  letter-spacing: -0.02em;
}

.call-modal-left-subtitle {
  font-size  : 15px;
  color      : rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin     : 0 0 auto;
}

.call-modal-features {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
  margin-top    : 40px;
}

.call-feature {
  display    : flex;
  align-items: center;
  gap        : 12px;
  font-size  : 14px;
  color      : rgba(255, 255, 255, 0.9);
}

.call-feature svg {
  color      : #4ade80;
  flex-shrink: 0;
}

/* Call Modal Right */
.call-modal-right {
  flex      : 1;
  position  : relative;
  background: #fff;
  overflow-y: auto;
}

.call-modal-right .modal-close-btn {
  position: absolute;
  top     : 20px;
  right   : 20px;
  z-index : 10;
}

.call-modal-container--premium .call-modal-content {
  padding       : 48px 40px;
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
  text-align    : left;
}

.call-modal-container--premium .call-modal-label {
  font-size     : 11px;
  font-weight   : 600;
  color         : #2E7D32;
  letter-spacing: 0.1em;
  margin-bottom : 12px;
}

.call-modal-container--premium .call-modal-title {
  font-size     : 32px;
  font-weight   : 600;
  color         : #1a1a1a;
  margin        : 0 0 16px;
  letter-spacing: -0.02em;
}

.call-modal-container--premium .call-modal-description {
  font-size    : 15px;
  color        : #666;
  line-height  : 1.6;
  margin-bottom: 32px;
  max-width    : 400px;
}

.call-phone-display {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  margin-bottom : 24px;
}

.call-phone-number {
  font-size     : 36px;
  font-weight   : 700;
  color         : #1a1a1a;
  letter-spacing: -0.02em;
}

.call-phone-label {
  font-size     : 12px;
  color         : #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-call-now--premium {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  background     : #00ac46;
  color          : #fff;
  border         : none;
  border-radius  : 12px;
  padding        : 18px 40px;
  font-size      : 15px;
  font-weight    : 600;
  letter-spacing : 0.02em;
  text-decoration: none;
  cursor         : pointer;
  transition     : all 0.2s;
}

.btn-call-now--premium:hover {
  background: #009a3e;
  transform : translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 172, 70, 0.3);
}

.call-hours--premium {
  margin-top    : 32px;
  padding       : 0;
  background    : none;
  width         : 100%;
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

.call-hours-row {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 12px 0;
  border-bottom  : 1px solid #f0f0f0;
}

.call-hours-row:last-child {
  border-bottom: none;
}

.call-hours-day {
  font-size  : 14px;
  font-weight: 500;
  color      : #1a1a1a;
}

.call-hours-time {
  font-size: 14px;
  color    : #666;
}

.call-divider {
  width     : 100%;
  height    : 1px;
  background: #eee;
  margin    : 24px 0;
}

.call-alternatives--premium {
  width     : 100%;
  margin-top: 0;
}

.call-alternatives--premium .call-alternatives-text {
  font-size     : 12px;
  font-weight   : 500;
  color         : #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom : 16px;
}

.btn-alternative--premium {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  background     : #fafafa;
  border         : 1px solid #eee;
  border-radius  : 12px;
  padding        : 20px 16px;
  font-size      : 13px;
  font-weight    : 500;
  color          : #1a1a1a;
  cursor         : pointer;
  transition     : all 0.2s;
}

.btn-alternative--premium svg {
  color: #666;
}

.btn-alternative--premium:hover {
  background  : #f5f5f5;
  border-color: #ddd;
  transform   : translateY(-1px);
}

/* Legacy btn-alternative for other modals */
.btn-alternative {
  flex           : 1;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  background     : none;
  border         : 1px solid #e5e5e5;
  border-radius  : 8px;
  padding        : 12px 16px;
  font-size      : 13px;
  font-weight    : 500;
  color          : #252525;
  cursor         : pointer;
  transition     : all 0.2s;
}

.btn-alternative:hover {
  background  : #f5f5f5;
  border-color: #d5d5d5;
}

/* Contact Modal - Premium */
.contact-modal {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  z-index        : 10000;
  display        : none;
  align-items    : center;
  justify-content: center;
  padding        : 20px;
}

.contact-modal.active {
  display: flex;
}

.contact-modal-overlay {
  position       : absolute;
  inset          : 0;
  background     : rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.contact-modal-container--premium {
  position     : relative;
  display      : flex;
  width        : 100%;
  max-width    : 960px;
  max-height   : 90vh;
  background   : #fff;
  border-radius: 20px;
  overflow     : hidden;
  box-shadow   : 0 25px 80px -12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 800px) {
  .contact-modal-container--premium {
    flex-direction: column;
    max-height    : 95vh;
    overflow-y    : auto;
  }
}

/* Contact Modal Left - Premium */
.contact-modal-left--premium {
  position  : relative;
  width     : 42%;
  min-height: 580px;
  background: #1a1a1a;
  overflow  : hidden;
}

@media (max-width: 800px) {
  .contact-modal-left--premium {
    width     : 100%;
    min-height: 240px;
  }
}

.contact-modal-bg-image {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  opacity   : 0.3;
}

.contact-modal-bg-gradient {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.contact-left-content {
  position      : relative;
  z-index       : 1;
  padding       : 48px 40px;
  height        : 100%;
  display       : flex;
  flex-direction: column;
  color         : #fff;
}

.contact-brand-icon {
  width          : 56px;
  height         : 56px;
  background     : rgba(255, 255, 255, 0.08);
  border         : 1px solid rgba(255, 255, 255, 0.15);
  border-radius  : 14px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 32px;
}

.contact-brand-icon svg {
  color: #fff;
}

.contact-left-title {
  font-size     : 28px;
  font-weight   : 600;
  margin        : 0 0 16px;
  letter-spacing: -0.02em;
  line-height   : 1.2;
}

.contact-left-subtitle {
  font-size  : 15px;
  color      : rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin     : 0;
  max-width  : 280px;
}

.contact-left-features {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
  margin-top    : 40px;
}

.contact-left-feature {
  display    : flex;
  align-items: center;
  gap        : 12px;
  font-size  : 14px;
  color      : rgba(255, 255, 255, 0.85);
}

.contact-left-feature svg {
  color      : #4ade80;
  flex-shrink: 0;
}

.contact-left-divider {
  width     : 100%;
  height    : 1px;
  background: rgba(255, 255, 255, 0.1);
  margin    : 40px 0 24px;
}

.contact-left-info {
  margin-top: auto;
}

.contact-left-info-label {
  font-size     : 12px;
  color         : rgba(255, 255, 255, 0.5);
  margin        : 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-left-phone {
  font-size      : 18px;
  font-weight    : 600;
  color          : #fff;
  text-decoration: none;
  transition     : color 0.2s;
}

.contact-left-phone:hover {
  color: #4ade80;
}

/* Contact Modal Right - Premium */
.contact-modal-right--premium {
  flex      : 1;
  position  : relative;
  background: #fff;
  overflow-y: auto;
}

.contact-modal-right--premium .modal-close-btn {
  position: absolute;
  top     : 24px;
  right   : 24px;
  z-index : 10;
}

.contact-form-content--premium {
  padding: 48px 40px;
}

.contact-form-label {
  font-size     : 11px;
  font-weight   : 600;
  color         : #2E7D32;
  letter-spacing: 0.1em;
  margin-bottom : 12px;
  display       : block;
}

.contact-form-title {
  font-size     : 28px;
  font-weight   : 600;
  color         : #1a1a1a;
  margin        : 0 0 12px;
  letter-spacing: -0.02em;
}

.contact-form-description {
  font-size  : 15px;
  color      : #666;
  line-height: 1.5;
  margin     : 0 0 32px;
}

.contact-form--premium {
  display       : flex;
  flex-direction: column;
  gap           : 20px;
}

.contact-form--premium .form-row {
  display: flex;
  gap    : 16px;
}

@media (max-width: 500px) {
  .contact-form--premium .form-row {
    flex-direction: column;
    gap           : 20px;
  }
}

.form-group--premium {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : 6px;
}

.form-label--premium {
  font-size     : 13px;
  font-weight   : 500;
  color         : #1a1a1a;
  letter-spacing: 0;
  text-transform: none;
}

.form-optional {
  font-weight: 400;
  color      : #999;
}

.form-input--premium {
  padding      : 14px 16px;
  border       : 1px solid #e5e5e5;
  border-radius: 10px;
  font-size    : 15px;
  color        : #1a1a1a;
  background   : #fafafa;
  transition   : all 0.2s;
}

.form-input--premium:focus {
  outline     : none;
  border-color: #2E7D32;
  background  : #fff;
  box-shadow  : 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.form-input--premium::placeholder {
  color: #999;
}

.form-textarea--premium {
  resize    : none;
  min-height: 100px;
}

.btn-submit-premium {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  background     : #2E7D32;
  color          : #fff;
  border         : none;
  border-radius  : 12px;
  padding        : 16px 32px;
  font-size      : 15px;
  font-weight    : 600;
  cursor         : pointer;
  transition     : all 0.2s;
  margin-top     : 8px;
}

.btn-submit-premium:hover {
  background: #256829;
  transform : translateY(-1px);
  box-shadow: 0 8px 24px rgba(46, 125, 50, 0.35);
}

.btn-submit-premium svg {
  transition: transform 0.2s;
}

.btn-submit-premium:hover svg {
  transform: translateX(2px);
}

.form-privacy-note {
  font-size : 12px;
  color     : #999;
  text-align: center;
  margin    : 8px 0 0;
}

.form-privacy-note a {
  color          : #2E7D32;
  text-decoration: none;
}

.form-privacy-note a:hover {
  text-decoration: underline;
}

/* Contact Success - Premium */
.contact-success--premium {
  padding       : 80px 40px;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  text-align    : center;
}

.contact-success--premium.hidden {
  display: none;
}

.success-checkmark {
  margin-bottom: 24px;
  animation    : scaleIn 0.4s ease-out;
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity  : 0;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity  : 1;
  }
}

.success-title {
  font-size     : 28px;
  font-weight   : 600;
  color         : #1a1a1a;
  margin        : 0 0 12px;
  letter-spacing: -0.02em;
}

.success-description {
  font-size  : 15px;
  color      : #666;
  line-height: 1.6;
  margin     : 0 0 32px;
  max-width  : 340px;
}

/* Legacy contact modal styles */
.contact-modal-container {
  position     : relative;
  display      : flex;
  width        : 100%;
  max-width    : 900px;
  max-height   : 90vh;
  background   : #fff;
  border-radius: 16px;
  overflow     : hidden;
  box-shadow   : 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.contact-modal-left {
  position  : relative;
  width     : 38%;
  min-height: 500px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow  : hidden;
}

.contact-modal-right {
  flex          : 1;
  position      : relative;
  display       : flex;
  flex-direction: column;
  background    : #fff;
  overflow-y    : auto;
}

.contact-form-content {
  padding: 32px;
}

.contact-form {
  display       : flex;
  flex-direction: column;
  gap           : 16px;
}

.contact-success {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  padding        : 60px 32px;
  min-height     : 400px;
}

.contact-success.hidden {
  display: none;
}

/* Share & Reference Row */
.share-reference-row {
  display      : flex;
  align-items  : center;
  gap          : 16px;
  padding      : 8px 0;
  border-top   : 1px solid #eee;
  margin-top   : 4px;
  margin-bottom: 0;
}

.share-btn {
  display    : flex;
  align-items: center;
  gap        : 10px;
  background : none;
  border     : none;
  padding    : 8px 12px 8px 0;
  cursor     : pointer;
  color      : #252525;
  transition : opacity 0.2s;
}

.share-btn:hover {
  opacity: 0.7;
}

.share-btn svg {
  width : 20px;
  height: 20px;
}

.share-btn span {
  font-size     : 13px;
  font-weight   : 500;
  letter-spacing: 0.04em;
}

.share-divider {
  width     : 1px;
  height    : 20px;
  background: #d5d5d5;
}

.product-ref {
  font-size     : 14px;
  color         : #666;
  letter-spacing: 0.01em;
}

.rep-code {
  font-size     : 13px;
  font-weight   : 500;
  color         : #666;
  letter-spacing: 0.02em;
}

/* Product Features/Accessories Text */
.product-features {
  margin-top : 0;
  padding-top: 0;
  border-top : none;
}

.product-features .features-list {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
}

.product-features .feature-item {
  display       : flex;
  flex-direction: row;
  gap           : 0;
  font-size     : 13px;
  line-height   : 1.5;
}

.product-features .feature-item strong {
  color      : #2E7D32;
  font-weight: 600;
}

/* Accessories Highlight */
.accessories-highlight {
  background   : #fafafa;
  border-radius: 8px;
  padding      : 12px 16px;
  margin-top   : 12px;
}

.accessories-highlight strong {
  color: #2E7D32;
}

/* Price Section */
.price-section {
  display    : flex;
  align-items: center;
  gap        : var(--space-sm);
}

.price {
  line-height: 1.4;
}

.new-badge {
  padding      : 2px 8px;
  border-radius: 16px;
  display      : inline-flex;
  align-items  : center;
  height       : 20px;
}

/* Subscription Info */
.subscription-info p {
  line-height: 1.47;
}

/* Product Features */
.product-features {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-xs);
}

.features-list {
  list-style    : none;
  padding       : 0;
  margin        : 0;
  display       : flex;
  flex-direction: column;
  gap           : var(--space-xs);
}

.feature-item {
  display    : block;
  line-height: 1.6;
  font-size  : 11px;
}

.feature-item strong {
  font-weight: 600;
  color      : var(--clr-primary);
}

/* Long description / features text */
.long-description,
.features-text,
.key-features {
  line-height: 1.6;
  white-space: pre-line;
}

/* CTA Wrapper */
.cta-wrapper {
  display: flex;
}

/* Guarantee Text */
.guarantee-text {
  text-align: center;
}

.guarantee-text p {
  line-height: 1.47;
  opacity    : 0.5;
}

/* Accordions */
.accordions-wrapper {
  display       : flex;
  flex-direction: column;
  border-top    : 1px solid var(--color-neutral);
}

.accordion-item {
  border-bottom: 1px solid var(--color-neutral);
}

.accordion-header {
  width          : 100%;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : var(--space-md) 0;
  background     : none;
  border         : none;
  cursor         : pointer;
  text-align     : left;
  transition     : all 0.3s ease;
}

.accordion-header:hover {
  opacity: 0.7;
}

.accordion-icon {
  flex-shrink: 0;
  transition : transform 0.3s ease;
  width      : 24px;
  height     : 24px;
}

.accordion-header.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  padding-bottom: var(--space-md);
}


/* Benefits List */
.benefits-list {
  list-style-type: disc;
  padding-left   : var(--space-lg);
  margin         : 0;
  display        : flex;
  flex-direction : column;
  gap            : var(--space-xs);
}

.benefits-list li {
  line-height : 1.3;
  padding-left: var(--space-xs);
}

/* Ingredients Content */
.ingredients-content {
  line-height: 1.5;
}

/* Bundle Card */
.bundle-card {
  display      : flex;
  gap          : var(--space-sm);
  padding      : var(--space-sm);
  border-radius: 16px;
  align-items  : center;
}

.bundle-image {
  flex-shrink  : 0;
  width        : 112px;
  height       : 112px;
  border-radius: 8px;
  overflow     : hidden;
  background   : var(--color-neutral-light);
}

.bundle-image img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.bundle-content {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : var(--space-xs);
  min-width     : 0;
}

.bundle-content h3 {
  line-height: 1.4;
  margin     : 0;
}

.bundle-content p {
  line-height: 1.47;
  margin     : 0;
}

.bundle-footer {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : var(--space-sm);
}

.bundle-pricing {
  display    : flex;
  align-items: center;
  gap        : var(--space-xs);
}

.bundle-original-price {
  text-decoration: line-through;
  opacity        : 0.5;
}

/* Clickable Images */
.clickable-image {
  cursor    : pointer;
  transition: opacity 0.2s ease;
}

.clickable-image:hover {
  opacity: 0.9;
}

/* Image Modal/Lightbox */
.image-modal {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  background     : rgba(0, 0, 0, 0.9);
  z-index        : 9999;
  display        : none;
  align-items    : center;
  justify-content: center;
  padding        : var(--space-xl);
}

.image-modal.active {
  display: flex;
}

.modal-close {
  position       : absolute;
  top            : var(--space-lg);
  right          : var(--space-lg);
  background     : none;
  border         : none;
  color          : white;
  font-size      : 48px;
  line-height    : 1;
  cursor         : pointer;
  z-index        : 10001;
  width          : 48px;
  height         : 48px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : opacity 0.2s ease;
}

.modal-close:hover {
  opacity: 0.7;
}

.modal-content {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : var(--space-lg);
  max-width     : 100%;
  max-height    : 100%;
  width         : 100%;
}

.modal-main-image {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 100%;
  max-height     : calc(100vh - 180px);
  position       : relative;
}

.modal-main-image img {
  max-width    : 100%;
  max-height   : calc(100vh - 180px);
  width        : auto;
  height       : auto;
  object-fit   : contain;
  border-radius: 24px;
}

.modal-thumb {
  width        : 80px;
  height       : 80px;
  border-radius: 12px;
  overflow     : hidden;
  cursor       : pointer;
  opacity      : 0.6;
  transition   : opacity 0.2s ease, transform 0.2s ease;
  border       : 2px solid transparent;
}

.modal-thumb:hover {
  opacity  : 0.9;
  transform: scale(1.05);
}

.modal-thumb.active {
  opacity     : 1;
  border-color: white;
}

.modal-thumb img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

/* Thumbnail slider arrows */
.modal-thumbnails .splide__arrow {
  background     : rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  width          : 36px;
  height         : 36px;
  border-radius  : 50%;
  opacity        : 1 !important;
  display        : flex !important;
  transition     : all 0.2s ease;
}

.modal-thumbnails .splide__arrow:hover {
  background: rgba(255, 255, 255, 0.3);
  transform : scale(1.1);
}

.modal-thumbnails .splide__arrow:disabled {
  opacity: 0.3 !important;
  cursor : not-allowed;
}

.modal-thumbnails .splide__arrow svg {
  fill  : white;
  width : 16px;
  height: 16px;
}

.modal-thumbnails .splide__arrow--prev {
  left: -18px;
}

.modal-thumbnails .splide__arrow--next {
  right: -18px;
}

@media (max-width: 767px) {
  .modal-close {
    top      : var(--space-md);
    right    : var(--space-md);
    font-size: 36px;
    width    : 36px;
    height   : 36px;
  }

  .image-modal {
    padding: var(--space-md);
  }

  .modal-main-image {
    max-height: calc(100vh - 140px);
  }

  .modal-main-image img {
    max-height: calc(100vh - 140px);
  }

  .modal-thumbnails {
    gap: var(--space-xs);
  }

  .modal-thumb {
    width : 60px;
    height: 60px;
  }

  .modal-thumbnails .splide__arrow {
    width  : 32px;
    height : 32px;
    display: flex !important;
    opacity: 1 !important;
  }

  .modal-thumbnails .splide__arrow svg {
    width : 14px;
    height: 14px;
  }

  .modal-thumbnails .splide__arrow--prev {
    left: 0;
  }

  .modal-thumbnails .splide__arrow--next {
    right: 0;
  }
}

/* Sticky Footer */
.sticky-footer {
  position  : fixed;
  bottom    : 0;
  left      : 0;
  right     : 0;
  background: white;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index   : 1000;
  transform : translateY(100%);
  transition: transform 0.3s ease;
  padding   : var(--space-md) var(--space-lg);
}

.sticky-footer.visible {
  transform: translateY(0);
}

.sticky-footer-content {
  max-width      : 1440px;
  margin         : 0 auto;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : var(--space-lg);
}

@media (max-width: 767px) {
  .sticky-footer {
    padding: var(--space-sm) var(--space-md);
  }

  .sticky-footer-content {
    gap: var(--space-sm);
  }
}

.sticky-product-info {
  display    : flex;
  align-items: center;
  gap        : var(--space-md);
  flex       : 1;
  min-width  : 0;
}

@media (max-width: 767px) {
  .sticky-product-info {
    gap: var(--space-sm);
  }
}

.sticky-thumb {
  flex-shrink  : 0;
  width        : 60px;
  height       : 60px;
  border-radius: 8px;
  overflow     : hidden;
  background   : var(--color-neutral-light);
}

@media (max-width: 767px) {
  .sticky-thumb {
    width : 48px;
    height: 48px;
  }
}

.sticky-thumb img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.sticky-text {
  display       : flex;
  flex-direction: column;
  gap           : 2px;
  min-width     : 0;
}

.sticky-code {
  line-height: 1.2;
}

.sticky-code sup {
  font-size     : 0.7em;
  vertical-align: super;
  line-height   : 0;
}

.sticky-text h3 {
  margin       : 0;
  line-height  : 1.2;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.sticky-cta {
  flex-shrink: 0;
  display    : flex;
  gap        : var(--space-sm);
  align-items: center;
  width      : 25rem;
}

.sticky-cta .btn {
  display         : flex;
  min-height      : 52px;
  width           : 100%;
  border-radius   : 10px;
  background-color: var(--clr-primary);
  color           : var(--clr-accent-2);
  font-size       : var(--font-size-lg);
  justify-content : center;
  align-items     : center;
}

.comparison-table__button-wrapper .btn {
  background-color: var(--clr-accent-2);
  width           : 12rem;
  height          : 3rem;
  display         : flex;
  justify-content : center;
  align-items     : center;
  font-weight     : 500;
  border-radius   : 10px;
}

.btn-filled-primary {
  width           : 12rem;
  height          : 3rem;
  display         : flex;
  justify-content : center;
  align-items     : center;
  font-weight     : 500;
  border-radius   : 10px;
}

@media (max-width: 767px) {
  .sticky-cta {
    gap: var(--space-xs);
  }

  .sticky-cta .btn {
    white-space  : nowrap;
    padding-left : var(--space-sm);
    padding-right: var(--space-sm);
    font-size    : 0.875rem;
  }
}

/* SUBSCRIPTION */

/* QUANTITY */

.qty-buttons label {
  margin-bottom: 0.25rem;
  display      : block;
}

.qty-wrap {
  display         : inline-flex;
  border          : 1px solid var(--clr-border-light);
  border-radius   : 4px;
  background-color: var(--clr-white);
}

.qty-wrap span {
  display        : flex;
  justify-content: center;
  align-items    : center;
  flex-direction : column;
  line-height    : 1;
}

.qty-wrap span.qty-action-btn {
  width : 44px;
  height: 44px;
  cursor: default;
}

.qty-wrap span.qty-action-btn.pointer {
  cursor: pointer;
}

.qty-wrap span.qty-val {
  border-right: 1px solid var(--clr-border-light);
  border-left : 1px solid var(--clr-border-light);
  padding     : 0 10px;
  min-width   : 44px;
}

/* SUBSCRIPTION */
.flex-1 {
  flex: 1;
}

.subscribe {
  border          : 1px solid var(--clr-border-light);
  border-radius   : 8px;
  background-color: var(--clr-white);
}

.subscribe .subscribe-item {
  padding   : 16px;
  transition: background-color 0.3s ease;
  position  : relative;
  cursor    : pointer;
}

.subscribe .subscribe-option {
  position: static;
}

/* Make entire subscribe-item clickable - position input relative to subscribe-item */
.subscribe .subscribe-option input {
  position: absolute;
  inset   : 0;
  width   : 100%;
  height  : 100%;
  margin  : 0;
  opacity : 0;
  outline : none;
  z-index : 3;
  cursor  : pointer;
}

.subscribe .subscribe-option input:checked~label:before {
  background-color: var(--clr-white);
  border          : 5px solid var(--clr-primary);
}

.subscribe .subscribe-option input:checked~label p {
  color: var(--clr-primary);
}

/* Selected subscription item background */
.subscribe .subscribe-item.selected {
  background-color: var(--clr-neutral-light);
  border-radius   : 8px;
}


.subscribe .subscribe-option label {
  position       : relative;
  padding-left   : 2rem;
  display        : flex;
  justify-content: start;
  align-items    : center;
  pointer-events : none;
}

.subscribe .subscribe-features {
  pointer-events: none;
}

/* Allow interactive elements to be clickable */
.subscribe .subscription-plans,
.subscribe .subscription-plans-dropdown {
  pointer-events: auto;
}

.subscribe .subscribe-option label:before {
  top          : 50%;
  position     : absolute;
  height       : 20px;
  width        : 20px;
  transform    : translateY(-50%);
  content      : '';
  left         : 0;
  border-radius: 9999rem;
}

.subscribe .subscribe-option label:before {
  border: 1px solid var(--clr-border-light);
}

.subscribe .one-time-purchase-section {
  border-top: 1px solid var(--clr-border-light);
}

.subscribe-features svg {
  width: 20px;
}

/* Step Indicators */
.purchase-step {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  margin-bottom: 8px;
}

.step-number {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 22px;
  height         : 22px;
  background     : #1a1a1a;
  color          : #fff;
  font-size      : 12px;
  font-weight    : 600;
  border-radius  : 50%;
  flex-shrink    : 0;
}

.purchase-step .step-label {
  font-size     : 13px;
  font-weight   : 600;
  color         : #1a1a1a;
  letter-spacing: -0.01em;
  display       : inline;
  margin-bottom : 0;
}

.purchase-step .demo-badge {
  margin-left  : auto;
  margin-bottom: 0;
  flex-shrink  : 0;
}

/* Flow Control - Hide/Show based on URL params */
[data-flow-section],
[data-flow-only] {
  display: none;
}

[data-flow-section].flow-active,
[data-flow-only].flow-active {
  display: block;
}

.path-choice.flow-active {
  display: flex;
}

.demo-type-grid.flow-active {
  display: grid;
}

/* Demo Compact Header (for demo-optional flow) */
.demo-compact-header {
  display       : none !important;
  flex-direction: column;
  gap           : 2px;
  padding       : 16px 0 12px 0;
  border-top    : 1px solid #eee;
  margin-top    : 16px;
}

.demo-compact-header.visible {
  display: flex !important;
}

.demo-compact-title {
  font-size  : 15px;
  font-weight: 600;
  color      : #1a1a1a;
}

.demo-compact-subtitle {
  font-size: 12px;
  color    : #888;
}

/* Demo Scheduling Widget - Refined Luxury */
.demo-scheduling-widget {
  background   : #fff;
  border-radius: 16px;
  padding      : 16px;
  margin-bottom: 20px;
}

/* Compact mode - tighter, cleaner */
.demo-scheduling-widget.compact-mode {
  background   : transparent;
  padding      : 0;
  margin-bottom: 16px;
}

.demo-header {
  margin-bottom: 14px;
}

.demo-badge {
  display       : inline-block;
  background    : linear-gradient(135deg, #01ac46 0%, #00c853 100%);
  color         : #fff;
  font-size     : 10px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding       : 4px 10px;
  border-radius : 100px;
}

.demo-heading {
  font-size     : 15px;
  font-weight   : 600;
  margin-bottom : 2px;
  color         : #1a1a1a;
  letter-spacing: -0.01em;
}

.demo-subtext {
  font-size: 12px;
  color    : #888;
  margin   : 0;
}

/* Path Welcome Message Box */
.path-welcome-message-box {
  display         : none;
  background-color: #ffffff;
  padding         : 20px;
  margin-bottom   : 20px;
  text-align      : center;
  border-radius   : 16px;
}

.path-welcome-message-box[data-flow-only="video-or-demo"].flow-active,
.demo-scheduling-widget[data-flow-section="demo"].flow-active .path-welcome-message-box[data-flow-only="video-or-demo"] {
  display: block;
}

/* Demo Welcome Message Box (for gated flow without videos) */
.demo-welcome-message-box {
  display         : none;
  background-color: #ffffff;
  padding         : 20px;
  margin-bottom   : 32px;
  text-align      : center;
  border-radius   : 16px;
}

.demo-welcome-message-box.flow-active {
  display: block;
}

.path-welcome-message-text {
  font-size  : 18px;
  line-height: 1.6;
  color      : #333;
  margin     : 0 0 12px 0;
  text-align : center;
}

.path-welcome-message-text strong {
  font-weight: 700;
  color      : #000;
}

.path-welcome-message-subtext {
  font-size  : 15px;
  line-height: 1.5;
  color      : #666;
  margin     : 0;
  text-align : center;
}

.path-welcome-message-text .tooltip-icon {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 18px;
  height         : 18px;
  margin-left    : 4px;
  color          : #01ac46;
  cursor         : help;
  vertical-align : text-bottom;
}

.path-welcome-message-text .tooltip-icon:hover {
  color: #008833;
}

@media (max-width: 768px) {

  .path-welcome-message-box,
  .demo-welcome-message-box {
    padding: 16px;
  }

  .path-welcome-message-text {
    font-size: 16px;
  }

  .path-welcome-message-subtext {
    font-size: 14px;
  }
}

/* Path Choice (Video or Live Demo) - Marketing Style */
.path-choice {
  display       : none;
  flex-direction: column;
  gap           : 12px;
  margin-bottom : 16px;
}

.path-option {
  display      : flex;
  align-items  : stretch;
  gap          : 0;
  padding      : 0;
  border       : 1px solid #eee;
  border-radius: 14px;
  background   : #fff;
  cursor       : pointer;
  overflow     : hidden;
  min-height   : 140px;
  position     : relative;
  transition   : border-color 0.2s ease, box-shadow 0.2s ease;
}

.path-option:hover {
  border-color: #ccc;
  background  : #fafafa;
}

.path-option.active {
  border-color: #01ac46;
  background  : #fff;
  box-shadow  : 0 0 0 1px #01ac46;
}

/* Path option image - flush to left */
.path-image {
  display      : block;
  width        : 30%;
  min-width    : 100px;
  height       : auto;
  min-height   : 100%;
  object-fit   : cover;
  flex-shrink  : 0;
  border-radius: 0;
}

.path-content {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : 2px;
  padding       : 20px 24px;
}

.path-label {
  font-size  : 16px;
  font-weight: 600;
  color      : #1a1a1a;
}

.path-tagline {
  font-size  : 14px;
  color      : #01ac46;
  font-weight: 500;
}

.path-desc {
  font-size  : 13px;
  line-height: 1.5;
  color      : #888;
  margin-top : 6px;
}

.path-check {
  opacity    : 0;
  color      : #01ac46;
  transition : opacity 0.2s ease;
  flex-shrink: 0;
  position   : absolute;
  top        : 20px;
  right      : 20px;
}

.path-option.active .path-check {
  opacity: 1;
}

/* Video Playlist */
.video-playlist {
  display       : none;
  flex-direction: column;
  gap           : 8px;
  margin-bottom : 16px;
}

.video-playlist.flow-active {
  display: flex;
}

.video-item {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 12px 14px;
  background   : #f8f8f8;
  border-radius: 10px;
  cursor       : pointer;
  transition   : all 0.2s ease;
}

.video-item:hover {
  background: #f0f0f0;
}

.video-item.watched {
  background: #f0fdf4;
}

.video-check-circle {
  width        : 20px;
  height       : 20px;
  border       : 2px solid #d0d0d0;
  border-radius: 50%;
  flex-shrink  : 0;
  position     : relative;
  transition   : all 0.2s ease;
}

.video-item.watched .video-check-circle {
  border-color: #01ac46;
  background  : #01ac46;
}

.video-item.watched .video-check-circle::after {
  content    : '✓';
  position   : absolute;
  top        : 50%;
  left       : 50%;
  transform  : translate(-50%, -50%);
  color      : #fff;
  font-size  : 12px;
  font-weight: bold;
}

.video-title {
  flex       : 1;
  font-size  : 13px;
  font-weight: 500;
  color      : #1a1a1a;
}

.video-duration {
  font-size: 12px;
  color    : #888;
}

.demo-type-grid {
  display              : none;
  grid-template-columns: 1fr 1fr;
  gap                  : 10px;
  margin-bottom        : 0;
}

.demo-type-grid.flow-active {
  display: grid;
}

.demo-type-grid.hidden {
  display: none;
}

/* Compact style - cleaner tab-like buttons */
.demo-type-grid.compact-style {
  gap: 8px;
}

.demo-type-grid.compact-style .demo-type-option {
  padding      : 12px 14px;
  border       : 1px solid #e0e0e0;
  border-radius: 10px;
  background   : #fafafa;
}

.demo-type-grid.compact-style .demo-type-option:hover {
  border-color: #01ac46;
  background  : #fff;
}

.demo-type-grid.compact-style .demo-type-option.active {
  border-color: #01ac46;
  background  : #fff;
  box-shadow  : 0 0 0 1px #01ac46;
}

.demo-type-grid.compact-style .demo-type-icon {
  width : 18px;
  height: 18px;
}

.demo-type-grid.compact-style .demo-type-label {
  font-size: 13px;
}

.demo-type-grid.compact-style .demo-type-desc {
  display: none;
}

.demo-type-grid.compact-style .demo-type-check {
  width : 14px;
  height: 14px;
}

/* Demo Required - Marketing Style */
.demo-type-grid.marketing-style {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.demo-type-grid.marketing-style .demo-type-option {
  flex-direction: row;
  padding       : 0;
  background    : #fff;
  border        : 1px solid #eee;
  border-radius : 14px;
  color         : #1a1a1a;
  gap           : 0;
  overflow      : hidden;
  min-height    : 140px;
  position      : relative;
}

.demo-type-grid.marketing-style .demo-type-option:hover {
  border-color: #ccc;
  background  : #fafafa;
}

.demo-type-grid.marketing-style .demo-type-option.active {
  border-color: #01ac46;
  background  : #fff;
  box-shadow  : 0 0 0 1px #01ac46;
}

.demo-type-grid.marketing-style .demo-type-icon {
  width      : 28px;
  height     : 28px;
  color      : #666;
  flex-shrink: 0;
}

.demo-type-grid.marketing-style .demo-type-option:hover .demo-type-icon {
  color: #444;
}

.demo-type-grid.marketing-style .demo-type-option.active .demo-type-icon {
  color: #01ac46;
}

.demo-type-grid.marketing-style .demo-type-content {
  flex   : 1;
  gap    : 2px;
  padding: 20px 24px;
}

.demo-type-grid.marketing-style .demo-type-label {
  font-size  : 16px;
  font-weight: 600;
  color      : #1a1a1a;
}

.demo-type-grid.marketing-style .demo-type-desc {
  font-size: 13px;
  color    : #666;
}

.demo-type-grid.marketing-style .demo-type-check {
  color   : #01ac46;
  position: absolute;
  top     : 20px;
  right   : 20px;
}

/* Marketing mode step label styling */
.marketing-mode-label {
  font-size     : 22px;
  font-weight   : 700;
  color         : #1a1a1a;
  letter-spacing: -0.02em;
}

/* Marketing description - hidden by default, shown in marketing mode */
.demo-type-marketing-desc {
  display: none;
}

.demo-type-grid.marketing-style .demo-type-marketing-desc {
  display    : block;
  font-size  : 13px;
  line-height: 1.5;
  color      : #888;
  margin-top : 6px;
}

.demo-type-grid.marketing-style .demo-type-desc {
  font-size  : 14px;
  color      : #01ac46;
  font-weight: 500;
}

/* Demo type image - hidden by default */
.demo-type-image {
  display: none;
}

/* Show flush image in marketing style - takes ~30% of card width */
.demo-type-grid.marketing-style .demo-type-image {
  display      : block;
  width        : 30%;
  min-width    : 100px;
  height       : auto;
  min-height   : 100%;
  object-fit   : cover;
  flex-shrink  : 0;
  border-radius: 0;
  border       : none;
  align-self   : stretch;
}

/* Clean widget background in marketing mode */
.demo-scheduling-widget.marketing-mode {
  background: transparent;
  padding   : 0;
}

/* Hide SVG icon when image is present in marketing mode */
/* Hide SVG icons when images are present in marketing style */
.demo-type-grid.marketing-style .demo-type-option .demo-type-icon {
  display: none;
}

/* Hide qty for demo-required flow */
.qty-and-cart-wrapper.hide-qty .qty-buttons {
  display: none;
}

.qty-and-cart-wrapper.hide-qty {
  gap: 0;
}

.qty-and-cart-wrapper.hide-qty .add-to-cart-section {
  flex: 1;
}

/* Selected Header with Back Button */
.demo-selected-header {
  display        : none;
  align-items    : center;
  justify-content: space-between;
  padding        : 12px 16px;
  background     : linear-gradient(135deg, #f0fdf4 0%, #e8f5e9 100%);
  border         : 1px solid rgba(1, 172, 70, 0.2);
  border-radius  : 12px;
  margin-bottom  : 0;
}

.demo-selected-header.visible {
  display: flex;
}

/* Compact mode selected header */
.demo-scheduling-widget.compact-mode .demo-selected-header {
  padding      : 10px 12px;
  border-radius: 10px;
}

.demo-back-btn {
  display    : flex;
  align-items: center;
  gap        : 6px;
  background : none;
  border     : none;
  padding    : 0;
  cursor     : pointer;
  color      : #1a1a1a;
  font-size  : 14px;
  font-weight: 600;
}

.demo-scheduling-widget.compact-mode .demo-back-btn {
  font-size: 13px;
  gap      : 4px;
}

.demo-back-btn svg {
  color: #01ac46;
}

.demo-change-text {
  font-size  : 12px;
  color      : #01ac46;
  font-weight: 500;
  cursor     : pointer;
}

.demo-scheduling-widget.compact-mode .demo-change-text {
  font-size: 11px;
}

.demo-type-option {
  position       : relative;
  border         : 1.5px solid #e0e0e0;
  border-radius  : 12px;
  padding        : 16px 14px;
  background     : #fff;
  cursor         : pointer;
  transition     : all 0.2s ease;
  display        : flex;
  flex-direction : row;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  text-align     : left;
}

.demo-type-option:hover {
  border-color: #01ac46;
  background  : #f8fcf9;
}

.demo-type-option.active {
  border-color: #01ac46;
  background  : linear-gradient(135deg, #f0fdf4 0%, #e8f5e9 100%);
  box-shadow  : inset 0 0 0 1px #01ac46;
}

.demo-type-icon {
  width      : 22px;
  height     : 22px;
  color      : #888;
  transition : color 0.2s ease;
  flex-shrink: 0;
}

.demo-type-option:hover .demo-type-icon,
.demo-type-option.active .demo-type-icon {
  color: #01ac46;
}

.demo-type-content {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : 2px;
}

.demo-type-label {
  font-size  : 14px;
  font-weight: 600;
  color      : #1a1a1a;
}

.demo-type-desc {
  font-size  : 11px;
  color      : #888;
  font-weight: 400;
}

.demo-type-check {
  opacity    : 0;
  color      : #01ac46;
  transition : opacity 0.2s ease;
  flex-shrink: 0;
}

.demo-type-option.active .demo-type-check {
  opacity: 1;
}

.demo-details {
  overflow  : hidden;
  transition: all 0.35s ease;
  max-height: 0;
  opacity   : 0;
}

.demo-details.visible {
  max-height : 300px;
  opacity    : 1;
  margin-top : 16px;
  padding-top: 16px;
}

/* Compact mode details */
.demo-scheduling-widget.compact-mode .demo-details.visible {
  margin-top : 12px;
  padding-top: 12px;
  border-top : 1px solid #e8e8e8;
}

.demo-input-group {
  margin-bottom: 16px;
}

.demo-input-group:last-child {
  margin-bottom: 0;
}

.demo-input-label {
  display       : block;
  font-size     : 11px;
  font-weight   : 600;
  margin-bottom : 10px;
  color         : #666;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Compact mode input groups */
.demo-scheduling-widget.compact-mode .demo-input-group {
  margin-bottom: 12px;
}

.demo-scheduling-widget.compact-mode .demo-input-label {
  font-size    : 10px;
  margin-bottom: 8px;
}

.demo-pills-group {
  display  : flex;
  flex-wrap: wrap;
  gap      : 8px;
}

.demo-pill {
  padding      : 9px 18px;
  border       : 1.5px solid #d8d8d8;
  border-radius: 100px;
  background   : #fff;
  color        : #333;
  font-size    : 13px;
  font-weight  : 500;
  cursor       : pointer;
  transition   : all 0.2s ease;
}

.demo-pill:hover {
  border-color: #01ac46;
  background  : #f8fcf9;
  color       : #01ac46;
}

.demo-pill.active {
  background  : #01ac46;
  border-color: #01ac46;
  color       : #fff;
  font-weight : 600;
}

/* Compact mode pills */
.demo-scheduling-widget.compact-mode .demo-pill {
  padding  : 7px 14px;
  font-size: 12px;
}

.demo-scheduling-widget.compact-mode .demo-pills-group {
  gap: 6px;
}

/* Demo Summary */
.demo-summary {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  margin-top   : 16px;
  padding      : 12px 16px;
  background   : linear-gradient(135deg, #f0fdf4 0%, #e8f5e9 100%);
  border-radius: 10px;
  border       : 1px solid rgba(1, 172, 70, 0.15);
  opacity      : 0;
  transform    : translateY(-5px);
  transition   : all 0.3s ease;
}

.demo-summary.visible {
  opacity  : 1;
  transform: translateY(0);
}

.demo-summary svg {
  color      : #01ac46;
  flex-shrink: 0;
}

.demo-summary span {
  font-size  : 13px;
  font-weight: 500;
  color      : #1a1a1a;
}

.hidden {
  display: none !important;
}

/* ============================================
       STUDIO BOOKING FLOW STYLES
       ============================================ */

/* Studio Heading */
.studio-heading {
  display      : none;
  margin-bottom: 16px;
}

.studio-heading.flow-active {
  display: block;
}

.studio-heading-text {
  font-size  : 20px;
  font-weight: 600;
  color      : #1a1a1a;
  margin     : 0;
}

/* Studio Booking Wrapper */
.studio-booking-wrapper {
  display       : none;
  flex-direction: column;
  margin-bottom : 16px;
}

.studio-booking-wrapper.flow-active {
  display: flex;
}

/* Studio Tabs */
.studio-tabs {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 0;
  background           : #f5f5f5;
  border-radius        : 12px;
  padding              : 4px;
  margin-bottom        : 16px;
}

.studio-tab {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  padding        : 14px 16px;
  background     : transparent;
  border         : none;
  border-radius  : 10px;
  font-size      : 12px;
  font-weight    : 600;
  letter-spacing : 0.03em;
  color          : #888;
  cursor         : pointer;
  transition     : all 0.2s ease;
}

.studio-tab svg {
  flex-shrink: 0;
}

.studio-tab:hover {
  color: #666;
}

.studio-tab.active {
  background: #fff;
  color     : #1a1a1a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.studio-tab.active svg {
  color: #01ac46;
}

/* Tab Content */
.studio-tab-content {
  display: none;
}

.studio-tab-content.active {
  display: block;
}

/* Studio Booking Widget */
.studio-booking-widget {
  display       : flex;
  flex-direction: column;
  background    : #fff;
  border        : 1px solid #eee;
  border-radius : 16px;
  padding       : 24px;
}

/* Studio Header */
.studio-header {
  display      : flex;
  align-items  : flex-start;
  gap          : 14px;
  margin-bottom: 24px;
}

.studio-location-icon {
  width          : 44px;
  height         : 44px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : linear-gradient(135deg, #fef3e8 0%, #fdecd9 100%);
  border-radius  : 10px;
  flex-shrink    : 0;
}

.studio-location-icon svg {
  color: #ea580c;
}

.studio-info {
  display       : flex;
  flex-direction: column;
  gap           : 2px;
  flex          : 1;
}

.studio-title {
  font-size  : 16px;
  font-weight: 600;
  color      : #1a1a1a;
}

.studio-address {
  font-size: 13px;
  color    : #666;
}

.studio-details-link {
  display    : inline-flex;
  align-items: center;
  gap        : 4px;
  background : none;
  border     : none;
  padding    : 0;
  font-size  : 13px;
  font-weight: 500;
  color      : #01ac46;
  cursor     : pointer;
  transition : color 0.2s ease;
  flex-shrink: 0;
}

.studio-details-link:hover {
  color: #018a38;
}

/* Virtual Tour Content */
.virtual-tour-content {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  text-align    : center;
  padding       : 24px 16px;
}

.virtual-tour-header {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  margin-bottom : 24px;
}

.virtual-tour-icon {
  color        : #01ac46;
  margin-bottom: 16px;
}

.virtual-tour-title {
  font-size  : 20px;
  font-weight: 600;
  color      : #1a1a1a;
  margin     : 0 0 8px 0;
}

.virtual-tour-desc {
  font-size  : 14px;
  line-height: 1.5;
  color      : #666;
  margin     : 0;
  max-width  : 320px;
}

.virtual-tour-features {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
  margin-bottom : 24px;
}

.virtual-tour-feature {
  display    : flex;
  align-items: center;
  gap        : 10px;
  font-size  : 14px;
  color      : #1a1a1a;
}

.virtual-tour-feature svg {
  color      : #01ac46;
  flex-shrink: 0;
}

.virtual-tour-btn {
  padding      : 14px 32px;
  background   : #01ac46;
  border       : none;
  border-radius: 10px;
  font-size    : 14px;
  font-weight  : 600;
  color        : #fff;
  cursor       : pointer;
  transition   : background 0.2s ease;
}

.virtual-tour-btn:hover {
  background: #018a38;
}

/* Studio Section */
.studio-section {
  margin-bottom: 20px;
}

.studio-section:last-of-type {
  margin-bottom: 0;
}

.studio-section-label {
  display       : block;
  font-size     : 11px;
  font-weight   : 600;
  color         : #01ac46;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom : 12px;
}

/* Date Grid */
.studio-date-grid {
  display: flex;
  gap    : 8px;
}

.studio-date-option {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 4px;
  padding       : 12px 8px;
  background    : #f8f8f8;
  border        : 1px solid #eee;
  border-radius : 10px;
  cursor        : pointer;
  transition    : all 0.2s ease;
}

.studio-date-option:hover {
  border-color: #ccc;
  background  : #f0f0f0;
}

.studio-date-option.active {
  background  : #01ac46;
  border-color: #01ac46;
}

.studio-date-day {
  font-size     : 11px;
  font-weight   : 600;
  color         : #888;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.studio-date-option.active .studio-date-day {
  color: rgba(255, 255, 255, 0.85);
}

.studio-date-num {
  font-size  : 20px;
  font-weight: 600;
  color      : #1a1a1a;
}

.studio-date-option.active .studio-date-num {
  color: #fff;
}

/* Time Grid */
.studio-time-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 8px;
}

.studio-time-option {
  padding      : 12px 16px;
  background   : #f8f8f8;
  border       : 1px solid #eee;
  border-radius: 10px;
  font-size    : 14px;
  font-weight  : 500;
  color        : #1a1a1a;
  cursor       : pointer;
  transition   : all 0.2s ease;
  text-align   : center;
}

.studio-time-option:hover:not(.disabled) {
  border-color: #ccc;
  background  : #f0f0f0;
}

.studio-time-option.active {
  background  : #01ac46;
  border-color: #01ac46;
  color       : #fff;
}

.studio-time-option.disabled {
  color          : #ccc;
  text-decoration: line-through;
  cursor         : not-allowed;
  background     : #fafafa;
}

/* Studio Footer */
.studio-footer {
  display        : none;
  justify-content: center;
  align-items    : center;
  padding        : 16px 0;
}

.studio-footer.flow-active {
  display: flex;
}

.studio-footer-note {
  font-size: 13px;
  color    : #888;
}

/* Responsive adjustments for studio booking */
@media (max-width: 480px) {
  .studio-date-grid {
    gap: 6px;
  }

  .studio-date-option {
    padding: 10px 6px;
  }

  .studio-date-num {
    font-size: 18px;
  }

  .studio-time-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Gated Flow - Button positioning */
/* When gated flow is active, remove widget spacing and pull the button closer */
.demo-scheduling-widget.gated-flow-active {
  margin-bottom: 0;
  padding      : 0;
}

.demo-scheduling-widget.gated-flow-active~.qty-and-cart-wrapper {
  margin-top: 12px;
}

/* Remove extra spacing on path-choice when in gated flow */
.demo-scheduling-widget.gated-flow-active .path-choice.flow-active {
  margin-bottom: 0;
}

/* Ensure hidden elements don't add spacing */
.demo-scheduling-widget.gated-flow-active .video-playlist:not(.flow-active),
.demo-scheduling-widget.gated-flow-active .demo-type-grid:not(.flow-active),
.demo-scheduling-widget.gated-flow-active .demo-selected-header:not(.visible),
.demo-scheduling-widget.gated-flow-active .demo-time-selection:not(.visible),
.demo-scheduling-widget.gated-flow-active .demo-day-selection:not(.visible),
.demo-scheduling-widget.gated-flow-active .demo-summary:not(.visible) {
  display: none !important;
  margin : 0 !important;
  padding: 0 !important;
}