:root{--ink:#17251f;--forest:#173c30;--cream:#f7f3ea;--sage:#dbe8dd;--mint:#edf4ed;--terra:#c86245;--gold:#d9ad62;--muted:#68736d;--line:#d9ded9}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}button,select,input,textarea{font:inherit}button,a{cursor:pointer}a{text-decoration:none;color:inherit}header{height:80px;padding:0 7vw;display:flex;align-items:center;gap:30px;background:rgba(247,243,234,.94);border-bottom:1px solid #17251f12;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:9px;font:700 24px "Playfair Display"}.brand i{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:white}nav{display:flex;gap:32px;margin:auto;font-size:14px;font-weight:600}.header-actions{display:flex;gap:8px}.ghost,.primary{border:0;border-radius:99px;padding:12px 20px;font-weight:700;min-height:44px}.ghost{background:none}.primary{background:var(--forest);color:white}.hero{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;overflow:visible;position:relative;z-index:5}.hero-copy{padding:90px 5vw 75px 8vw;align-self:center;position:relative;z-index:20}.eyebrow,.kicker{color:var(--terra);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700}h1,h2{font-family:"Playfair Display";letter-spacing:-.035em;margin:0}h1{font-size:clamp(56px,6.2vw,92px);line-height:.98;margin-top:22px}h1 em{color:var(--terra)}.hero-copy>p{max-width:560px;color:var(--muted);font-size:18px;line-height:1.65;margin:27px 0}.hero-search{max-width:520px;background:white;padding:9px 9px 9px 22px;border-radius:15px;display:flex;box-shadow:0 16px 45px #24352d1f}.hero-search label{display:grid;gap:3px;flex:1;min-width:0}.hero-search small{color:var(--muted);font-size:11px}.hero-search select{border:0;outline:0;appearance:none;background:none;font-weight:700;width:100%;font-size:16px}.hero-search button.search-submit{width:52px;height:52px;flex-shrink:0;border:0;border-radius:12px;background:var(--terra);color:white;font-size:24px}.trust{display:flex;align-items:center;gap:13px;margin-top:28px}.faces{display:flex}.faces b{width:34px;height:34px;border:2px solid var(--cream);margin-left:-7px;border-radius:50%;display:grid;place-items:center;background:#d1b099;font-size:9px}.faces b:nth-child(2){background:#aac2b5}.faces b:nth-child(3){background:#beb5ce}.trust>div:last-child{display:grid;font-size:12px}.trust strong span{color:var(--gold);font-size:10px}.trust small{color:var(--muted)}.hero-art{background:var(--sage);position:relative;display:grid;place-items:center;overflow:hidden}.rings{position:absolute;width:450px;height:450px;border:1px solid #173c3025;border-radius:50%;box-shadow:0 0 0 70px #173c300a}.portrait{position:absolute;width:390px;height:520px;bottom:0;background:#b5cdb9;border-radius:50% 50% 0 0;overflow:hidden}.head{position:absolute;width:145px;height:180px;top:105px;left:123px;background:#a36d57;border-radius:45%}.hair{position:absolute;z-index:2;width:170px;height:115px;top:83px;left:109px;background:#202924;border-radius:55% 45% 30% 30%}.body{position:absolute;width:340px;height:255px;left:25px;bottom:-10px;background:var(--forest);border-radius:48% 48% 0 0}.collar{position:absolute;z-index:3;width:110px;height:90px;left:140px;top:278px;background:#f3e9dd;clip-path:polygon(0 0,50% 70%,100% 0,84% 100%,16% 100%)}.float{position:absolute;z-index:3;background:white;border-radius:13px;padding:13px 16px;display:flex;align-items:center;gap:11px;box-shadow:0 14px 34px #173c3024}.float span{display:grid}.float strong{font-size:12px}.float small{font-size:10px;color:var(--muted)}.verified{left:7%;bottom:55px}.verified>b{width:31px;height:31px;display:grid;place-items:center;background:var(--forest);color:white;border-radius:50%}.available{right:5%;top:110px}.available>b{width:9px;height:9px;border-radius:50%;background:#55a773;box-shadow:0 0 0 4px #e2f1e7}.section{padding:95px 8vw}.white{background:white}.heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:40px}.heading h2,.how h2,.security h2{font-size:clamp(38px,4vw,58px);margin-top:10px}.heading>p{max-width:430px;color:var(--muted);line-height:1.7}.practice-grid,.lawyer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.practice{text-align:left;padding:28px;border:1px solid var(--line);border-radius:20px;background:white;color:var(--ink);position:relative;min-height:245px;transition:.2s}.practice:hover,.lawyer-card:hover{transform:translateY(-5px)}.practice.active{background:var(--forest);color:white}.practice .icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--forest);font-size:30px}.practice .arrow{position:absolute;right:28px;top:28px}.practice h3{font:600 24px "Playfair Display";margin:32px 0 7px}.practice p{color:var(--muted);font-size:14px}.practice small{color:var(--terra);font-weight:700}.practice.active p,.practice.active small{color:#bdd0c6}.lawyers{background:var(--cream)}.link{border:0;background:none;color:var(--terra);font-weight:700}.filters{display:flex;gap:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:17px;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}.filters::-webkit-scrollbar{display:none}.filters button{white-space:nowrap;padding:9px 15px;border:1px solid var(--line);border-radius:99px;background:none;color:var(--muted);font-size:12px;font-weight:700;min-height:44px;flex-shrink:0}.filters button.active{color:white;background:var(--forest)}.lawyer-card{background:white;border-radius:20px;padding:18px;border:1px solid #17251f10;transition:.2s}.lawyer-photo{height:215px;border-radius:14px;display:grid;place-items:center;position:relative}.initials{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;color:white;font:600 35px "Playfair Display";box-shadow:0 0 0 16px #ffffff40}.badge,.rating{position:absolute;top:13px;background:white;border-radius:99px;padding:6px 9px;font-size:10px;font-weight:700}.badge{left:13px}.badge:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#56a977;margin-right:5px}.rating{right:13px}.details{padding:17px 5px 3px}.details h3{font:600 22px "Playfair Display";margin:0}.specialty{color:var(--terra);font-size:12px;font-weight:700;margin:5px 0 14px}.meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:11px;margin-bottom:16px}.card-bottom{border-top:1px solid #edf0ed;padding-top:15px;display:flex;justify-content:space-between;align-items:center}.card-bottom strong{font-size:17px}.card-bottom small{color:var(--muted)}.book{border:0;border-radius:99px;padding:10px 15px;background:var(--forest);color:white;font-size:12px;font-weight:700;min-height:44px}.how{padding:100px 8vw;background:var(--forest);color:white;display:grid;grid-template-columns:1fr 1fr;gap:9vw}.gold{color:var(--gold)}.how>div>p{color:#b5c7be;line-height:1.7}.steps article{display:flex;gap:24px;border-bottom:1px solid #ffffff20;padding:21px 0}.steps article>b{color:var(--gold);font:600 18px "Playfair Display"}.steps h3{font:600 22px "Playfair Display";margin:0 0 8px}.steps p{color:#acbeb5;margin:0;font-size:14px}.security{padding:95px 8vw;background:var(--mint);display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;align-items:center}.security>div>p{color:var(--muted);line-height:1.7}.security-list{display:flex;flex-wrap:wrap;gap:18px;margin-top:25px;font-size:12px}.shield-card{padding:32px;border-radius:24px;background:var(--forest);color:white;display:flex;align-items:center;gap:24px;box-shadow:18px 18px 0 #c9ddcc}.shield{width:95px;height:112px;flex:none;background:var(--gold);color:var(--forest);display:grid;place-items:center;font:italic 700 40px "Playfair Display";clip-path:polygon(50% 0,95% 18%,88% 76%,50% 100%,12% 76%,5% 18%);position:relative}.shield small{position:absolute;bottom:22px;right:22px;background:white;border-radius:50%;width:20px;height:20px;display:grid;place-items:center}.shield-card h3{font:600 24px "Playfair Display";margin:4px 0}.shield-card p,.shield-card small{font-size:10px;color:#b6c9c0}footer{padding:50px 8vw 25px;background:#10251e;color:white;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px}footer p{color:#9cb0a7}footer div{display:flex;gap:22px;font-size:13px}footer>small{grid-column:1/-1;border-top:1px solid #ffffff18;padding-top:20px;color:#80968c}.backdrop{position:fixed;inset:0;background:#0a1b15bb;z-index:50;display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px)}.backdrop[hidden]{display:none}.modal{width:min(600px,100%);max-height:92vh;overflow:auto;background:white;border-radius:24px;padding:34px;position:relative;-webkit-overflow-scrolling:touch}.modal.video{width:min(1080px,100%)}.close{position:absolute;right:16px;top:16px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:#edf2ee;font-size:20px}.modal h2{font-size:36px;margin:7px 0}.lead{color:var(--muted);line-height:1.5}.progress{display:flex;gap:6px;margin:23px 0}.progress i{height:4px;flex:1;border-radius:4px;background:#e0e6e1}.progress i.on{background:var(--terra)}.form{display:grid;gap:15px}.form.two{grid-template-columns:1fr 1fr}.field{display:grid;gap:6px}.field label{font-size:12px;font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px;background:#fbfcfb;outline:0;font-size:16px}.field textarea{min-height:90px}.actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.actions .primary,.actions .ghost{min-height:44px}.secondary{background:#edf2ee;color:var(--ink)}.summary{background:var(--mint);border-radius:14px;padding:18px;margin:18px 0;display:grid;gap:10px}.row{display:flex;justify-content:space-between;font-size:13px}.row.total{border-top:1px solid var(--line);padding-top:10px;font-weight:700}.disclaimer{display:flex;gap:10px;padding:14px;border:1px solid #e6d7b8;background:#fffaf0;border-radius:12px;font-size:11px;line-height:1.5}.success{text-align:center;padding:22px 4px}.success-mark{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:white;font-size:28px;margin:0 auto 18px}#jitsi{height:min(650px,72vh);background:#111;border-radius:14px;overflow:hidden}.toast{position:fixed;z-index:100;bottom:25px;left:50%;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:white;border-radius:99px;padding:13px 20px;font-size:13px;transition:.3s;max-width:calc(100vw - 40px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── VidhiMeet Logo Image ──────────────────────────────────────────────────── */
.brand {
  display: flex;
  align-items: center;
  padding: 2px 0;
}

/* Hide old letter-icon — replaced by logo image */
.brand i { display: none; }

.brand-logo-img {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.brand-logo-img:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

/* Footer logo — white tinted */
footer .brand-logo-img {
  height: 32px;
  filter: brightness(0) invert(1);
}

@media(max-width:620px) {
  .brand-logo-img { height: 30px; }
  footer .brand-logo-img { height: 26px; }
}

#mobile-menu-btn {
  display: none;
  background: none;
  border: 0;
  font-size: 28px;
  color: var(--ink);
  cursor: pointer;
}
h1 {
  font-size: clamp(36px, 6.2vw, 92px);
  line-height: .98;
  margin-top: 22px;
}
@media(max-width:900px){
  #mobile-menu-btn {
    display: block;
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
  }
  nav {
    display: none;
  }
  .header-actions {
    display: none;
  }
  header.menu-open {
    height: auto !important;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-bottom: 24px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  }
  header.menu-open nav {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin-top: 15px;
    gap: 12px;
    padding: 15px 0 10px;
    border-top: 1px solid var(--line);
    font-size: 16px;
  }
  header.menu-open nav a {
    min-height: 40px;
    display: flex;
    align-items: center;
    width: 100%;
  }
  header.menu-open .header-actions {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
    gap: 12px;
    padding: 10px 0 0;
  }
  header.menu-open .header-actions .ghost, header.menu-open .header-actions .primary {
    text-align: center;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-art {
    min-height: 500px;
  }
  .practice-grid, .lawyer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .how, .security {
    grid-template-columns: 1fr;
  }
  .lawyer-card:last-child {
    display: none;
  }
  .modal h2 {
    font-size: 28px;
  }
}
@media(max-width:620px) {
  header {
    height: 64px;
    padding: 0 5vw;
  }
  header.menu-open nav {
    top: auto;
  }
  header.menu-open .header-actions {
    top: auto;
    bottom: auto;
  }
  .brand {
    font-size: 20px;
  }
  .brand i {
    width: 30px;
    height: 30px;
  }
  .hero-copy {
    padding: 45px 6vw 55px;
  }
  .hero-copy > p {
    font-size: 16px;
  }
  .hero-search {
    padding: 7px 7px 7px 16px;
    border-radius: 12px;
  }
  .hero-search button {
    width: 46px;
    height: 46px;
  }
  .hero-art {
    min-height: 400px;
  }
  .rings {
    width: 300px;
    height: 300px;
    box-shadow: 0 0 0 45px #173c300a;
  }
  .portrait {
    width: 240px;
    height: 320px;
  }
  .head {
    width: 110px;
    height: 135px;
    top: 75px;
    left: 65px;
  }
  .hair {
    width: 130px;
    height: 85px;
    top: 58px;
    left: 55px;
  }
  .body {
    width: 210px;
    height: 165px;
    left: 15px;
  }
  .collar {
    width: 70px;
    height: 58px;
    left: 85px;
    top: 195px;
  }
  .float {
    padding: 10px 12px;
    border-radius: 10px;
  }
  .float strong {
    font-size: 11px;
  }
  .float small {
    font-size: 9px;
  }
  .verified {
    left: 4%;
    bottom: 35px;
  }
  .available {
    right: 3%;
    top: 70px;
  }
  .section, .how, .security {
    padding: 60px 5vw;
  }
  .heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  .heading h2, .how h2, .security h2 {
    font-size: clamp(28px, 7vw, 38px);
  }
  .practice-grid, .lawyer-grid {
    grid-template-columns: 1fr;
  }
  .practice {
    min-height: auto;
    padding: 22px;
  }
  .practice h3 {
    font-size: 20px;
    margin: 20px 0 5px;
  }
  .practice .icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .lawyer-card:last-child {
    display: block;
  }
  .lawyer-photo {
    height: 180px;
  }
  .initials {
    width: 85px;
    height: 85px;
    font-size: 28px;
  }
  .details h3 {
    font-size: 19px;
  }
  .card-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .card-bottom span {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .book {
    width: 100%;
    text-align: center;
    padding: 13px;
  }
  .form.two {
    grid-template-columns: 1fr;
  }
  .modal {
    padding: 24px 18px;
    border-radius: 18px;
    max-height: 95vh;
  }
  .modal h2 {
    font-size: 24px;
  }
  .actions {
    flex-direction: column;
  }
  .actions .primary,
  .actions .ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  #jitsi {
    height: min(400px, 60vh);
    border-radius: 10px;
  }
  .steps article {
    gap: 16px;
  }
  .steps h3 {
    font-size: 18px;
  }
  .security-list {
    gap: 12px;
    font-size: 11px;
  }
  .shield-card {
    padding: 22px;
    flex-direction: column;
    text-align: center;
    box-shadow: 10px 10px 0 #c9ddcc;
  }
  .shield {
    width: 72px;
    height: 88px;
  }
  .shield-card h3 {
    font-size: 20px;
  }
  footer {
    grid-template-columns: 1fr;
    padding: 40px 5vw 20px;
  }
  footer > small {
    grid-column: 1;
  }
  footer div {
    flex-wrap: wrap;
    gap: 14px;
  }
  .backdrop {
    padding: 10px;
  }
  .toast {
    bottom: 20px;
    padding: 11px 16px;
    font-size: 12px;
  }
  .disclaimer {
    flex-direction: column;
    gap: 8px;
  }
  .summary .row {
    font-size: 12px;
  }
}
@media(max-width:380px) {
  h1 {
    font-size: 32px;
  }
  .hero-copy {
    padding: 35px 5vw 45px;
  }
  .trust {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero-art {
    min-height: 340px;
  }
  .portrait {
    width: 200px;
    height: 270px;
  }
  .float {
    display: none;
  }
  .modal {
    padding: 20px 14px;
  }
}

/* ── My Meetings Section ────────────────────────────────────────────────────── */

#my-meetings {
  min-height: 80vh;
  padding: 60px 8vw 90px;
  background: var(--cream);
}

#my-meetings > h2 {
  font-family: "Playfair Display";
  font-size: clamp(32px, 4vw, 52px);
  margin: 0 0 8px;
  color: var(--forest);
}

.meetings-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.meetings-nav button {
  border: 0;
  border-radius: 99px;
  padding: 9px 18px;
  background: var(--mint);
  color: var(--forest);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
}

.meetings-nav button:hover { background: var(--sage); }

.meetings-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
}

/* Meeting card */
.meeting-card {
  background: white;
  border-radius: 20px;
  border: 1px solid #17251f12;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: visible !important;
}

.meeting-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px #17251f12;
}

.meeting-card-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: visible !important;
}

.meeting-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  overflow: visible !important;
}

.meeting-practice {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.meeting-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 99px;
}

.status-pending    { background: #fff3cd; color: #856404; }
.status-confirmed  { background: #d1e7dd; color: #0f5132; }
.status-inprogress { background: #cfe2ff; color: #084298; }
.status-done       { background: #e8f5e9; color: #2e7d32; }
.status-disputed   { background: #f8d7da; color: #842029; }
.status-cancelled  { background: #e9ecef; color: #495057; }

.meeting-datetime {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.meeting-date, .meeting-time {
  display: flex;
  align-items: center;
  gap: 5px;
}

.meeting-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.meeting-fee strong { font-size: 20px; }
.meeting-fee small  { color: var(--muted); }

.meeting-id {
  font-size: 12px;
  color: var(--muted);
}

.meeting-id code {
  background: var(--mint);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: monospace;
  color: var(--forest);
  font-weight: 700;
}

.meeting-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.meeting-card-actions .primary {
  padding: 11px 20px;
  font-size: 13px;
}

.meeting-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Loading spinner */
.meetings-loading {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 0;
  color: var(--muted);
}

.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--line);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

button:disabled, .btn:disabled, .btn-admin-submit:disabled, .btn-google-auth:disabled {
  opacity: 0.75 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Empty state */
.meetings-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
}

.empty-icon {
  font-size: 52px;
  margin-bottom: 18px;
}

.meetings-empty h3 {
  font-family: "Playfair Display";
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 10px;
}

.meetings-empty p {
  margin: 0 0 24px;
  font-size: 15px;
}

/* Section header row (title + back button) */
.meetings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 14px;
}

.meetings-header h2 { margin: 0; }

.btn-back {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 10px 20px;
  background: white;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s;
}
.btn-back:hover { background: var(--mint); }

@media(max-width:620px) {
  #my-meetings { padding: 40px 5vw 60px; }
  .meetings-list { grid-template-columns: 1fr; }
  .meetings-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-back {
    width: 100%;
    text-align: center;
  }
  .meeting-card {
    padding: 18px;
  }
  .meeting-card-body {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .meeting-card-actions {
    flex-direction: column;
  }
  .meeting-card-actions .primary {
    width: 100%;
    text-align: center;
  }
}

/* ── Reviews & Ratings ──────────────────────────────────────────────────────── */

/* Review button on meeting cards */
.btn-review {
  border: 1.5px solid var(--forest);
  border-radius: 99px;
  padding: 9px 18px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
  transition: all .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-review:hover {
  background: var(--forest);
  color: white;
  transform: translateY(-1px);
}

/* Review already submitted badge on card */
.review-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border: 1px solid #fde68a;
}
.review-badge .review-stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 2px;
}
.review-badge .review-comment-preview {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Review Modal ────────────────────────────────────────────────────────────── */

.review-modal {
  text-align: center;
  padding: 12px 0;
}
.review-modal h2 {
  font-family: "Playfair Display";
  font-size: 28px;
  color: var(--forest);
  margin: 0 0 6px;
}
.review-modal .review-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 28px;
}

/* Interactive star picker */
.star-picker {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 28px;
}
.star-picker .star {
  font-size: 42px;
  cursor: pointer;
  color: #d1d5db;
  transition: color .15s, transform .2s;
  user-select: none;
  line-height: 1;
}
.star-picker .star:hover {
  transform: scale(1.2);
}
.star-picker .star.active {
  color: #f59e0b;
}
.star-picker .star.hover-active {
  color: #fbbf24;
}

.star-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  margin: -16px 0 20px;
  min-height: 20px;
}

.review-modal textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  resize: vertical;
  min-height: 100px;
  transition: border-color .2s;
  background: #fafafa;
  color: var(--ink);
}
.review-modal textarea:focus {
  outline: none;
  border-color: var(--forest);
  background: white;
}
.review-modal textarea::placeholder {
  color: var(--muted);
}

.review-modal .review-submit {
  margin-top: 20px;
  width: 100%;
  padding: 14px 24px;
  border: 0;
  border-radius: 99px;
  background: var(--forest);
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.review-modal .review-submit:hover {
  background: #1a3a2a;
  transform: translateY(-1px);
}
.review-modal .review-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ── Review List (on lawyer profile popup) ───────────────────────────────────── */

.reviews-section {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.reviews-section h3 {
  font-family: "Playfair Display";
  font-size: 20px;
  color: var(--forest);
  margin: 0 0 16px;
}
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.reviews-summary .avg-rating {
  font-size: 28px;
  font-weight: 700;
  color: var(--forest);
}
.reviews-summary .avg-stars {
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 1px;
}
.reviews-summary .review-count {
  color: var(--muted);
  font-size: 13px;
}

.review-card {
  background: #fafaf8;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid #f0ede6;
}
.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.review-card-author {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.review-card-date {
  font-size: 11px;
  color: var(--muted);
}
.review-card-stars {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.review-card-comment {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.no-reviews {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

/* ── Verified Reviews ────────────────────────────────────────────────────────── */

.reviews-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.reviews-section-header h3 {
  margin: 0;
}

.verified-reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: default;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.review-verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 2px 9px;
}

.review-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.review-purchase-note {
  font-size: 10px;
  color: #15803d;
  font-style: italic;
  padding-left: 2px;
  opacity: 0.85;
}

/* ── Meeting card secondary actions (Chat + Upload) ──────────────────────── */
.meeting-card-secondary-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.btn-chat-meeting,
.btn-upload-docs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border: none;
}

.btn-chat-meeting {
  background: linear-gradient(135deg, #1b5e3b 0%, #2d8a5e 100%);
  color: #fff;
  box-shadow: 0 3px 10px #1b5e3b30;
}
.btn-chat-meeting:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px #1b5e3b40;
}

.btn-upload-docs {
  background: #f0fdf4;
  color: #155e3b;
  border: 1.5px solid #bbf7d0;
  box-shadow: 0 2px 6px #bbf7d020;
}
.btn-upload-docs:hover {
  background: #dcfce7;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px #bbf7d040;
}

.btn-dispute-meeting {
  background: #fef2f2;
  color: #b91c1c;
  border: 1.5px solid #fecaca;
  box-shadow: 0 2px 6px #fecaca20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn-dispute-meeting:hover {
  background: #fee2e2;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px #fecaca40;
}

/* ── Client Chat Modal ───────────────────────────────────────────────────── */
.client-chat-modal {
  display: flex;
  flex-direction: column;
  height: 70vh;
  min-height: 360px;
  max-height: 680px;
  gap: 0;
}

.client-chat-header {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.client-chat-header h3 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  margin: 0;
  color: var(--ink);
}

.client-chat-secure {
  font-size: 11px;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 2px 10px;
  font-weight: 600;
}

.client-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* received messages default to left */
  gap: 12px;
  scroll-behavior: smooth;
}

.client-chat-loading,
.client-chat-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin: auto;
}

.client-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 72%;
}
/* sent → right */
.client-chat-msg.mine   { align-self: flex-end;   align-items: flex-end; }
/* received → left */
.client-chat-msg.theirs { align-self: flex-start;  align-items: flex-start; }

.client-chat-bubble {
  padding: 10px 15px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.client-chat-msg.mine .client-chat-bubble {
  background: linear-gradient(135deg, #1b5e3b, #2d8a5e);
  color: #fff;
  border-radius: 18px 18px 4px 18px;   /* flat bottom-right = sent tail */
}
.client-chat-msg.theirs .client-chat-bubble {
  background: #f0f4f3;
  color: var(--ink);
  border-radius: 18px 18px 18px 4px;   /* flat bottom-left = received tail */
  border: 1px solid #d8e5df;
}

.client-chat-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  padding: 0 4px;
}

.client-chat-form {
  display: flex;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.client-chat-form input {
  flex: 1;
  padding: 11px 16px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.client-chat-form input:focus { border-color: var(--forest); }

.client-chat-send {
  padding: 11px 22px;
  background: var(--forest);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.client-chat-send:hover { background: #145230; transform: translateY(-1px); }

/* ── Mobile Web Consultation & Chat Responsiveness ───────────────────────── */
@media (max-width: 620px) {
  .backdrop {
    padding: 8px !important;
  }

  /* Make video modal take up 100% of viewport */
  .modal.video {
    width: 100% !important;
    height: 94vh !important;
    height: 94dvh !important;
    max-height: 94vh !important;
    border-radius: 16px !important;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  /* Compact the text content inside the video modal so the video is maximized */
  .modal.video .kicker {
    font-size: 10px;
    margin-bottom: 2px;
  }
  .modal.video h2 {
    font-size: 18px !important;
    margin: 2px 0 !important;
    line-height: 1.25 !important;
  }
  .modal.video .lead {
    font-size: 11px;
    margin: 0 0 6px 0 !important;
  }

  /* Let #jitsi expand and take all remaining height */
  .modal.video #jitsi {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 380px !important;
    border-radius: 12px;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .modal.video #jitsi > iframe,
  .modal.video #jitsi > div {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 0% !important;
  }

  /* Make the container modal fill screen for chat */
  .modal.chat {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
  }
  
  /* Let client chat modal container grow inside modal */
  .client-chat-modal {
    flex: 1 !important;
    height: 100% !important;
    max-height: none !important;
  }
  
  /* Scrollable messages container fills space */
  .client-chat-messages {
    flex: 1 1 auto !important;
    height: 0 !important;
    padding: 12px 4px !important;
  }
  
  /* Dock form at bottom and style inputs neatly */
  .client-chat-form {
    padding: 8px 0 0 !important;
  }
  
  /* Fix All Verified Lawyers filter row horizontal spacing/wrapping */
  .all-lawyers-filters {
    padding: 12px 16px !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }
}

/* ── Inline Feedback & Review Desk Styles ── */
.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.95;
  line-height: 1.0;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto !important;
}
.textLayer span {
  color: transparent !important;
  position: absolute;
  white-space: pre;
  cursor: text !important;
  transform-origin: 0% 0%;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}
.textLayer ::selection, .textLayer *::selection, #pdf-text-layer ::selection, #pdf-text-layer *::selection {
  background: rgba(250, 204, 21, 0.45) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.textLayer ::-moz-selection, .textLayer *::-moz-selection, #pdf-text-layer ::-moz-selection, #pdf-text-layer *::-moz-selection {
  background: rgba(250, 204, 21, 0.45) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

#doc-text-body ::selection, 
#doc-text-body *::selection,
.doc-line ::selection,
.doc-line *::selection {
  background: #fde047 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
#doc-text-body ::-moz-selection, 
#doc-text-body *::-moz-selection,
.doc-line ::-moz-selection,
.doc-line *::-moz-selection {
  background: #fde047 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

#pdf-floating-text-popover {
  position: absolute;
  z-index: 10000;
  background: var(--forest);
  color: white;
  padding: 8px 16px;
  border-radius: 99px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
#pdf-floating-text-popover:hover {
  background: #1e4d3e;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translate(-50%, -90%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

.textLayer span.inline-text-highlight,
#pdf-text-layer span.inline-text-highlight {
  background: rgba(250, 204, 21, 0.45) !important;
  border-bottom: 2px solid #ca8a04 !important;
  border-radius: 2px;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  mix-blend-mode: multiply !important;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.textLayer span.inline-text-highlight:hover,
.textLayer span.inline-text-highlight.active-highlight,
#pdf-text-layer span.inline-text-highlight:hover,
#pdf-text-layer span.inline-text-highlight.active-highlight {
  background: rgba(234, 179, 8, 0.75) !important;
  box-shadow: 0 0 8px rgba(202, 138, 4, 0.6) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

#doc-text-body .inline-text-highlight,
#doc-text-body .inline-text-highlight *,
.doc-line.inline-text-highlight,
.doc-line.inline-text-highlight *,
.doc-line .inline-text-highlight,
.doc-line .inline-text-highlight * {
  background: rgba(253, 224, 71, 0.85) !important;
  border-bottom: 2px solid #ca8a04 !important;
  border-radius: 3px;
  padding: 1px 4px;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  display: inline;
}
#doc-text-body .inline-text-highlight:hover,
#doc-text-body .inline-text-highlight.active-highlight,
.doc-line .inline-text-highlight:hover,
.doc-line .inline-text-highlight.active-highlight {
  background: #fde047 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  box-shadow: 0 0 8px rgba(202, 138, 4, 0.6) !important;
}

.highlight-pulse {
  animation: pulseGlow 1.8s ease-in-out infinite;
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(200, 98, 69, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(200, 98, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 98, 69, 0); }
}

.pdf-review-tab-btn {
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s;
}
.pdf-review-tab-btn.active {
  background: var(--forest);
  color: white;
}

.comment-quote-box {
  font-size: 12px;
  font-style: normal;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f8fafc;
  border-left: 3px solid #eab308;
  padding: 8px 12px;
  border-radius: 4px 8px 8px 4px;
  color: #334155 !important;
  line-height: 1.5;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
  margin: 4px 0;
}
.comment-quote-box * {
  background: transparent !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

/* ── Responsive Annotator Modal Rules ── */
.pdf-annotator-container {
  display: flex;
  flex-direction: column;
  height: 85vh;
  max-height: 850px;
  background: #f7f9f8;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.pdf-annotator-header {
  background: var(--forest);
  color: white;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pdf-annotator-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.pdf-mobile-toggle-group {
  display: none;
}

@media (max-width: 768px) {
  #pdf-annotator-overlay {
    padding: 6px !important;
  }
  .pdf-annotator-container {
    height: 94vh !important;
    max-height: 100vh !important;
    border-radius: 12px !important;
  }
  .pdf-annotator-header {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  #pdf-render-scroll {
    padding: 12px 8px !important;
  }
  .pdf-mobile-toggle-group {
    display: inline-flex !important;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 99px;
    padding: 3px;
    gap: 3px;
  }
  .pdf-mobile-toggle-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .pdf-mobile-toggle-btn.active {
    background: white;
    color: var(--forest, #17382c);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  
  /* Mobile Display Mode Switching */
  .pdf-annotator-container.pdf-mobile-show-doc #pdf-render-scroll {
    display: flex !important;
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .pdf-annotator-container.pdf-mobile-show-doc #pdf-sidebar {
    display: none !important;
  }
  .pdf-annotator-container.pdf-mobile-show-sidebar #pdf-render-scroll {
    display: none !important;
  }
  .pdf-annotator-container.pdf-mobile-show-sidebar #pdf-sidebar {
    display: flex !important;
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border-left: none !important;
  }
}

/* ── Global Mobile Responsiveness Enhancements ── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }
  
  /* Horizontal scroll for table containers */
  .table-responsive, .table-container, .table-wrap, .panel-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 12px;
  }
  
  /* Modals on small screens */
  .backdrop {
    padding: 10px !important;
  }
  .modal {
    width: 96vw !important;
    max-height: 94vh !important;
    padding: 22px 16px !important;
    border-radius: 16px !important;
  }
  .modal h2 {
    font-size: 22px !important;
  }
  .close {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    top: 12px !important;
    right: 12px !important;
  }

  /* Form two columns on mobile */
  .form.two {
    grid-template-columns: 1fr !important;
  }

  /* Action buttons full width */
  .actions {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  .actions .primary,
  .actions .ghost,
  .actions .secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Video call modal */
  #jitsi {
    height: min(500px, 75vh) !important;
  }

  /* Toast notification */
  .toast {
    width: 90vw !important;
    max-width: 380px !important;
    font-size: 12px !important;
    padding: 12px 16px !important;
  }
}

/* ── Custom Hero Dropdown Control ────────────────────────────────── */
.custom-dropdown {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.dropdown-trigger {
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}

.trigger-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trigger-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
}

.trigger-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trigger-selected .option-icon {
  font-size: 18px;
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.custom-dropdown .chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 12px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
  flex-shrink: 0;
}

.dropdown-trigger:hover .chevron,
.custom-dropdown.open .chevron {
  background: var(--sage);
}

.custom-dropdown.open .chevron {
  transform: rotate(180deg);
}

/* ── Custom Dropdown Menu ───────────────────────────────────────────── */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -22px;
  right: -55px;
  min-width: 320px;
  max-height: 450px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(23, 60, 48, 0.12);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 20px 45px rgba(24, 45, 36, 0.18), 0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
  backdrop-filter: blur(12px);
}

.custom-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ── Option Item ────────────────────────────────────────────────────── */
.dropdown-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  user-select: none;
}

.dropdown-option:hover {
  background: #f4f8f5;
  transform: translateX(4px);
}

.dropdown-option.active {
  background: var(--mint);
  border: 1px solid rgba(23, 60, 48, 0.15);
}

.option-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.dropdown-option:hover .option-badge {
  transform: scale(1.08);
}

.icon-property {
  background: #edf4ed;
  color: #173c30;
}

.icon-corporate {
  background: #fbf0e8;
  color: #c86245;
}

.icon-family {
  background: #f4effa;
  color: #6b46c1;
}

.option-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.option-details strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.option-details small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.check-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.dropdown-option.active .check-mark {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 600px) {
  .dropdown-menu {
    left: -12px;
    right: -12px;
    min-width: 280px;
  }
}

/* ── Add to Calendar Dropdown ── */
.cal-dropdown {
  position: relative;
  display: inline-block;
}

.btn-add-calendar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: white;
  border: 1.5px solid #c8d6cb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest, #1e4d3b);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-add-calendar:hover {
  background: #eef5f0;
  border-color: var(--forest, #1e4d3b);
}

.cal-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid #d5e0d8;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 900;
  overflow: hidden;
  padding: 4px 0;
}

.cal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink, #173c30);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.cal-option:hover {
  background: #f0f7f3;
  color: var(--forest, #1e4d3b);
  font-weight: 600;
}

/* ── User Account Header Dropdown ── */
.user-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.user-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--mint, #eaf4ee);
  border: 1px solid var(--sage, #c5ded0);
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
  color: var(--forest, #1e4d3b);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.user-dropdown-trigger:hover {
  background: #deeee3;
  border-color: var(--forest, #1e4d3b);
}

.user-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--forest, #1e4d3b);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-name-text {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chevron {
  font-size: 10px;
  opacity: 0.6;
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: white;
  border: 1px solid #d5e0d8;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: hidden;
  padding: 6px 0;
  animation: dropdownFadeIn 0.15s ease;
}

.user-dropdown-menu[hidden] {
  display: none !important;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-header {
  padding: 10px 16px;
  border-bottom: 1px solid #edf2ee;
  background: #f8faf8;
}

.user-name-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--forest, #1e4d3b);
}

.user-email-subtitle {
  font-size: 11px;
  color: var(--muted, #668073);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #173c30);
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease;
}

.user-dropdown-item:hover {
  background: #f0f7f3;
  color: var(--forest, #1e4d3b);
}

.user-dropdown-item.signout-item {
  color: #b30000;
}

.user-dropdown-item.signout-item:hover {
  background: #fdf2f2;
  color: #8b0000;
}

.dropdown-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.dropdown-divider {
  height: 1px;
  background: #edf2ee;
  margin: 4px 0;
}

/* ── 3-Dots Options Menu for Meeting Cards ────────────────────────────── */
.card-dots-wrapper {
  position: relative;
  margin-left: auto;
}

.card-dots-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d9ded9;
  background: white;
  color: var(--forest, #173c30);
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
}

.card-dots-btn:hover {
  background: #edf4ed;
  border-color: #173c30;
  transform: scale(1.05);
}

.card-dots-menu {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 100;
  width: 250px;
  background: white;
  border: 1px solid #d5e0d7;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-dots-menu[hidden] {
  display: none !important;
}

.card-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #17251f);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
}

.card-menu-item:hover {
  background: #f0f7f2;
  color: var(--forest, #173c30);
}

.card-menu-item.sub {
  font-size: 12px;
  padding: 7px 12px 7px 26px;
  color: #486355;
}

.card-menu-item.sub:hover {
  background: #eef6f0;
}

.card-menu-item.warning {
  color: #b45309;
}

.card-menu-item.warning:hover {
  background: #fffbe6;
  color: #92400e;
}

.card-menu-item.danger {
  color: #b30000;
}

.card-menu-item.danger:hover {
  background: #fef2f2;
  color: #990000;
}

.card-menu-divider {
  height: 1px;
  background: #e6ede8;
  margin: 4px 6px;
}

.card-menu-subhead {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #68736d);
  padding: 4px 12px 2px;
}

.menu-icon {
  font-size: 14px;
}

/* ── Sign in with Google Button & Auth Divider ────────────────────────── */
.btn-google-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid #d5e0d7;
  background: white;
  color: #17251f;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  margin-bottom: 4px;
}

.btn-google-auth:hover {
  background: #f8faf8;
  border-color: #173c30;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: #8fa79b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2ece5;
}