/* ==========================================================================
   Vision Nails - Landing Page Styles
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties (Vision Nails Theme)
   ========================================================================== */
:root {
  --vn-primary: #6C3921;
  --vn-accent: #9A6437;
  --vn-light: #F5F0EB;
  --vn-cream: #F7F0EA;
  --vn-dark-brown: #8B5A3C;
  --vn-card-bg: #DFD0C2;
  --vn-card-hover: #EAE1D9;
  --vn-card-expanded: #F9EFDB;
}

/* ==========================================================================
   Vision Nails Page Container
   ========================================================================== */
.vision-nails-page {
  overflow-x: hidden;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.vision-hero__gradient {
  background: linear-gradient(
    180deg,
    #6C3921 0%,
    #8B5A4A 12%,
    #B8967F 22%,
    #D4C4B8 32%,
    #E8DED6 42%,
    #F5F0EB 52%,
    #FAFAFA 62%,
    #FFFFFF 72%,
    #FFFFFF 100%
  );
}

.vision-hero__bottom-bar {
  background: linear-gradient(
    180deg,
    #4e1904 0%,
    #5a2810 40%,
    #6d3a1c 70%,
    #7a4a2a 100%
  );
}

/* ==========================================================================
   Carousel Base Styles
   ========================================================================== */
.vision-carousel {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.vision-carousel::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   Course Modules Cards
   ========================================================================== */
.vision-module-card__inner {
  background-color: transparent;
  padding: 0;
  transition: all 0.3s ease-out;
}

/* Desktop hover effects */
@media (min-width: 1024px) {
  .vision-module-card__wrapper {
    min-height: 500px;
  }

  .vision-module-card__wrapper:hover .vision-module-card__inner {
    background-color: var(--vn-card-expanded);
    padding: 20px;
    border-radius: 30px;
  }

  .vision-module-card__wrapper:hover .vision-module-card__image {
    border-radius: 20px;
    width: 100%;
    height: auto;
    aspect-ratio: 372 / 297;
  }

  .vision-module-card__wrapper:hover .vision-module-card__content-inner {
    display: block;
  }

  .vision-module-card__wrapper:hover .vision-module-card__title-below {
    display: none;
  }
}

/* ==========================================================================
   Pricing Cards
   ========================================================================== */

/* ==========================================================================
   FAQ Cards
   ========================================================================== */
.vision-faq-card__body {
  min-height: 280px;
}

@media (min-width: 640px) {
  .vision-faq-card__body {
    min-height: 320px;
  }
}

@media (min-width: 1024px) {
  .vision-faq-card__body {
    min-height: 380px;
  }
}

/* ==========================================================================
   Mobile Optimizations
   ========================================================================== */

/* Improve touch targets on mobile */
@media (max-width: 640px) {
  .vision-carousel__nav-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Reduce padding on mobile for better space usage */
  .vision-pain-points .container,
  .vision-value-proposition .container,
  .vision-modules .container,
  .vision-pricing .container,
  .vision-faq .container,
  .vision-instructor .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Adjust card sizes for better mobile viewing */
  .vision-faq-card__body {
    min-height: 260px;
  }
}

/* Improve readability on small screens */
@media (max-width: 374px) {
  .vision-hero h1 {
    font-size: 28px;
  }

  .vision-faq-card,
  .vision-module-card {
    width: 280px !important;
  }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* Use GPU acceleration for smooth animations */
.vision-module-card__inner,
.vision-pricing-card__inner,
.vision-carousel {
  will-change: transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .vision-carousel {
    scroll-behavior: auto;
  }

  .vision-module-card__inner,
  .vision-pricing-card__inner,
  .vision-carousel__nav-btn,
  [data-carousel-progress] {
    transition: none;
  }
}

/* ==========================================================================
   Mautic Newsletter Form (Footer)
   ========================================================================== */
.vision-footer .mauticform-innerform {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vision-footer .mauticform-page-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vision-footer .mauticform-row {
  margin: 0 !important;
  padding: 0 !important;
}

.vision-footer .mauticform-label {
  display: none !important;
}

.vision-footer .mauticform-input::placeholder {
  color: #6C3921;
  opacity: 0.6;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
}

.vision-footer .mauticform-input {
  width: 220px;
  height: 48px;
  padding: 10px 19px;
  border: 1.5px solid #6C3921;
  border-radius: 15px;
  background: transparent;
  color: #6a3d2c;
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
  outline: none;
  transition: all 0.2s ease;
}

.vision-footer .mauticform-input:focus {
  border-color: #6C3921;
  box-shadow: 0 0 0 2px rgba(108, 57, 33, 0.15);
}

.vision-footer .mauticform-button-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

.vision-footer .mauticform-button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
}

.vision-footer .mauticform-button:hover {
  background: rgba(108, 57, 33, 0.08) !important;
}

.vision-footer .mauticform-button::before {
  content: '' !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  text-indent: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%236C3921' d='M227.32 28.68a16 16 0 0 0-15.66-4.08l-.15.05l-166.24 52A16 16 0 0 0 34.2 97.59l62.63 21.77l45.78-45.78a8 8 0 0 1 11.32 11.32l-45.78 45.78l21.77 62.63a16 16 0 0 0 15.12 10.69h.47a16 16 0 0 0 14.93-10.64l52-166.24l.05-.15a16 16 0 0 0-4.17-15.69'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vision-footer .mauticform-errormsg {
  display: none;
}

.vision-footer [class*="mauticform"] > .mauticform-message,
.vision-footer .mauticform-post-success {
  display: block !important;
  color: #6C3921 !important;
  font-size: 13px !important;
  font-family: 'Mulish', sans-serif !important;
  text-align: left !important;
  margin-bottom: 8px !important;
}

.vision-footer .mauticform-innerform {
  position: relative;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .vision-footer .mauticform-innerform,
  .vision-footer .mauticform-page-wrapper {
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }

  .vision-footer .mauticform-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .vision-footer .mauticform-button {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  .vision-carousel {
    overflow: visible;
    flex-wrap: wrap;
  }

  .vision-carousel__nav-btn,
  [data-carousel-progress] {
    display: none;
  }

  .vision-module-card,
  .vision-faq-card {
    page-break-inside: avoid;
  }
}