/* Basic site styles to complement Bootstrap and match a billing site look */
:root{
  --brand:#0d6efd;
  --brand-dark:#0b5ed7;
}
body{
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color:#e9ecefdb;
}
.navbar-brand{
  font-weight:700;
  letter-spacing:0.2px;
}
.bg-primary{
  background-color:var(--brand) !important;
}
.btn-outline-light{
  border-color:rgba(255,255,255,0.6);
}
footer h5{font-weight:700}
/* Hero-like page title */
.page-hero{
    background: linear-gradient(90deg, rgba(13,110,253,0.08), rgba(13,110,253,0.02));
    padding: 48px 0;
  border-radius:6px;
}

@media (max-width:576px){
  .navbar .btn{padding:.35rem .5rem}
}

/* Custom navbar styling for a cleaner billing UI */
.navbar-custom{
    background: linear-gradient(90deg, rgba(13,110,253,0.95), rgba(58,123,213,0.95));
    box-shadow: 0 6px 18px rgba(10, 38, 83, 0.12);
    z-index: 1030;
}
.navbar-custom .navbar-brand{
        color: #fff;
        font-size: 1.1rem;
    }
.navbar-custom .nav-link{
        color: rgba(255,255,255,0.95);
        padding: .5rem .75rem;
        border-radius: .35rem;
        transition: background-color .18s ease, transform .08s ease;
    }
.navbar-custom .nav-link:hover{
            background: rgba(255,255,255,0.06);
            transform: translateY(-2px);
            color: #fff;
        }
.navbar-custom .nav-link.active{
            background: rgba(255,255,255,0.12);
        }
.navbar-custom .fa-solid{
        color: rgba(255,255,255,0.9);
    }

@media (max-width:991px){
  .navbar-brand.ms-auto{margin-left:0.5rem}
}

/* Ensure menu items show horizontally on large screens and aren't hidden */
@media (min-width:992px){
  .navbar-custom .navbar-collapse{display:flex !important}
  .navbar-custom .navbar-nav{flex-direction:row;align-items:center}
  .navbar-custom .navbar-nav .nav-item{margin-right:0.4rem}
}

/* Pricing Table Wrapper */
.pricing-table {
    border-collapse: separate;
    border-spacing: 0;
    background: #f5f5f5;
    font-size: 14px;
}

/* Header */
.pricing-thead th {
    background: #337ab7; /* Blue header */
    color: #fff;
    font-weight: 600;
    padding: 14px 10px;
    border: none;
    font-size: 18px;
}

/* Feature column */
.pricing-table td:first-child,
.pricing-table th:first-child {
    text-align: left;
    padding-left: 15px;
    font-weight: 500;
}

/* Body rows */
.pricing-table tbody tr {
    background: #eeeeee;
}

    .pricing-table tbody tr + tr td {
        border-top: 4px solid #ffffff; /* white separators like image */
    }

/* Cells */
.pricing-table td {
    padding: 14px 8px;
    border: none;
    vertical-align: middle;
    font-size: 16px;
}

/* Icons */
.price-icon {
    font-size: 22px;
    font-weight: bold;
}

    .price-icon.success {
        color: #1e88e5; /* blue tick like image */
    }

    .price-icon.danger {
        color: #e53935; /* red cross */
    }

/* Text badge (Unlimited / Up to...) */
.pricing-badge {
    background: transparent;
    color: #000;
    font-weight: 500;
    font-size: 14px;
}

/* Hover (optional – subtle) */
.pricing-table tbody tr:hover {
    background: #e6e6e6;
}