/* Responsive CSS for 3-card pricing table */

/* Base positioning for 3 cards - Desktop */
@media only screen and (min-width: 768px) {
  .pricing-table-dig .pr-content {
    position: relative;
    min-height: 500px;
    /* Ensure container is wide enough or centered */
    max-width: 800px;
    margin: 0 auto;
  }

  /* Common styles for all cards */
  .pricing-table-dig .pr-content .pr-tab {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s ease;
    width: 370px;
    /* Ensure fixed width for calculation */
    min-height: 550px;
    /* Ensure consistent height for stacking effect */
    transform-origin: top center;
    /* Scale from top so bottoms show length difference */
    background-color: #f2f2f2 !important;
    /* Force solid background */
  }

  /* Card 1 - Left (Front) */
  .pricing-table-dig .pr-content .pr-tab:nth-child(1) {
    transform: scale(1.0) translateX(0px);
    z-index: 3;
    /* Highest z-index for front */
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Softer shadow */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
    /* Clip content */
    background-color: #f2f2f2 !important;
    /* Ensure background is applied */
  }

  /* Card 2 - Center (Middle) */
  .pricing-table-dig .pr-content .pr-tab:nth-child(2) {
    transform: scale(0.95) translateX(110px);
    z-index: 2;
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    overflow: hidden;
    background-color: #f2f2f2 !important;
    /* Ensure background is applied */
  }

  /* Card 3 - Right (Back) */
  .pricing-table-dig .pr-content .pr-tab:nth-child(3) {
    transform: scale(0.9) translateX(220px);
    z-index: 1;
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    overflow: hidden;
    background-color: #f2f2f2 !important;
    /* Ensure background is applied */
  }

  /* Active card overrides - Pops to front */
  .pricing-table-dig .pr-content .pr-tab.active-tab {
    transform: scale(1.05) translateX(110px) !important;
    /* Center position by default, overridden below */
    z-index: 10 !important;
    opacity: 1 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    /* Softer but deep shadow */
    border-radius: 15px;
  }

  /* Specific overrides to shift non-active cards when one is active */
  /* If Card 1 is active */
  .pricing-table-dig .pr-content .pr-tab:nth-child(1).active-tab {
    transform: scale(1.05) translateX(0px) !important;
  }

  /* If Card 2 is active */
  .pricing-table-dig .pr-content .pr-tab:nth-child(2).active-tab {
    transform: scale(1.05) translateX(110px) !important;
  }

  /* If Card 3 is active */
  .pricing-table-dig .pr-content .pr-tab:nth-child(3).active-tab {
    transform: scale(1.05) translateX(220px) !important;
  }
}

/* Stacked Tab Buttons */
.pricing-table-dig .tab-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align left */
  gap: 15px;
}

.pricing-table-dig .tab-btns .tab-btn {
  background-color: transparent !important;
  /* Transparent background */
  border: 1px solid #e0e0e0 !important;
  /* Subtle border */
  color: #040d2b !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  width: 100%;
  /* Full width of container */
  max-width: 400px;
  /* Max width constraint */
  text-align: center;
  margin: 0 !important;
  /* Remove default margins */
  border-radius: 8px;
  /* Rounded buttons */
  transition: all 0.3s ease;
  padding: 10px 15px !important;
  /* Reduced padding */
  white-space: nowrap;
}

.pricing-table-dig .tab-btns .tab-btn:hover {
  border-color: #040d2b !important;
  /* Darker border on hover */
}

.pricing-table-dig .tab-btns .tab-btn.active-btn {
  background-color: #040d2b !important;
  border-color: #040d2b !important;
  color: #ffffff !important;
  box-shadow: 0 5px 15px rgba(4, 13, 43, 0.2);
  /* Shadow for active button */
}

/* Title Styling */
.pricing-table-dig .price-title .heading {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #040d2b !important;
  margin-bottom: 5px !important;
  /* Reduced space after title */
}

/* Description Styling */
.pricing-table-dig .price-title .desc {
  font-family: 'Garamond', serif !important;
  /* Changed to Garamond */
  font-size: 16px !important;
  color: #040d2b;
  /* Ensure color matches */
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  /* Added space before buttons */
  line-height: 1.4;
}

/* Card Buttons Styles */
.pricing-table-dig .price-body .btn {
  background-color: #040d2b !important;
  border-color: #040d2b !important;
  /* Match border to background */
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  /* Smaller font */
  border-radius: 8px;
  /* Rounded card buttons */
  padding: 10px 20px !important;
  /* Reduced padding */
}

/* Tablet responsive */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
  .pricing-table-dig .price-column {
    width: 320px;
  }

  .pricing-table-dig .pr-content .pr-tab:nth-child(1) {
    transform: scale(0.75, 0.75) translateX(-80px);
  }

  .pricing-table-dig .pr-content .pr-tab:nth-child(2) {
    transform: scale(0.75, 0.75) translateX(80px);
  }

  .pricing-table-dig .pr-content .pr-tab:nth-child(3) {
    transform: scale(0.75, 0.75) translateX(240px);
  }

  .pricing-table-dig .pr-content .pr-tab.active-tab {
    transform: scale(1) translateX(160px) !important;
  }

  .pricing-table-dig .price-column .col-inner {
    padding: 25px 50px;
  }
}

/* Mobile responsive - HIDE non-active cards */
@media only screen and (max-width: 767px) {
  .pricing-table-dig .pr-content {
    display: block;
    position: relative;
    min-height: auto;
  }

  /* Hide all cards by default on mobile */
  .pricing-table-dig .pr-content .pr-tab {
    position: relative !important;
    transform: none !important;
    opacity: 0 !important;
    width: 100%;
    max-width: 370px;
    margin: 0 auto;
    display: none !important;
    z-index: 1 !important;
  }

  /* Show ONLY the active card on mobile */
  .pricing-table-dig .pr-content .pr-tab.active-tab {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 5 !important;
  }

  .pricing-table-dig .tab-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pricing-table-dig .tab-btns .tab-btn {
    margin: 5px;
    flex: 0 1 auto;
  }

  .pricing-table-dig.style1 .price-title {
    padding-left: 0;
    text-align: center;
  }

  .pricing-table-dig .price-column {
    width: 100%;
  }

  .pricing-table-dig .col-md-6 {
    overflow: visible;
  }
}

/* Small mobile */
@media only screen and (max-width: 480px) {
  .pricing-table-dig .tab-btns .tab-btn {
    font-size: 14px;
    padding: 10px 20px;
  }

  .pricing-table-dig .price-column .col-inner {
    padding: 25px 40px;
  }
}