/* ============================================================
   LIFE AND FUN: shared list pages (food, events, exhibitions, experiences)
   ============================================================ */

/* ---------------- Header ---------------- */
.lf-head { padding: calc(var(--nav-h) + clamp(32px, 4vw, 64px)) 0 clamp(20px, 2.4vw, 32px); }
.lf-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95;
  font-size: clamp(40px, 6vw, 88px); margin: 14px 0 12px;
}
.lf-head .lead { max-width: 52ch; }
.lf-body { padding-bottom: clamp(48px, 6vw, 96px); }

/* ---------------- Toolbar (sticky under the navbar) ---------------- */
.lf-toolbar {
  position: sticky; top: var(--nav-h); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  padding-block: 14px; background: var(--cream); border-top: 1px solid var(--sand-200); border-bottom: 1px solid var(--sand-200);
}
.lf-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.lf-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* Fields */
.lf-field { display: flex; flex-direction: column; gap: 6px; }
.lf-label { font-size: 12px; font-weight: 600; color: var(--mauve-500); }
.lf-select, .lf-search, .lf-input {
  min-height: 38px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--sand-300);
  background: var(--white); color: var(--plum); font: inherit; font-size: 14px;
}
.lf-select { min-width: 180px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; text-align: start; cursor: pointer; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease); }
.lf-select:active:not(:disabled) { transform: scale(0.98); }
.lf-select[aria-expanded="true"] { border-color: var(--rose); box-shadow: 0 0 0 3px var(--blush); }
.lf-select .icon { font-size: 20px; color: var(--mauve-500); transition: transform 200ms var(--ease); }
.lf-select[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lf-dd { position: relative; }
.lf-dd .lf-select { width: 100%; }
.lf-menu {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30; min-width: max-content; max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-sm); box-shadow: var(--shadow-2);
  transform-origin: top; animation: lf-menu-in 160ms var(--ease); scrollbar-width: thin; scrollbar-color: var(--sand-300) transparent;
}
.lf-menu li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--plum); cursor: pointer; }
.lf-menu li[data-active] { background: var(--sand-50); }
.lf-menu li[aria-selected="true"] { font-weight: 600; color: var(--rose); }
.lf-menu li .icon { font-size: 18px; }
@keyframes lf-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .lf-menu { animation: none; } .lf-select .icon { transition: none; } }
.lf-search { min-width: 220px; }
.lf-select:disabled, .lf-search:disabled { opacity: 0.6; }

/* Segmented toggle with one sliding pill (layoutId) behind the active tab */
.lf-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sand-50); }
.lf-seg-btn {
  position: relative; display: inline-flex; align-items: center; padding: 8px 16px; border: 0; background: none; font-size: 14px;
  border-radius: 999px; font-weight: 600; color: var(--plum);
  transition: transform 160ms var(--ease), color 200ms var(--ease);
}
.lf-seg-btn:active { transform: scale(0.97); }
.lf-seg-btn[aria-pressed="true"] { color: var(--white); }
.lf-seg-pill { position: absolute; inset: 0; border-radius: 999px; background: var(--rose); }
.lf-seg-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }

/* Chips */
.lf-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--sand-300); background: transparent; color: var(--plum); font-size: 13px; font-weight: 500;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 160ms var(--ease);
}
.lf-chip:active { transform: scale(0.97); }
.lf-chip[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: var(--white); }
.lf-chip:disabled { opacity: 0.5; }
@media (hover: hover) and (pointer: fine) { .lf-chip:hover:not(:disabled) { border-color: var(--plum); } }

.lf-count { margin: 24px 0 0; font-size: 14px; color: var(--mauve-500); }

/* Notices */
.lf-notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin: 24px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--sand-50); font-size: 14px;
}

/* ---------------- Grid and cards ---------------- */
.lf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 24px); margin-top: 24px;
}
.lf-card { display: flex; flex-direction: column; gap: 10px; }
.lf-img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; }
.lf-img .ph { position: absolute; inset: 0; transition: transform 400ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .lf-card:hover .lf-img .ph { transform: scale(1.04); } }
.lf-meta h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.lf-meta p { margin: 2px 0 0; color: var(--mauve-500); font-size: 13px; }
.lf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lf-tags li { padding: 3px 8px; border-radius: 999px; background: var(--sand-50); font-size: 12px; color: var(--plum); }
.lf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.lf-date { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.lf-date .icon { font-size: 18px; color: var(--rose); }
.lf-price { color: var(--mauve-500); }
.lf-price[data-free="true"] { color: var(--plum); font-weight: 600; }

/* Loading placeholders */
.lf-skel { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--sand-50); }

/* Empty state */
.lf-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 48px; padding-block: 32px; border-top: 1px solid var(--sand-200); }
.lf-empty p { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; }

@media (max-width: 767px) {
  .lf-toolbar { top: var(--nav-h); }
  .lf-seg-btn { padding: 8px 14px; }
  .lf-select, .lf-search { min-width: 0; width: 100%; }
  .lf-tools > .lf-field { flex: 1 1 140px; }
}

/* ---------------- Card link, pager, back link ---------------- */
.lf-card-link { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; border-radius: var(--r-md); }
.lf-card-link:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; }

.lf-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.lf-pager-status { font-size: 14px; color: var(--mauve-500); }

.lf-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--plum); }
.lf-back .icon { font-size: 18px; }
.lf-back:hover { color: var(--rose); }

/* ---------------- Detail page ---------------- */
.lf-detail-page { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 48px)); }
.lfd-head { margin-top: 12px; margin-bottom: clamp(24px, 3vw, 40px); }
.lfd-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  font-size: clamp(32px, 4.4vw, 60px); margin: 10px 0 0;
}
.lfd-hero { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--sand-50); }
.lfd-hero img, .lfd-hero .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lfd-thumbs { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 12px 0 0; padding: 0; }

.lfd-thumbs img { display: block; width: clamp(120px, 14vw, 180px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--sand-50); }

.lfd-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: 8px; align-items: start; }
.lfd-media { position: sticky; top: calc(var(--nav-h) + 24px); min-width: 0; }
.lfd-body { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.lfd-lead { font-size: 16px; line-height: 1.65; max-width: 60ch; }
.lfd-card {
  display: flex; flex-direction: column; gap: 20px; padding: 24px;
  border-radius: var(--r-md); background: var(--white); border: 1px solid var(--sand-200);
}
.lfd-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lfd-info li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; overflow-wrap: anywhere; }
.lfd-info .icon { font-size: 22px; color: var(--rose); }
.lfd-info a { color: var(--plum); text-decoration: underline; text-decoration-color: var(--sand-300); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lfd-info a:hover { color: var(--rose); } }
.lfd-info small { display: block; margin-top: 2px; color: var(--mauve-500); font-size: 13px; }

.lfd-social { display: flex; flex-wrap: wrap; gap: 10px; }
.lfd-social a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--sand-300); color: var(--plum); font-size: 14px; font-weight: 600;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), transform 160ms var(--ease);
}
.lfd-social a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .lfd-social a:hover { border-color: var(--rose); color: var(--rose); } }

.lfd-map { justify-content: center; gap: 8px; min-height: 48px; }
.lfd-map .icon { font-size: 20px; }

.lfd-date { display: flex; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--sand-200); }
.lfd-date b { font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--rose); }
.lfd-date span { font-size: 15px; font-weight: 600; color: var(--plum); }
.lfd-status { align-self: flex-start; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sand-50); color: var(--plum); }
.lfd-status[data-status="ongoing"] { background: var(--blush); }

.lfd-h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.lfd-reviews { display: flex; flex-direction: column; gap: 12px; }
.lfd-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lfd-review-list li { padding-top: 16px; border-top: 1px solid var(--sand-200); }
.lfd-review-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.lfd-review-head time { color: var(--mauve-500); font-weight: 400; }

.lf-detail-skel .lf-skel { aspect-ratio: 16 / 9; }
.lf-muted { color: var(--mauve-500); font-size: 14px; }
.lf-rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.lf-rating .icon { font-size: 18px; color: var(--rose); }

@media (max-width: 899px) {
  .lfd-split { grid-template-columns: 1fr; }
  .lfd-media { position: static; }
}

/* ---------------- Interactive map ---------------- */
.mp { display: flex; flex-direction: column; margin-top: var(--nav-h); height: calc(100dvh - var(--nav-h)); min-height: 520px; }
.mp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 12px var(--page-x); background: var(--cream); border-bottom: 1px solid var(--sand-200); }
.mp-bar .lf-count { margin: 0; }
.mp-chip { display: inline-flex; align-items: center; gap: 8px; }
.mp-chip i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--white); }
.mp-map { flex: 1; min-height: 0; background: var(--sand-50); z-index: 0; }
.mp-pop { display: flex; flex-direction: column; gap: 4px; font-family: inherit; color: var(--plum); }
.mp-pop strong { font-size: 15px; }
.mp-pop span { font-size: 13px; color: var(--mauve-500); }
.mp .mp-pop a { margin-top: 4px; font-weight: 600; color: var(--rose); }
.mp .leaflet-popup-content-wrapper { border-radius: var(--r-sm); box-shadow: var(--shadow-2); }
.mp .leaflet-container { font-family: inherit; }

/* Deals: violet is reserved for offers */
.deal-off { display: inline-block; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--violet, #5b3fd9); color: var(--white); font-weight: 700; font-size: 14px; }

/* Services: numbers list and FAQ accordion */
.sv-tools { margin-bottom: 24px; }
.sv-group { margin-top: 32px; }
.sv-h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.sv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sand-200); }
.sv-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sand-200); }
.sv-list li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-list small { color: var(--mauve-500); font-size: 13px; }
.sv-call { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-weight: 600; color: var(--rose); padding: 8px 4px; }
.sv-call .icon { font-size: 20px; }
.sv-faq { border-top: 1px solid var(--sand-200); }
.sv-faq details { border-bottom: 1px solid var(--sand-200); }
.sv-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 600; list-style: none; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary .icon { color: var(--mauve-500); transition: transform 200ms var(--ease); }
.sv-faq details[open] summary .icon { transform: rotate(180deg); }
.sv-faq details p { padding: 0 0 20px; max-width: 70ch; color: var(--mauve-500); }
@media (prefers-reduced-motion: reduce) { .sv-faq summary .icon { transition: none; } }
.lf-body[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.lf-body > .lfd-h2 { margin-bottom: 20px; }

/* Invest in Syria: sectors beside the request form */
.iv { display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; }
@media (min-width: 1024px) { .iv { grid-template-columns: minmax(0, 1fr) 400px; } }
/* Sticky only when the whole form fits under the nav, so the submit button never hides below the fold. */
@media (min-width: 1024px) and (min-height: 820px) { .iv-form { position: sticky; top: calc(var(--nav-h) + 24px); } }
.iv .lfd-h2 { margin-bottom: 20px; }
.iv-sectors { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sand-200); }
.iv-sectors > li { padding: 24px 0; border-bottom: 1px solid var(--sand-200); }
.iv-sectors > li > p { color: var(--mauve-500); max-width: 60ch; }
.iv-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--mauve-500); }
.iv-facts strong { color: var(--plum); font-weight: 600; }
.iv-form { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 32px); background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-md); }
.iv-form .lfd-h2 { margin-bottom: 4px; }
.iv-form .lf-input { width: 100%; font-size: 16px; }
.iv-form textarea.lf-input { resize: vertical; min-height: 120px; }
.iv-form .lf-input:focus-visible { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--blush); }
.iv-form .lf-input[aria-invalid="true"] { border-color: var(--rose); }
.iv-form .btn { align-self: flex-start; }
.iv-select { display: flex; flex-direction: column; gap: 6px; }
.iv-err { color: var(--rose); font-size: 13px; }
.iv-sent { align-items: flex-start; }
.iv-sent > .icon { font-size: 40px; color: var(--rose); }
.iv-sent p { color: var(--mauve-500); }

/* Syrian Calendar: season panel and weather */
.cl-season { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.cl-img { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: var(--sand-50); }
.cl-img .ph, .cl-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-months { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--mauve-500); }
.cl-now { padding: 2px 8px; border-radius: 999px; background: var(--blush); color: var(--rose); font-size: 12px; }
.cl-h3 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.cl-desc { margin-top: 10px; color: var(--plum-700); max-width: 52ch; }
.cl-tips { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--sand-200); }
.cl-tips li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--sand-200); font-size: 14px; }
.cl-tips span { color: var(--mauve-500); }
.cl-season > .lf-skel { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
@media (max-width: 767px) { .cl-season { grid-template-columns: minmax(0, 1fr); } }

.cl-wx { display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); gap: 16px; align-items: stretch; }
.cl-now-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--sand-200); min-height: 128px; }
.cl-now-card > .icon { font-size: 48px; color: var(--rose); }
.cl-temp { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.cl-sum { margin-top: 4px; font-weight: 600; }
.cl-meta { margin-top: 2px; font-size: 13px; color: var(--mauve-500); }
.cl-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cl-days li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 6px; border-radius: var(--r-sm); background: var(--sand-50); font-size: 13px; text-align: center; }
.cl-days .icon { font-size: 24px; color: var(--plum-600); }
.cl-day { font-weight: 600; }
.cl-range { color: var(--mauve-500); white-space: nowrap; }
.cl-range b { color: var(--plum); font-weight: 600; }
.cl-rain { font-size: 12px; color: var(--rose); }
@media (max-width: 1023px) { .cl-wx { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .cl-days { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--sand-200); }
  .cl-days li { display: grid; grid-template-columns: 48px 24px minmax(0, 1fr) 72px; align-items: center; gap: 12px; padding: 10px 2px; border-radius: 0; background: none; border-bottom: 1px solid var(--sand-200); text-align: start; }
  .cl-rain { grid-column: 3; grid-row: 1; justify-self: end; }
  .cl-range { grid-column: 4; grid-row: 1; text-align: end; }
}
.lf-sub { margin: -12px 0 4px; }

/* Event organizers */
.lfd-org { display: flex; flex-direction: column; gap: 12px; }
.lfd-org-card { gap: 12px; }
.lfd-org-card h3 { font-size: 17px; font-weight: 700; }
.lfd-org-services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sand-200); }
.lfd-org-services li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--sand-200); font-size: 14px; }
.lfd-org-services span { color: var(--mauve-500); }
/* Phones: a toolbar with a chip group is too tall to pin; chips scroll sideways on one line instead of wrapping. */
@media (max-width: 767px) {
  .lf-toolbar:has(.lf-tools > .lf-group) { position: static; }
  .lf-tools > .lf-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--page-x) * -1); padding-inline: var(--page-x); max-width: 100vw; }
  .lf-tools > .lf-group::-webkit-scrollbar { display: none; }
  .lf-tools > .lf-group .lf-chip { flex-shrink: 0; }
}

/* ---------------- Account: sign in, register, reset, profile ---------------- */
.acct { display: flex; justify-content: center; padding-block: calc(var(--nav-h) + clamp(32px, 5vw, 64px)) clamp(48px, 6vw, 96px); }
.acct-card { width: 100%; max-width: 460px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-md); background: var(--white); border: 1px solid var(--sand-200); box-shadow: var(--shadow-1); }
.acct-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(28px, 3.2vw, 36px); }
.acct-lead { margin-top: 8px; color: var(--plum-600); font-size: 15px; line-height: 1.5; }
.acct-lead strong { color: var(--plum); font-weight: 600; overflow-wrap: anywhere; }
.acct-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.acct-form > .lfd-h2 { margin-bottom: -4px; }
.acct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acct-field .lf-input { width: 100%; font-size: 16px; min-height: 44px; }
.acct-field .lf-input:focus-visible { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--blush); }
.acct-field .lf-input[aria-invalid="true"] { border-color: var(--rose); }
.acct-hint { font-size: 13px; color: var(--mauve-500); }
.acct-code { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; font-weight: 600; }
.acct-pw { position: relative; }
.acct-pw .lf-input { padding-inline-end: 48px; }
.acct-eye { position: absolute; inset-inline-end: 2px; top: 24px; width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; color: var(--mauve-500); border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .acct-eye:hover { color: var(--plum); } }
.acct-eye .icon { font-size: 20px; }
.acct-submit { width: 100%; margin-top: 4px; }
.acct-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--rose); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.acct-link:disabled { color: var(--mauve-500); text-decoration: none; cursor: default; }
.acct-forgot { align-self: flex-end; margin-top: -8px; font-size: 14px; }
.acct-alt { margin-top: 20px; font-size: 14px; color: var(--plum-600); text-align: center; }
.acct-form .acct-alt { margin-top: 0; }
.acct-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.45; }
.acct-alert .icon { font-size: 20px; flex-shrink: 0; }
.acct-alert-error { background: var(--blush); color: var(--rose-dark); }
.acct-alert-ok { background: #e1f3f0; color: #0b6b61; }
.acct-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; font-size: 13px; color: var(--mauve-500); }
.acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1px; background: var(--sand-200); }
.acct-google-btn { display: flex; justify-content: center; min-height: 44px; }
/* Email and badge wrap as separate pieces, so a wrapped badge starts flush left. */
.acct-lead:has(.acct-badge) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.acct-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #e1f3f0; color: #0b6b61; font-size: 12px; font-weight: 600; vertical-align: middle; }
.acct-badge .icon { font-size: 14px; }
.acct-foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--sand-200); }
.acct-skel { aspect-ratio: 4 / 3; }
@media (max-width: 479px) { .acct-row { grid-template-columns: 1fr; } }

/* Save button beside detail titles */
.lfd-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.lfd-save {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--sand-300); background: var(--white); color: var(--plum); font-size: 14px; font-weight: 600;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background-color 180ms var(--ease), transform 160ms var(--ease);
}
.lfd-save:active { transform: scale(0.97); }
.lfd-save[aria-pressed="true"] { border-color: var(--rose); color: var(--rose); background: var(--blush); }
.lfd-save:disabled { opacity: 0.5; }
.lfd-save-icon { display: inline-grid; }
.lfd-save .icon { font-size: 20px; color: var(--rose); }
@media (hover: hover) and (pointer: fine) { .lfd-save:hover { border-color: var(--rose); color: var(--rose); } }

/* Review form under the review list */
.lfd-review-cta { margin-top: 12px; font-size: 14px; color: var(--plum-600); }
.lfd-review-form { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 16px; padding: 20px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--sand-200); }
.lfd-review-form .acct-field { align-self: stretch; }
.lfd-review-form textarea.lf-input { width: 100%; resize: vertical; min-height: 96px; font-size: 16px; }
.lfd-review-form textarea.lf-input:focus-visible { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--blush); }
.lfd-review-title { font-size: 16px; font-weight: 700; }
.lfd-stars { display: flex; align-items: center; gap: 2px; }
.lfd-stars button { width: 40px; height: 40px; border: 0; background: none; display: grid; place-items: center; border-radius: 999px; color: var(--amber); transition: transform 140ms var(--ease); }
.lfd-stars button:active { transform: scale(0.9); }
.lfd-stars .icon { font-size: 28px; }
.lfd-stars .icon:not(.filled) { color: var(--sand-300); }
.lfd-stars-label { margin-inline-start: 8px; font-size: 14px; font-weight: 600; color: var(--plum-600); min-width: 6ch; }
/* Favourites: the Saved toggle sits under each card */
.fav-item { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fav-item > .lf-card-link, .fav-item > .lf-card { align-self: stretch; }