body,
.inflanar-header__menu .nav-menu li a {
  font-family: 'Poppins', sans-serif !important;
}

#checkout-section {
  display: flex;
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
  min-height: 100vh; /* Full viewport height */
  background: #f9fafb; /* Soft background */
  padding: 20px;
}

.checkout-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 20px;
  width: 100%;
  border-top: 4px solid #e11d48;
}
.checkout-card h5 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}
.btn-campaign {
  background: #e11d48;
  color: white;
  border-radius: 8px;
  font-weight: 600;
  width: 100%;
  padding: 12px;
  transition: all 0.3s ease;
}
.btn-campaign:hover {
  background: #be123c;
}
.invoice-section {
  display: none;
  background: #f9fafb;
  border-radius: 8px;
  padding: 15px;
  margin-top: 10px;
  border: 1px dashed #d1d5db;
}

.card {
  border-radius: 10px;
}

.fw-semibold {
  font-weight: 600 !important;
}

/* Table Wrapper */
.table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

/* Header */
.table thead tr {
  background: #f8f9fa;
  border-radius: 10px;
}

.table thead th {
  font-weight: 600;
  letter-spacing: 0.5px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Rows */
.table tbody tr {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.table tbody tr td {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  vertical-align: top;
}

/* Image */
.table img {
  border-radius: 8px;
  width: 80px;
  height: 80px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Service Title */
.table .fw-bold.fs-6 {
  font-size: 17px !important;
  font-weight: 600 !important;
}

/* Small Text */
.table .small.text-muted {
  font-size: 13px !important;
}

/* Price and Subtotal */
.table td.text-end span,
.table td.text-end i {
  font-size: 16px;
}

.table td.text-success {
  font-size: 17px;
  font-weight: 700;
}

/* Total Rows */
.table tbody tr.bg-light {
  background: #f1f3f5 !important;
}

.table tbody tr.bg-light td {
  font-size: 16px !important;
}

.table tbody tr.bg-light.border-bottom td {
  font-size: 18px !important;
  border-bottom: 3px solid #dee2e6 !important;
}

/* Empty Cart Message */
.table tbody tr td.text-muted {
  font-size: 18px;
}

/* Badge Style */
.badge {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 5px;
}

/* Remove gap of table-light header border */
.table-light th {
  border-bottom: none !important;
}

.btn-campaign:hover {
  color: #fff;
}


/* =========================
   MOBILE (≤ 480px)
   ========================= */
@media (max-width: 480px) {
    #checkout-section {
        padding: 20px 10px 50px 10px;
        align-items: unset;
        min-height: unset;
    }

    .checkout-card h5 {
        font-size: 12px;
    }
    .payment-option {
        padding: 6px;
    }
    .payment-option img {
        width: 120px;
        height: 25px;
        margin-bottom: 5px;
    }

    .payment-option p {
        font-size: 12px;
    }

    .inflanar-form-input input{
        padding: 8px 8px;
        height: 40px;
    }

    .input-with-link a {
        top: 53%;
    }

    .table img {
        height: unset; 
    }

    .table .fw-bold.fs-6 {
        font-size: 12px !important;
    }

    .table .small.text-muted {
        font-size: 10px !important;
    }

    .table .display-contents{
        display: contents;
    }
    .badge {
        padding: 5px 5px;
        font-size: 10px;
    }

    .table td.text-end span, .table td.text-end i, .table td.text-success {
        font-size: 11px;
    }

    .table tbody tr.bg-light td {
        font-size: 13px !important;
    }

    .table tbody tr.bg-light.border-bottom td, .table td.total-price span {
        font-size: 15px !important;
    }

    .btn-campaign {
      padding: 8px;
      font-size: 12px;
    }
}

/* =========================
   TABLET (481px – 768px)
   ========================= */
@media (min-width: 481px) and (max-width: 768px) {
    #checkout-section {
        padding: 50px 0px 100px 0px;
    }
}

/* =========================
   SMALL LAPTOP (769px – 1024px)
   ========================= */
@media (min-width: 769px) and (max-width: 1024px) {
    #checkout-section {
        padding: 50px 0px 100px 0px;
    }
}

/* =========================
   DESKTOP (1025px – 1200px)
   ========================= */
@media (min-width: 1025px) and (max-width: 1200px) {
    #checkout-section {
        padding: 50px 0px 100px 0px;
    }
}

/* =========================
   LARGE / XL SCREENS (≥ 1201px)
   ========================= */
@media (min-width: 1201px) {
    #checkout-section {
        padding: 50px 0px 100px 0px;
    }
}