/**
 * K12 Bottom Sheet Component - Airbnb-Style Slide-Up Panel
 * =========================================================
 *
 * A mobile-only bottom sheet that displays school results:
 * - Drag handle for touch interaction
 * - Three states: collapsed (60vh), expanded (15vh), minimized
 * - Momentum-based snapping with rubber band effect
 * - Backdrop overlay that fades with sheet position
 *
 * Reference: Airbnb mobile app, Apple Maps, Google Maps
 */

/* ==========================================================================
   Bottom Sheet Container
   ========================================================================== */

@media (max-width: 767px) {

  .k12-bottom-sheet-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: var(--z-bottom-sheet);
  }

  .k12-bottom-sheet-container:not(.k12-sheet-scroll-model) .k12-bottom-sheet-scroll {
    display: contents;
  }

  .k12-bottom-sheet-container:not(.k12-sheet-scroll-model) .k12-bottom-sheet-snap {
    display: none;
  }


  /* ==========================================================================
     Backdrop Overlay
     ========================================================================== */

  .k12-bottom-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background-color var(--bs-transition-duration) var(--bs-transition-timing);
    will-change: background-color;
  }

  .k12-bottom-sheet-backdrop.is-visible {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.3);
  }


  /* ==========================================================================
     Bottom Sheet Panel
     ========================================================================== */

  .k12-bottom-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--bs-collapsed-top);
    max-width: 100vw;
    background: white;
    border-radius: var(--bs-radius) var(--bs-radius) 0 0;
    box-shadow: var(--bs-shadow);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: top var(--bs-transition-duration) var(--bs-transition-timing);
    will-change: top, transform;
    -webkit-overflow-scrolling: touch;
  }

  /* Disable transition during drag */
  .k12-bottom-sheet.is-dragging {
    transition: none;
  }

  .k12-bottom-sheet.is-expanded {
    border-radius: var(--bs-radius) var(--bs-radius) 0 0;
  }

  /* State: Collapsed (default) - 40% visible */
  .k12-bottom-sheet.is-collapsed {
    top: var(--bs-collapsed-top);
  }

  /* State: Expanded - 85% visible */
  .k12-bottom-sheet.is-expanded {
    top: var(--bs-expanded-top);
  }

  /* State: Minimized - just handle visible */
  .k12-bottom-sheet.is-minimized {
    top: var(--bs-minimized-top);
  }


  /* ==========================================================================
     Drag Handle
     ========================================================================== */

  .k12-bottom-sheet-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--bs-header-height);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .k12-bottom-sheet-handle-bar {
    /* Reduce extra visual "top padding" by making the bar slightly thinner. */
    border-radius: 999px;
  }

  .k12-bottom-sheet-handle:active {
    cursor: grabbing;
  }

  .k12-bottom-sheet-handle-bar {
    width: var(--bs-handle-width);
    height: var(--bs-handle-height);
    background: var(--bs-handle-color);
    border-radius: 2px;
  }


  /* ==========================================================================
     Header
     ========================================================================== */

  .k12-bottom-sheet-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 12px;
    border-bottom: 1px solid #ebebeb;
  }

  .k12-bottom-sheet-title {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    margin: 0;
  }

  .k12-bottom-sheet-count {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
  }


  /* ==========================================================================
     Info Text - Airbnb style "Prices include all fees"
     ========================================================================== */

  .k12-bottom-sheet-info {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 16px 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 500;
    color: #222222;
  }

  .k12-bottom-sheet-info-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }


  /* ==========================================================================
     Peek Text (shown in collapsed state)
     ========================================================================== */

  .k12-bottom-sheet-peek {
    display: none;
    flex-shrink: 0;
    padding: 8px 16px 16px;
    text-align: center;
    color: #717171;
    font-size: 14px;
  }

  .k12-bottom-sheet.is-expanded .k12-bottom-sheet-peek,
  .k12-bottom-sheet.is-minimized .k12-bottom-sheet-peek {
    display: none;
  }


  /* ==========================================================================
     Content Area
     ========================================================================== */

  .k12-bottom-sheet-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--bottom-nav-height) + var(--bottom-nav-safe-area) + 16px);
    -webkit-overflow-scrolling: touch;
  }

  /* Airbnb-like: in collapsed state, upward swipes should expand the sheet (not scroll the list). */
  .k12-bottom-sheet.is-collapsed .k12-bottom-sheet-content {
    overflow: hidden;
  }

  body.k12-search-page .k12-bottom-sheet-content {
    overscroll-behavior-y: auto;
  }

  /* Expanded state uses native list scrolling. */
  .k12-bottom-sheet.is-expanded .k12-bottom-sheet-content {
    overflow-y: auto;
  }

  .k12-bottom-sheet.is-minimized .k12-bottom-sheet-content {
    display: none;
  }

  .k12-bottom-sheet.is-minimized .k12-bottom-sheet-info {
    display: none;
  }

  /* Keep the handle visible in minimized/map mode (Airbnb-style "tab"). */

  /* Scrollbar styling */
  .k12-bottom-sheet-content::-webkit-scrollbar {
    width: 4px;
  }

  .k12-bottom-sheet-content::-webkit-scrollbar-track {
    background: transparent;
  }

  .k12-bottom-sheet-content::-webkit-scrollbar-thumb {
    background: #dddddd;
    border-radius: 2px;
  }


  /* ==========================================================================
     Preview Cards (shown in collapsed state)
     ========================================================================== */

  .k12-bottom-sheet-preview {
    display: none;
    gap: 12px;
    padding: 44px 14px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  body.k12-search-page .k12-bottom-sheet-preview {
    display: none !important;
  }

  .k12-bottom-sheet-preview::-webkit-scrollbar {
    display: none;
  }

  .k12-bottom-sheet.is-expanded .k12-bottom-sheet-preview {
    display: none;
  }

  .k12-bottom-sheet-preview-card {
    flex-shrink: 0;
    width: 140px;
    scroll-snap-align: start;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .k12-bottom-sheet-preview-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  .k12-bottom-sheet-preview-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .k12-bottom-sheet-preview-card__info {
    padding: 8px;
  }

  .k12-bottom-sheet-preview-card__name {
    font-size: 12px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .k12-bottom-sheet-preview-card__price {
    font-size: 11px;
    color: #717171;
    margin: 0;
  }


  /* ==========================================================================
     Full Card List (shown in expanded state)
     ========================================================================== */

  .k12-bottom-sheet-list {
    padding: 24px 32px 16px; /* Extra breathing room below the fee label before the first image */
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Card styling within bottom sheet list (matches Airbnb mobile cards) */
  .k12-bottom-sheet-list .loveform-listing-card {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
  }

  /* Image styling - Airbnb uses 20:19 ratio with rounded top corners */
  .k12-bottom-sheet-list .loveform-listing-card__image {
    aspect-ratio: 20 / 19;
    border-radius: 12px;
    overflow: hidden;
  }


  /* ==========================================================================
     Minimized State Info
     ========================================================================== */

  .k12-bottom-sheet-minimized-info {
    display: none;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #222222;
  }

  /* Show schools count when fully minimized (Airbnb pattern) */
  /* Target: ~58px total to match bottom nav (16px handle + 42px info row) */
  .k12-bottom-sheet.is-minimized .k12-bottom-sheet-minimized-info {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    text-align: center;
    z-index: 1;
    pointer-events: none;
    padding: 4px 16px 4px;
    font-size: 14px;
    font-weight: 400;
    color: #222222;
  }


  /* ==========================================================================
     Pagination Controls (Mobile Carousel Style)
     ========================================================================== */

  .k12-bottom-sheet-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 128px;
    padding: 20px 16px;
    border-top: 1px solid #ebebeb;
  }

  .k12-bottom-sheet-pagination-btn {
    width: var(--touch-target-comfortable);
    height: var(--touch-target-comfortable);
    border-radius: 50%;
    border: 1px solid #dddddd;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .k12-bottom-sheet-pagination-btn:active:not(:disabled) {
    background: #f7f7f7;
    border-color: #222222;
  }

  .k12-bottom-sheet-pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .k12-bottom-sheet-pagination-btn svg {
    width: 12px;
    height: 12px;
    stroke: #222222;
    stroke-width: 3;
    fill: none;
  }

  .k12-bottom-sheet-pagination-info {
    font-size: 14px;
    color: #222222;
    display: none;
  }


  /* ==========================================================================
     Loading State
     ========================================================================== */

	  .k12-bottom-sheet-loading {
	    display: flex;
	    flex-direction: column;
	    align-items: stretch;
	    justify-content: flex-start;
	    padding: 12px 14px 16px;
	    gap: 12px;
	  }

	  .k12-bottom-sheet-loading-item {
	    display: flex;
	    gap: 12px;
	    align-items: center;
	    padding: 12px;
	    border-radius: 14px;
	    background: #ffffff;
	    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	  }

	  .k12-bottom-sheet-loading-item__image {
	    width: 72px;
	    height: 72px;
	    border-radius: 12px;
	    flex: 0 0 auto;
	  }

	  .k12-bottom-sheet-loading-item__body {
	    flex: 1;
	    min-width: 0;
	    display: flex;
	    flex-direction: column;
	    gap: 10px;
	  }

	  .k12-bottom-sheet-loading-item__line {
	    width: 88%;
	  }

	  .k12-bottom-sheet-loading-item__line--short {
	    width: 58%;
	  }

	  .k12-bottom-sheet-loading-spinner {
	    width: 24px;
	    height: 24px;
	    border: 2px solid #ebebeb;
    border-top-color: #2AC8C8;
    border-radius: 50%;
    animation: k12-sheet-spin 0.8s linear infinite;
  }

  @keyframes k12-sheet-spin {
    to {
      transform: rotate(360deg);
    }
  }


  /* ==========================================================================
     Empty State
     ========================================================================== */

  .k12-bottom-sheet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
  }

  .k12-bottom-sheet-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: #b0b0b0;
  }

  .k12-bottom-sheet-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 8px;
  }

  .k12-bottom-sheet-empty-text {
    font-size: 14px;
    color: #717171;
    margin: 0;
  }

  /* ==========================================================================
     Scroll Model (Airbnb-like): One native scroll surface + snap points
     Enabled only when markup includes `.k12-sheet-scroll-model`.
     ========================================================================== */

  .k12-bottom-sheet-container.k12-sheet-scroll-model {
    pointer-events: auto;
  }

  .k12-bottom-sheet-container.k12-sheet-scroll-model .k12-bottom-sheet-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Keep scrolling fully native/inertial (Airbnb-like). JS handles the small assisted snap zones. */
    overscroll-behavior: auto;
    touch-action: pan-y;
    pointer-events: auto;
    scroll-behavior: auto;
  }

  .k12-bottom-sheet-container.k12-sheet-scroll-model .k12-bottom-sheet-snap {
    width: 1px;
    min-height: 1px;
    pointer-events: none;
  }

  /* Snap heights are derived from the existing top offsets:
     - minimized snap at scrollTop=0
     - collapsed snap at scrollTop=(minimizedTop - collapsedTop)
     - expanded snap at scrollTop=(minimizedTop - expandedTop) */
  .k12-bottom-sheet-container.k12-sheet-scroll-model .k12-bottom-sheet-snap--minimized {
    height: clamp(0px, calc(var(--bs-minimized-top) - var(--bs-collapsed-top)), 9999px);
  }

  .k12-bottom-sheet-container.k12-sheet-scroll-model .k12-bottom-sheet-snap--collapsed {
    height: clamp(0px, calc(var(--bs-collapsed-top) - var(--bs-expanded-top)), 9999px);
  }

  .k12-bottom-sheet-container.k12-sheet-scroll-model .k12-bottom-sheet-snap--expanded {
    height: clamp(1px, var(--bs-expanded-top), 9999px);
  }

  /* Neutralize the old "drag by top" positioning in scroll model. */
  .k12-bottom-sheet-container.k12-sheet-scroll-model .k12-bottom-sheet {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    height: auto;
    max-height: none;
    transition: none;
    will-change: auto;
    margin: 0;
    min-height: 100vh;
  }

  /* The content participates in the single scroll surface (no nested scrolling). */
  .k12-bottom-sheet-container.k12-sheet-scroll-model .k12-bottom-sheet-content {
    flex: 0 0 auto;
    overflow: visible;
    padding-bottom: calc(var(--bottom-nav-height) + var(--bottom-nav-safe-area) + 24px);
  }

  .k12-bottom-sheet-container.k12-sheet-scroll-model .k12-bottom-sheet-handle {
    /* Don't block native scroll on iOS. */
    touch-action: pan-y;
  }
}