/* ===== RATES PAGE ===== */

.page-title {
    text-align: center;
    padding: 30px 0 15px;
  }
  .page-title h1 {
    font-size: 2rem;
    color: #034ca7;
  }
  .page-title .subtitle {
    font-size: 1rem;
    color: #555;
  }
  
  /* Rates Section */
  .rates-section {
    padding: 50px 20px;
  }
  .rates-header {
    text-align: center;
    margin-bottom: 15px;
  }
  .rates-header h2 {
    font-size: 1.5rem;
    color: #034ca7;
  }
  .rates-header p {
    color: #555;
    font-size: 0.95rem;
  }
  .rates-note {
    background: #f4f7fb;
    padding: 10px 15px;
    border-left: 4px solid #034ca7;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #333;
  }
  
  /* Table */
  .rates-table table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  .rates-table th,
  .rates-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
  }
  .rates-table th {
    background: #034ca7;
    color: #fff;
  }
  .rates-table tr:nth-child(even) {
    background: #f9f9f9;
  }
  .rates-table .section td {
    background: #eef5ff;
    font-weight: 600;
    text-align: left;
    color: #034ca7;
  }
  .badge {
    background: #ffcc00;
    color: #000;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
  }
  
  /* CTA button */
  .btn-group {
    text-align: center;
  }
/* ===== Buttons — richer styles ===== */
.btn-group { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

.btn-primary,
.btn-outline {
  --btn-radius: 12px;
  --btn-pad-y: 12px;
  --btn-pad-x: 20px;
  --btn-shadow: 0 8px 18px rgba(3,76,167,.22);
  --btn-shadow-sm: 0 3px 8px rgba(3,76,167,.18);

  display:inline-flex; align-items:center; gap:.55rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: 800; letter-spacing:.2px;
  text-decoration:none; cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn-primary {
  background:#1e6cff; color:#fff; border:none; box-shadow: var(--btn-shadow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow); background:#165ae0; }
.btn-primary:active { transform: translateY(0); box-shadow: var(--btn-shadow-sm); }
.btn-primary:focus-visible { outline:3px solid rgba(30,108,255,.35); outline-offset:2px; }

.btn-outline {
  background:#fff; color:#1e6cff; border:2px solid #1e6cff; box-shadow: 0 6px 14px rgba(0,0,0,.06);
}
.btn-outline:hover { background:#1e6cff; color:#fff; transform: translateY(-1px); }
.btn-outline:active { transform: translateY(0); }
.btn-outline:focus-visible { outline:3px solid rgba(30,108,255,.25); outline-offset:2px; }

/* Sizes (use if needed: add class .btn-lg or .btn-sm) */
.btn-lg { --btn-pad-y: 14px; --btn-pad-x: 24px; font-size:1.05rem; }
.btn-sm { --btn-pad-y: 8px;  --btn-pad-x: 14px; font-size:.95rem; }

/* Icon alignment inside buttons */
.btn-primary i, .btn-outline i { font-size: .95em; }

/* ===== Tables — premium look ===== */

/* Card container around each table */
.rates-table {
  border-radius: 14px;
  overflow:hidden;                 /* round the table top corners */
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
  background:#fff;
}

/* Table base */
.rates-table table { width:100%; border-collapse:collapse; }
.rates-table th, .rates-table td { padding:14px 12px; text-align:center; border-bottom:1px solid #eef1f5; }

/* Sticky header for long lists (mobile scroll friendly) */
.rates-table thead th{
  position: sticky; top: 0; z-index: 2;
  background:#0b3f8a; color:#fff; font-weight:800; letter-spacing:.2px;
}

/* Section rows (e.g., "City Transfers") */
.rates-table tr.section td{
  background:#eef5ff; color:#034ca7; font-weight:800; text-align:left;
  border-bottom:1px solid #d9e6ff;
}

/* Row hover + subtle zebra */
.rates-table tbody tr:nth-child(even):not(.section) { background:#fbfdff; }
.rates-table tbody tr:hover td { background:#f3f8ff; }

/* First two columns left-aligned for readability */
.rates-table td:first-child,
.rates-table td:nth-child(2),
.rates-table th:first-child,
.rates-table th:nth-child(2){ text-align:left; }

/* Currency emphasis */
.rates-table td:nth-last-child(-n+5){ font-weight:700; color:#0b1e3a; }

/* Info note bar */
.rates-note{
  display:flex; align-items:center; gap:10px;
  background:#f6f9ff; color:#2b3a55; border-left:4px solid #1e6cff;
  padding:12px 14px; border-radius:8px; margin:10px 0 16px;
}
.rates-note i{ color:#1e6cff; }

/* Section headers above tables */
.rates-header { text-align:center; padding:18px 14px; border-radius:12px 12px 0 0; }
.rates-header.one-way { background: linear-gradient(135deg,#034ca7,#1c5ed8); color:#fff; }
.rates-header.round-trip { background: linear-gradient(135deg,#034ca7,#1c5ed8); color:#fff; }
.rates-header h2{ margin:0 0 6px; font-size:1.6rem; }
.rates-header p{ opacity:.95; }

/* "Popular" badge */
.badge{
  background:#ffd24d; color:#1a1a1a; border-radius:999px; padding:2px 8px; font-weight:800; font-size:.75rem;
  vertical-align:middle; margin-left:6px;
}

/* Scroll hint for small screens */
@media (max-width: 900px){
  .rates-table{ position:relative; overflow:auto; }
  .rates-table::after{
    content:""; position:absolute; top:0; right:0; height:100%; width:24px;
    background:linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events:none;
  }
}

/* --- En-têtes sans fond bleu (titre simple) --- */
.rates-header,
.rates-header.one-way,
.rates-header.round-trip{
  background: transparent !important;
  color: inherit;
  padding: 10px 0 6px;   /* plus compact */
  border-radius: 0 !important;
  box-shadow: none !important;
}

.rates-header h2{
  margin: 0 0 6px;
  font-size: 1.6rem;
  color: #0b1e3a;        /* titre foncé lisible */
  text-align: center;
}

.rates-header p{
  margin: 0;
  color: #4b5563;        /* gris doux */
  text-align: center;
}
