/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* --brand:        #00a000;
  --brand-dark:   #005700;
  --brand-light:  #A0D8A0;
  --brand-light2: #C0E0C0; */

  --brand:        #F5C400;
  --brand-dark:   #7A6200;
  --brand-light:  #FEF08A;
  --brand-light2: #FEFCE8;

  /* --brand:        #D97706;
  --brand-dark:   #92400E;
  --brand-light:  #FDE68A;
  --brand-light2: #FEF3C7; */

  --on-brand:     #000;

  /* Accent — price callouts, reply button, status-active badge, signal bar */
  --accent:        #00a000;
  --accent-dark:   #005700;
  --accent-light:  #A0D8A0;
  --accent-light2: #C0E0C0;

  /* --bg:      #F1EFE8; */
  /* --bg:      #F0F0F0; */
  --bg:      #eeeeee;
  --bg2:     #3e3e3e;
  --surface: #ffffff;
  --surface2:#f8f7f5;

  --border:  rgba(0, 0, 0, 0.09);
  --border2: rgba(0, 0, 0, 0.16);

  --text1: #1a1a18;
  --text2: #555550;
  --text3: #888880;

  --radius:    12px;
  --radius-sm:  8px;

  --shadow-card:  0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.05);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.10), 0 8px 32px rgba(0,0,0,.06);

  --font-head: 'Sora',    sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background:  var(--bg);
  color:       var(--text1);
  min-height:  100vh;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: var(--font-body); }

/* ── Navigation ───────────────────────────────────────────────────────────── */
.mkt-nav {
  background:    var(--bg2);
  border-bottom: 1px solid var(--border);
  height:        60px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       0 24px;
  position:      sticky;
  top:           0;
  z-index:       100;
}

.nav-btns { display: flex; gap: 15px; align-items: center; }

.btn-outline {
  height:        40px;
  padding:       0 16px;
  border:        1px solid var(--text3);
  border-radius: var(--radius-sm);
  background:    transparent;
  font-size:     13px;
  color:         var(--surface2);
  transition:    background .15s, color .15s;
}
.btn-outline:hover { background: var(--text2);  }

.btn-brand {
  height:        40px;
  padding:       0 16px;
  border:        none;
  border-radius: var(--radius-sm);
  background:    var(--brand);
  font-size:     13px;
  font-weight:   800;
  color:         var(--on-brand);
  transition:    background .15s;
}
.btn-brand:hover { background: var(--brand-dark); color: #fff; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--text1);
  color:      #fff;
  padding:    32px 24px;
}
.hero h1 {
  font-family: var(--font-head);
  font-size:   26px;
  font-weight: 600;
  margin-bottom: 6px;
}
.hero p {
  font-size: 14px;
  color:     rgba(255,255,255,.5);
  margin-bottom: 20px;
}
.hero-stats { display: flex; gap: 28px; }
.hstat { font-size: 13px; color: rgba(255,255,255,.45); }
.hstat strong {
  display:     block;
  font-family: var(--font-head);
  font-size:   22px;
  font-weight: 600;
  color:       #fff;
  line-height: 1.15;
}

/* ── Search bar ───────────────────────────────────────────────────────────── */
.search-bar {
  height: 60px;
  /* background:    var(--text1); */
  background:    var(--bg2);
  border-bottom: 1px solid var(--border);
  padding-right: 15px;
  display:       flex;
  /* gap:           20px; */
  align-items:   center;
  position:      sticky;
  top:           0;
  z-index:       50;
}

.search-logo {
  width:       240px;
  min-width:   240px;
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-logo img {
  height:      59px;
  width:       auto;
  object-fit:  contain;
}

.search-logo-mobile {
  display:    none; /* shown only on mobile via media query */
  background: none;
  border:     none;
  padding:    0;
  cursor:     pointer;
  align-items: center;
  opacity:    0.85;
  flex-shrink: 0;
  transition: opacity .15s;
}
.search-logo-mobile:hover { opacity: 1; }
.search-logo-mobile img {
  height: 20px;
  width:  auto;
}

.search-wrap {
  margin:  0 15px 0 15px;
  flex:     1;
  position: relative;
}
.search-wrap i {
  position:  absolute;
  left:      12px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--text3);
  font-size: 16px;
  pointer-events: none;
}
.search-wrap input {
  width:         100%;
  height:        40px;
  padding:       0 14px 0 40px;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    var(--surface2);
  font-family:   var(--font-body);
  font-size:     14px;
  color:         var(--text1);
  outline:       none;
  transition:    border-color .15s;
}
.search-wrap input:focus { border-color: var(--brand); }
.search-wrap input::placeholder { color: var(--text3); }

/* ── Body layout ──────────────────────────────────────────────────────────── */
.body-wrap { display: flex; align-items: flex-start; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  width:          240px;
  min-width:      240px;
  background:     var(--surface);
  border-right:   1px solid var(--border);
  padding:        20px 16px;
  position:       sticky;
  top:            60px;
  height:         calc(100vh - 60px);
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
}

.sidebar-footer {
  justify-content: center;
  align-items: center;
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px 12px;
  margin-top:  auto;
  padding-top: 14px;
  border-top:  1px solid var(--border);
}
.sidebar-footer a,
.sidebar-footer .link-btn {
  font-size:        11px;
  color:            var(--text3);
  text-decoration:  none;
  background:       none;
  border:           none;
  padding:          0;
  cursor:           pointer;
  transition:       color .15s;
}
.sidebar-footer a:hover,
.sidebar-footer .link-btn:hover { color: var(--text2); }

.filter-group { margin-bottom: 20px; }

.filter-label {
  display:        block;
  font-family:    var(--font-head);
  font-size:      10.5px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text3);
  margin-bottom:  7px;
}

.filter-select {
  width:          100%;
  height:         36px;
  padding:        0 32px 0 10px;
  border:         1px solid var(--border2);
  border-radius:  var(--radius-sm);
  background:     var(--surface2);
  font-family:    var(--font-body);
  font-size:      13px;
  color:          var(--text1);
  outline:        none;
  appearance:     none;
  cursor:         pointer;
  background-image:    url("data:image/svg+xml,%3Csvg width='11' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  transition:     border-color .15s;
}
.filter-select:focus { border-color: var(--brand); }

.filter-input {
  height:        34px;
  padding:       0 10px;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    var(--surface2);
  font-family:   var(--font-body);
  font-size:     13px;
  color:         var(--text1);
  outline:       none;
  transition:    border-color .15s;
}
.filter-input:focus   { border-color: var(--brand); }
.filter-input.full    { width: 100%; }
.filter-input::placeholder { color: var(--text3); }

.range-row {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.range-row .filter-input { flex: 1; min-width: 0; }
.range-sep { font-size: 12px; color: var(--text3); }

.btn-clear {
  width:         100%;
  height:        34px;
  margin-top:    6px;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    transparent;
  font-size:     12px;
  color:         var(--text3);
  transition:    color .15s, border-color .15s;
}
.btn-clear:hover { color: var(--brand); border-color: var(--brand); }

/* ── Grid area ────────────────────────────────────────────────────────────── */
.grid-area { flex: 1; padding: 20px 20px; min-width: 0; }

.grid-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
}

.grid-count { padding: 0 10px; font-size: 13px; color: var(--text3); }
.grid-count strong { color: var(--text1); font-weight: 500; }

.sort-wrap { display: flex; align-items: center; gap: 8px; }
.sort-label { font-size: 12px; color: var(--text3); }
.sort-select-wrap {
  position: relative;
  display:  flex;
  align-items: center;
}
.sort-icon {
  position:      absolute;
  left:          9px;
  font-size:     14px;
  color:         var(--text3);
  pointer-events: none;
}
.sort-select {
  padding:             0 10px 0 28px;
  appearance:          none;
  background-image:    url("data:image/svg+xml,%3Csvg width='11' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 8px center;
}

/* ── Ad grid ──────────────────────────────────────────────────────────────── */
.ad-grid {    
  padding-bottom: 80px;
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   16px;
}

/* ── Ad card ──────────────────────────────────────────────────────────────── */
.ad-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  cursor:        pointer;
  display:       flex;
  flex-direction: column;
  box-shadow:    var(--shadow-card);
  transition:    box-shadow .2s, transform .2s, border-color .2s;
}
.ad-card:hover {
  box-shadow:    var(--shadow-hover);
  transform:     translateY(-2px);
  border-color:  var(--border2);
}
.ad-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.card-img {
  position:   relative;
  height:     180px;
  overflow:   hidden;
  background: var(--surface2);
  flex-shrink: 0;
}
.card-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .3s;
}
.ad-card:hover .card-img img { transform: scale(1.04); }

.badge-featured {
  position:      absolute;
  top:           10px;
  left:          10px;
  background:    var(--brand);
  color:         var(--on-brand);
  font-family:   var(--font-head);
  font-size:     10px;
  font-weight:   600;
  padding:       3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.badge-cond {
  position:      absolute;
  top:           10px;
  right:         10px;
  font-size:     10px;
  font-weight:   600;
  padding:       3px 8px;
  border-radius: 4px;
}

/* Status overlay badges on card image */
.badge-status {
  position:      absolute;
  bottom:        10px;
  left:          50%;
  transform:     translateX(-50%);
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  font-size:     11px;
  font-weight:   700;
  padding:       4px 10px;
  border-radius: 20px;
  white-space:   nowrap;
  pointer-events: none;
  letter-spacing: .03em;
}
.badge-reserved { background: #fff3cd; color: #856404; }
.badge-sold     { background: #d1e7dd; color: #0a5c35; }
.badge-inactive { background: rgba(0,0,0,.55); color: #fff; }
.badge-msg {
  position:      absolute;
  top:           10px;
  right:         10px;
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-size:     11px;
  font-weight:   700;
  padding:       4px 9px;
  border-radius: 20px;
  white-space:   nowrap;
  pointer-events: none;
  background:    #d93025;
  color:         #fff;
  letter-spacing: .03em;
}

.card-img--dimmed img { filter: grayscale(60%) opacity(.7); }

/* Buyer status notices (detail page) */
.ad-status-notice {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       14px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size:     13px;
  line-height:   1.5;
}
.ad-status-notice i { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.ad-status-notice div { display: flex; flex-direction: column; gap: 2px; }
.ad-status-notice strong { font-size: 13.5px; }
.ad-status-notice span   { color: var(--text3); }

.ad-status-notice--sold     { background: #d1e7dd; color: #0a5c35; }
.ad-status-notice--reserved { background: #fff3cd; color: #856404; }
.ad-status-notice--sold i, .ad-status-notice--sold strong   { color: #0a5c35; }
.ad-status-notice--reserved i, .ad-status-notice--reserved strong { color: #856404; }

.card-body {
  padding: 14px;
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     6px;
}

.card-title {
  font-family:    var(--font-head);
  font-size:      14px;
  font-weight:    600;
  color:          var(--text1);
  line-height:    1.3;
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
}

.card-meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.chip {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   11.5px;
  color:       var(--text3);
}
.chip i { font-size: 13px; }

.card-price {
  font-family: var(--font-head);
  font-size:   18px;
  font-weight: 600;
  color:       var(--accent);
  margin-top:  auto;
  padding-top: 6px;
}

.card-seller {
  font-size:      11.5px;
  color:          var(--text3);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* ── Empty / loading states ───────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding:    70px 20px;
  color:      var(--text3);
}
.empty-state i {
  font-size:     42px;
  display:       block;
  margin-bottom: 14px;
  opacity:       .35;
}
.empty-state p { font-size: 14px; }

.empty-marketplace {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100vh - 130px);
  text-align:      center;
  padding:         24px;
  color:           var(--text3);
  gap:             10px;
}
.empty-marketplace i {
  font-size:     80px;
  opacity:       .18;
}
.empty-marketplace-title {
  font-size:   17px;
  font-weight: 500;
  color:       var(--text3);
  margin:      0;
}
.empty-marketplace-sub {
  font-size: 13px;
  margin:    0;
  opacity:   .8;
}
.empty-marketplace-cta {
  padding: 8px 16px;
  margin-top: 6px;
  border-radius: 6px;
  border: none;
  background: var(--surface);
}

.loading-wrap {
  display:     flex;
  justify-content: center;
  align-items: center;
  padding:     80px 20px;
  gap:         10px;
  color:       var(--text3);
  font-size:   13px;
}
.spinner {
  width:        22px;
  height:       22px;
  border:       2.5px solid var(--border2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation:    spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DETAIL PAGE                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

.detail-page { background: var(--bg); min-height: calc(100vh - 60px); }
.detail-inner { max-width: 1020px; margin: 0 auto; padding: 26px 24px; }

.detail-nav-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
}

.share-btn {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   13px;
  color:       var(--text3);
  background:  none;
  border:      1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding:     6px 14px;
  transition:  color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.share-btn:hover { color: var(--accent-dark); border-color: var(--accent); background: var(--accent-light2); }
.share-btn i { font-size: 15px; }

.back-btn {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   13px;
  color:       var(--text3);
  background:  none;
  border:      none;
  padding:     0;
  transition:  color .15s;
}
.back-btn:hover { color: var(--text2); }
.back-btn i     { font-size: 15px; }

.detail-grid {
  display:               grid;
  grid-template-columns: 1fr 320px;
  gap:                   26px;
  align-items:           start;
}

/* Gallery */
.detail-gallery {
  border-radius: var(--radius);
  overflow:      hidden;
  height:        380px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  margin-bottom: 12px;
}
.detail-gallery img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.detail-thumbs { display: flex; gap: 9px; margin-bottom: 4px; }
.detail-thumb {
  width:         76px;
  height:        56px;
  border-radius: 8px;
  overflow:      hidden;
  cursor:        pointer;
  border:        2px solid transparent;
  transition:    border-color .15s;
  flex-shrink:   0;
}
.detail-thumb.active { border-color: var(--brand); }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Info */
.detail-info { margin-top: 22px; }

.detail-cat-badge {
  display:        inline-block;
  font-size:      10.5px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--on-brand);
  background:     var(--brand);
  padding:        3px 10px;
  border-radius:  4px;
  margin-bottom:  10px;
}

.detail-title {
  font-family:   var(--font-head);
  font-size:     22px;
  font-weight:   600;
  color:         var(--text1);
  line-height:   1.25;
  margin-bottom: 18px;
}

.detail-specs {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  margin-bottom: 22px;
}

.spec-item {
  padding:       11px 14px;
  border-bottom: 1px solid var(--border);
  border-right:  1px solid var(--border);
}
.spec-item:nth-child(even)      { border-right: none; }
.spec-item:nth-last-child(-n+2) { border-bottom: none; }

.spec-key {
  font-size:     11px;
  color:         var(--text3);
  margin-bottom: 3px;
}
.spec-val {
  font-size:   13px;
  font-weight: 500;
  color:       var(--text1);
}

.detail-desc-title {
  font-family:   var(--font-head);
  font-size:     13px;
  font-weight:   600;
  color:         var(--text2);
  margin-bottom: 8px;
}
.detail-desc {
  font-size:   13.5px;
  color:       var(--text2);
  line-height: 1.65;
}

/* Right card */
.detail-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       22px;
  box-shadow:    var(--shadow-card);
  position:      sticky;
  top:           80px;
}

.detail-price {
  font-family:   var(--font-head);
  font-size:     30px;
  font-weight:   600;
  color:         var(--accent);
  margin-bottom: 4px;
  line-height:   1;
}
.detail-price-note {
  font-size:      11.5px;
  color:          var(--text3);
  padding-bottom: 10px;
  margin-bottom:  20px;
  border-bottom:  1px solid var(--border);
}

.btn-reservar {
  width:          100%;
  padding:        13px 0;
  border:         none;
  border-radius:  var(--radius-sm);
  background:     var(--brand);
  color:          var(--on-brand);
  font-family:    var(--font-head);
  font-size:      14px;
  font-weight:    600;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  margin-bottom:  10px;
  transition:     background .15s;
}
.btn-reservar:hover { background: var(--brand-dark); color: #fff; }
.btn-reservar i     { font-size: 15px; }

.btn-message {
  width:          100%;
  padding:        11px 0;
  border:         1px solid var(--border2);
  border-radius:  var(--radius-sm);
  background:     transparent;
  color:          var(--text1);
  font-family:    var(--font-body);
  font-size:      13.5px;
  font-weight:    500;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  transition:     background .15s, border-color .15s;
}
.btn-message:hover  { background: var(--surface2); border-color: var(--text3); }
.btn-message i      { font-size: 15px; }

.btn-proposal {
  width:          100%;
  padding:        11px 0;
  border:         1px solid var(--border2);
  border-radius:  var(--radius-sm);
  background:     transparent;
  color:          var(--text1);
  font-size:      13.5px;
  font-weight:    500;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  margin-bottom:  10px;
  transition:     background .15s, border-color .15s;
}
.btn-proposal:hover { background: var(--surface2); border-color: var(--text3); }
.btn-proposal i     { font-size: 15px; }

/* When proposal is the primary CTA (carries btn-reservar too) */
.btn-reservar.btn-proposal { background: var(--brand); border: none; color: var(--on-brand); }
.btn-reservar.btn-proposal:hover { background: var(--brand-dark); color: #fff; }

/* Proposal modal */
.prop-field {
  margin-bottom: 10px;
}
.prop-label {
  display:       block;
  font-size:     11.5px;
  font-weight:   600;
  color:         var(--text2);
  margin:        6px 0 6px 0;
}
.prop-price-wrap {
  display:       flex;
  align-items:   center;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  background:    var(--surface1);
  transition:    border-color .15s;
}
.prop-price-wrap:focus-within { border-color: var(--brand); }
.prop-currency {
  padding:     0 10px;
  font-size:   13px;
  color:       var(--text3);
  background:  var(--surface2);
  border-right: 1px solid var(--border2);
  align-self:  stretch;
  display:     flex;
  align-items: center;
}
.prop-price-input {
  flex:        1;
  border:      none;
  background:  transparent;
  padding:     9px 12px;
  font-size:   16px;
  font-weight: 600;
  font-family: var(--font-head);
  color:       var(--text1);
  outline:     none;
}
.prop-price-input::-webkit-inner-spin-button,
.prop-price-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.prop-price-hint {
  font-size:  11px;
  color:      var(--text3);
  margin-top: 5px;
}
.prop-textarea {
  width:         100%;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    var(--surface1);
  padding:       10px 12px;
  font-size:     13.5px;
  color:         var(--text1);
  font-family:   var(--font-body);
  resize:        vertical;
  outline:       none;
  transition:    border-color .15s;
  box-sizing:    border-box;
}
.prop-textarea:focus { border-color: var(--brand); }
.prop-textarea::placeholder { color: var(--text3); }

/* Seller */
.seller-label { font-size: 11px; color: var(--text3); margin-bottom: 5px; }
.seller-name {
  font-size:   13.5px;
  font-weight: 500;
  color:       var(--text1);
  display:     flex;
  align-items: center;
  gap:         7px;
}
.seller-verified {
  width:           17px;
  height:          17px;
  border-radius:   50%;
  background:      #1565c0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.seller-verified i { font-size: 9px; color: #fff; }

.seller-location {
  margin-bottom:   20px;
  font-size:   12px;
  color:       var(--text3);
  display:     flex;
  align-items: center;
  gap:         5px;
}
.seller-location i { font-size: 14px; }

/* Reserve note */
.reserve-note {
  margin-top:    16px;
  padding:       12px 13px;
  background:    var(--surface2);
  border-radius: var(--radius-sm);
  border:        1px solid var(--border);
  font-size:     11.5px;
  color:         var(--text3);
  line-height:   1.55;
}
.reserve-note strong {
  display:       block;
  margin-bottom: 4px;
  color:         var(--text2);
  font-weight:   500;
}

/* ── Owner ad controls ───────────────────────────────────────────────────── */
.ad-owner-controls {
  padding-top:   4px;
}
.ad-owner-label {
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-size:     11px;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:         var(--text3);
  margin-bottom: 10px;
}
.ad-owner-label i { font-size: 13px; }

.ad-status-group {
  display: flex;
  gap:     8px;
  margin-bottom: 10px;
}
.ad-status-btn {
  flex:          1;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           4px;
  padding:       10px 6px;
  border:        2px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    var(--surface2);
  font-family:   var(--font-body);
  font-size:     11px;
  font-weight:   500;
  color:         var(--text2);
  cursor:        pointer;
  transition:    border-color .15s, background .15s, color .15s;
}
.ad-status-btn i { font-size: 18px; }
.ad-status-btn:hover:not(:disabled):not(.active) {
  border-color: var(--text3);
  background:   var(--surface);
}
.ad-status-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Active state colours per status */
.ad-status-btn.active[data-status="active"] {
  border-color: var(--accent);
  background:   var(--accent-light2);
  color:        var(--accent-dark);
}
.ad-status-btn.active[data-status="inactive"] {
  border-color: #e53935;
  background:   #fdecea;
  color:        #b71c1c;
}
.ad-status-btn.active[data-status="reserved"] {
  border-color: #d4b042;
  background:   #fff3cd; 
  color:        #856404; 
}
.ad-status-btn.active[data-status="sold"] {
  border-color: #6366f1;
  background:   #eef2ff;
  color:        #3730a3;
}

.ad-status-hint {
  font-size:  11.5px;
  color:      var(--text3);
  min-height: 16px;
}

/* ── Owner questions section ─────────────────────────────────────────────── */

.questions-section {
  margin-top:  20px;
  padding-top: 16px;
  border-top:  1px solid var(--border);
}

.questions-section-title {
  font-size:   12px;
  font-weight: 600;
  color:       var(--text2);
  margin:      0 0 12px;
  display:     flex;
  align-items: center;
  gap:         6px;
}

.questions-pending-count {
  background:    var(--brand);
  color:         var(--on-brand);
  font-size:     11px;
  font-weight:   700;
  padding:       1px 7px;
  border-radius: 20px;
}

.questions-loading,
.questions-empty {
  font-size:  12px;
  color:      var(--text3);
  display:    flex;
  align-items: center;
  gap:        6px;
  margin:     0;
}

.questions-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.question-card {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       12px;
  overflow:      hidden;
}
.question-card:has(.btn-contact-unlock),
.question-card:has(.btn-contact-unlocked),
.question-card:has(.contact-unlocked-badge) { padding-bottom: 0; }

.question-card--answered {
  opacity: 0.75;
}

.question-card-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 8px;
  flex-wrap:   wrap;
}

.question-badge {
  font-size:     10px;
  font-weight:   700;
  padding:       2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.question-badge--message  { background: #e8f4fd; color: #1a6fa8; }
.question-badge--proposal { background: #fef3e2; color: #a0640a; }
.question-badge--reserve  { background: #e8f7ee; color: #1a7a3f; }

.question-answered-badge {
  font-size:   10px;
  color:       var(--brand-dark);
  display:     flex;
  align-items: center;
  gap:         3px;
  margin-left: auto;
}
.buyer-question-pending {
  font-size:   10px;
  color:       var(--text3);
  display:     flex;
  align-items: center;
  gap:         3px;
  margin-left: auto;
}

.question-meta {
  font-size: 11px;
  color:     var(--text3);
}

.question-price {
  display:     block;
  font-size:   12px;
  font-weight: 600;
  color:       var(--text1);
  margin-bottom: 6px;
}

.question-text {
  font-size:   13px;
  color:       var(--text2);
  margin:      0 0 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break:  break-word;
}

.question-answer-wrap {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       8px 10px;
  margin-top:    4px;
}

.question-answer-label {
  font-size:   10px;
  font-weight: 600;
  color:       var(--text3);
  margin:      0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.question-answer-text {
  font-size:  12.5px;
  color:      var(--text1);
  margin:     0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.btn-reply-open {
  font-size:     12px;
  font-weight:   600;
  color:         var(--accent-dark);
  background:    none;
  border:        1px solid var(--accent-light);
  border-radius: var(--radius-sm);
  padding:       5px 12px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           5px;
  transition:    background 0.15s;
}
/* .btn-reply-open:hover { background: var(--brand-light2); } */
.btn-reply-open:hover { background: var(--accent-light2); }

.btn-contact-unlock {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  width:           calc(100% + 24px);
  margin-top:      14px;
  margin-left:     -12px;
  margin-right:    -12px;
  padding:         10px 0;
  border:          none;
  border-top:      1px solid var(--border);
  border-radius:   0 0 var(--radius-sm) var(--radius-sm);
  background:      var(--brand);
  color:           var(--on-brand);
  font-size:       13px;
  font-weight:     600;
  cursor:          pointer;
  transition:      background 0.15s;
}
.btn-contact-unlock:hover { background: var(--brand-dark); color: #fff; }

.btn-contact-unlocked {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  width:           calc(100% + 24px);
  margin-top:      14px;
  margin-left:     -12px;
  padding:         10px 0;
  border:          none;
  border-top:      1px solid var(--accent-light);
  border-radius:   0 0 var(--radius-sm) var(--radius-sm);
  background:      var(--accent-light);
  color:           var(--accent-dark);
  font-size:       13px;
  font-weight:     600;
  cursor:          pointer;
  transition:      background 0.15s;
}
.btn-contact-unlocked i { color: var(--accent); font-size: 15px; }
.btn-contact-unlocked:hover { background: var(--accent-light2); }

.contact-unlocked-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           calc(100% + 24px);
  margin-top:      14px;
  margin-left:     -12px;
  padding:         10px 0;
  background:      var(--surface2);
  color:           var(--brand-dark);
  font-size:       13px;
  font-weight:     600;
  border-top:      1px solid var(--brand-light2);
  border-radius:   0 0 var(--radius-sm) var(--radius-sm);
}
.contact-unlocked-badge i { font-size: 15px; color: var(--brand); }

.contact-unlocked-badge--detail {
  flex-direction: column;
  align-items:    flex-start;
  gap:            3px;
  padding:        3px 10px;
}
.contact-detail-row {
  display:     flex;
  align-items: center;
  gap:         16px;
  font-size:   12px;
  font-weight: 400;
  color:       var(--text2);
  width:       100%;
}
.contact-detail-row i { color: var(--text3); font-size: 14px; }
.contact-detail-value { flex: 1; word-break: break-all; }
.contact-copy-btn {
  flex-shrink:   0;
  background:    none;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       3px 7px;
  cursor:        pointer;
  color:         var(--text3);
  font-size:     13px;
  transition:    color .15s, border-color .15s;
}
.contact-copy-btn:hover { color: var(--brand); border-color: var(--brand); }
.contact-detail-row--modal { justify-content: center; margin-bottom: 16px; }

.pix-qr-img {
  display:       block;
  margin:        14px auto 20px;
  padding:       10px; 
  border-radius: var(--radius-sm);
  border:        1px solid var(--border);
}
.pix-code-row {
  margin:     4px 0 10px;
  background: var(--surface2);
  border:     1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:    6px 8px;
}
.pix-code-text {
  font-size:   10px;
  color:       var(--text3);
  font-family: monospace;
  line-height: 1.4;
}
.pix-hint {
  font-size:     12px;
  color:         var(--text3);
  text-align:    center;
  margin-bottom: 16px;
  line-height:   1.5;
}

.reply-textarea {
  width:         100%;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding:       8px 10px;
  font-size:     13px;
  font-family:   var(--font-body);
  resize:        vertical;
  min-height:    72px;
  box-sizing:    border-box;
  color:         var(--text1);
}
.reply-textarea:focus { outline: none; border-color: var(--brand); }

.reply-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             8px;
  margin-top:      8px;
}

.btn-reply-cancel {
  font-size:   12px;
  color:       var(--text3);
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     4px 8px;
}
.btn-reply-cancel:hover { color: var(--text1); }

.btn-reply-send {
  font-size:     12px;
  font-weight:   600;
  color:         var(--surface);
  background:    var(--accent);
  border:        none;
  border-radius: var(--radius-sm);
  padding:       6px 14px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           5px;
  transition:    background 0.15s;
}
.btn-reply-send:hover    { background: var(--accent-dark); color: #fff; }
.btn-reply-send:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── New ad form ─────────────────────────────────────────────────────────── */

/* Photo drop zone */
.ad-photo-drop {
  height:          260px;
  border:          2px dashed var(--border2);
  border-radius:   var(--radius);
  background:      var(--surface2);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  cursor:          pointer;
  transition:      border-color .15s, background .15s;
  margin-bottom:   12px;
  overflow:        hidden;
}
.ad-photo-drop:hover,
.ad-photo-drop.drag-over {
  border-color: var(--brand);
  background:   var(--brand-light2);
}
.ad-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ad-drop-empty i    { font-size: 36px; color: var(--text3); }
.ad-drop-empty p    { font-size: 14px; font-weight: 500; color: var(--text2); }
.ad-drop-empty span { font-size: 11.5px; color: var(--text3); }

.ad-main-preview {
  width:      100%;
  height:     0; 
  object-fit: cover;
  border-radius: var(--radius);
  pointer-events: none;
}

.ad-thumbs-row { margin-bottom: 4px; flex-wrap: wrap; }

.ad-thumb { position: relative; }
.ad-thumb-remove {
  position:    absolute;
  top:         2px;
  right:       2px;
  width:       18px;
  height:      18px;
  border:      none;
  border-radius: 50%;
  background:  rgba(0,0,0,.55);
  color:       #fff;
  font-size:   13px;
  line-height: 1;
  display:     flex;
  align-items: center;
  justify-content: center;
  opacity:     0;
  transition:  opacity .15s;
  cursor:      pointer;
  padding:     0;
}
.ad-thumb:hover .ad-thumb-remove { opacity: 1; }

.ad-thumb-add {
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px dashed var(--border2);
  background:      var(--surface2);
  color:           var(--text3);
  font-size:       22px;
  cursor:          pointer;
  transition:      border-color .15s, color .15s, background .15s;
}
.ad-thumb-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light2); }

/* Title input */
.ad-title-input {
  display:       block;
  width:         100%;
  font-family:   var(--font-head);
  font-size:     20px;
  font-weight:   600;
  color:         var(--text1);
  border:        none;
  border-bottom: 2px solid var(--border2);
  background:    transparent;
  padding:       6px 0;
  outline:       none;
  margin:        12px 0 16px;
  transition:    border-color .15s;
}
.ad-title-input:focus       { border-bottom-color: var(--brand); }
.ad-title-input::placeholder { color: var(--text3); font-weight: 400; font-size: 17px; }

/* Category select (replaces badge) */
.ad-cat-select {
  display:       inline-flex;
  font-size:     11px;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:         var(--brand-dark);
  background:    var(--brand-light);
  border:        none;
  border-radius: 4px;
  padding:       4px 10px;
  cursor:        pointer;
  outline:       none;
  appearance:    none;
}

/* Location row */
.ad-location-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 18px;
  color:       var(--text3);
}
.ad-location-row i { font-size: 15px; flex-shrink: 0; }
.ad-loc-select {
  height:      32px;
  padding:     0 10px;
  border:      1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:  var(--surface2);
  font-family: var(--font-body);
  font-size:   12px;
  color:       var(--text1);
  outline:     none;
  appearance:  none;
  cursor:      pointer;
}
.ad-city-input {
  flex:        1;
  height:      32px;
  padding:     0 10px;
  border:      1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:  var(--surface2);
  font-family: var(--font-body);
  font-size:   12px;
  color:       var(--text1);
  outline:     none;
  min-width:   0;
  transition:  border-color .15s;
}
.ad-city-input:focus { border-color: var(--brand); }

/* Spec inputs (inside the specs grid) */
.ad-spec-input,
.ad-spec-select {
  width:       100%;
  border:      none;
  border-bottom: 1px solid var(--border2);
  background:  transparent;
  font-family: var(--font-body);
  font-size:   13px;
  font-weight: 500;
  color:       var(--text1);
  padding:     2px 0;
  outline:     none;
  margin-top:  2px;
  appearance:  none;
  transition:  border-color .15s;
}
.ad-spec-input:focus,
.ad-spec-select:focus  { border-bottom-color: var(--brand); }
.ad-spec-input::placeholder { color: var(--text3); font-weight: 400; }

/* Description textarea */
.ad-textarea {
  display:       block;
  width:         100%;
  padding:       10px 12px;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    var(--surface2);
  font-family:   var(--font-body);
  font-size:     13.5px;
  color:         var(--text1);
  resize:        vertical;
  outline:       none;
  line-height:   1.55;
  transition:    border-color .15s;
}
.ad-textarea:focus       { border-color: var(--brand); }
.ad-textarea::placeholder { color: var(--text3); }

/* Price input */
.ad-price-wrap {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  margin-bottom: 15px;
}
.ad-price-prefix {
  font-family: var(--font-head);
  font-size:   22px;
  font-weight: 600;
  color:       var(--accent);
  flex-shrink: 0;
}
.ad-price-input {
  flex:        1;
  border:      none;
  border-bottom: 2px solid var(--accent-light2);
  background:  transparent;
  font-family: var(--font-head);
  font-size:   28px;
  font-weight: 600;
  color:       var(--accent);
  outline:     none;
  width:       100%;
  padding:     2px 0;
  transition:  border-color .15s;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ad-price-input:focus           { border-bottom-color: var(--accent); }
.ad-price-input::placeholder    { color: var(--accent-light); }
.ad-price-input::-webkit-outer-spin-button,
.ad-price-input::-webkit-inner-spin-button { appearance: none; }

/* Allow-proposals toggle tile */
.ad-toggle-tile {
  display:       block;
  cursor:        pointer;
  margin-bottom: 14px;
}
.ad-toggle-tile input[type="checkbox"] { display: none; }

.ad-toggle-body {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       12px 14px;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    var(--surface1);
  transition:    border-color .15s, background .15s;
}
/* .ad-toggle-tile:hover .ad-toggle-body          { border-color: var(--brand); background: var(--brand-light2); }
.ad-toggle-tile input:checked ~ .ad-toggle-body { border-color: var(--brand); background: var(--brand-light2); } */

.ad-toggle-icon {
  font-size:   20px;
  color:       var(--text3);
  flex-shrink: 0;
  transition:  color .15s;
}
.ad-toggle-tile input:checked ~ .ad-toggle-body .ad-toggle-icon { color: var(--accent); }

.ad-toggle-text {
  flex:      1;
  display:   flex;
  flex-direction: column;
  gap:       2px;
}
.ad-toggle-text strong { font-size: 13.5px; color: var(--text1); }
.ad-toggle-text span   { font-size: 11.5px; color: var(--text3); }

.ad-toggle-check {
  width:       20px;
  height:      20px;
  border:      2px solid var(--border2);
  border-radius: 5px;
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size:   13px;
  color:       transparent;
  background:  transparent;
  transition:  border-color .15s, background .15s, color .15s;
}
.ad-toggle-tile input:checked ~ .ad-toggle-body .ad-toggle-check {
  border-color: var(--accent);
  background:   var(--accent);
  color:        var(--surface);
}

.ad-submit-btn {margin-bottom: 20px;}

.ad-submit-error {
  font-size:   13px;
  color:       #c0392b;
  margin:      0;
  padding:     6px 10px;
  background:  #fdf0ee;
  border-left: 3px solid #c0392b;
  border-radius: 4px;
}

/* "Publishing as" note */
.ad-seller-note {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-top:  10px;
  font-size:   12px;
  color:       var(--text3);
}
.ad-seller-note i      { font-size: 15px; }
.ad-seller-note strong { color: var(--text2); font-weight: 500; }

/* ── Message compose ─────────────────────────────────────────────────────── */
.msg-compose { display: flex; flex-direction: column; gap: 8px; }

.msg-textarea {
  width:         100%;
  padding:       10px 12px;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    var(--surface2);
  font-family:   var(--font-body);
  font-size:     13.5px;
  color:         var(--text1);
  resize:        vertical;
  outline:       none;
  transition:    border-color .15s;
  line-height:   1.5;
}
.msg-textarea:focus { border-color: var(--brand); }
.msg-textarea::placeholder { color: var(--text3); }

.msg-hint {
  margin:      18px 0;
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   12px;
  color:       var(--text3);
}
.msg-hint i { font-size: 13px; }

.msg-send {
  width:         100%;
  height:        40px;
  border:        none;
  border-radius: var(--radius-sm);
  background:    var(--brand);
  color:         var(--on-brand);
  font-family:   var(--font-head);
  font-size:     13.5px;
  font-weight:   600;
  transition:    background .15s;
}
.msg-send:hover { background: var(--brand-dark); color: #fff; }

.msg-sent {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   13px;
  color:       var(--brand-dark);
  padding:     10px 0;
}
.msg-sent i { font-size: 18px; }

/* ── Auth: header user state ─────────────────────────────────────────────── */
.user-greeting {
  font-size:   13px;
  color:       var(--text2);
  white-space: nowrap;
  align-self:  center;
}

/* ── Reserve / Proposal modals ───────────────────────────────────────────── */
#reserve-modal,
#proposal-modal,
#message-modal,
#contact-modal,
#about-modal,
#unlocked-contact-modal {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.45);
  z-index:         500;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
#reserve-modal.open,
#proposal-modal.open,
#message-modal.open,
#contact-modal.open,
#about-modal.open,
#unlocked-contact-modal.open { display: flex; }

/* ── About modal ─────────────────────────────────────────────────────────── */
.about-logo {
  display: block;
  height:  32px;
  width:   auto;
  margin:  10px auto 30px;
  filter: invert();
}
.about-text {
  max-width: 380px;
  font-size:   13.5px;
  color:       var(--text2);
  line-height: 1.7;
  text-align:  center;
  justify-self: center;
  margin-bottom: 32px;
}
.about-actions {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.about-btn-primary {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         11px 16px;
  border-radius:   var(--radius-sm);
  font-size:       13.5px;
  font-weight:     600;
  cursor:          pointer;
  text-decoration: none;
  border:          none;
  background:      var(--text1);
  color:           #fff;
  transition:      background .15s;
}
.about-btn-primary:hover { background: var(--on-brand); }
.about-btn-secondary {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         11px 16px;
  border-radius:   var(--radius-sm);
  font-size:       13.5px;
  font-weight:     600;
  cursor:          pointer;
  text-decoration: none;
  border:          1px solid var(--border);
  background:      var(--surface2);
  color:           var(--text1);
  transition:      background .15s, border-color .15s;
}
.about-btn-secondary:hover { background: var(--bg); }

.rsvp-box {
  background:    var(--surface);
  border-radius: var(--radius);
  box-shadow:    0 8px 40px rgba(0,0,0,.18);
  padding:       28px 28px 28px;
  width:         100%;
  max-width:     460px;
  position:      relative;
}

.modal-terms {
  margin-top:  10px;
  font-size:   11px;
  justify-content: center;
  color:       var(--text3);
  text-align:  center;
  line-height: 1.5;
}
.modal-terms a { color: var(--text3); text-decoration: underline; }
.modal-terms a:hover { color: var(--text2); }

.rsvp-close {
  position:    absolute;
  top:         14px;
  right:       16px;
  background:  none;
  border:      none;
  font-size:   22px;
  color:       var(--text3);
  line-height: 1;
  padding:     0 4px;
  transition:  color .15s;
}
.rsvp-close:hover { color: var(--text1); }

.rsvp-subtitle   { margin: 12px 0; font-size: 14px; color: var(--text2); }
.rsvp-disclaimer { font-size: 12px; color: var(--text3, #888); margin: 0 0 16px; }
input.rsvp-note-input { resize: none; }
.rsvp-note-input {
  width:         100%;
  box-sizing:    border-box;
  border:        1px solid var(--border, #ddd);
  border-radius: 8px;
  padding:       10px 12px;
  font-size:     14px;
  font-family:   var(--font-body);
  resize:        vertical;
}
.rsvp-title {
  font-family:   var(--font-head);
  font-size:     18px;
  font-weight:   600;
  color:         var(--text1);
  display:       flex;
  align-items:   center;
  gap:           20px;
  margin-bottom: 20px
}
.rsvp-title svg { flex-shrink: 0; }
.rsvp-done-wrap{ display: flex; align-items: center;}
.free-trial-banner {
  display:     flex;
  align-items: center;
  gap:         16px;
  background:  var(--bg);
  border:      1px solid var(--brand-light2);
  border-radius: var(--radius-sm);
  padding:     14px 16px;
  margin-bottom: 10px;
  font-size:   13px;
  color:       var(--accent-dark);
  line-height: 1.5;
}
.free-trial-banner strong { font-weight: 600; }

.free-trial-gift-icon {
  font-size:   28px;
  color:       var(--accent);
  flex-shrink: 0;
  animation:   giftBounce 1.2s ease-in-out infinite;
}

@keyframes giftBounce {
  0%, 100% { transform: translateY(0) rotate(0deg);   }
  25%       { transform: translateY(-5px) rotate(-8deg); }
  50%       { transform: translateY(-2px) rotate(0deg);  }
  75%       { transform: translateY(-4px) rotate(6deg);  }
}

.rsvp-price-row {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       16px 16px 22px 16px;
  margin-bottom: 20px;
}
.rsvp-price-cols {
  display:       flex;
  align-items:   center;
  margin-bottom: 14px;
}
.rsvp-price-col          { flex: 1; }
.rsvp-price-col:last-child { text-align: right; }

/* Bar */
.rsvp-bar-track {
  position:      relative;
  display:       flex;
  height:        8px;
  border-radius: 99px;
  overflow:      visible;
  background:    var(--border2);
  margin-bottom: 6px;
}
.rsvp-bar-fill {
  height:        100%;
  width:         0;                        /* starts at 0 for animation */
  min-width:     0;
  border-radius: 99px 0 0 99px;           /* rounded on left (signal side) */
  /* background:    var(--brand); */
  background:    var(--accent);
  animation:     barGrow .7s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.rsvp-bar-rest {
  flex:          1;
  height:        100%;
  border-radius: 0 99px 99px 0;           /* rounded on right (remainder side) */
  /* background:    var(--brand-light2); */
  background:    var(--accent-light2);
}
@keyframes barGrow {
  to { width: var(--pct); }
}
.rsvp-bar-label {
  position:    absolute;
  left:         0;
  top:         14px;
  font-size:   10.5px;
  color:       var(--text3);
  font-weight: 600;
  white-space: nowrap;
}
.rsvp-price-label {
  display:     block;
  font-size:   11px;
  color:       var(--text3);
  margin-bottom: 4px;
}
.rsvp-price-value {
  font-family: var(--font-head);
  font-size:   17px;
  font-weight: 600;
  color:       var(--text1);
}
.rsvp-signal-value { color: var(--accent); }

.rsvp-note p { 
  font-size:     10.5px;
  color:         var(--text3);
  text-align:    center;
  margin-top:    15px;
}
.rsvp-note li { 
  text-align:    center;
  font-size:  12.5px; 
  margin-top: 10px;
  color:      var(--text2);
}
.rsvp-note strong { color: var(--text2); font-weight: 500; }

.rsvp-quality-label,
.rsvp-fee-label,
.rsvp-method-label {
  font-family:    var(--font-head);
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--text3);
}
.rsvp-quality-label,
.rsvp-method-label { margin: 10px 0; }

.rsvp-fee-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin:          10px 0;
}
.rsvp-plans-btn {
  font-family:     var(--font-head);
  font-size:       11px;
  font-weight:     600;
  text-transform:  uppercase;
  letter-spacing:  .07em;
  color:           var(--text3);
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  transition:      color .15s;
}
.rsvp-plans-btn:hover { color: var(--accent-dark); }

/* ── Plans modal ─────────────────────────────────────────────────────────── */
#plans-modal {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.45);
  z-index:         500;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
#plans-modal.open { display: flex; }

.plans-box {
  max-width:  720px;
  max-height: 90dvh;
  overflow-y: auto;
}

.plans-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top:            14px;
  gap:                   20px;
}
@media (max-width: 600px) {
  #plans-modal { align-items: flex-start; padding: 40px; overflow-y: auto; }
  .plans-box   { max-height: none; }
  .plans-grid  { grid-template-columns: 1fr; margin: 5px; }
}

.plan-card:hover {background: var(--brand-light2);}
.plan-card {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  border:         1px solid var(--border2);
  border-radius:  var(--radius);
  padding:        16px 12px 14px;
  gap:            2px;
}
.plan-card--highlight {
  border-color: var(--brand);
  background:   var(--brand-light2);
}
.plan-badge {
  position:       absolute;
  top:            -10px;
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--accent);
  color:          #fff;
  font-size:      9px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding:        2px 8px;
  border-radius:  99px;
  white-space:    nowrap;
}
.plan-icon {
  font-size:     20px;
  color:         var(--accent);
  margin-bottom: 2px;
}
.plan-card--highlight .plan-icon { color: var(--accent-dark); }
.plan-name {
  font-family:    var(--font-head);
  font-size:      11px;
  font-weight:    600;
  color:          var(--text2);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.plan-price {
  font-family: var(--font-head);
  font-size:   24px;
  font-weight: 700;
  color:       var(--text1);
  line-height: 1;
  margin-top:  6px;
}
.plan-currency { font-size: 12px; vertical-align: super; }
.plan-cents    { font-size: 12px; }
.plan-period   { font-size: 10px; color: var(--text3); margin-bottom: 8px; }
.plan-features {
  align-items: center;
  list-style:     none;
  width:          100%;
  text-align:     left;
  font-size:      12px;
  color:          var(--text2);
  display:        flex;
  flex-direction: column;
  margin-bottom:  15px;
}
.plan-features li              { display: flex; align-items: center; gap: 6px; 
  font-size:  12px; 
  margin-top: 10px;
  color:      var(--text2);
}
.plan-features .ti-circle-check,
.plan-features .ti-speakerphone  { color: var(--accent); font-size: 13px; }
.plan-cta {
  width:         100%;
  padding:       7px 0;
  border:        none;
  border-radius: var(--radius-sm);
  background:    var(--brand);
  color:         var(--on-brand);
  font-family:   var(--font-head);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s;
  margin-top:    auto;
}
.plan-cta:hover { background: var(--brand-dark); }

.rsvp-methods {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           10px;
  margin-bottom: 10px;
}

.rsvp-method {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            5px;
  padding:        16px 12px;
  border:         2px solid var(--border2);
  border-radius:  var(--radius-sm);
  background:     var(--surface2);
  cursor:         pointer;
  transition:     border-color .15s, background .15s;
}
.rsvp-method i            { font-size: 22px; color: var(--text2); }
.rsvp-method.selected     { border-color: var(--brand); background: var(--brand-light2); }
.rsvp-method.selected i   { color: var(--brand-dark); }
.rsvp-method:hover:not(.selected) { border-color: var(--text3); background: var(--surface); }

.rsvp-method-name {
  font-family: var(--font-head);
  font-size:   13px;
  font-weight: 600;
  color:       var(--text1);
}
.rsvp-method-sub {
  font-size: 10.5px;
  color:     var(--text3);
}

.rsvp-confirm {
  margin-top: 10px;
  width:         100%;
  height:        44px;
  border:        none;
  border-radius: var(--radius-sm);
  background:    var(--brand);
  color:         var(--on-brand);
  font-family:   var(--font-head);
  font-size:     14px;
  font-weight:   600;
  transition:    background .15s, opacity .15s;
}
.rsvp-confirm:hover:not(:disabled) { background: var(--brand-dark); color: #fff; }
.rsvp-confirm:disabled { opacity: .4; cursor: not-allowed; }

.rsvp-success {
  text-align:   center;
  padding:      16px 0 8px;
}
.rsvp-success i {
  font-size:     20px;
  color:         var(--brand);
  display:       block;
  margin:        5px;
}
.rsvp-success h2 {
  font-family:   var(--font-head);
  font-size:     18px;
  font-weight:   600;
  color:         var(--text1);
  margin-bottom: 15px;
}
.rsvp-success p {
  font-size:     13.5px;
  color:         var(--text2);
  line-height:   1.6;
  margin-bottom: 24px;
}

/* ── Auth: modal overlay ─────────────────────────────────────────────────── */
#auth-modal,
#profile-modal {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.45);
  z-index:         500;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
#auth-modal.open,
#profile-modal.open { display: flex; }

.auth-modal-box {
  background:    var(--surface);
  border-radius: var(--radius);
  box-shadow:    0 8px 40px rgba(0,0,0,.18);
  padding:       32px 28px 28px;
  width:         100%;
  max-width:     400px;
  position:      relative;
}

.auth-close {
  position:    absolute;
  top:         14px;
  right:       16px;
  background:  none;
  border:      none;
  font-size:   22px;
  color:       var(--text3);
  line-height: 1;
  padding:     0 4px;
  transition:  color .15s;
}
.auth-close:hover { color: var(--text1); }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.auth-tabs {
  display:       flex;
  gap:           0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
}
.auth-tab {
  flex:          1;
  padding:       10px 0;
  background:    none;
  border:        none;
  font-family:   var(--font-head);
  font-size:     14px;
  font-weight:   500;
  color:         var(--text3);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:    color .15s, border-color .15s;
}
.auth-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ── Panels ───────────────────────────────────────────────────────────────── */
.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* ── Form fields ──────────────────────────────────────────────────────────── */
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display:       block;
  font-size:     11.5px;
  font-weight:   500;
  color:         var(--text2);
  margin-bottom: 5px;
}
.auth-field input {
  width:         100%;
  height:        40px;
  padding:       0 12px;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    var(--surface2);
  font-family:   var(--font-body);
  font-size:     14px;
  color:         var(--text1);
  outline:       none;
  transition:    border-color .15s;
}
.auth-field input:focus { border-color: var(--brand); }
.auth-field input::placeholder { color: var(--text3); }

.auth-error {
  font-size:     12px;
  color:         #c0392b;
  margin-bottom: 10px;
}

.auth-submit {
  width:         100%;
  height:        42px;
  border:        none;
  border-radius: var(--radius-sm);
  background:    var(--brand);
  color:         var(--on-brand);
  font-family:   var(--font-head);
  font-size:     14px;
  font-weight:   600;
  margin-top:    4px;
  transition:    background .15s;
}
.auth-submit:hover    { background: var(--brand-dark); color: #fff; }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.auth-divider {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      18px 0;
  color:       var(--text3);
  font-size:   12px;
}
.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border2);
}

/* ── Google button ────────────────────────────────────────────────────────── */
.btn-google {
  width:          100%;
  height:         42px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            10px;
  border:         1px solid var(--border2);
  border-radius:  var(--radius-sm);
  background:     var(--surface);
  font-family:    var(--font-body);
  font-size:      13.5px;
  font-weight:    500;
  color:          var(--text1);
  transition:     background .15s, border-color .15s;
}
.btn-google:hover { background: var(--surface2); border-color: var(--text3); }

/* Footer */
.terms-footer {
  margin-top: 50px;
  /* background: var(--text1); */
  /* color: rgba(255,255,255,.4); */
  text-align: center;
  padding: 24px;
  font-size: 10px;
}
.terms-footer p { color: var(--text3); text-decoration: none; }
.terms-footer a:hover { color: #fff; }

/* ── User dropdown ────────────────────────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.nav-trigger-name {
  max-width:     50px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.nav-user-icon {
  flex-shrink: 0;
  color: var(--surface2);
}

.nav-chevron {
  flex-shrink: 0;
  transition:  transform .2s;
}
.nav-dropdown.open .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-panel {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  right:         0;
  min-width:     180px;
  background:    var(--surface);
  border:        1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-hover);
  z-index:       200;
  padding:       6px 0;
  outline:       none;
}
.nav-dropdown.open .nav-dropdown-panel {
  display: block;
}

.nav-dropdown-item {
  display:     flex;
  align-items: center;
  gap:         9px;
  width:       100%;
  height:      40px;
  padding:     0 16px;
  border:      none;
  background:  transparent;
  font-family: var(--font-body);
  font-size:   13.5px;
  color:       var(--text1);
  text-align:  left;
  cursor:      pointer;
  transition:  background .12s;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  background: var(--surface2);
  outline:    none;
}

.nav-dropdown-item--danger {
  color: #c0392b;
}
.nav-dropdown-item--danger:hover,
.nav-dropdown-item--danger:focus-visible {
  background: #fdf0ef;
}

.nav-dropdown-badge {
  margin-left:   auto;
  min-width:     18px;
  height:        18px;
  padding:       0 5px;
  border-radius: 9px;
  background:    #d93025;
  color:         #fff;
  font-size:     10px;
  font-weight:   600;
  line-height:   18px;
  text-align:    center;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-card { position: static; }
  .detail-gallery { height: 280px; }
}

@media (max-width: 720px) {
  .search-logo { display: none; }
  .sidebar     { display: none; }
  .ad-grid     { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .hero h1     { font-size: 20px; }
  .hero-stats  { gap: 16px; }

  /* Single-row header: logo | search-wrap | nav-btns */
  .search-bar    { padding-right: 10px; }
  .search-logo-mobile { display: flex; padding: 0 8px 0 12px; }
  .search-wrap   { margin: 0 8px; }
  .nav-btns      { gap: 8px; }
}

@media (max-width: 480px) {
  .mkt-nav { padding: 0 14px; }
  .grid-area { padding: 14px; }
  .detail-inner { padding: 16px 14px; }
}

/* ── Grid header controls ─────────────────────────────────────────────────── */
.grid-header-right {
  display:     flex;
  align-items: center;
  gap:         6px;
}

/* Shared token so filter btn and sort select look identical */
.filter-modal-btn,
.sort-select {
  height:         32px;
  border:         1px solid var(--border2);
  border-radius:  var(--radius-sm);
  background:     var(--surface);
  font-family:    var(--font-body);
  font-size:      12px;
  color:          var(--text2);
  outline:        none;
  cursor:         pointer;
}

.filter-modal-btn {
  display:        none; /* hidden on desktop */
  align-items:    center;
  gap:            5px;
  padding:        0 10px;
  white-space:    nowrap;
}
.filter-modal-btn i { font-size: 14px; }
.filter-modal-btn--active {
  border-color: var(--brand);
  color:        var(--brand);
  background:   color-mix(in srgb, var(--brand) 8%, var(--surface));
}

@media (max-width: 720px) {
  .filter-modal-btn { display: flex; }
  .sort-label        { display: none; }
}

/* ── Filter modal overlay ────────────────────────────────────────────────── */
.filter-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.45);
  z-index:         800;
  display:         flex;
  align-items:     flex-end;
}

.filter-modal-panel {
  width:            100%;
  max-height:       82vh;
  background:       var(--surface);
  border-radius:    var(--radius) var(--radius) 0 0;
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
}

.filter-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border);
}

.filter-modal-title {
  font-family:  var(--font-head);
  font-size:    16px;
  font-weight:  600;
  color:        var(--text1);
}

.filter-modal-close {
  width:         32px;
  height:        32px;
  border:        none;
  background:    transparent;
  cursor:        pointer;
  color:         var(--text3);
  font-size:     18px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.filter-modal-close:hover { background: var(--border); color: var(--text1); }

.filter-modal-body {
  overflow-y:  auto;
  padding:     20px;
  flex:        1;
}

.filter-modal-footer {
  padding:       14px 20px;
  border-top:    1px solid var(--border);
  display:       flex;
  gap:           10px;
}

.filter-modal-apply {
  flex:          1;
  height:        42px;
  border:        none;
  border-radius: var(--radius-sm);
  background:    var(--brand);
  color:         var(--on-brand);
  font-family:   var(--font-head);
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
}
.filter-modal-apply:hover { opacity: .9; }

.filter-modal-reset {
  height:        42px;
  padding:       0 16px;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  background:    transparent;
  font-family:   var(--font-body);
  font-size:     13px;
  color:         var(--text3);
  cursor:        pointer;
}
.filter-modal-reset:hover { color: var(--text1); border-color: var(--text3); }

/* ── Contact modal: staggered reveal animation ────────────────────────────── */
@keyframes contactReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-reveal {
  animation: contactReveal .35s ease both;
}
.contact-reveal--delay-1 { animation-delay: .25s;  }
.contact-reveal--delay-2 { animation-delay: .4s; }
.contact-reveal--delay-3 { animation-delay: .7s;  }
.contact-reveal--delay-4 { animation-delay: 1s; }

/* ── Buyer trust panel ────────────────────────────────────────────────────── */
.buyer-trust-panel {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       nowrap;
  gap:             12px;
  padding:         12px 14px;
  background:      var(--surface2);
  border:          1px solid var(--border2);
  border-radius:   var(--radius-sm);
  margin-bottom:   20px;
}
.trust-main {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  flex-shrink:    0;
}
.trust-type-icon {
  display:      block;
  width:        36px;
  height:       auto;
  aspect-ratio: 1;
  color:        var(--text2);
}
.trust-type-badge {
  flex-shrink: 0;
  text-align:  center;
}
.trust-signals {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.trust-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12.5px;
  color:       var(--text2);
}
.trust-row i     { font-size: 15px; }
.trust-row--ok   { color: #1a7a3f; }
.trust-row--miss { color: var(--text3); }

/* ── Lead quality column ──────────────────────────────────────────────────── */
.lead-quality-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  flex-shrink:    0;
  padding-left:   8px;
}
.lead-quality-gauge {
  position: relative;
  width:    60px;
  height:   60px;
}
.lead-quality-svg {
  display:   block;
  width:     100%;
  height:    100%;
  transform: rotate(90deg);
}
.lead-quality-track {
  fill:         none;
  stroke:       var(--border);
  stroke-width: 5;
}
.lead-quality-arc {
  fill:              none;
  stroke:            var(--brand);
  stroke-width:      5;
  stroke-linecap:    round;
  stroke-dasharray:  150.796;
  stroke-dashoffset: 150.796;
}
.lead-quality--low  .lead-quality-arc { stroke: #e53935; }
.lead-quality--mid  .lead-quality-arc { stroke: #ffc107; }
.lead-quality--high .lead-quality-arc { stroke: #43a047; }
.lead-quality-center {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.lead-quality-num {
  font-size:            14px;
  font-weight:          700;
  color:                var(--text1);
  line-height:          1;
  font-variant-numeric: tabular-nums;
}
.lead-quality-caption {
  font-size:      9px;
  font-weight:    600;
  color:          var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* ── Auth: optional label / verification panel / link button ──────────────── */
.auth-optional {
  font-weight: 400;
  color:       var(--text3);
  font-size:   10.5px;
  margin-left: 4px;
}

.auth-verify-panel {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        8px 0 4px;
}
.auth-verify-icon {
  font-size:     42px;
  color:         var(--brand);
  margin-bottom: 12px;
  line-height:   1;
}
.auth-verify-title {
  font-family:   var(--font-head);
  font-size:     20px;
  font-weight:   700;
  color:         var(--text1);
  margin:        0 0 10px;
}
.auth-verify-desc {
  font-size:     14px;
  color:         var(--text2);
  margin:        0 0 14px;
  line-height:   1.5;
}
.auth-verify-note {
  font-size:     13px;
  color:         var(--text3);
  margin:        0 0 20px;
}
.auth-link-btn {
  background:    none;
  border:        none;
  padding:       0;
  color:         var(--brand);
  font-size:     11.5px;
  font-family:   inherit;
  cursor:        pointer;
  text-decoration: underline;
}
.auth-link-btn:hover { color: var(--brand-dark); }
.auth-forgot {
  margin-bottom: 5px;
  text-align: center;
  font-size:  13px;
}

/* ── Email verification toast ─────────────────────────────────────────────── */
#email-verify-notice {
  position:       fixed;
  bottom:         20px;
  left:           50%;
  transform:      translateX(-50%);
  display:        flex;
  align-items:    center;
  gap:            10px;
  background:     #1a1a2e;
  color:          #fff;
  padding:        12px 18px;
  border-radius:  var(--radius-sm);
  font-size:      13.5px;
  box-shadow:     0 4px 20px rgba(0,0,0,.3);
  z-index:        9999;
  max-width:      480px;
  width:          calc(100% - 32px);
  animation:      slideUpFade .25s ease;
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.email-verify-resend-btn {
  background:    none;
  border:        none;
  color:         #7ec8e3;
  font-size:     13px;
  cursor:        pointer;
  padding:       0;
  text-decoration: underline;
  white-space:   nowrap;
  flex-shrink:   0;
}
.email-verify-resend-btn:disabled { opacity: .6; cursor: default; }
.email-verify-dismiss-btn {
  background:    none;
  border:        none;
  color:         #aaa;
  font-size:     18px;
  cursor:        pointer;
  padding:       0;
  margin-left:   4px;
  line-height:   1;
  flex-shrink:   0;
}

/* ── Phone input (prefix-wrap pattern, mirrors prop-price-wrap) ───────────── */
.phone-input-wrap {
  display:       flex;
  align-items:   center;
  border:        1px solid var(--border2);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  background:    var(--surface1);
  transition:    border-color .15s;
}
.phone-input-wrap:focus-within { border-color: var(--brand); }
.phone-prefix {
  padding:      0 10px;
  font-size:    13px;
  color:        var(--text3);
  background:   var(--surface2);
  border-right: 1px solid var(--border2);
  align-self:   stretch;
  display:      flex;
  align-items:  center;
  user-select:  none;
  white-space:  nowrap;
}
/* Override the generic .auth-field input rule for the phone input inside the wrap */
.phone-input-wrap .phone-input {
  flex:        1;
  width:       auto;
  height:      38px;
  border:      none;
  border-radius: 0;
  background:  transparent;
  padding:     0 12px;
  font-size:   14px;
  font-family: var(--font-body);
  color:       var(--text1);
  outline:     none;
  box-shadow:  none;
}
.phone-input-wrap .phone-input::placeholder { color: var(--text3); }

/* ── Phone modal ──────────────────────────────────────────────────────────── */
#phone-modal {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.55);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         1000;
  opacity:         0;
  transition:      opacity .2s;
  pointer-events:  none;
}
#phone-modal.open {
  opacity:        1;
  pointer-events: auto;
}
.phone-modal-field {
  margin: 15px 0;
}