/* 
 * Mobile-specific CSS overrides for SecondStepDetails and CustomizeCard components
 * Ensures proper card scaling and content handling on mobile devices
 * Also applies to /schedule-card page using CustomizeCard component
 */

/* Mobile devices - Primary breakpoint */
@media screen and (max-width: 768px) {
  /* Only override the problematic fixed heights, preserve card structure */
  
  /* Fix the main container to match card image aspect ratio (500x700) */
  /* Only apply to CustomizeCard components, not EditCarddetails */
  .card-navigator #editorPad.main_customize_container {
    /* Calculate dimensions for responsive container */
    width: calc(100vw - 30px) !important; /* 15px padding each side */
    max-width: 500px !important;
    
    /* REMOVED: Conflicts with JavaScript scaling
    aspect-ratio: 500 / 700 !important;
    min-height: calc((100vw - 30px) * 1.4) !important;
    max-height: 700px !important;
    max-height: min(700px, calc(100vh - 200px)) !important;
    */
    height: auto !important;
    
    /* Center the card properly */
    margin: 0 auto !important;
    
    /* Allow JavaScript scaling while preventing CSS conflicts */
    transform-origin: center center !important;
  }

  /* Fix the editablearea container for CardNavigator components */
  .card-navigator #editablearea {
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 15px !important;
    overflow: visible !important;
  }

  /* Override scrollCSS height constraints */
  #editablearea.scrollCSS {
    height: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Ensure content doesn't overflow the scaled card */
  #editorPad .elementsPreviousAdded {
    max-width: 100% !important;
    word-wrap: break-word !important;
  }

  /* Ensure button positioning works with scaled content */
  #editorPad .resize-drag {
    max-width: 100% !important;
  }

  /* Mobile navigation elements for CustomizeCard component */
  /* Navigation arrows - make them touch-friendly */
  .arrowCursor {
    padding: 10px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .arrowCursor img {
    max-width: 24px !important;
    max-height: 24px !important;
  }

  /* Page dropdown - mobile optimization */
  .pageNumber {
    font-size: 14px !important;
  }

  .pageDropBtn {
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
  }

  .pageDropBtnSvg {
    font-size: 18px !important;
  }

  /* Ensure pagination text doesn't wrap */
  .pageNumber label {
    white-space: nowrap !important;
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* Navigation row spacing for both desktop and mobile views */
  .desktopviewcustomerecieve .row.justify-content-center,
  .mobileviewcustomerecieve .row.justify-content-center {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  /* Mobile carousel specific fixes */
  .mobileviewcustomerecieve .carousel-root {
    height: auto !important;
  }

  .mobileviewcustomerecieve .carousel-slider {
    height: auto !important;
  }

  .mobileviewcustomerecieve .slider-wrapper {
    height: auto !important;
  }

  .mobileviewcustomerecieve .slider {
    height: auto !important;
  }

  /* Ensure mobile pagination is visible */
  .mobileviewcustomerecieve .card-pagination {
    display: flex !important;
    visibility: visible !important;
    margin-top: 20px !important;
  }

  /* Mobile carousel container */
  .mobile-card-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix carousel root sizing issues */
  .mobileviewcustomerecieve .carousel-root,
  .mobileviewcustomerecieve .carousel-root * {
    box-sizing: border-box !important;
  }

  /* Ensure carousel respects card container dimensions */
  .mobileviewcustomerecieve #editablearea .carousel-root {
    width: 100% !important;
    height: auto !important;
  }

  /* Make sure pagination controls have proper z-index and are always visible */
  .mobileviewcustomerecieve .card-pagination {
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
  }

  /* Fix setc98 element height issue - should scale with container */
  .setc98 {
    width: 100% !important;
    max-height: none !important;
  }

  /* Ensure all card images scale properly within the card container */
  #editorPad .setc98,
  .main_customize_container .setc98 {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  
  /* Override the fixed height on card pages for mobile */
  .main_customize_container li.card-page,
  .main_customize_container li.slide-in-left,
  .main_customize_container li.slide-in-right {
    height: auto !important;
  }
  
  /* Ensure only visible pages take space */
  .main_customize_container li[style*="display: none"] {
    height: 0 !important;
  }

  /* CardNavigator pagination visibility */
  .card-navigator .d-flex {
    display: flex !important;
    visibility: visible !important;
  }

  /* Ensure carousel dots are positioned correctly */
  .carousel-buttons {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
  }


}

/* Mobile layout arrangement improvements - minimal spacing/alignment fixes only */
@media screen and (max-width: 768px) {
  /* Fix form field heights for consistent alignment */
  .timeZonemrg .date-control,
  .timeZonemrg .form-control,
  .timeZonemrg select {
    height: 48px !important;
    line-height: 48px !important;
    box-sizing: border-box !important;
  }
  
  /* Fix reminder section inputs to have consistent height */
  .input-group select.form-control {
    height: 48px !important;
    line-height: 1.2 !important;
    padding: 8px 12px !important;
  }
  
  /* Align reminder text properly */
  .col-md-6.col-6[style*="marginLeft: 60px"] h5 {
    line-height: 48px !important;
    margin: 0 !important;
  }
  
  /* Fix bottom button spacing */
  .mobileViewAction {
    margin-top: 30px !important;
  }
  
  .mobileViewAction .btnWidth {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  /* Demo page specific navigation styling */
  .demo-page-navigator {
    margin-top: 20px !important;
  }
}

/* Small mobile devices - Additional scaling adjustments */
@media screen and (max-width: 576px) {
  #editablearea {
    padding: 10px !important;
  }

  #editablearea .main_customize_container,
  #editorPad.main_customize_container {
    width: calc(100vw - 20px) !important; /* 10px padding each side */
  }

  #editorPad {
    --scale-factor: min(1, (100vw - 20px) / 450px);
  }

  /* Smaller navigation elements for small screens */
  .pageNumber {
    font-size: 12px !important;
  }

  .pageNumber label {
    font-size: 12px !important;
  }

  .pageDropBtn {
    min-height: 40px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
  }

  .arrowCursor {
    padding: 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .arrowCursor img {
    max-width: 20px !important;
    max-height: 20px !important;
  }
}

/* Very small mobile devices - Ultra compact scaling */
@media screen and (max-width: 375px) {
  #editablearea {
    padding: 8px !important;
  }

  #editablearea .main_customize_container,
  #editorPad.main_customize_container {
    width: calc(100vw - 16px) !important; /* 8px padding each side */
  }

  #editorPad {
    --scale-factor: min(1, (100vw - 16px) / 450px);
  }

  /* Ultra compact navigation for very small screens */
  .pageNumber {
    font-size: 11px !important;
  }

  .pageNumber label {
    font-size: 11px !important;
  }

  .pageDropBtn {
    min-height: 36px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
  }

  .pageDropBtnSvg {
    font-size: 16px !important;
  }

  .arrowCursor {
    padding: 6px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .arrowCursor img {
    max-width: 18px !important;
    max-height: 18px !important;
  }
}

/* Ensure desktop styles are not affected */
@media screen and (min-width: 769px) {
  /* Reset any mobile overrides for desktop */
  #editablearea {
    height: 640px;
    padding: 0;
  }

  #editorPad {
    transform: none !important;
    width: 450px !important;
  }
}

/* Editable component hover glow */
.elementsPreviousAdded.editable-glow {
  transition: box-shadow 0.2s ease;
}
.elementsPreviousAdded.editable-glow:hover {
  box-shadow: 0 0 8px rgba(129, 219, 205, 0.5);
  border-radius: 4px;
}