/* Mobile-specific styles */
@media (max-width: 768px) {
  /* Hide edges of left and right cards */
  .carousel-container {
    overflow: hidden;
    padding: 0 0px;
    margin-top: 0px;
  }
  
  .glide__track {
    overflow: hidden;
    padding: 0 0px;
    margin-top: -65px;
    padding-top: 0px;
  }
  
  /* Ensure all slides have same height on mobile */
  .glide__slide {
    display: flex;
    align-items: flex-start;
  }
  
  /* Ensure images maintain aspect ratio */
  .glide_card .left_img {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    border-radius: 10px;
  }
  
  /* Adjust card spacing to ensure edges are not visible */
  .glide_card {
    margin: 0px 0px;
    padding: 15px 15px;
    /* Mobile height consistency using flexbox */
    min-height: 180px; /* Smaller minimum height for mobile */
    flex: 1;
    align-self: stretch;
  }
  
  /* Mobile content layout */
  .glide_card .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Ensure content items don't stretch */
    align-items: flex-start;
  }
  
  /* Adjust arrow position to ensure visibility on mobile */
  .glide__arrow--left {
    left: 10px;
  }
  
  .glide__arrow--right {
    right: 10px;
  }
  
  /* Adjust arrow size for mobile */
  .glide__arrow {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
  
  .glide__arrow img {
    width: 16px;
    height: 16px;
  }
  
  /* Adjust indicator position */
  .glide__bullets {
    bottom: 20px;
  }

  .glide_card .tag {
    font-size: 16px;
    /* Prevent tag from being stretched on mobile */
    width: fit-content;
    flex-shrink: 0;
    align-self: flex-start;
    /* Allow tags to wrap on mobile */
    white-space: normal; /* Allow text wrapping */
    margin-right: 6px; /* Smaller space for mobile */
  }
  
  /* Tag container to keep them inline on mobile */
  .glide_card .content > .tag {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 8px;
  }
  
  /* Tag container for multiple tags on mobile */
  .glide_card .tag-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on mobile */
    gap: 6px;
    margin-bottom: 8px;
    align-items: flex-start; /* Align to top when wrapping */
  }
  
  .glide_card .tag-container .tag {
    margin: 0;
    flex-shrink: 0;
    /* Allow tags to wrap on mobile */
    white-space: normal; /* Allow text wrapping */
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .glide_card {
      flex-direction: column;
      padding: 30px 25px;
      gap: 20px;
      margin: 0px 0px;
  }

  .glide_card .left_img {
      width: 100%;
      height: auto;
      object-fit: contain;
  }

  .glide_card .title {
      font-size: 24px;
      margin-bottom: 15px;
  }

  .glide_card .tag {
      font-size: 16px;
  }

  .glide_card .time {
      font-size: 18px;
      margin-top: 0px;
      margin-bottom: 15px;
  }
}

/* Mobile optimization */
@media (max-width: 480px) {
  .price-card {
      margin: 20px;
      padding: 20px;
  }
  
  .price-content {
      margin-left: 85px;
  }
  
  .payment-note {
      margin-left: 85px;
      font-size: 11px;
  }
  
  .monthly-badge {
      width: 60px;
      height: 60px;
      font-size: 12px;
      left: 20px;
      top: 40px;
  }
}

/* Tablet optimization */
@media (min-width: 481px) and (max-width: 768px) {
  .price-card {
      width: 85vw;
  }
}