:root {
      --brand: #0b5cab;
      --brand-2: #12b3c7;
      --page-bg: #f5f7fb;
      --card-border: #dbe7f3;
      --text-main: #1f2937;
      --muted: #64748b;
    }

    [x-cloak] {
      display: none !important;
    }

    body {
      background: var(--page-bg);
      color: var(--text-main);
    }

    .app-shell {
      width: 100%;
      padding: 24px;
    }

    .hero-card {
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color: white;
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 18px 45px rgba(11, 92, 171, 0.22);
    }

    .section-card {
      background: white;
      border: 1px solid var(--card-border);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    }

    .summary-card {
      position: sticky;
      top: 20px;
    }

    .locked-badge {
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.32);
      color: white;
    }

    .hero-price {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 18px;
      padding: 18px;
      min-width: 260px;
    }

    .section-eyebrow {
      font-size: 0.76rem;
      font-weight: 800;
      color: var(--brand);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }

    .benefit-hero-card {
      height: 100%;
      display: flex;
      gap: 14px;
      padding: 18px;
      border-radius: 18px;
      background: linear-gradient(180deg, #eef7ff, #ffffff);
      border: 1px solid #cfe8ff;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .benefit-icon {
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: white;
      border: 1px solid #dbeafe;
      color: var(--brand);
      font-size: 1.55rem;
    }

    .benefit-kicker {
      font-size: 0.76rem;
      color: var(--muted);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .benefit-amount {
      font-size: 1.7rem;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.1;
      margin-top: 3px;
    }

    .benefit-desc {
      color: #475569;
      font-size: 0.92rem;
      margin-top: 4px;
    }

    .benefit-mini-card {
      height: 100%;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
    }

    .benefit-mini-icon {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: var(--brand);
      font-size: 1.15rem;
    }

    .benefit-mini-title {
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
    }

    .benefit-mini-value {
      margin-top: 3px;
      font-size: 0.9rem;
      color: #64748b;
    }

    .import-status-panel {
      border: 1px solid #dbeafe;
      background: #f8fbff;
      border-radius: 16px;
      padding: 16px;
    }

    .import-icon {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 14px;
      background: #eef7ff;
      color: var(--brand);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
    }

    .import-result {
      border-radius: 14px;
      padding: 12px 14px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
    }

    .import-error-table {
      max-height: 240px;
      overflow: auto;
      border: 1px solid #fee2e2;
      border-radius: 12px;
    }

    .table-name {
      min-width: 220px;
    }

    .table-id-type {
      min-width: 120px;
    }

    .table-id {
      min-width: 165px;
    }

    .table-date {
      min-width: 150px;
    }

    .table-mobile {
      min-width: 150px;
    }

    .table-email {
      min-width: 220px;
    }

    .price-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 0;
      border-bottom: 1px dashed #e5e7eb;
      font-size: 0.92rem;
    }

    .price-row:last-child {
      border-bottom: 0;
    }

    .readonly-field {
      background: #f8fafc;
      cursor: not-allowed;
    }

    .icon-remove-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      font-size: 1.25rem;
      line-height: 1;
    }

    .icon-remove-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }

    .check-list {
      display: grid;
      gap: 9px;
      margin-top: 16px;
      padding: 12px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
    }

    .check-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;
      color: #475569;
    }

    .check-item i {
      font-size: 1.05rem;
    }

    .check-ok {
      color: #16a34a;
    }

    .check-bad {
      color: #dc2626;
    }

    .mobile-paybar {
      display: none;
    }

    @media (max-width: 1199.98px) {
      .summary-card {
        position: static;
      }
    }

    @media (max-width: 991.98px) {
      .mobile-paybar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: white;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
        padding: 12px 16px;
      }

      body {
        padding-bottom: 90px;
      }
    }

    @media (max-width: 767.98px) {
      .app-shell {
        padding: 12px;
      }

      .hero-card {
        padding: 20px;
        border-radius: 18px;
      }

      .section-card {
        border-radius: 16px;
      }

      .covered-persons-table {
        border-collapse: separate;
        border-spacing: 0 14px;
      }

      .covered-persons-table thead {
        display: none;
      }

      .covered-persons-table,
      .covered-persons-table tbody,
      .covered-persons-table tr,
      .covered-persons-table td {
        display: block;
        width: 100%;
      }

      .covered-persons-table tr {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 14px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
      }

      .covered-persons-table td {
        border: 0;
        padding: 8px 0;
      }

      .covered-persons-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 0.76rem;
        font-weight: 800;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .covered-persons-table td.row-number-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #eef2f7;
        margin-bottom: 6px;
      }

      .covered-persons-table td.row-number-cell::before {
        content: "Traveller";
        margin-bottom: 0;
      }

      .covered-persons-table td.action-cell {
        padding-top: 12px;
        text-align: right;
      }

      .covered-persons-table td.action-cell::before {
        display: none;
      }

      .table-name,
      .table-id-type,
      .table-id,
      .table-date,
      .table-mobile,
      .table-email {
        min-width: 0;
        width: 100%;
      }

      .benefit-amount {
        font-size: 1.45rem;
      }
    }
.proceed-button.proceed-button-disabled,
.proceed-button[aria-disabled="true"],
.proceed-button[data-disabled="true"],
.proceed-button:disabled {
  --bs-btn-disabled-bg: #6ea8fe;
  --bs-btn-disabled-border-color: #6ea8fe;
  --bs-btn-disabled-color: #ffffff;
  background-color: #6ea8fe;
  border-color: #6ea8fe;
  color: #ffffff;
  cursor: not-allowed;
  opacity: 0.85;
  box-shadow: none;
}