/*-- Result Count (shared across modules) */
.directory-search-count { font-size: 0.9rem; color: var(--ink-light); margin-bottom: 0.75rem; }

.tl-owner-count-row .directory-search-count { margin-bottom: 0; }

/*-- Business Card Row */
.card-biz-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.9rem; }

.card-biz-logo { width: 56px; height: 56px; border-radius: var(--tl-radius); background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; border: 1px solid var(--sand-dark); }

.card-biz-info { flex: 1; }

.card-biz-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); font-family: var(--font-display); }

.card-biz-cat { font-size: 0.78rem; color: var(--ink-light); margin-bottom: 0.3rem; }

/*-- Page Manager tags narrow sidebar columns with .is-condensed (e.g. the
     /feed sidebar's 440px column). Inside those columns the four content
     modules' featured cards drop their description body so the card collapses
     to title + meta only. Wider columns (homepage main grid) keep the
     description. CSS-only - no per-module render-path branch needed.
     .card-text covers businesses/events/marketplace; .card-description covers news. */
.is-condensed .module-businesses .list-wrapper .item .card-text { display: none; }

.tl-premium-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--gold); padding: 0.3rem 0.6rem; background: rgba(212, 175, 55, 0.12); border-radius: var(--tl-radius-pill); border: 1px solid var(--gold); }

.tl-my-listing-actions { padding: 0.5rem 0.75rem; border-top: 1px solid var(--sand); }

.tl-make-premium { font-size: 0.85rem; }

/*-- Hash-deep-link flash: feed card scrolled to from /#post-{id} or review
     card scrolled to from /businesses/{slug}#review-{id} pulses a subtle clay
     outline so the user's eye lands on the right item. Removed by JS after
     2 seconds. */
.directory-review.tl-hash-flash {
	box-shadow: 0 0 0 3px rgba(158, 74, 30, 0.35);
	transition: box-shadow 0.3s;
}

/* Review form textarea */
.review-textarea { width: 100%; margin: 0.5rem 0; }

/*-- Review cards (business detail page) */
.directory-review { position: relative; padding: 0.85rem 1rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); background: var(--white); margin-bottom: 0.5rem; }

.directory-review-header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.35rem; padding-right: 2rem; }

.directory-review-name { font-weight: 700; color: var(--ink); text-decoration: none; }

a.directory-review-name:hover { color: var(--clay); text-decoration: underline; }

.directory-review-text { color: var(--ink-mid); margin: 0; line-height: 1.5; font-size: 0.92rem; }

.directory-review-text-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.directory-review-more { display: inline-block; margin-top: 0.35rem; padding: 0; background: transparent; border: 0; color: var(--clay); font-size: 0.82rem; font-weight: 600; cursor: pointer; }

.directory-review-more:hover { text-decoration: underline; }

.directory-review-form-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }

/*-- Hours of operation editor - 7 rows of (day | start | "to" | end). Compact
 *  grid that mirrors the public detail page's hours table. */
.directory-hours-editor { display: flex; flex-direction: column; gap: 0.4rem; }

.directory-hours-row { display: grid; grid-template-columns: 110px 1fr auto 1fr; align-items: center; gap: 0.6rem; }

.directory-hours-day { font-weight: 600; color: var(--ink); }

.directory-hours-pick { padding: 0.35rem 0.5rem; }

.directory-hours-sep { color: var(--ink-mid); font-size: 0.85rem; }

@media (max-width: 600px) {
.directory-hours-row { grid-template-columns: 90px 1fr; grid-row-gap: 0.25rem; }

.directory-hours-row .directory-hours-pick { grid-column: 2 / 3; }

.directory-hours-row .directory-hours-sep { display: none; }
}

/*-- Premium section - clearly delineated panel below the basic editor. The
 *  --locked variant greys the editor controls behind a soft overlay and
 *  disables pointer-events; bypass via inspect-element is blocked server-side
 *  in business-submit.aspx (premium gate re-checked when handling menu_items). */
.tl-premium-section { position: relative; margin: 1.5rem 0; padding: 0; background: var(--white); border: 2px solid var(--gold); border-radius: var(--tl-radius); overflow: hidden; }

.tl-premium-section--locked { border-color: var(--sand-dark); }

.tl-premium-banner { padding: 1.25rem 1.25rem 1rem; background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%); border-bottom: 1px solid var(--sand-dark); }

.tl-premium-section--unlocked .tl-premium-banner { background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0.08) 100%); }

.tl-premium-banner-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }

.tl-premium-banner-head:last-child { margin-bottom: 0; }

.tl-premium-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 0.4rem; }

.tl-premium-status { font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--tl-radius-pill); text-transform: uppercase; letter-spacing: 0.04em; }

.tl-premium-status-active { background: var(--gold); color: #fff; }

.tl-premium-status-locked { background: var(--sand-dark); color: var(--ink-mid); }

.tl-premium-pitch { margin: 0 0 0.75rem; color: var(--ink-mid); font-size: 0.92rem; line-height: 1.5; }

.tl-premium-features { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }

.tl-premium-features li { font-size: 0.88rem; color: var(--ink); line-height: 1.45; }

.tl-premium-features li .fa { color: var(--sky); margin-right: 0.4rem; }

.tl-premium-create-note { margin: 1.4rem 0 0.5rem; padding: 0.6rem 0.75rem; background: var(--sand); border-radius: var(--tl-radius); color: var(--ink-mid); font-size: 0.85rem; font-style: italic; }

.tl-make-premium { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700; margin: 0.4rem 0 0.5rem; }

.tl-make-premium:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

/*-- Premium-gated editor block (currently: menu items). When the section is
 *  locked, controls inside become un-interactive AND visually muted. The
 *  add-button's HTML disabled attribute is the primary defense; CSS layers
 *  a pointer-events block in case CSS-only forks try to enable it. */
.tl-premium-editor { padding: 1rem 1.25rem 1.25rem; }

.tl-premium-editor-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; color: var(--ink); }

.tl-premium-section--locked .tl-premium-editor { position: relative; opacity: 0.55; }

.tl-premium-section--locked .tl-premium-editor input,
.tl-premium-section--locked .tl-premium-editor textarea,
.tl-premium-section--locked .tl-premium-editor button { pointer-events: none; background: var(--sand) !important; cursor: not-allowed !important; }

.tl-premium-section--locked .tl-premium-editor::after { content: "\1f512   Premium feature - upgrade above to edit"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); font-size: 0.85rem; font-weight: 600; color: var(--ink); pointer-events: none; box-shadow: 0 2px 8px rgba(30, 26, 22, 0.12); }

/*-- Premium tabs - same visual language as the profile-tabs strip. Bottom
 *  border highlights the active tab; the panel below changes via .is-active. */
.tl-premium-tabs { position: relative; }

.tl-premium-tabbar { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--sand-dark); padding: 0 1rem; background: var(--white); }

.tl-premium-tab { background: transparent; border: 0; padding: 0.85rem 1.25rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--ink-mid); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 0.45rem; }

.tl-premium-tab:hover { color: var(--ink); }

.tl-premium-tab.is-active { color: var(--clay); border-bottom-color: var(--clay); }

.tl-premium-tab .fa { font-size: 0.95em; }

.tl-premium-tab-panel { display: none; padding: 1rem 1.25rem 1.25rem; background: var(--white); }

.tl-premium-tab-panel.is-active { display: block; }

/*-- Locked state on the Premium tab strip - every tab and panel becomes
 *  uninteractive AND visually muted. Server still re-checks tier on save. */
.tl-premium-section--locked .tl-premium-tabbar { opacity: 0.65; }

.tl-premium-section--locked .tl-premium-tab-panel.is-active { position: relative; opacity: 0.55; }

.tl-premium-section--locked .tl-premium-tab,
.tl-premium-section--locked .tl-premium-tab-panel input,
.tl-premium-section--locked .tl-premium-tab-panel select,
.tl-premium-section--locked .tl-premium-tab-panel textarea,
.tl-premium-section--locked .tl-premium-tab-panel button { pointer-events: none !important; cursor: not-allowed !important; }

.tl-premium-section--locked .tl-premium-tab-panel input,
.tl-premium-section--locked .tl-premium-tab-panel select,
.tl-premium-section--locked .tl-premium-tab-panel textarea { background: var(--sand) !important; }

.tl-premium-section--locked .tl-premium-tab-panel.is-active::after { content: "\1f512   Premium feature - upgrade above to unlock"; position: absolute; top: 70%; left: 50%; transform: translate(-50%, 0); padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); font-size: 0.85rem; font-weight: 600; color: var(--ink); pointer-events: none; box-shadow: 0 2px 8px rgba(30, 26, 22, 0.12); }

/*-- Menu items editor - list of (title, price, description, remove). */
.directory-menu-editor { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }

.directory-menu-row { display: grid; grid-template-columns: 1.5fr 0.6fr 2fr auto; gap: 0.5rem; align-items: center; }

.directory-menu-row .form-control { padding: 0.4rem 0.55rem; }

.tl-menu-add-btn { font-size: 0.88rem; }

@media (max-width: 720px) {
.directory-menu-row { grid-template-columns: 1fr 1fr; grid-row-gap: 0.35rem; }

.directory-menu-row .ml-menu-desc { grid-column: 1 / 3; }

.directory-menu-row .ml-menu-remove { grid-column: 2 / 3; justify-self: end; }
}

/*-- Gallery editor - square thumbnail grid. Each tile has a delete button
 *  in the top-right that fades in on hover. */
.directory-gallery-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; min-height: 60px; }

.directory-gallery-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); background: var(--sand); }

.directory-gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.directory-gallery-remove { position: absolute; top: 0.3rem; right: 0.3rem; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--error); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; }

.directory-gallery-tile:hover .directory-gallery-remove,
.directory-gallery-remove:focus { opacity: 1; }

.directory-gallery-remove:hover { background: var(--error); color: #fff; }

.directory-gallery-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/*-- Business Address Mini-Map. Server-side cached PNG (one per normalized
     address, ever). The <img> opens Google Maps in a new tab when clicked -
     a static image without a click target is a dead end. No JS, no Leaflet,
     no per-view OSM fetches. Container has no fixed height so the natural
     400x220 aspect ratio (1.82:1) survives at any sidebar width. */
.directory-map { position: relative; margin: 0; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; }

.directory-map:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30, 26, 22, 0.12); }

.directory-map a { display: block; line-height: 0; }

.directory-map-img { width: 100%; height: auto; display: block; }

.directory-map-attribution { position: absolute; bottom: var(--tl-space-1); right: var(--tl-space-1); display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap; line-height: 1; font-size: 0.7rem; color: var(--ink); background: rgba(255, 255, 255, 0.9); padding: 0.2rem 0.45rem; border-radius: var(--tl-radius); }

.directory-map-attribution a { color: var(--ink); text-decoration: none; }

.directory-map-attribution a:hover { text-decoration: underline; }

/*-- Business Tier: Inline Ad Zone */
.directory-inline-ad { margin: var(--tl-space-8) 0; padding: var(--tl-space-6); background: var(--sand); border-radius: var(--tl-radius); text-align: center; }

.directory-inline-ad .sponsored-label { margin-bottom: var(--tl-space-2); }

/*-- Business Claim Section */
.directory-claim-section { border-top: 1px solid var(--sand-dark); padding-top: var(--tl-space-6); margin-top: var(--tl-space-8); }

.directory-claim-section p { color: var(--ink-light); margin-bottom: var(--tl-space-4); }

.directory-claim-section textarea { width: 100%; padding: var(--tl-space-3); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--tl-font-body); font-size: var(--tl-text-body); margin-bottom: var(--tl-space-3); resize: vertical; }

.directory-claim-section textarea:focus { outline: none; border-color: var(--clay); }

/*-- Feed: Card Image Helpers */
.card-biz-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }