/* ===============================
   SUPPORT CONTACTS LAYOUT
==================================*/
.btc-support-contacts {
  margin: 32px auto 0 auto;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.btc-support-row {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.btc-support-contact {
  background: #fff;
  border: 1px solid var(--btc-border, #CBD5E1);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  min-width: 0;
  justify-content: space-between;
  flex: 1;
}

.btc-support-contact i.ph {
  font-size: 20px;
  margin-right: 8px;
  color: var(--btc-blue);
}

.btc-support-contact > span:first-child {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

.btc-support-contact__value {
  margin-left: 12px;
  font-weight: 400;
  color: #2E2E2E;
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.whatsapp-icon {
  color: #137E0B !important;
}

@media (max-width: 900px) {
  .btc-support-row {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .btc-support-contact {
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

:root {
  --btc-primary: var(--paletteColor1, #0E63FF);
  --btc-primary-dark: #023A73;
  --btc-primary-600: #0c56db;
  --btc-bg: var(--backgroundColor, #F7F8FB);
  --btc-card: #ffffff;
  --btc-text: var(--color, #0F172A);
  --btc-muted: #64748B;
  --btc-border: rgba(2, 8, 23, 0.08);
  --btc-radius: 16px;
  --btc-shadow: 0 10px 30px rgba(0, 0, 0, .06);

  --btc-success: #16A34A;
  --btc-danger: #DC2626;
  --btc-warning: #F59E0B;

  --btc-pill-upcoming: #DCFCE7;
  --btc-pill-past: #E5E7EB;
  --btc-pill-cancelled: #FEE2E2;
}

.btc-portal.container {
  margin: 24px auto;
  padding-top: 100px;
}

.btc-portal__grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
}

@media (max-width:960px) {
  .btc-portal__grid {
    grid-template-columns: 1fr;
  }
}

.btc-portal__nav nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--btc-text);
  text-decoration: none;
  border: 1px solid transparent;
  font-weight: 400 !important;
}

.btc-portal__nav nav a+a {
  margin-top: 6px;
}

.btc-portal__nav nav a:hover {
  background: rgba(14, 99, 255, .06);
}

.btc-portal__nav nav a.is-active {
  background: #fff;
  border-color: var(--btc-border);
  box-shadow: var(--btc-shadow);
  font-weight: 600 !important;
}

.btc-portal__nav nav a::before {
  content: '';
  width: 18px;
  height: 18px;
  opacity: .6;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 40%, var(--btc-primary) 0 40%, transparent 41%);
}

.btc-header {
  padding: 18px 0px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.btc-header .title {
  font-size: 22px;
  margin: 0;
}

.btc-header .points {
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(0deg, #2e3d50, #7b8ea3);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fff;
}

.btc-tier {
  border-radius: 18px;
  padding: 20px;
  color: #fff;
  position: relative;
  margin-bottom: 18px;
  overflow: hidden;
}

.btc-tier--bronze {
  background: linear-gradient(180deg, #F6D7C1, #E7BFA2);
  color: #2F2014;
}

.btc-tier--silver {
  background: linear-gradient(180deg, #BAC7D3, #7B8EA3);
}

.btc-tier--gold {
  background: linear-gradient(180deg, #FDF3C6, #F1D97C);
  color: #3a2e00;
}

.btc-tier .badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: #111;
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--btc-border);
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  color: var(--btc-text);
}

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

.btn-primary {
  background: var(--btc-primary);
  border-color: transparent;
  color: #fff;
}

.btn-primary:hover {
  background: var(--btc-primary-600);
}

.btn-ghost {
  background: #fff;
  border: none !important;
  padding: 0px !important;
  font-size: 16px;
  font-weight: 500
}

.btn-outline {
  background: #fff;
  border-color: var(--btc-primary);
  color: var(--btc-primary);
}

.btn-danger {
  background: var(--btc-danger);
  color: #fff;
  border-color: transparent;
}

.btn-danger-outline {
  background: #fff;
  border-color: var(--btc-danger);
  color: var(--btc-danger);
}

.btc-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 18px;
}

.btc-tab {
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--btc-border);
  color: var(--btc-text);
  cursor: pointer;
}

.btc-tab.is-active {
  background: var(--btc-primary);
  color: #fff;
  border-color: transparent;
}

.btc-bookings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width:860px) {
  .btc-bookings {
    grid-template-columns: 1fr 1fr;
  }
}

.btc-bookings__empty {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--btc-text, #374151);
}

.btc-book__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
}

.pill.upcoming {
  background: var(--btc-pill-upcoming);
  color: var(--btc-success);
}

.pill.past {
  background: var(--btc-pill-past);
  color: #374151;
}

.pill.cancelled {
  background: var(--btc-pill-cancelled);
  color: #991B1B;
}

/* Status-based pill variants for overview page */
.pill--upcoming {
  background: #e6f7ed;
  color: #198754;
}

.pill--awaiting {
  background: #fff0f0;
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pill--pending {
  background: #005DBC;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pill--awaiting i,
.pill--pending i {
  font-size: 12px;
}

/* Unconfirmed booking title suffix */
.btc-book__unconfirmed {
  color: #dc3545;
  font-weight: 400;
}

/* ===============================
   PAYMENT NOTIFICATION BAR
==================================*/
.btc-payment-notifications {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.btc-payment-notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--btc-border);
  border-radius: 12px;
}

.btc-payment-notification--awaiting {
  border-left: 4px solid #dc3545;
}

.btc-payment-notification--pending {}

.btc-payment-notification__content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.btc-payment-notification__content>i {
  font-size: 16px;
  color: var(--btc-primary-dark);
}

.btc-payment-notification--pending .btc-payment-notification__content>i {
  color: var(--btc-primary-dark);
}

.btc-payment-notification--awaiting .btc-payment-notification__content>i {
  color: #dc3545;
}

.btc-payment-notification__text {
  font-size: 14px;
  color: var(--btc-text);
}

.btc-payment-notification__text strong {
  font-weight: 600;
}

.btc-payment-notification--awaiting .btc-payment-notification__urgency {
  color: #dc3545;
  font-size: 14px;
  font-weight: 500;
  margin-left: 12px;
}

.btc-payment-notification--pending .btc-payment-notification__urgency {
  color: #0d6efd;
  font-size: 14px;
  font-weight: 500;
  margin-left: 12px;
}

.btc-payment-notification__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btc-payment-notification__pay {
  color: var(--btc-primary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.btc-payment-notification__pay:hover {
  text-decoration: underline;
}

.btc-payment-notification__dismiss {
  background: none;
  border: none;
  color: var(--btc-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
}

.btc-payment-notification__dismiss:hover {
  color: var(--btc-text);
}

/* Responsive notification bar */
@media (max-width: 768px) {
  .btc-payment-notification {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .btc-payment-notification__content {
    flex-wrap: wrap;
    gap: 4px;
  }

  .btc-payment-notification__urgency {
    margin-left: 0 !important;
    width: 100%;
  }

  .btc-payment-notification__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.btc-ref-card {
  background: #fff;
  border: 1px solid var(--btc-border);
  margin: auto;
  border-radius: 16px;
  padding: 30px 40px;
  box-shadow: var(--btc-shadow);
  margin-bottom: 14px;
  width: calc(100% - 100px);
}

.btc-ref-card__top {
  margin-top: -100px
}

.btc-ref-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0px;
}

.btc-ref-card__bottom span {
  display: flex;
  flex-direction: column;
  color: var(--btc-text);
  font-size: 14px;
}

.btc-ref-card__bottom span strong {
  display: flex;
  align-items: center;
}

.btc-ref-card__bottom span i {
  font-size: 20px;
  margin-right: 4px;
}

.copy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.copy-row__Left,
.copy-row__Right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-right: 20px;
}

.copy-row__Left {
  border-right: 1px solid var(--btc-border);
}

.copy-row input[type="text"],
.copy-row input[type="email"] {
  background: #fff;
  border: 1px solid var(--btc-border);
  border-radius: 4px;
  padding: 6px 12px;
  height: 44px;
}

.copy-row label {
  color: var(--btc-text);
  font-weight: 500;
}

.copy-row__fix {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.copy-row__Left .btn {
  height: 44px;
  min-width: 100px;
}

@media (max-width: 768px) {
  .btc-ref-card {
    width: 100%;
    padding: 20px;
  }

  .copy-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .copy-row__Left {
    border-right: none;
    border-bottom: 1px solid var(--btc-border);
    padding-right: 0;
    padding-bottom: 24px;
  }

  .copy-row__Right {
    padding-right: 0;
  }

  .btc-ref-card__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .btc-ref-card__bottom>div:last-child {
    flex-direction: column;
    gap: 12px !important;
    width: 100%;
  }

  .btc-ref-card__bottom span {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
  }

  .copy-row__fix {
    flex-direction: column;
  }

  .copy-row__Left .btn,
  .copy-row__Right .btn {
    width: 100%;
  }
}

.btc-txn {
  display: grid;
  grid-template-columns: 260px 1fr 60px 80px;
  gap: 8px;
  padding: 14px 0px;
  align-items: end;
}

@media (max-width:660px) {
  .btc-txn {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "first delta"
      "second second";
    align-items: start;
  }

  .btc-txn__first {
    grid-area: first;
  }

  .btc-txn__second {
    grid-area: second;
    margin-top: 2px;
  }

  .small-note {
    display: none;
  }

  .btc-txn .delta {
    grid-area: delta;
  }
}

.btc-txn+.btc-txn {
  border-top: 1px solid var(--btc-border);
}

.btc-txn__first {
  display: flex;
  flex-direction: column;
  color: var(--text);
}

.btc-txn__second {
  color: var(--text);
}

.btc-gallery-show-all {
  margin-top: -42px;
  text-align: right;
}

.btc-gallery-show-all .show-all-button {
  display: inline-flex;
  align-items: right;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--btc-border);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--btc-text);
}

.btc-gallery-show-all .show-all-button:hover {
  background: rgba(14, 99, 255, .08);
}

.btc-gallery-show-all .show-all-button i {
  font-size: 18px;
  color: var(--btc-primary);
}

.btc-txn__first span {
  font-weight: 500
}

.btc-txn .delta {
  text-align: right;
  font-weight: 500;
}

.btc-txn .delta.pos {
  color: var(--btc-success);
}

.btc-txn .delta.neg {
  color: var(--btc-danger);
}

.info-row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: top;
  padding: 24px 6px;
  border-bottom: 1px solid var(--btc-border);
}

@media(max-width:600px) {
  .info-row {
    grid-template-columns: 150px 1fr auto;
  }
}

.info-row .label {
  color: var(--btc-text);
  font-weight: 500;
}

.info-row .value {
  font-weight: 400;
  color: #000
}

.info-row .edit {
  display: none;
  gap: 8px;
  justify-content: space-between;
}

.info-row.is-editing .value {
  display: none;
}

.info-row.is-editing .edit {
  display: flex;
}

.info-row input,
.info-row select {
  width: 100%;
  border: 1px solid var(--btc-border);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
  margin-top: 4px;
}

.inline-actions {
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: end;
}

.inline-actions .js-cancel,
.js-edit {
  border: none;
  padding: 0px;
  color: var(--btc-blue)
}

.inline-labels {
  font-weight: 500;
  color: #000
}

.inline-labels span {
  color: red;
}

.small-note {
  color: var(--btc-muted);
  font-size: 14px;
  margin-top: 2px;
}

.err-msg {
  color: var(--btc-danger);
  font-size: 14px;
  margin-top: 4px;
}

.btc-card input,
.btc-card select {
  max-width: 300px;
  width: 100%;
  box-sizing: border-box;
}

/* Lightweight override: reduce vertical padding for select inputs used in booking/review/contact forms
   Keep selector specific to portal/layout classes to avoid changing admin or third-party plugin styles. */
.btc-portal select.btc-input,
.btc-portal .btc-card select,
.btc-signup-card select,
.info-row select,
.copy-row select {
  padding: 4px 12px !important;
  height: auto;
  /* allow reduced vertical padding */
}

.support-card {
  background: #fff;
  border: 1px solid var(--btc-border);
  border-radius: 12px;
  padding: 24px 30px;
  box-shadow: var(--btc-shadow);
  width: calc(100% - 100px);
  margin: auto;
  margin-top: -60px;
}

@media (max-width: 768px) {
  .support-card {
    width: 100%;
    padding: 20px;
    margin-top: -40px;
  }
}

.support-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.support-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
  margin-top: 30px;
}

.support-form .label {
  color: black;
}

.support-form textarea {
  grid-column: 1 / -1;
  min-height: 90px;
}

.support-form .textfield-box {
  grid-column: 1 / -1;
}

.support-form input,
.support-form textarea {
  border: none;
  border-bottom: 1px solid #bebebe77;
  padding: 12px;
  width: 100%;
  padding-left: 0px;
}

.support-form input::placeholder {
  font-size: 16px;
  color: #929292;
}

.support-actions {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 0px;
}

.support-actions button {
  flex: 1;
  margin-bottom: 10px;
  padding: 14px 20px;
  color: white;
  font-weight: 500;
  font-size: 20px;
}

.info-row a.btn {
  color: var(--btc-blue) !important;
}

.btc-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}

.btc-modal.is-open {
  display: block;
}

.btc-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(2px);
}

/* REDESIGN LOGOUT MODAL */
.btc-modal .btc-modal__box {
  width: min(580px, 94vw);
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.btc-modal__box .btc-modal__sub-close {
  position: absolute;
  top: -40px;
  right: -10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.btc-modal__box .btc-modal__sub-close:hover {
  opacity: 1;
}

.btc-modal__subtitle {
  color: #005DBC;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: none;
}

.btc-modal__title {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 32px;
  color: #0F172A;
  line-height: 1.3;
}

.btc-modal__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.btc-modal__foot .btn {
  width: 100% !important;
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  height: 52px;
  border-radius: 12px;
  box-sizing: border-box;
}

.btc-modal__foot .btn-primary {
  background: #005DBC;
  color: #fff;
  border: none;
}

.btc-modal__foot .btn-primary:hover {
  background: #004a99;
}

.btc-modal__foot .btn-outline {
  background: #fff;
  color: #374151;
  border: 1px solid #D1D5DB;
}

.btc-modal__foot .btn-outline:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
  color: #111827;
}

/* ===============================
   TOKENS / COLORS
==================================*/
:root {
  --btc-primary: #005DBC;
  --btc-darkblue-text: #012E5C;
  /* BTC blue */
  --btc-primary-600: #084f9b;
  --btc-text: #0F172A;
  --btc-muted: #6B7280;
  --btc-border: rgba(2, 8, 23, .08);
  --btc-card: #fff;
  --btc-bg: #F7F8FB;
  --btc-radius: 16px;
  --btc-shadow: 0 10px 30px rgba(0, 0, 0, .06);

  /* hero gradients per badge */
  --bronze-from: rgb(252, 242, 238);
  --bronze-to: rgb(238, 204, 188);
  --silver-from: rgb(175, 193, 211);
  --silver-to: rgb(127, 145, 167);
  --gold-from: rgb(247, 230, 166);
  --gold-to: rgb(229, 199, 101);

  /*light gradient for badge*/
  --bronze-light: linear-gradient(180deg, rgba(252, 242, 238, 0.5), rgba(238, 204, 188, 0.5));
  --silver-light: linear-gradient(180deg, rgba(175, 193, 211, 0.5), rgba(127, 145, 167, 0.5));
  --gold-light: linear-gradient(180deg, rgba(247, 230, 166, 0.5), rgba(229, 199, 101, 0.5));

  /* tier colors */
  --bronze-title: #BA602B;
  --gold-title: #E98C00;
  --silver-title: #324260;

  --bronze-title-dark: #71462D;
  --gold-title-dark: #756E57;
  --silver-title-dark: #62718C;

  --success: #16A34A;
  --danger: #DC2626;
}

/* Page container + simple grid preserved */
.btc-portal.container {
  max-width: 1400px;
  margin: 24px auto;
  padding: 0px 30px;
  padding-top: 16px;
}

.btc-portal__grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
}

@media (max-width: 1024px) {
  .btc-portal__grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   LEFT NAV — Phosphor icons + active color only
==================================*/
.btc-portal__nav nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--btc-text);
  font-weight: 600;
  border: 1px solid transparent;
}

.btc-portal__nav nav a .ph {
  font-size: 18px;
  opacity: .7;
}

.btc-portal__nav nav a+a {
  margin-top: 6px;
}

.btc-portal__nav nav a.is-active {
  color: var(--btc-primary);
}

.btc-portal__nav nav a.is-active .ph {
  opacity: 1;
  color: var(--btc-primary);
}

/* optional small bullet like the design */
.btc-portal__nav nav a::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 8px;
  background: #D8E7FA;
  display: none;
}

/* ===============================
   HERO (Hi, Name + points)
==================================*/
.btc-hero {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--btc-border);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.btc-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .0), rgba(0, 0, 0, .02));
}

.btc-hero--bronze {
  background: linear-gradient(180deg, var(--bronze-from), var(--bronze-to));
  color: #2F2014;
}

.btc-hero--silver {
  background: linear-gradient(180deg, var(--silver-from), var(--silver-to));
  color: #fff;
}

.btc-hero--gold {
  background: linear-gradient(180deg, var(--gold-from), var(--gold-to));
  color: #3a2e00;
}

.btc-hero__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btc-hero__emblem {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  backdrop-filter: blur(2px);
  background-size: 42px 45px;
  background-position: center;
  background-repeat: no-repeat;

}

/* emblem images (add files in /assets/badges/) */
.btc-hero--bronze .btc-hero__emblem {
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/bronze.png');
}

.btc-hero--silver .btc-hero__emblem {
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/silver.png');
}

.btc-hero--gold .btc-hero__emblem {
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/gold.png');
}

.btc-hero__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  color: white;
}

.btc-hero--gold .btc-hero__title {
  color: #57513C;
}

.btc-hero--bronze .btc-hero__title {
  color: #71462D;
}

.btc-hero__subtitle {
  font-size: 14px;
  opacity: .85;
  margin-top: 2px;
  color: #fff;
  font-weight: 600;
}

.btc-hero--gold .btc-hero__subtitle {
  color: #E98C00;
}

.btc-hero--bronze .btc-hero__subtitle {
  color: #BA602B;
}

.btc-hero__points {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #162A3F, #344D65);
  color: #fff;
  font-weight: 400;
  border: 1px solid rgba(252, 252, 252, 0.59);
}

.btc-hero--bronze .btc-hero__points {
  background: linear-gradient(180deg, #71462D, #361C0D);
  color: #fff;
}

.btc-hero--gold .btc-hero__points {
  background: linear-gradient(180deg, #726845, #1C1812);
  color: #fff;
}

.btc-hero__points .ph {
  font-size: 18px;
}

/* ===============================
   SECTION HEADS / COUNT
==================================*/
.btc-section {
  margin: 18px 0 18px;
  border-bottom: 1px solid var(--btc-border);
  padding-bottom: 24px;
}

.btc-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.btc-h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--btc-text);
}

.btc-h2 .btc-count {
  color: var(--btc-darkblue-text);
}

/* arrows */
.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--btc-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
}

.btn-icon .ph {
  font-size: 18px;
}

/* ===============================
   REWARDS rail (pills)
==================================*/
.btc-rewards__rail {
  display: flex;
  gap: 10px;
  overflow: auto;
  overflow-x: hidden;
  padding: 6px 2px 12px;
  scroll-snap-type: x mandatory;
  border-bottom: 1px solid var(--btc-border);
  font-size: 14px;
}

.btc-reward {
  scroll-snap-align: start;
  color: var(--btc-darkblue-text);
  background: #fff;
  border: 1px solid var(--btc-border);
  border-radius: 4px;
  padding: 12px 20px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.btc-reward .ph {
  font-size: 18px;
  color: var(--btc-darkblue-text);
}

/* ===============================
   BOOKINGS list
==================================*/
.btc-bookings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.btc-book {
  background: #fff;
  border: 1px solid var(--btc-border);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 14px;
  align-items: center;
}

.btc-book--featured {
  grid-template-columns: 180px 1fr auto;
  padding: 16px;
}

.btc-book__media img {
  width: 120px;
  height: 120px;
  border-radius: 6px;
  object-fit: cover;
}

.btc-book--featured .btc-book__media img {
  width: 180px;
  height: 180px;
}

.btc-book__title {
  font-weight: 500;
  font-size: 18px;
  color: #111827;
  line-height: 1.1rem;
}

.btc-book__subtitle {
  font-weight: 400;
  font-size: 12px;
  margin-bottom: 16px;
  color: #484848;
}

.btc-book__meta {
  display: flex;
  gap: 16px;
  color: #000;
  font-size: 12px;
}

.btc-book__meta .ph {
  font-size: 15px;
  vertical-align: -2px;
  margin-right: 4px;
  color: #8EA0B3;
}

.btc-book__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.pill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 600;
}

.pill.upcoming {
  background: #005DBC;
  color: #fff;
}

.pill.past {
  background: #E5E7EB;
  color: #374151;
}

.pill.cancelled {
  background: #991B1B;
  color: #FEE2E2;
}

/* New pill variations for Trips page */
.pill.pill--upcoming,
.pill--upcoming {
  background: #005DBC;
  color: #fff;
}

.pill.pill--booked,
.pill--booked {
  background: #16A34A;
  color: #fff;
}

.pill.pill--awaiting,
.pill--awaiting {
  background: #DC2626;
  color: #fff;
}

.pill.pill--pending,
.pill--pending {
  background: #3B82F6;
  color: #fff;
}

/* ===============================
   TRIPS CARDS - New Design
==================================*/
article.btc-book.btc-book--trips {
  background: #fff !important;
  border: 1px solid var(--btc-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  display: block !important;
}

article.btc-book--trips>.btc-book__main {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  padding: 0px;
  align-items: flex-start !important;
}

article.btc-book--trips .btc-book__media {
  flex: 0 0 140px !important;
  width: 140px !important;
  height: 140px !important;
  min-width: 140px !important;
  background: #f3f4f6 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

article.btc-book--trips .btc-book__media img {
  width: 140px !important;
  height: 140px !important;
  min-width: 140px !important;
  min-height: 140px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

article.btc-book--trips .btc-book__body {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: block !important;
  padding: 8px 0px;
}

article.btc-book--trips .btc-book__side {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

/* Confirmation Code */
article.btc-book--trips .btc-book__code {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #005DBC !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.btc-book__copy {
  background: none;
  border: none;
  cursor: pointer;
  color: #005DBC;
  padding: 2px;
  display: inline-flex;
  align-items: center;
}

.btc-book__copy:hover {
  color: #003d7a;
}

.btc-book__copy .ph {
  font-size: 16px;
}

/* Header row with title + pill */
.btc-book__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btc-book--trips .btc-book__title {
  font-size: 18px;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.3;
}

/* Location */
.btc-book__location {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

/* Meta row */
.btc-book--trips .btc-book__meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #374151;
  margin-top: 16px;
}

.btc-book--trips .btc-book__meta .ph {
  font-size: 16px;
  color: #9ca3af;
  margin-right: 4px;
  vertical-align: -2px;
}

/* Action buttons container */
.btc-book__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.btc-book__actions--paid {
  min-width: 160px;
}

.btc-book__actions--unpaid {
  min-width: 160px;
}

/* Outline button style */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--btc-border);
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  justify-content: center;
  width: 100%;
}

.btn-outline:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.btn-outline .ph {
  font-size: 16px;
  color: #005DBC;
}

/* Link style button */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: none;
  border: none;
  color: #DC2626;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn-link:hover {
  color: #b91c1c;
}

.btn-link .ph {
  font-size: 16px;
}

.btn-link .ph-caret-right {
  font-size: 14px;
}

/* Pay button for unpaid bookings */
.btn-pay {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
}

.btn-pay .ph {
  font-size: 18px;
}

/* Responsive adjustments for trips cards */
@media (max-width: 768px) {
  article.btc-book--trips>.btc-book__main {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  article.btc-book--trips .btc-book__media {
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    overflow: hidden !important;
  }

  article.btc-book--trips .btc-book__media img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  article.btc-book--trips .btc-book__body {
    flex: 1 1 calc(100% - 92px) !important;
    padding: 0 !important;
  }

  article.btc-book--trips .btc-book__side {
    flex: 0 0 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 8px;
  }

  article.btc-book--trips .btc-book__actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  article.btc-book--trips .btn-outline {
    width: auto;
    flex: 0 0 auto;
    font-size: 13px;
    padding: 8px 12px;
  }

  article.btc-book--trips .btc-book__title {
    font-size: 15px !important;
  }

  article.btc-book--trips .btc-book__meta {
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  article.btc-book--trips .btc-book__code {
    font-size: 11px !important;
  }

  /* Mobile notification bar - prettier design */
  .btc-book__notification {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-radius: 10px !important;
    margin: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  .btc-book__notification-content {
    flex-direction: column !important;
    gap: 2px !important;
    align-items: flex-start !important;
  }

  .btc-book__notification-content>i {
    font-size: 24px !important;
    color: #005DBC !important;
  }

  .btc-book__notification-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .btc-book__notification-urgency {
    font-size: 13px !important;
    margin-top: 4px !important;
  }

  .btc-book__notification-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .btc-book__notification-pay {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    background: #005DBC !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
  }

  .btc-book__notification-pay:hover {
    background: #003d7a !important;
    color: #fff !important;
  }

  .btc-book__notification-dismiss {
    flex: 0 0 auto !important;
    padding: 12px 20px !important;
    background: transparent !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
  }

  .btc-book__notification-dismiss:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
  }
}

/* Notification bar inside trip cards */
.btc-book__notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  background: #f8fafc;
  border-top: 1px solid var(--btc-border);
  border-radius: 4px;
  margin-top: 8px;
}

.btc-book__notification--awaiting {
  background: #fef2f2;
  border-top-color: #fecaca;
}

.btc-book__notification--pending {
  border: 1px solid #00000026;
}

.btc-book__notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.btc-book__notification-content>i {
  font-size: 20px;
  color: #005DBC;
}

.btc-book__notification--awaiting .btc-book__notification-content>i {
  color: #DC2626;
}

.btc-book__notification-text {
  font-size: 14px;
  color: #374151;
}

.btc-book__notification-text strong {
  font-weight: 600;
}

.btc-book__notification-urgency {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
}

.btc-book__notification--awaiting .btc-book__notification-urgency {
  color: #DC2626;
  background: #fef2f2;
}

.btc-book__notification--pending .btc-book__notification-urgency {
  color: #1CB47C;

}

.btc-book__notification-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btc-book__notification-pay {
  font-size: 14px;
  font-weight: 600;
  color: #005DBC;
  text-decoration: none;
  cursor: pointer;
}

.btc-book__notification-pay:hover {
  color: #003d7a;
  text-decoration: underline;
}

.btc-book__notification-dismiss {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btc-book__notification-dismiss:hover {
  color: #374151;
}

/* ===============================
   GRID: Membership + Referral
==================================*/

.referral-bg {
  background-image: url('/wp-content/plugins/btc-portal/assets/../images/bg-referal.png');
  height: 265px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 50px !important;
}

.btc-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
}

@media (max-width:900px) {
  .btc-grid {
    grid-template-columns: 1fr;
  }
}

.btc-card {
  background: #fff;
  margin: 16px 0px;
}

.referal_title {
  color: white !important;
}

.btc-refer__seal__bg {
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/seal-referal.png');
  width: 120px;
  height: 100px;
  background-size: 142px 142px;
  background-position: center;
  background-repeat: no-repeat;
}

.btc-ref-card__title {
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin-bottom: 16px;
  justify-content: space-between;
}

.btc-ref-card__title h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.btc-ref-card__title span {
  font-size: 14px;
  color: var(--btc-blue);
  font-weight: 500;
}

.btc-card--member {
  border-right: 1px solid var(--btc-border);
}

.btc-card__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #0F172A;
}

.btc-tiercard {
  display: flex;
  gap: 14px;
}

.btc-tiercard__label {
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 600;
}

.btc-tiercard__badge--bronze .btc-tiercard__label {
  color: var(--bronze-title);
}

.btc-tiercard__badge--silver .btc-tiercard__label {
  color: var(--silver-title);
}

.btc-tiercard__badge--gold .btc-tiercard__label {
  color: var(--gold-title);
}


.btc-tiercard__badge {
  border-radius: 12px;
  padding: 16px 32px 16px 24px;
  display: flex;
  flex-direction: column;
  float: left;
  gap: 12px;
  align-items: left;
  border: 1px solid var(--btc-border);
  background: #fff;
}

.emblem {
  width: 42px;
  height: 45px;
  background-size: 42px 45px;
  background-position: center;
  background-repeat: no-repeat;
}

.btc-tiercard__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.btc-tiercard__badge--bronze {
  background: var(--bronze-light);
  color: #2F2014;
}

.btc-tiercard__badge--silver {
  background: var(--silver-light);
  color: #fff;
}

.btc-tiercard__badge--gold {
  background: var(--gold-light);
  color: #3a2e00;
}

.btc-tiercard__badge--bronze .emblem {
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/bronze.png');
}

.btc-tiercard__badge--silver .emblem {
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/silver.png');
}

.btc-tiercard__badge--gold .emblem {
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/gold.png');
}

.btc-tiercard__detail {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 2px;
}

.btc-tiercard__detail .name {
  font-weight: 600;
  line-height: 1rem;
}

.btc-tiercard__badge--bronze .btc-tiercard__detail .name {
  color: var(--bronze-title);
}

.btc-tiercard__badge--gold .btc-tiercard__detail .name {
  color: var(--gold-title);
}

.btc-tiercard__badge--silver .btc-tiercard__detail .name {
  color: var(--silver-title);
}

.btc-tiercard__detail .small {
  font-size: 13px;
}

.btc-tiercard__badge--bronze .btc-tiercard__detail .small {
  color: var(--bronze-title-dark);
}

.btc-tiercard__badge--gold .btc-tiercard__detail .small {
  color: var(--gold-title-dark);
}

.btc-tiercard__badge--silver .btc-tiercard__detail .small {
  color: var(--silver-title-dark);
}

.btc-tiercard__target {
  border-radius: 16px;
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  background: linear-gradient(180deg, var(--gold-from), var(--gold-to));
  border: 1px solid rgba(0, 0, 0, .06);
}

.btc-tiercard__target .emblem {
  width: 42px;
  height: 45px;
  border-radius: 12px;
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/gold.png');
  background-size: 42px 45px;
  background-position: center;
  background-repeat: no-repeat;
}

.btc-tiercard__target .name {
  font-weight: 600;
}

.btc-tiercard__target .small {
  font-size: 13px;
}

.btc-refer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--btc-border);
  border-radius: 12px;
  padding: 8px 12px;
}

.btc-refer__copy {
  display: flex;
  gap: 0px;
  flex-direction: column;
  color: #4B5563;
}

.btc-refer__copy strong {
  color: #111827;
  font-size: 12px;
}

.btc-refer__copy span {
  color: #E98C00;
  font-size: 16px;
  margin-bottom: 8px;
}

.btc-link {
  color: var(--btc-primary);
  font-weight: 500;
  font-size: 12px;
  text-decoration: underline;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--btc-border);
  background: #fff;
  cursor: pointer;
}

.btn.btn-primary {
  background: var(--btc-primary);
  color: #fff;
  border-color: transparent;
  border-radius: 4px;
  width: fit-content;
  line-height: 1rem;
  margin: auto
}

.btn-primary:hover {
  background: var(--btc-primary-600) !important;

}

.btn.btn-sm {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
}

.btn .ph {
  font-size: 16px;
}

/* ---- FIX: grid overflow in main column ---- */

.btc-portal__grid>* {
  min-width: 0;
}

/* allow tracks to shrink */
.btc-portal__main {
  min-width: 0;
}

/* account booking confirmation: extra top spacing */
.btc-portal__main .booking-confirmation-wrapper {
  padding-top: 2rem;
}

/* belt & suspenders */
#btc-refer-btn {
  margin-left: 0px;
}

/* optional: keep media from pushing layout */
.btc-portal__main img {
  max-height: 100px;
}

.btc-portal__main img,
.btc-portal__main video {
  max-width: 100%;
  height: auto;
}

.btc-bottom-section {
  padding: 10px 40px;
  border: var(--btc-border) 1px solid;
}

.btc-refer__seal {
  background-image: url('/wp-content/plugins/btc-portal/assets/../badges/seal-referal.png');
  width: 102px;
  height: 102px;
  background-size: 102px 102px;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   Contact support
========================================================= */

.support-bg {
  background-image: url('/wp-content/plugins/btc-portal/assets/../images/bg-support.png');
  height: 165px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 50px !important;
}

.btc-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
}

@media (max-width:900px) {
  .btc-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Trips & Bookings — Pixel‑perfect CSS (BEM, modular)
   Colors & tokens (match BTC design)
========================================================= */

:root {
  --btc-blue: #005DBC;
  --btc-blue-600: #084f9b;
  --text: #0F172A;
  --muted: #6B7280;
  --border: rgba(2, 8, 23, .08);
  --bg: #F7F8FB;
  --card: #FFFFFF;
  --shadow: 0 10px 30px rgba(0, 0, 0, .06);

  --pill-up: #DCFCE7;
  --pill-up-text: #15803D;
  --pill-past: #E5E7EB;
  --pill-past-text: #374151;
  --pill-cxl: #FEE2E2;
  --pill-cxl-text: #991B1B;

  --banner-bg: #F2F6FF;
  /* payment banner */
  --banner-border: #D9E7FF;
}

/* =========================================================
  GENERAL WRAPPERS / TYPOGRAPHY
========================================================= */

.trips {
  display: grid;
  gap: 16px;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.dash__title {
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--btc-blue);
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.dash__title i {
  font-size: 24px;
}

/* =========================================================
  TABS (Past / Cancelled)
========================================================= */

.tripTabs {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tripTabs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 10px 16px;
  background: #fff;
  color: var(--text);
  font-weight: 500;
  border: 1px solid var(--border);
  transition: all .15s ease;
}

.tripTabs__btn:hover {
  border-color: #CBD5E1;
}

.tripTabs__btn.is-active {
  background: #E5EFF8;
  color: var(--btc-blue);
  border: 1px solid var(--btc-blue);
  font-weight: 600;
}

/* =========================================================
  TRIP CARD (base)
========================================================= */

.tripCard {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 8px 16px 8px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.tripCard_small {
  grid-template-columns: 100px 1fr auto;
}

@media (max-width: 900px) {
  .tripCard {
    grid-template-columns: 1fr;
  }

  .tripCard__side {
    align-items: flex-start;
  }
}

.tripCard__media img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
}

.tripCard__media__small img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
}

.tripCard__status span {
  margin-right: 12px;
}

.tripCard__title {
  margin: 0 0 2px 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tripCard__body p {
  font-size: 14px;
  color: var(--muted)
}

.tripCard__meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  align-items: center;
}

.tripCard__meta i {
  font-size: 16px;
}

.tripCard__meta span {
  margin-right: 12px;
}


.tripCard__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

/* Action buttons on card right */
.tripCard__actions {
  display: flex;
  gap: 10px;
  flex-direction: column
}

.tripCard__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-weight: 500;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--btc-blue);
}

.tripCard__btn__red span {
  color: #EF4444;
}

.tripCard__btn--outline {
  border-color: var(--btc-blue);
  color: var(--btc-blue);
  background: #fff;
}

.tripCard__btn--ghost {
  border-color: var(--border);
  color: #EF4444;
  background: #fff;
}

/* Badge next to title */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #0000002b;
}

.badge--upcoming {
  background: var(--pill-up);
  color: var(--pill-up-text);
}

.badge--past {
  background: var(--pill-past);
  color: var(--pill-past-text);
}

.badge--cancel {
  background: var(--pill-cxl);
  color: var(--pill-cxl-text);
}

/* =========================================================
  STATE 1 — UPCOMING TRIP (card modifier)
========================================================= */

.tripCard--upcoming .tripCard__title {
  color: #0F172A;
}

.tripCard--upcoming .tripCard__side .tripCard__btn--primary {
  background: var(--btc-blue);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(0, 93, 188, .18);
}

/* =========================================================
  STATE 2 — UPCOMING PAYMENT BANNER (stripe above card)
========================================================= */

.payBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid var(--banner-border);
  border-radius: 12px;
  margin: 0 0 12px 0;
  font-size: 16px;
}

.payBanner__left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--btc-darkblue-text);
}

.payBanner__due {
  color: #10B981;
  font-weight: 500;
  margin-left: 6px;
  font-size: 14px;
  /* “Due in 3 days” */
}

.payBanner__right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

.payBanner__cta {
  color: var(--btc-blue);
  font-weight: 800;
  text-decoration: none;
}

.payBanner__dismiss {

  background: #fff;
  color: #6B7280;
  border-radius: 10px;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid var(--banner-border);
  cursor: pointer;
}

/* =========================================================
  STATE 3 — NO UPCOMING TRIPS (empty)
========================================================= */

.tripEmpty {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0px;
}

@media (max-width:900px) {
  .tripEmpty {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

.tripEmpty__media {
  width: 140px;
  height: 140px;
  overflow: hidden;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tripEmpty__media img {
  border-radius: 24px;
}

.tripEmpty__title {
  margin: 0 0 2px 0;
  font-weight: 500;
  font-size: 20px;
}

.tripEmpty__desc {
  margin: 0;
  color: #6B7280;
  font-weight: 500;
  font-size: 14px;
}

/* =========================================================
  LIST WRAPPER (stack of cards under tabs)
========================================================= */

.tripList {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

/* Upcoming trips: single column layout */
#btc-upcoming-list.tripList {
  grid-template-columns: 1fr;
}

/* Stack trip list on small screens */
@media (max-width: 820px) {
  .tripList {
    grid-template-columns: 1fr;
  }
}

/* === Pixel-perfect nips === */

/* Titles & meta */

.tripCard__meta {
  letter-spacing: 0.005em;
}

/* Tabs */
.tripTabs__btn {
  font-size: 15px;
}

/* Pills */
.badge {
  padding: 5px 12px;
  font-size: 12.5px;
}

/* Outline/ghost actions */
.tripCard__btn--outline {
  border-color: #0A5AB3;
  color: #005DBC;
}

.tripCard__btn--ghost {
  border-color: transparent;
  color: #DC2626;
}




/* “Past/Cancelled” chip on right in grid view (if used) */
.pill.past,
.pill.cancelled {
  box-shadow: none;
}

/* Ensure icons match spacing in design */
.tripCard__btn .ph,
.tripCard__meta .ph {
  margin-right: 6px;
  font-size: 16px;
}

/* Prevent button wrap bumps on md widths */
.tripCard__actions {
  gap: 8px;
}

/* Tabs: ensure hidden panes are actually hidden (Blocksy-safe) */
[data-pane][hidden] {
  display: none !important;
}





/*Login and signup*/

:root {
  --btc-primary: var(--paletteColor1, #0E63FF);
  --btc-primary-600: #0c56db;
  --btc-bg: var(--backgroundColor, #F7F8FB);
  --btc-card: #ffffff;
  --btc-text: var(--color, #0F172A);
  --btc-muted: #64748B;
  --btc-border: rgba(2, 8, 23, 0.08);
  --btc-radius: 16px;
  --btc-shadow: 0 10px 30px rgba(0, 0, 0, .06);

  --btc-success: #16A34A;
  --btc-danger: #DC2626;
  --btc-warning: #F59E0B;

  --btc-pill-upcoming: #DCFCE7;
  --btc-pill-past: #E5E7EB;
  --btc-pill-cancelled: #FEE2E2;
}


/* ===============================
   AUTH / LOGIN / SIGNUP / RESET
==================================*/
.btc-auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btc-auth-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  padding: 40px 32px 32px 32px;
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btc-auth-image-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: #e0e7ef;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #b0b8c1;
}

.btc-auth-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--btc-blue, #005DBC);
  margin-bottom: 24px;
  text-align: center;
}

.btc-auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btc-auth-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.btc-auth-field label {
  font-size: 15px;
  color: #374151;
  font-weight: 500;
}

.btc-auth-field input {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--btc-border, #CBD5E1);
  font-size: 16px;
  background: #f7f8fa;
  color: #111827;
}

/* Side-by-side phone code + number */
.btc-auth-form .phone-flex {
  display: flex;
  gap: 10px;
  align-items: end;
}

.btc-auth-form .phone-flex select {
  padding: 0px 8px 4px 0px !important;
  border: none !important;
  border-bottom: 1px solid #D1D5DB !important;
  border-radius: 0 !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 4px center !important;
  background-size: 12px !important;
  min-width: 48px;
  width: 85px;
  text-align: left;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
}

#btc-phone-country {
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: 1px solid #e1e6ea !important;
  border-radius: 8px !important;
  padding: 10px 28px 10px 10px !important;
  height: 44px !important;
  width: 90px !important;
  font-size: 14px !important;
}

.btc-auth-form .phone-flex input {
  flex: 1;
}

/* Custom caret for nationality select */
#btc-nationality,
.btc-auth-card select,
.btc-auth-form select {
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding: 10px 32px 10px 12px !important;
  font-size: 16px;
  color: #111827;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  width: 100%;
}

.btc-auth-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.btc-auth-btn {
  min-width: 120px;
  padding: 10px 0;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
}

#btc-verify-otp,
.btc-auth-continue {
  display: inline-block;
  padding: 10px 14px;
  background: #0b6df0;
  color: #fff;
  border-radius: 4px;
  border: 0;
  cursor: pointer
}

.btc-auth-link {
  color: var(--btc-blue, #005DBC);
  text-decoration: underline;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.btc-auth-error {
  color: var(--btc-danger, #DC2626);
  font-size: 14px;
  margin-top: 8px;
  min-height: 18px;
  text-align: center;
}

.btc-auth-footer {
  margin-top: 24px;
  font-size: 15px;
  color: #64748B;
  text-align: center;
}

.btc-auth-footer .btc-auth-link {
  margin-left: 6px;
}

@media (max-width: 500px) {
  .btc-auth-card {
    padding: 24px 8px;
    max-width: 98vw;
  }
}

.btc-auth-modal {
  display: flex;
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.btc-signup-card .right-panel input[type="text"],
.btc-signup-card .right-panel input[type="email"],
.btc-signup-card .right-panel input[type="password"],
.btc-signup-card .right-panel input[type="tel"],
.btc-signup-card .right-panel textarea,
.btc-signup-card .right-panel .btc-auth-form input {
  background: transparent;
  border: none !important;
  border-bottom: 1px solid #D1D5DB !important;
  /* light gray */
  border-radius: 0 !important;
  padding: 10px 6px !important;
  box-shadow: none !important;
  outline: none;
  width: 100%;
  font-size: 15px;
  color: var(--btc-text);
}

.btc-signup-card .right-panel input::placeholder,
.btc-signup-card .right-panel textarea::placeholder {
  color: #9CA3AF;
}

.btc-signup-card .right-panel input:focus,
.btc-signup-card .right-panel textarea:focus {
  border-bottom-color: var(--btc-primary) !important;
  box-shadow: none !important;
}

.btc-signup-card .right-panel label {
  margin-top: 0px;
  margin-bottom: 4px;
}

/* Profile two-column layout for personal information */
.btc-signup-card .right-panel .profile-grid h3 {
  margin-bottom: 12px;
  font-size: 20px;
}

.two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.btc-signup-card .right-panel .field {
  display: block;
}

.btc-signup-card .right-panel .field input {
  border: none !important;
  border-bottom: 1px solid #D1D5DB !important;
  border-radius: 0 !important;
  padding: 12px 6px !important;
  width: 100%;
  background: transparent;
}

.btc-signup-card .right-panel .field input::placeholder {
  color: #9CA3AF;
}

.btc-signup-card .right-panel .confirm-btn {
  margin-top: 20px;
}

@media (max-width: 700px) {

  /* collapse any two-col grids to a single column on narrow screens */
  .two-col {
    grid-template-columns: 1fr !important;
  }
}

.btc-auth-modal__left {
  width: 50%;
  background-image: url('/wp-content/plugins/btc-portal/assets/../images/signup-bg.png');
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
}

.btc-auth-modal__image {
  width: 100%;
  position: relative;
  margin-bottom: 24px;
}

.btc-auth-modal__image img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  height: 180px;
}

.btc-auth-modal__badge {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.btc-auth-modal__badge img {
  width: 40px;
  height: 40px;
}

.btc-auth-modal__benefits {
  color: #fff;
  text-align: left;
}

.btc-auth-modal__benefits h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
}

.btc-auth-modal__benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.btc-auth-modal__benefits li {
  font-size: 16px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 24px;
}

.btc-auth-modal__benefits li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #ffd700;
  font-weight: bold;
}

.btc-auth-modal__right {
  width: 50%;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f7f8fb;
}

.btc-auth-modal__logo {
  width: 56px;
  margin-bottom: 24px;
}

.btc-auth-modal__title {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 10px;
  text-align: center;
}

.btc-auth-modal__subtitle {
  color: #0e63ff;
  font-size: 15px;
  margin-bottom: 24px;
  text-align: center;
}

.btc-auth-modal__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.btc-auth-modal__form label {
  font-size: 15px;
  color: #374151;
  font-weight: 500;
  align-self: flex-start;
}

.btc-auth-modal__form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  font-size: 16px;
  background: #fff;
  color: #111827;
}

.btc-auth-modal__btn {
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
  background: #0e63ff;
  color: #fff;
  border: none;
  margin-top: 8px;
  cursor: pointer;
  transition: background .2s;
}

.btc-auth-modal__btn:hover {
  background: #0c56db;
}

@media (max-width: 900px) {
  .btc-auth-modal {
    flex-direction: column;
    max-width: 98vw;
  }

  .btc-auth-modal__left {
    display: none;
  }

  .btc-auth-modal__right {
    width: 100%;
    padding: 24px 12px;
  }

  #btc-nationality,
  .btc-auth-card select,
  .btc-auth-form select {
    padding: 8px 12px 8px 8px !important;
  }
}

/* Signup two-column card (matching attached design) */
.btc-signup-card {
  max-width: 1200px;
  margin: 40px auto;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  box-shadow: 0 15px 40px rgba(2, 12, 35, 0.12);
  border: 8px solid rgba(255, 255, 255, 0.9);
}

.btc-signup-card .left-panel {
  background: linear-gradient(180deg, #0b6df0, #074bb3);
  color: #fff;
  padding: 48px 36px;
  display: flex;
  align-items: center;
}

/* Left panel visual overhaul to match design */
.btc-signup-card .left-panel {
  background-image: url('/wp-content/plugins/btc-portal/assets/../images/signup-bg.png');
  background-size: cover;
  background-position: center center;
  position: relative;
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .btc-signup-card .left-panel {
    display: none;
  }
}

.btc-signup-card .left-bg {
  width: 100%;
  max-width: 520px;
  backdrop-filter: blur(10px) saturate(120%);
}

.btc-signup-card .btc-badge {
  display: block;
  margin: 0 auto 18px auto;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.btc-signup-card .left-panel .benefits.centered {
  background: rgba(3, 30, 45, 0.45);
  padding: 48px 34px;
  border-radius: 12px;
  text-align: center;
  color: #E6F6FF;
}

.btc-signup-card .left-panel .benefits.centered h3 {
  margin: 0 0 12px;
  font-size: 24px;
  color: #FFFFFF;
  font-weight: 700;
}

.btc-signup-card .left-panel .benefits.centered ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  padding: 0px 4%
}

.btc-signup-card .left-panel .benefits.centered li {
  margin: 4px 0;
  padding-left: 0;
  font-size: 15px;
  display: flex;
  align-items: left;
  justify-content: left;
  gap: 12px;
  font-weight: 500;
}

.btc-signup-card .left-panel .benefits.centered li i.ph-regular.ph-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #FFD966;
  font-weight: 700;
  font-size: 20px;
  margin-right: 0px;
}

.btc-signup-card .left-panel .benefits.centered li i.ph-regular.ph-check::before {
  font-size: 20px;
}

.btc-signup-card .left-panel .benefits.centered li:before {
  content: none;
}

.btc-signup-card .left-panel .benefits {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 46px 28px;
  width: 100%;
}

.btc-signup-card .left-panel h3 {
  margin: 0 0 12px;
  font-size: 22px;
}

.btc-signup-card .left-panel ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.btc-signup-card .left-panel li {
  margin: 10px 0;
  padding-left: 22px;
  position: relative;
}

.btc-signup-card .left-panel li:before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.btc-signup-card .right-panel {
  background: #fff;
  padding: 24px 40px;
  display: flex;
  align-items: flex-start;
}

.btc-signup-card .right-panel .form-wrap {
  width: 100%;
}

.btc-signup-card .right-panel h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--btc-darkblue-text);
}

.btc-signup-card label {
  display: block;
  font-weight: 600;
  color: #4b5563;
  margin-top: 12px;
}

.btc-signup-card input[type="text"],
.btc-signup-card input[type="email"],
.btc-signup-card select {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--btc-border);
  border-radius: 6px;
  margin-top: 6px;
}

.btc-signup-card .confirm-btn {
  margin-top: 18px;
  width: 100%;
  padding: 16px;
  background: var(--btc-primary);
  color: #fff;
  border-radius: 10px;
  border: none;
  font-size: 18px;
  font-weight: 700;
}

.btc-signup-card .muted {
  color: #6b7280;
  font-size: 13px;
  margin-top: 8px;
}

.otp-header {
  font-weight: 500;
  font-size: 14px;
}

@media (max-width: 900px) {
  .btc-signup-card {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .btc-signup-card .left-panel {
    padding: 24px;
  }

  .btc-signup-card .right-panel {
    padding: 20px;
  }
}

/* Last-resort override: ensure right-panel form controls show only a bottom border
   This must come after any other .btc-signup-card rules to win the cascade. */
.btc-signup-card .right-panel input[type="text"],
.btc-signup-card .right-panel input[type="email"],
.btc-signup-card .right-panel input[type="password"],
.btc-signup-card .right-panel input[type="tel"],
.btc-signup-card .right-panel textarea,
.btc-signup-card .right-panel select {
  border: none !important;
  border-bottom: 1px solid #D1D5DB !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0px 6px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  height: 24px;
}

.btc-signup-card .right-panel input::placeholder,
.btc-signup-card .right-panel textarea::placeholder,
.btc-signup-card .right-panel select::placeholder {
  color: #9CA3AF !important;
}

.btc-signup-card .right-panel input:focus,
.btc-signup-card .right-panel textarea:focus,
.btc-signup-card .right-panel select:focus {
  border-bottom-color: var(--btc-primary) !important;
  box-shadow: none !important;
}



/*Custom tour*/
.btc-tour-meta {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-weight: 500
}

.btc-meta-item {
  opacity: .9
}

.btc-meta-sep {
  opacity: .5
}

/* Simple responsive gallery */
.btc-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px
}

.btc-gallery-grid .btc-gallery-item:nth-child(1) {
  grid-row: span 2
}

.btc-gallery-grid .btc-gallery-item img {
  border-radius: 12px;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media(max-width:900px) {
  .btc-gallery-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .btc-gallery-grid {
    grid-template-columns: 1fr
  }
}

.btc-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px
}

.btc-highlights__card {
  display: flex;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--ct-border-color, #e5e7eb);
  border-radius: 16px;
  background: #f5f5f5;
  align-items: flex-start;
  flex-direction: column;
  color: #222;
  font-weight: 400;
}

.btc-highlights__icon {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 48px;
  height: 48px;
}

.btc-highlights__icon .dashicons {
  font-size: 30px;
  width: 30px;
  height: 30px;
  color: var(--btc-primary-dark);
}

.btc-highlights__icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.btc-highlights__icon .ph {
  font-size: 30px;
  width: 30px;
  height: 30px;
  color: var(--btc-primary-dark);
}

.btc-highlights__title {
  font-weight: 600
}

.btc-highlights__sub {
  opacity: .8;
  font-size: .9rem;
  line-height: 1.2;
}

@media(max-width:900px) {
  .btc-highlights {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {
  .btc-highlights {
    grid-template-columns: 1fr
  }
}

.btc-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: .5rem 0 0
}

.star {
  font-size: 18px;
  line-height: 1
}

.star--half {
  position: relative
}

.star--half::after {
  /* visually mimic half star */
}

/* ===============================
   BOOKING DETAILS PAGE
==================================*/

/* Action group beside the page title */
.btc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.btc-actions .btn {
  height: 40px;
  font-weight: 600;
}

/* Summary header: image + body + help card */
#btc-booking-root .btc-booking__summary {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 18px;
  align-items: center;
}

#btc-booking-root .btc-booking__media img {
  width: 160px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--btc-shadow);
}

#btc-booking-root .btc-booking__title {
  font-size: 18px;
  font-weight: 600;
  color: #0F172A;
}

#btc-booking-root .btc-booking__subtitle {
  color: var(--btc-muted);
  font-size: 14px;
}

#btc-booking-root .tripCard__meta {
  margin-top: 6px;
}

/* Payment lines */
#btc-booking-root .btc-paylines>div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: #0F172A;
}

#btc-booking-root .btc-paylines>div span:last-child {
  font-weight: 500;
}

/* Additional info copy note */
#btc-booking-root .copy-row {
  color: #0F172A;
  background: #F8FAFC;
  border: 1px solid var(--btc-border);
  border-radius: 10px;
  padding: 12px;
}

/* Info rows in details sections */
#btc-booking-root .info-row {
  grid-template-columns: 180px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--btc-border);
}

#btc-booking-root .info-row .label {
  color: #0F172A;
  font-weight: 500;
}

#btc-booking-root .info-row .value {
  color: #0F172A;
  font-weight: 400;
}

/* Badge next to confirmation code (reuse badge styles) */
#bk-payment-badge.badge {
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .08);
}

/* Links inside card titles */
.tripCard__title .tripCard__link {
  color: inherit;
  text-decoration: none;
}

.tripCard__title .tripCard__link:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  #btc-booking-root .btc-booking__summary {
    grid-template-columns: 1fr;
  }

  #btc-booking-root .btc-booking__media img {
    width: 100%;
    height: 180px;
  }

  #btc-booking-root .info-row {
    grid-template-columns: 140px 1fr;
  }
}

/* =========================================
   MOBILE RESPONSIVENESS FIXES
========================================= */

/* 1. Fix the Sidebar: Turn into Horizontal Scroll on Mobile */
@media (max-width: 1024px) {
  .btc-portal__nav nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding-bottom: 4px;
    /* Space for scrollbar */
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    border-bottom: 1px solid var(--btc-border);
    padding: 10px 0;
  }

  .btc-portal__nav nav a {
    flex: 0 0 auto;
    /* Don't shrink links */
    margin-top: 0 !important;
    /* Reset vertical margin */
    font-size: 14px;
    padding: 8px 14px;
    border: 1px solid var(--btc-border);
  }

  /* Optional: Hide scrollbar for cleaner look */
  .btc-portal__nav nav::-webkit-scrollbar {
    display: none;
  }
}

/* 2. Fix the Hero: Allow wrapping on small screens */
@media (max-width: 600px) {
  .btc-hero__inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .btc-hero__points {
    margin-left: 0;
    width: 100%;
    /* Make points bar full width on mobile */
    justify-content: center;
  }
}

/* 3. Fix Membership Cards: Stack vertically on mobile */
@media (max-width: 768px) {
  .btc-tiercard {
    flex-direction: column;
  }

  .btc-tiercard__badge {
    width: 100%;
    /* Full width */
  }
}

/* =========================================
   MOBILE RESPONSIVENESS (Overview Page)
   Add to the bottom of assets/portal.css
========================================= */

/* Tablet & Mobile Breakpoint (Max Width 960px) */
@media (max-width: 960px) {

  /* 1. Fix Sidebar Navigation
     Turns vertical list into a horizontal scrollable menu */
  .btc-portal__nav nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding-bottom: 12px;
    /* Space for scrollbar touch */
    border-bottom: 1px solid var(--btc-border);
    margin-bottom: 24px;
    -webkit-overflow-scrolling: touch;
  }

  .btc-portal__nav nav a {
    flex: 0 0 auto;
    /* Prevent links from shrinking */
    margin-top: 0 !important;
    background: #fff;
    border: 1px solid var(--btc-border);
    font-size: 14px;
  }

  /* Hide scrollbar for cleaner look */
  .btc-portal__nav nav::-webkit-scrollbar {
    display: none;
  }

  /* 2. Fix Hero Section (Welcome + Points) */
  .btc-hero__inner {
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 16px;
  }

  .btc-hero__points {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    margin-top: 8px;
  }
}

/* Mobile Phone Breakpoint (Max Width 700px) */
@media (max-width: 700px) {
  .btc-portal.container {
    padding: 10px;
    margin-top: 70px;
  }

  /* 3. Fix Booking Cards (Overview List)
     Stacks Image on top, Text in middle, Status at bottom */
  .btc-bottom-section {
    padding: 10px 10px;

  }

  .btc-book {
    grid-template-columns: 1fr;
    /* Single column layout */
    gap: 8px;
    text-align: left;
    height: auto;
  }

  .btc-book__media img {
    width: 100%;
    /* Full width image */
    height: 180px;
    /* Taller image for mobile */
    margin-bottom: 4px;
  }

  .btc-book__meta {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
  }

  /* Move the Status Pill to align left or stretch */
  .btc-book__side {
    align-items: flex-start;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }

  /* 4. Fix Membership Tier Cards 
     Stacks them vertically instead of side-by-side */
  .btc-tiercard {
    flex-direction: column;
  }

  .btc-tiercard__badge {
    width: 100%;
    float: none;
  }

  /* 5. Fix Referral Card 
     Stacks Text and Seal vertically */
  .btc-refer {
    flex-direction: column-reverse;
    /* Text bottom, Seal top */
    text-align: center;
    gap: 8px;
    padding: 24px;
  }

  .btc-refer__copy {
    align-items: center;
    width: 100%;
  }

  .btc-refer__seal {
    margin: 0 auto;
    /* Center the seal */
  }

  /* 6. Fix Support Contacts */
  .btc-support-row {
    flex-direction: column;
  }

  .btc-support-contact {
    width: 100%;
  }
}

/* ===============================
   SHIMMER LOADING ANIMATION
==================================*/
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.skeleton-loader {
  background: linear-gradient(90deg,
      #f0f0f0 0%,
      #f8f8f8 20%,
      #f0f0f0 40%,
      #f0f0f0 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 4px;
  display: inline-block;
}

.skeleton-input {
  height: 40px;
  width: 100%;
  min-width: 150px;
}

.skeleton-select {
  height: 40px;
  width: 100%;
  min-width: 150px;
}

.skeleton-text {
  height: 20px;
  width: 100%;
  margin: 8px 0;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-card {
  height: 120px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

.skeleton-addon-card {
  height: 100px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 12px;
}

.skeleton-booking-summary {
  height: 300px;
  width: 100%;
  border-radius: 12px;
}

.skeleton-itinerary {
  height: 200px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Hide skeleton when content is loaded */
.skeleton-loader.loaded {
  display: none;
}

/* Ensure skeleton doesn't interfere with actual content */
.summary-field .skeleton-loader,
#addons-list-container .skeleton-loader,
.itinerary-timeline-content .skeleton-loader,
#price-details-wrapper .skeleton-loader {
  margin: 0;
}

/* Empty Trip Message used in trips.php */
.tripEmpty__message {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--btc-muted);
  font-size: 1.1rem;
  background: #fff;
  border-radius: var(--btc-radius);
  border: 1px dashed var(--btc-border);
  margin-top: 1rem;
}