/* ===============================
   AUTH / LOGIN / SIGNUP / RESET
==================================*/
.btc-auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #eaf6ff 0%, #cbe0f7 100%);
}
.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: 400px;
  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: 18px;
}
.btc-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.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;
}
.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-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;
  }
}
: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;
}

.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-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; }

.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; }
.copy-row__Right .btn{ height:44px; min-width:150px; }

.btc-txn{ display:grid; grid-template-columns:260px 1fr 60px 80px; gap:8px; padding:14px 0px;align-items: end; }
.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-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); }
.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;}
.support-card{ background:#fff; border:1px solid var(--btc-border); border-radius:16px; padding:16px; box-shadow:var(--btc-shadow); }
.support-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.support-form textarea{ grid-column:1 / -1; min-height:90px; }
.support-form input, .support-form textarea{ border:1px solid var(--btc-border); border-radius:12px; padding:12px; }
.support-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.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); }
.btc-modal__box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px, 92vw); background:#fff;
  border-radius:18px; box-shadow:var(--btc-shadow); border:1px solid var(--btc-border); padding:20px; }
.btc-modal__title{ font-size:20px; font-weight:600; margin:6px 0 12px; text-align:center; }
.btc-modal__foot{ display:flex; gap:10px; flex-direction:column; }
.btc-modal .btn{ height:46px; font-weight:700; }

/* ===============================
   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:100px; }
.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('../badges/bronze.png'); }
.btc-hero--silver .btc-hero__emblem{ background-image: url('../badges/silver.png'); }
.btc-hero--gold   .btc-hero__emblem{ background-image: url('../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__media img{ width:120px; height:120px; border-radius:6px; object-fit:cover; }
.btc-book__title{ font-weight:500; font-size:18px; color:#111827; line-height: 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:999px; font-weight:600; }
.pill.upcoming{ background:#DCFCE7; color:#15803D; }
.pill.past{ background:#E5E7EB; color:#374151; }
.pill.cancelled{ background:#FEE2E2; color:#991B1B; }

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

.referral-bg{
background-image:url('../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('../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('../badges/bronze.png'); }
.btc-tiercard__badge--silver .emblem{ background-image:url('../badges/silver.png'); }
.btc-tiercard__badge--gold   .emblem{ background-image:url('../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('../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:left; justify-content:left; 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}
.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; }       /* belt & suspenders */

/* optional: keep media from pushing layout */
.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('../badges/seal-referal.png');
    width:102px; height:102px; 
  background-size:102px 102px; background-position:center; background-repeat:no-repeat;
}



/* =========================================================
   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;
  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;
}

/* =========================================================
  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__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; }

/* === 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; }