/**
 * HCD Video Coverflow - styles.
 *
 * Every value below is taken 1:1 from the original hcd-video-slider.html.
 * All selectors are scoped to the widget wrapper (.hcd-happy-coverflow-wrapper)
 * or to the widget's own modal (.hcd-happy-cf-modal), which the script moves to
 * <body> so Elementor containers can never clip it.
 */

/* --- ELEMENTOR HOST ELEMENT ---
 * Cards are absolutely positioned, so inside a flex container (align-items:center)
 * the widget would shrink to the width of the arrows. Force full width. */
.elementor-widget-hcd_video_coverflow.elementor-widget-hcd_video_coverflow {
  --container-widget-width: 100%;
  --container-widget-flex-grow: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  flex-grow: 1;
}

.elementor-widget-hcd_video_coverflow > .elementor-widget-container {
  width: 100%;
}

/* --- WRAPPER & CONTAINER --- */
.hcd-happy-coverflow-wrapper {
  --hcd-gold: #907755;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  touch-action: pan-y;
}

.hcd-happy-coverflow-wrapper *,
.hcd-happy-coverflow-wrapper *::before,
.hcd-happy-coverflow-wrapper *::after {
  box-sizing: border-box;
}

.hcd-happy-coverflow-wrapper .hcd-happy-cf-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* --- STAGE & PERSPECTIVE --- */
.hcd-happy-coverflow-wrapper .hcd-happy-cf-stage {
  position: relative;
  height: 28rem;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  margin-bottom: 1.5rem;
  width: 100%;
}

/* --- CARDS --- */
.hcd-happy-coverflow-wrapper .hcd-happy-cf-card {
  position: absolute;
  width: 17.5rem;
  height: 25rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, filter 0.5s ease, box-shadow 0.3s ease;
  will-change: transform, opacity, filter;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  background-color: #000;
  user-select: none;
}

.hcd-happy-coverflow-wrapper .hcd-happy-cf-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid rgba(144,119,85,0.4);
  transition: border-color 0.3s ease;
  background: radial-gradient(circle at center, #000 0%, #000 100%);
}

/* --- POSTER & THUMBNAIL VIDEO --- */
.hcd-happy-coverflow-wrapper .hcd-happy-cf-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

.hcd-happy-coverflow-wrapper .hcd-happy-cf-poster video,
.hcd-happy-coverflow-wrapper .hcd-happy-cf-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  max-width: none;
  border-radius: 0;
}

/* --- OVERLAY & PLAY BUTTON --- */
.hcd-happy-coverflow-wrapper .hcd-happy-cf-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 60%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2rem;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.hcd-happy-coverflow-wrapper .hcd-happy-cf-card:hover .hcd-happy-cf-overlay {
  opacity: 1;
}

.hcd-happy-coverflow-wrapper .hcd-happy-cf-play-btn {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--hcd-gold);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(144,119,85,0.5);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
  padding-left: 2px;
}

.hcd-happy-coverflow-wrapper .hcd-happy-cf-card.active:hover .hcd-happy-cf-play-btn {
  transform: scale(1.12);
}

/* --- CONTROLS --- */
.hcd-happy-coverflow-wrapper .hcd-happy-cf-arrows {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  align-items: center;
}

.hcd-happy-coverflow-wrapper .hcd-happy-cf-arrow {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--hcd-gold);
  color: var(--hcd-gold);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}

.hcd-happy-coverflow-wrapper .hcd-happy-cf-arrow:hover {
  background: var(--hcd-gold);
  color: #000;
  box-shadow: 0 0 15px rgba(144,119,85,0.4);
}

/* --- MODAL POPUP (moved to <body> by coverflow.js) --- */
.hcd-happy-cf-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1.25rem;
  outline: none;
}

.hcd-happy-cf-modal.active {
  opacity: 1;
  visibility: visible;
}

.hcd-happy-cf-modal .hcd-happy-cf-modal-content {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.hcd-happy-cf-modal .hcd-happy-cf-close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
  transition: color 0.2s ease;
}

.hcd-happy-cf-modal .hcd-happy-cf-close:hover {
  color: var(--hcd-gold, #907755);
  background: none;
}

.hcd-happy-cf-modal .hcd-happy-cf-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hcd-happy-cf-modal .hcd-happy-cf-iframe-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- RESPONSIVE ADJUSTMENTS (original breakpoints) --- */
@media (max-width: 62rem) { /* Tablet */
  .hcd-happy-coverflow-wrapper .hcd-happy-cf-stage {
    height: 23rem;
  }
  .hcd-happy-coverflow-wrapper .hcd-happy-cf-card {
    width: 14rem;
    height: 20rem;
  }
}

@media (max-width: 48rem) { /* Mobile */
  .hcd-happy-coverflow-wrapper .hcd-happy-cf-stage {
    height: 19rem;
  }
  .hcd-happy-coverflow-wrapper .hcd-happy-cf-card {
    width: 11.5rem;
    height: 16.5rem;
  }
  .hcd-happy-coverflow-wrapper .hcd-happy-cf-play-btn {
    width: 2.75rem;
    height: 2.75rem;
  }
}


/* YouTube player support: use a landscape viewport while keeping local MP4
   testimonials in their original portrait layout. */
.hcd-happy-cf-modal .hcd-happy-cf-iframe-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.hcd-happy-cf-modal .hcd-happy-cf-iframe-wrap--youtube {
  aspect-ratio: 16 / 9;
}
.hcd-happy-cf-modal.hcd-happy-cf-modal--youtube .hcd-happy-cf-modal-content {
  max-width: min(960px, 94vw);
}