/* ==========================================
   RENTAL RATES PAGE ONLY
   ========================================== */
/* ==========================================
   PACKAGE + GEAR COLUMN STYLING
   ========================================== */

/* Package column (1st column) */
.rental-rates-page .table tbody td:first-child {
  color: #000 !important;
  font-weight: 600;
}

/* Gear column (2nd column) — White */
.rental-rates-page .table tbody td:nth-child(2) {
  color: #000 !important;
}

/* ==========================================
   FORCE OVERRIDES FOR THIS PAGE
   ========================================== */
/* Ensure the age-group title text is visible */
.rental-rates-page .rental-age-card .card-header h5,
.rental-rates-page .rental-age-card .card-header h4,
.rental-rates-page .rental-age-card .card-header h3 {
  color: #fff !important;
  border-bottom: 0 !important;   /* stops your global heading underline */
  padding-bottom: 0 !important;  /* prevents the extra spacing from global heading styles */
  margin-bottom: 0 !important;
}

/* Card header (Adult / Child) */
.rental-rates-page .rental-age-card > .card-header {
    background-color: #000 !important;
    color: #fff !important;
}

/* Table header */
.rental-rates-page .rental-age-card .table thead th {
    background-color: #fff !important;
    color: #000 !important;
}

/* ==========================================
   PRIMARY BUTTONS — BLACK + PINK (PAGE ONLY)
   ========================================== */

/* ==========================================
   PRICE BUTTONS — BLACK BG + PINK TEXT
   (Rental page only)
   ========================================== */

.rental-rates-page .btn-outline-primary {
  background-color: #000 !important;
  border-color: #000 !important;
  color: var(--color-text-on-dark) !important;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}


.rental-rates-page .btn-outline-primary:hover {
  background-color: #111 !important;
  border-color: #111 !important;
  color: var(--color-primary-hover) !important;
  transform: translateY(-1px);
}


.rental-rates-page .btn-outline-primary:focus,
.rental-rates-page .btn-outline-primary:active {
  background-color: #000 !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(231, 11, 169, 0.35) !important;
}

/* Green add button */
.rental-rates-page button.btn.btn-outline-success {
    color: #28a745 !important;
    border-color: #28a745 !important;
}

.rental-rates-page button.btn.btn-outline-success:hover {
    background-color: #28a745 !important;
    color: #fff !important;
}

/* Table body */
.rental-rates-page .table td {
    vertical-align: middle;
}

/* Make buttons look cleaner */
.rental-rates-page .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* Slight shadow consistency */
.rental-rates-page .card.shadow-sm {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.rental-rates-page .rental-age-card .card-header {
    background-color: #000 !important;
    color: var(--color-bg-surface) !important;
}

/* ==========================================
   ADDON TABLE STYLING
   ========================================== */

/* Addon table header */
.rental-rates-page h3 {
  color: #ffffff !important;
}

/* Addon name column */
.rental-rates-page table tbody td.text-light,
.rental-rates-page table tbody td:first-child {
  color: var(--color-text-on-dark) !important;
  font-weight: 500;
}

/* Addon table header cells */
.rental-rates-page table thead th {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-weight: 600;
}

/* ==========================================
   RENTAL PACKAGE CAROUSEL FIX
   ========================================== */

/* Container sizing */
.rental-rates-page .rental-package-container {
  min-width: 260px;
  max-width: 300px;

  min-height: 220px;      /* 👈 force consistent height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  overflow: hidden;
}

/* Package title wrapping */
.rental-rates-page .rental-package-container h5 {
  white-space: normal;
  word-break: break-word;
  font-size: 1rem;
}

/* Gear list scroll area */
.rental-rates-page .rental-package-gears {
  overflow-y: auto;
  max-height: 130px;   /* 👈 keeps height stable */
  padding-right: 4px;
}

/* Gear text wrapping */
.rental-rates-page .gear-item {
  white-space: normal;
  word-break: break-word;
  font-size: 0.85rem;
  line-height: 1.3;
}
.rental-rates-page .rental-package-container {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rental-rates-page .rental-package-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.rate-link {
    transition: all 0.2s ease;
}

.rate-link:hover {
    transform: scale(1.05);
    background-color: #0d6efd;
    color: white;
    cursor: pointer;
}
/* =========================================
   RENTAL SEASON SELECTOR
========================================= */

.rental-season-selector {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}


/* =========================================
   TILE
========================================= */

.rental-season-tile {
    cursor: pointer;

    transition: transform 0.2s ease;
}

.rental-season-tile:hover {
    transform: translateY(-3px);
}


/* =========================================
   IMAGE
========================================= */

.rental-season-image {
    width: 180px;
    height: 120px;

    object-fit: cover;

    border-radius: 16px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-size: 1rem;

    border: 3px solid transparent;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}


/* =========================================
   ACTIVE
========================================= */

.rental-season-tile.active .rental-season-image {
    border-color: #0d6efd;

    transform: scale(1.04);
}


/* =========================================
   CONTENT PANELS
========================================= */

.rental-season-content {
    display: none;
}

.rental-season-content.active {
    display: block;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .rental-season-image {
        width: 140px;
        height: 100px;
    }

}
/* =========================================
   PAGE HEADER
========================================= */

.rental-page-title {
    font-size: 3rem;
    font-weight: 800;

    margin-bottom: 10px;
}


/* =========================================
   SEASON SELECTOR
========================================= */

.rental-season-selector {
    display: flex;
    justify-content: center;
    gap: 24px;

    flex-wrap: wrap;

    margin-bottom: 50px;
}


/* =========================================
   TILE
========================================= */

.rental-season-tile {
    cursor: pointer;

    transition: transform 0.2s ease;
}

.rental-season-tile:hover {
    transform: translateY(-4px);
}


/* =========================================
   ACTIVE TILE
========================================= */

.rental-season-tile.active .rental-season-image,
.rental-season-tile.active .rental-season-image-wrapper {
    outline: 4px solid #0d6efd;
    outline-offset: 4px;
}


/* =========================================
   IMAGE WRAPPER
========================================= */

.rental-season-image-wrapper {
    position: relative;

    width: 240px;
    height: 160px;

    border-radius: 18px;

    overflow: hidden;
}


/* =========================================
   IMAGE
========================================= */

.rental-season-image {
    width: 240px;
    height: 160px;

    object-fit: cover;

    border-radius: 18px;

    transition: transform 0.3s ease;
}

.rental-season-image:hover {
    transform: scale(1.05);
}


/* =========================================
   OVERLAY
========================================= */



/* =========================================
   FALLBACK
========================================= */

.fallback-season,
.all-season-card {
    width: 240px;
    height: 160px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #111;
    color: white;

    font-size: 1.2rem;
    font-weight: 700;
}


/* =========================================
   CONTENT
========================================= */

.rental-season-content {
    display: none;
}

.rental-season-content.active {
    display: block;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .rental-season-image-wrapper,
    .rental-season-image,
    .fallback-season,
    .all-season-card {
        width: 100%;
        max-width: 320px;
        height: 140px;
    }

    .rental-page-title {
        font-size: 2.2rem;
    }
}