/* This is a manifest file that'll be compiled into application.css.

With Propshaft, assets are served efficiently without preprocessing steps. You can still include
application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
cascading order, meaning styles declared later in the document or manifest will override earlier ones,
depending on specificity.

Consider organizing styles into separate files for maintainability.
*/

//= require profile
//= require checkout
//= require_tree .

/* Responsive Video Styling for Mobile */
.video-responsive {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 0 auto;
}

/* Mobile optimization - ensure proper spacing and avoid overflow */
@media (max-width: 768px) {
  .video-responsive {
    max-width: 100%;
    border-radius: 8px;
  }

  .content-block-video {
    margin-bottom: 16px;
  }

  .content-block-video video {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
  }

  /* Let video stretch edge-to-edge on mobile */
  .content-block-video {
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  .content-block-video.float-right,
  .content-block-video.float-left,
  .content-block-video.float-none {
    float: none;
    width: 100%;
  }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 576px) {
  .video-responsive {
    max-width: 100%;
  }

  .content-block-video {
    margin-bottom: 12px;
  }
}

/* Paragraph content block styling */
.content-block-paragraph {
  padding: 16px;
  border-radius: 8px;
  line-height: 1.6;
  color: #333;
  font-size: 16px;
  margin-bottom: 20px;
}

.content-block-paragraph p {
  margin: 0;
}

/* Video and PDF content block styling */
.content-block-video, .content-block-pdf {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.content-block-video {
  background: #f8f9fa;
}

.content-block-pdf {
  background: #fff;
}

.badge-free-sample {
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 50px;
  margin-left: 1rem;
  vertical-align: middle;
}

.lesson-actions {
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
}

/* Mobile paragraph optimization */
@media (max-width: 768px) {
  .content-block-paragraph {
    padding: 14px 16px;
    font-size: 15px;
    margin-bottom: 16px;
  }

  #lesson-show h1 {
    padding: 16px;
    margin-bottom: 20px;
  }
}

/* Prevent overflow in content block iframes */
.content-block-video iframe,
.content-block-pdf iframe {
  max-width: 100%;
  overflow-x: hidden;
}

/* PDF viewer canvas sizing */
.pdf-viewer canvas.pdf-page {
  width: 100%;
  height: auto;
}

/* Fullscreen viewer lets one-finger drags scroll natively (touch-action
   pan-x pan-y), while two-finger pinches are captured by our JS zoom. */
.pdf-viewer:fullscreen,
.pdf-viewer:-webkit-full-screen {
  background-color: #212529;
  display: flex;
  overflow: auto;
  padding: 24px;
  touch-action: pan-x pan-y;
}

.pdf-viewer:fullscreen .pdf-page-holder,
.pdf-viewer:-webkit-full-screen .pdf-page-holder {
  margin: auto;
}

.pdf-viewer:fullscreen canvas.pdf-page,
.pdf-viewer:-webkit-full-screen canvas.pdf-page {
  width: auto;
  height: auto;
}

.pdf-viewer:fullscreen .pdf-pages,
.pdf-viewer:-webkit-full-screen .pdf-pages {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Fullscreen button is anchored to the screen so zooming or scrolling
   the canvas can't move it */
.pdf-viewer:fullscreen .pdf-fullscreen,
.pdf-viewer:-webkit-full-screen .pdf-fullscreen {
/* !important to beat the .position-absolute utility on the button */
  position: fixed !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  z-index: 1;
}

/* Ensure content blocks are properly contained */
.block-content {
  overflow-x: hidden;
}
/* Flash messages (Devise notices/alerts) rendered in application layout */
.flash {
  max-width: 48rem;
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  text-align: center;
  font-size: 0.95rem;
}

.flash-notice {
  background-color: #e7f5ec;
  color: #1e5c3a;
  border: 1px solid #b7e0c7;
}

.flash-alert {
  background-color: #fdecea;
  color: #8a1f16;
  border: 1px solid #f5c6c0;
}