/* ===================================================================
   TRATOK HOSPITALITY - Manage Pages (Properties, Activities, Restaurants)
   =================================================================== */

/* Page Header */
.manage-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.manage-header-actions { display: flex; gap: 10px; }

/* Toggle Form Button */
.btn-add-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 10px; font-size: 0.85rem;
    font-weight: 700; cursor: pointer; border: none;
    color: var(--bg-body); background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    box-shadow: 0 4px 20px rgba(212,168,67,0.15);
    transition: all 0.25s;
}
.btn-add-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(212,168,67,0.25); }

/* Add Form Panel */
.add-form-panel {
    display: none; background: var(--bg-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); padding: 28px; margin-bottom: 28px;
    animation: slideDown 0.3s ease-out;
}
.add-form-panel.open { display: block; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.add-form-title {
    display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border-muted);
}
.add-form-title i {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(212,168,67,0.08); border: 1px solid rgba(212,168,67,0.12);
    color: var(--gold-400); font-size: 0.95rem;
}
.add-form-title h3 { font-size: 1.05rem; font-weight: 700; }
.add-form-title p { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* Listing Cards Grid */
.listing-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px;
}
.listing-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: all 0.3s ease; position: relative;
}
.listing-card:hover {
    border-color: var(--border-default); transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.listing-card-img {
    height: 160px; background-size: cover; background-position: center;
    background-color: var(--bg-elevated); position: relative;
}
.listing-card-img::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.listing-card-badges {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: flex; gap: 6px;
}
.listing-badge {
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; backdrop-filter: blur(8px);
}
.badge-active { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.badge-inactive { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }
.badge-pending { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
.badge-approved { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }

.listing-card-body { padding: 16px; }
.listing-card-body h3 {
    font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.listing-card-meta {
    font-size: 0.75rem; color: var(--text-muted); display: flex;
    align-items: center; gap: 4px; margin-bottom: 10px;
}
.listing-card-meta i { font-size: 0.65rem; color: var(--gold-600); }
.listing-card-stats {
    display: flex; gap: 16px; padding-top: 10px;
    border-top: 1px solid var(--border-muted); font-size: 0.72rem;
}
.listing-card-stats span { color: var(--text-muted); }
.listing-card-stats strong { color: var(--text-primary); margin-left: 3px; }
.listing-card-actions {
    display: flex; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--border-muted);
}
.listing-card-actions a, .listing-card-actions button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 8px; border-radius: var(--radius-md); font-size: 0.72rem;
    font-weight: 600; border: 1px solid var(--border-muted); cursor: pointer;
    transition: all 0.2s; background: transparent; color: var(--text-secondary);
    text-decoration: none;
}
.listing-card-actions a:hover, .listing-card-actions button:hover {
    border-color: var(--border-default); color: var(--text-primary);
    background: rgba(255,255,255,0.03);
}
.action-btn-danger:hover { border-color: rgba(248,113,113,0.3) !important; color: #f87171 !important; }
.action-btn-success:hover { border-color: rgba(52,211,153,0.3) !important; color: #34d399 !important; }

/* Edit Panel */
.edit-panel {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px;
}
.edit-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-muted);
}
.edit-panel-header h2 {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
}
.edit-panel-header h2 i { color: var(--gold-400); }

/* Image Gallery Grid */
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.gallery-item {
    position: relative; border-radius: var(--radius-md); overflow: hidden;
    aspect-ratio: 4/3; background: var(--bg-elevated);
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.gallery-item-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-delete-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(248,113,113,0.9); border: none; color: #fff;
    cursor: pointer; font-size: 0.8rem; display: flex;
    align-items: center; justify-content: center; transition: transform 0.2s;
}
.gallery-delete-btn:hover { transform: scale(1.1); }

/* Image Upload Area */
.upload-area {
    border: 2px dashed var(--border-muted); border-radius: var(--radius-lg);
    padding: 28px; text-align: center; cursor: pointer;
    transition: all 0.2s; position: relative;
}
.upload-area:hover { border-color: var(--gold-500); background: rgba(212,168,67,0.03); }
.upload-area i { font-size: 1.6rem; color: var(--text-muted); margin-bottom: 8px; }
.upload-area p { font-size: 0.82rem; color: var(--text-muted); }
.upload-area input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

/* Detail Info Row */
.detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--border-muted);
}
.detail-row:last-child { border-bottom: none; }
.detail-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.detail-value { font-size: 0.88rem; color: var(--text-primary); }

/* Tabs */
.manage-tabs {
    display: flex; gap: 2px; margin-bottom: 24px;
    border-bottom: 1px solid var(--border-muted); padding-bottom: 0;
}
.manage-tab {
    padding: 10px 20px; font-size: 0.82rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer; transition: all 0.2s;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.manage-tab.active { color: var(--gold-400); border-bottom-color: var(--gold-400); }
.manage-tab:hover { color: var(--text-primary); }
/* Phones: the desktop tabs keep 20px of padding each side and cannot shrink, so four tabs ran
   past a 360px screen and five past every phone, and the whole editor scrolled sideways. Here the
   tabs share the row as equal columns (icon over the label, which may wrap at a space) and never
   shrink below their longest word. If they still cannot fit, the row scrolls by itself, never the
   page. The row line becomes an inset shadow and the tabs lose their -1px overlap, because a
   scrolling row clips anything below it and would scroll 1px up and down. */
@media (max-width: 640px) {
    .manage-tabs {
        gap: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
        scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border-muted);
    }
    .manage-tabs::-webkit-scrollbar { display: none; }
    .manage-tab {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
        padding: 10px 6px; margin-bottom: 0; font-size: 0.75rem; line-height: 1.25; text-align: center;
    }
    .manage-tab i { font-size: 1rem; }
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Menu Item Card (Restaurants) */
.menu-item-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-input); border: 1px solid var(--border-muted);
    border-radius: var(--radius-md); padding: 12px 16px;
    transition: border-color 0.2s;
}
.menu-item-card:hover { border-color: var(--border-default); }
.menu-item-img {
    width: 50px; height: 50px; border-radius: var(--radius-md);
    background-size: cover; background-position: center;
    background-color: var(--bg-elevated); flex-shrink: 0;
}
.menu-item-info { flex: 1; }
.menu-item-info h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 2px; }
.menu-item-info p { font-size: 0.72rem; color: var(--text-muted); }
.menu-item-price { font-size: 0.92rem; font-weight: 700; color: var(--gold-400); }
.menu-item-actions {
    display: flex; gap: 6px;
}
.menu-item-actions button {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-muted); background: transparent;
    color: var(--text-muted); cursor: pointer; font-size: 0.65rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.menu-item-actions button:hover { border-color: var(--border-default); color: var(--text-primary); }

/* Toggle Switch */
.toggle-switch {
    position: relative; width: 42px; height: 24px; cursor: pointer;
}
.toggle-switch input { display: none; }
.toggle-slider {
    position: absolute; inset: 0; background: var(--bg-elevated);
    border: 1px solid var(--border-muted); border-radius: 12px;
    transition: all 0.3s;
}
.toggle-slider::before {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--text-muted); transition: all 0.3s;
}
.toggle-switch input:checked + .toggle-slider {
    background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.3);
}
.toggle-switch input:checked + .toggle-slider::before {
    background: #34d399; transform: translateX(18px);
}

/* Responsive */
@media (max-width: 700px) {
    /* nowrap: a column that may wrap sizes each child to its one-line width, so a long listing name
       and the button row both ran past the phone (the stay editor was 545px wide on a 390px screen).
       The buttons wrap onto a second line instead. */
    .manage-header { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
    .manage-header-actions { flex-wrap: wrap; }
    .listing-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .wizard-steps { gap: 0; }
    .wizard-step-label { display: none; }
}

/* ===================================================================
   ADD WIZARD - Step-by-step progress
   =================================================================== */

/* Progress Bar */
.wizard-progress-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 32px; padding: 0 10px;
}
.wizard-step-item {
    display: flex; align-items: center; gap: 0;
}
.wizard-dot {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 700;
    background: var(--bg-elevated); color: var(--text-muted);
    border: 2px solid var(--border-muted); position: relative;
    transition: all 0.4s cubic-bezier(.4,0,.2,1); z-index: 2;
    flex-shrink: 0;
}
.wizard-dot.active {
    background: linear-gradient(135deg, #f0c850, #d4a843);
    color: var(--dark-950); border-color: transparent;
    box-shadow: 0 0 0 4px rgba(212,168,67,0.15), 0 4px 16px rgba(212,168,67,0.25);
}
.wizard-dot.completed {
    background: linear-gradient(135deg, #34d399, #059669);
    color: #fff; border-color: transparent;
    box-shadow: 0 0 0 4px rgba(52,211,153,0.12);
}
.wizard-step-label {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    font-size: 0.62rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em;
}
.wizard-dot.active .wizard-step-label { color: var(--gold-400); }
.wizard-dot.completed .wizard-step-label { color: var(--success); }
.wizard-line {
    width: 48px; height: 2px; background: var(--border-muted);
    transition: background 0.4s; flex-shrink: 0;
}
.wizard-line.active { background: linear-gradient(90deg, #34d399, rgba(212,168,67,0.3)); }

/* Wizard Step Content */
.wizard-step-content {
    display: none; animation: wizardFadeIn 0.35s ease-out;
}
.wizard-step-content.active { display: block; }
@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}
.wizard-step-heading {
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
    color: var(--text-primary); margin-bottom: 6px;
}
.wizard-step-desc {
    font-size: 0.78rem; color: var(--text-muted); margin-bottom: 22px;
}

/* Wizard Navigation */
.wizard-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-muted);
}
.wizard-nav .btn { min-width: 130px; }

/* Map Preview — legacy iframe preview (now replaced by the coord picker
   for inputs flagged with `data-coord-picker`, but kept as a fallback
   for any form that hasn't migrated yet). */
.map-preview-container {
    margin-top: 12px; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--border-muted); height: 200px; background: var(--bg-elevated);
    position: relative;
}
.map-preview-container iframe {
    width: 100%; height: 100%; border: none;
}
.map-preview-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); font-size: 0.82rem; gap: 8px;
}
.map-preview-placeholder i { font-size: 1.6rem; opacity: 0.5; }
.map-coords-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

/* ─── Coordinate picker (tratok-coord-picker.js) ──────────────────────
   Drops into the same .map-preview-container the legacy iframe used,
   but replaces the iframe with a search → "my location" → tap-to-drop
   Leaflet flow. The host container has [data-coord-picker]. */
.map-preview-container[data-coord-picker] {
    height: auto;      /* the picker has its own height ladder below */
    background: var(--bg-input);
    padding: 0;
}
.tcp-shell {
    display: flex; flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
}
.tcp-toolbar {
    display: flex; gap: 8px;
    padding: 10px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border-muted);
}
.tcp-search-wrap {
    position: relative;
    flex: 1; min-width: 0;
}
.tcp-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 0.85rem; pointer-events: none;
}
.tcp-search-input {
    width: 100%;
    padding: 9px 32px 9px 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    color: var(--text); font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tcp-search-input:focus {
    outline: none;
    border-color: var(--accent, #E85D3A);
    box-shadow: 0 0 0 3px rgba(232,93,58,0.10);
}
.tcp-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    border: none; background: transparent;
    color: var(--text-muted); cursor: pointer;
    border-radius: 50%; font-size: 0.7rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.tcp-search-clear:hover { background: var(--border-muted); color: var(--text); }
.tcp-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    max-height: 240px; overflow-y: auto;
    /* Leaflet promotes its panes (z 200-700) and controls (z 1000) into
     * the .tcp-shell stacking context because .tcp-map doesn't have its
     * own. Sit above all of them. .tcp-map is also pinned to z:1 below
     * as a belt-and-suspenders containment. */
    z-index: 1100;
    box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.tcp-search-item {
    width: 100%; text-align: left;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none; border-bottom: 1px solid var(--border-muted);
    color: var(--text); font-size: 0.82rem;
    cursor: pointer; font-family: inherit;
    line-height: 1.35;
}
.tcp-search-item:last-child { border-bottom: none; }
.tcp-search-item:hover { background: var(--bg-input); }
.tcp-search-item i { color: var(--accent, #E85D3A); font-size: 0.78rem; margin-top: 2px; flex-shrink: 0; }
.tcp-search-noresults {
    padding: 12px 14px; color: var(--text-muted); font-size: 0.8rem; text-align: center;
}
.tcp-geo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    color: var(--text); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; font-family: inherit; white-space: nowrap;
    transition: all 0.15s;
}
.tcp-geo-btn:hover {
    border-color: var(--accent, #E85D3A); color: var(--accent, #E85D3A);
}
.tcp-geo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tcp-geo-btn.is-loading i { animation: tcpSpin 0.9s linear infinite; }
@keyframes tcpSpin { to { transform: rotate(360deg); } }
@media (max-width: 540px) {
    .tcp-geo-btn-text { display: none; }
    .tcp-geo-btn { padding: 9px 12px; }
}

.tcp-map {
    height: 320px;
    background: var(--bg-elevated);
    /* Establish a stacking context so Leaflet's panes/controls can't
     * out-stack the search-results dropdown overlay. */
    position: relative;
    z-index: 1;
}
@media (max-width: 540px) { .tcp-map { height: 260px; } }

.tcp-status {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 14px;
    background: var(--bg-input);
    border-top: 1px solid var(--border-muted);
}
.tcp-coords {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 700;
    color: var(--text);
    font-feature-settings: 'tnum';
}
.tcp-coords i { color: var(--accent, #E85D3A); font-size: 0.78rem; }
.tcp-coords-val { font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; }
.tcp-address {
    font-size: 0.74rem; color: var(--text-muted);
    line-height: 1.4;
    /* Don't let an overly long reverse-geocoded line break the layout. */
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Ember pin (Leaflet divIcon) */
.tcp-pin { background: transparent; border: none; }
.tcp-pin-shape {
    width: 32px; height: 38px;
    position: relative;
    transform-origin: 50% 100%;
    animation: tcpDrop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tcp-pin-shape::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #E85D3A 0%, #D94B2A 100%);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 6px 18px rgba(232,93,58,0.45);
}
.tcp-pin-dot {
    position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 10px; height: 10px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}
@keyframes tcpDrop {
    0%   { transform: translateY(-40px) scale(1.1); opacity: 0; }
    60%  { transform: translateY(2px)   scale(1);   opacity: 1; }
    100% { transform: translateY(0)     scale(1);   opacity: 1; }
}

/* Make the Leaflet attribution readable on dark theme. */
.tcp-map .leaflet-control-attribution {
    background: rgba(15, 23, 42, 0.78);
    color: var(--text-muted);
    font-size: 0.66rem;
}
.tcp-map .leaflet-control-attribution a { color: var(--text); }
.tcp-map .leaflet-control-zoom a {
    background: var(--bg-elevated); color: var(--text);
    border: 1px solid var(--border-muted);
}
.tcp-map .leaflet-control-zoom a:hover {
    background: var(--bg-input); color: var(--accent, #E85D3A);
}

/* Listing card action buttons - enhanced */
.listing-card-actions a, .listing-card-actions button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 9px 6px; border-radius: 8px; font-size: 0.73rem;
    font-weight: 600; border: 1px solid var(--border-muted); cursor: pointer;
    transition: all 0.25s cubic-bezier(.4,0,.2,1); background: rgba(255,255,255,0.02);
    color: var(--text-secondary); text-decoration: none;
}
.listing-card-actions a:hover, .listing-card-actions button:hover {
    border-color: rgba(212,168,67,0.25); color: var(--gold-400);
    background: rgba(212,168,67,0.04); transform: translateY(-1px);
}
.action-btn-danger:hover { border-color: rgba(248,113,113,0.3) !important; color: #f87171 !important; background: rgba(248,113,113,0.05) !important; }
.action-btn-success:hover { border-color: rgba(52,211,153,0.3) !important; color: #34d399 !important; background: rgba(52,211,153,0.05) !important; }

/* Toggle Form Button - enhanced */
.btn-add-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 10px; font-size: 0.85rem;
    font-weight: 700; cursor: pointer; border: none;
    color: var(--bg-body); background: linear-gradient(135deg, #f0c850 0%, #d4a843 50%, #b8892a 100%);
    box-shadow: 0 4px 20px rgba(212,168,67,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: all 0.28s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
}
.btn-add-toggle::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.btn-add-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(212,168,67,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-add-toggle:active { transform: scale(0.97); }

/* Cancel / Close Wizard Button */
.btn-cancel-wizard {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; border-radius: 8px; font-size: 0.82rem;
    font-weight: 600; cursor: pointer; border: 1px solid var(--border-muted);
    background: transparent; color: var(--text-muted);
    transition: all 0.2s;
}
.btn-cancel-wizard:hover { border-color: rgba(248,113,113,0.3); color: #f87171; background: rgba(248,113,113,0.04); }

/* Field Error State */
.field-error { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(248,113,113,0.15) !important; }
.field-error-msg {
    display: none; font-size: 0.72rem; color: var(--danger);
    margin-top: 4px; padding-left: 2px;
}
.field-error-msg.visible { display: block; animation: wizardFadeIn 0.25s ease-out; }

/* Wizard Inline Error Banner */
.wizard-error-banner {
    display: none; padding: 10px 14px; margin-bottom: 16px;
    background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2);
    border-radius: 8px; font-size: 0.78rem; color: #fca5a5;
    align-items: center; gap: 8px;
}
.wizard-error-banner.visible { display: flex; animation: wizardFadeIn 0.25s ease-out; }
.wizard-error-banner i { color: var(--danger); flex-shrink: 0; }

/* Package Card (Restaurants) */
.package-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 18px; position: relative;
    transition: border-color 0.2s;
}
.package-card:hover { border-color: var(--border-default); }
.package-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 10px;
}
.package-card-header h4 { font-size: 0.92rem; font-weight: 700; }
.package-type-pill {
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.package-type-pill.brunch { background: rgba(251,191,36,0.12); color: #fbbf24; }
.package-type-pill.business_lunch { background: rgba(96,165,250,0.12); color: #60a5fa; }
.package-type-pill.dinner { background: rgba(167,139,250,0.12); color: #a78bfa; }
.package-type-pill.afternoon_tea { background: rgba(244,114,182,0.12); color: #f472b6; }
.package-type-pill.event { background: rgba(52,211,153,0.12); color: #34d399; }
.package-type-pill.tasting { background: rgba(251,146,60,0.12); color: #fb923c; }
.package-type-pill.buffet { background: rgba(212,168,67,0.12); color: var(--gold-400); }
.package-type-pill.other { background: rgba(148,163,184,0.12); color: #94a3b8; }
.package-card-meta {
    display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.75rem;
    color: var(--text-muted); margin-bottom: 8px;
}
.package-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.package-card-meta i { font-size: 0.65rem; color: var(--gold-600); }
.package-card-price {
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
    color: var(--gold-400);
}
.package-card-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.package-card-actions {
    display: flex; gap: 8px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border-muted);
}

/* PDF Upload Area */
.pdf-upload-zone {
    display: flex; align-items: center; gap: 16px; padding: 16px;
    background: var(--bg-input); border: 1px dashed var(--border-muted);
    border-radius: var(--radius-lg); transition: border-color 0.2s;
}
.pdf-upload-zone:hover { border-color: var(--gold-500); }
.pdf-upload-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(248,113,113,0.08); color: #f87171; font-size: 1.2rem;
    flex-shrink: 0;
}
.pdf-upload-info { flex: 1; }
.pdf-upload-info h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 2px; }
.pdf-upload-info p { font-size: 0.72rem; color: var(--text-muted); }
.pdf-current {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.15);
    border-radius: var(--radius-md); margin-bottom: 12px;
}
.pdf-current i { color: #34d399; }
.pdf-current a { color: var(--gold-400); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.pdf-current a:hover { text-decoration: underline; }

/* Packages Grid */
.packages-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}

/* ======= Upload Preview & Multi-Gallery Styles ======= */
.current-image-box {
    width: 200px; height: 140px; border-radius: 10px; overflow: hidden;
    background: var(--bg-elevated); flex-shrink: 0;
}
.current-image-box img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.upload-area {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px dashed var(--border-muted); border-radius: var(--radius-md);
    padding: 24px 16px; text-align: center; cursor: pointer;
    transition: border-color 0.2s, background 0.2s; min-height: 100px;
}
.upload-area:hover {
    border-color: var(--gold-400); background: rgba(212,175,55,0.04);
}
.upload-area i { font-size: 1.5rem; color: var(--gold-400); margin-bottom: 6px; }
.upload-area p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.gallery-upload-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px dashed var(--border-muted); border-radius: var(--radius-md);
    padding: 28px 16px; text-align: center; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.gallery-upload-zone:hover {
    border-color: var(--gold-400); background: rgba(212,175,55,0.04);
}
.gallery-upload-zone i { font-size: 1.8rem; color: var(--gold-400); margin-bottom: 8px; }
.gallery-upload-zone p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.gallery-upload-zone p span { font-size: 0.72rem; display: block; margin-top: 2px; opacity: 0.7; }
.upload-preview-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.upload-preview-count {
    width: 100%; font-size: 0.8rem; color: var(--gold-400); font-weight: 600;
    display: flex; align-items: center; gap: 6px; padding: 4px 0;
}
.upload-preview-thumb {
    width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
    border: 2px solid var(--border-muted); flex-shrink: 0;
}
.upload-preview-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.btn-upload-submit {
    display: none; margin-top: 10px; width: 100%;
}
.wizard-image-upload {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.wizard-image-preview {
    width: 120px; height: 80px; object-fit: cover; border-radius: 8px;
    border: 2px solid var(--border-muted); display: none;
}
.pdf-preview-name {
    font-size: 0.8rem; color: var(--gold-400); font-weight: 600;
    margin-top: 8px; display: flex; align-items: center; gap: 6px;
}

/* ─── Listing email verification — badge + inline resend ─────── */
.email-verify-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px dashed transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
/* Highlight the row when ANY child badge is in the pending state so the
   owner's eye lands on the email that's blocking publishing. */
.email-verify-row:has(.email-verify-badge.pending) {
    background: linear-gradient(180deg, rgba(251,191,36,0.05), rgba(251,191,36,0.015));
    border-color: rgba(251,191,36,0.20);
}
.email-verify-row:has(.email-verify-badge.verified) {
    background: rgba(52,211,153,0.04);
    border-color: rgba(52,211,153,0.12);
}

.email-verify-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--radius-full);
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    line-height: 1.2;
    white-space: nowrap;
}
.email-verify-badge i { font-size: 0.62rem; }
.email-verify-badge.verified {
    background: rgba(52,211,153,0.14); color: #34d399;
    border: 1px solid rgba(52,211,153,0.30);
    box-shadow: 0 0 14px rgba(52,211,153,0.08);
}
.email-verify-badge.pending {
    background: rgba(251,191,36,0.16); color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.36);
    animation: emailPendingPulse 2.4s ease-in-out infinite;
}
@keyframes emailPendingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.40); }
    50%      { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}

.email-verify-resend-form { display: inline-flex; margin: 0; }
.email-verify-resend-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(212,168,67,0.18), rgba(212,168,67,0.08));
    color: var(--gold-300);
    border: 1px solid rgba(212,168,67,0.34);
    font-size: 0.73rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    line-height: 1.2;
    cursor: pointer;
    font-family: var(--font-body);
    box-shadow: 0 1px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}
.email-verify-resend-btn i {
    font-size: 0.72rem;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.email-verify-resend-btn:hover {
    color: var(--bg-body);
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    border-color: var(--gold-400);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(212,168,67,0.28), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.email-verify-resend-btn:hover i { transform: translateX(3px); }
.email-verify-resend-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(212,168,67,0.30);
}
.email-verify-resend-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(212,168,67,0.20);
}

.email-verify-hint {
    font-size: 0.7rem; color: var(--text-muted); font-style: italic;
    display: inline-flex; align-items: center; gap: 6px;
}
.email-verify-hint::before {
    content: '\f071'; /* fa-triangle-exclamation glyph */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--warning); font-size: 0.66rem; font-style: normal;
}

/* Context line under the verify row — distinguishes "grace" (listing still
   public because of prior bookings) from "blocked" (new listing hidden
   until first verification). The full row wraps so this naturally drops
   onto its own line under the badge + button. */
.email-verify-grace,
.email-verify-block {
    display: inline-flex; align-items: center; gap: 7px;
    flex-basis: 100%;
    margin-top: 2px;
    font-size: 0.72rem; font-weight: 600;
    line-height: 1.35;
}
.email-verify-grace { color: var(--teal-400); }
.email-verify-grace i { color: var(--teal-400); font-size: 0.78rem; }
.email-verify-block { color: var(--coral-400); }
.email-verify-block i { color: var(--coral-400); font-size: 0.78rem; }
/* Soften the row's amber alarm color when we're actually in grace mode —
   the listing is still public, no need to look like a fire drill. */
.email-verify-row:has(.email-verify-grace) {
    background: linear-gradient(180deg, rgba(92,206,194,0.04), rgba(92,206,194,0.01));
    border-color: rgba(92,206,194,0.18);
}
.email-verify-row:has(.email-verify-grace) .email-verify-badge.pending {
    background: rgba(92,206,194,0.12);
    color: var(--teal-300);
    border-color: rgba(92,206,194,0.30);
    animation: none;
}

@media (max-width: 520px) {
    .email-verify-row { gap: 8px; }
    .email-verify-resend-form { width: 100%; }
    .email-verify-resend-btn { width: 100%; justify-content: center; }
}

/* ─── Package card — extras (inactive state, edit modal) ─────── */
.package-card-header-right {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.package-card-inactive {
    opacity: 0.65;
    background: linear-gradient(135deg, var(--bg-card), rgba(248,113,113,0.03));
}
.package-card-inactive-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: var(--radius-full);
    font-size: 0.6rem; font-weight: 700;
    background: rgba(248,113,113,0.12); color: #f87171;
    border: 1px solid rgba(248,113,113,0.22);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.package-card-inactive-pill i { font-size: 0.55rem; }
.package-card-valid {
    font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;
    display: inline-flex; align-items: center; gap: 6px;
}
.package-card-valid i { color: var(--gold-600); font-size: 0.7rem; }
.package-card-actions .btn { white-space: nowrap; }
.package-card-actions form[onsubmit] .btn { width: auto; padding: 6px 10px; }

/* ─── Generic edit modal (used for package edit) ─────────────── */
.pkg-modal-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(8, 10, 16, 0.78);
    backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.pkg-modal-visible { display: flex; }
.pkg-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 26px;
    width: 100%; max-width: 720px;
    max-height: 92vh; overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: pkgModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pkgModalIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.pkg-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 18px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border-muted);
}
.pkg-modal-header-actions {
    display: flex; align-items: center; gap: 10px;
}
/* The Tara trigger is gradient-shimmer styled at full size — that's right
   for the main edit panel but too loud in the modal header. Tone it down. */
.pkg-modal-header-actions .tara-trigger {
    padding: 7px 14px; font-size: 0.72rem; letter-spacing: 0.03em;
}
.pkg-modal-header-actions .tara-trigger i { font-size: 0.78rem; }
.pkg-modal-title {
    display: flex; align-items: center; gap: 12px;
}
.pkg-modal-title i {
    width: 38px; height: 38px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid rgba(212, 168, 67, 0.18);
    color: var(--gold-400);
}
.pkg-modal-title h3 {
    font-family: var(--font-display);
    font-size: 1.15rem; font-weight: 600; color: var(--text-primary);
}
.pkg-modal-close {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    background: var(--bg-input); border: 1px solid var(--border-muted);
    color: var(--text-muted); cursor: pointer;
    transition: all 0.15s; flex-shrink: 0;
}
.pkg-modal-close:hover {
    color: var(--coral-400); border-color: var(--coral-400);
}
.pkg-modal-form { display: flex; flex-direction: column; gap: 14px; }
.pkg-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 16px; margin-top: 4px;
    border-top: 1px solid var(--border-muted);
}
@media (max-width: 640px) {
    .pkg-modal { padding: 20px; }
    .pkg-modal-footer { flex-direction: column-reverse; }
    .pkg-modal-footer .btn { width: 100%; justify-content: center; }
}

/* ===================================================================
   2026-10-16: listing editors (tickets 771-774) and their phone layout.
   Shared by manage_assets.php, manage_activities.php, manage_restaurants.php
   (all three load manage.css?v=4).
   =================================================================== */

/* Tara "translate" row at the top of each Details tab (was inline styles). */
.tara-intro-row {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-muted);
}
.tara-intro-row > div { min-width: 0; flex: 1 1 260px; }
.tara-intro-title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--text-primary); }
.tara-intro-sub { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); }

/* Three and four field rows; .form-row stays two columns. */
.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-row > .form-group { min-width: 0; }
@media (max-width: 860px) { .form-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.label-optional { font-weight: 500; color: var(--text-muted); font-size: 0.92em; }
.muted-note { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; margin: 0 0 14px; }
.form-hint { display: block; line-height: 1.45; }

/* Images tab: current photo beside the upload area. */
.main-image-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }
.main-image-form { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.main-image-form .upload-area { flex: 1; }
label.upload-area { margin: 0; }
.current-image-box img { display: block; }

/* Busy state for submit buttons (js/manage-wizard.js). Not :disabled, so the
   button keeps posting its own value; a second tap is blocked in JS. */
.btn.is-busy, .btn-add-toggle.is-busy { pointer-events: none; opacity: 0.85; cursor: progress; }

/* Wizard header: title block and the cancel button. */
.wizard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.wizard-head .add-form-title { margin: 0; padding: 0; border: 0; min-width: 0; }
.wizard-head .add-form-title i { flex-shrink: 0; }
.wizard-head .add-form-title h3 { line-height: 1.25; }
.wizard-head .add-form-title p { line-height: 1.45; }
.btn-cancel-wizard { flex-shrink: 0; }

/* Phones hide the labels under the dots; this caption names the step. */
.wizard-caption {
    display: none; margin: -14px 0 18px; text-align: center;
    font-size: 0.78rem; font-weight: 600; color: var(--gold-400); letter-spacing: 0.01em;
}
.field-error-msg.visible { line-height: 1.4; }

/* "Add package" folds away once packages exist. */
.add-inline {
    margin-bottom: 20px; border: 1px solid var(--border-muted); border-radius: var(--radius-md);
    background: var(--bg-input);
}
.add-inline > summary {
    list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 0.88rem;
    color: var(--gold-400); display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md);
}
.add-inline > summary::-webkit-details-marker { display: none; }
.add-inline > summary:hover { background: rgba(212,168,67,0.05); }
.add-inline[open] > summary { border-bottom: 1px solid var(--border-muted); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.add-inline .inline-form { padding: 16px; }

/* Menus list (was a table that overflowed phones). */
.menu-doc-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.menu-doc-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: var(--bg-input); border: 1px solid var(--border-muted); border-radius: var(--radius-md);
}
.menu-doc-item > i { color: var(--gold-400); font-size: 1.1rem; flex-shrink: 0; }
.menu-doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-doc-text a { color: var(--text-primary); font-weight: 600; font-size: 0.86rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-doc-text a:hover { color: var(--gold-400); }
.menu-doc-text > span { font-size: 0.74rem; color: var(--text-muted); }
.menu-doc-item form { margin: 0; flex-shrink: 0; }

/* The full-menu PDF zone is a <label> around its file input. */
label.pdf-upload-zone { position: relative; cursor: pointer; margin: 0; }
.pdf-upload-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pdf-upload-info strong { font-size: 0.86rem; color: var(--text-primary); }
.pdf-upload-info span { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }
.visually-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pdf-current { flex-wrap: wrap; }
.pdf-current a { word-break: break-word; }

/* Tara proposals waiting for approval. */
.tara-pending-row {
    display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    padding: 12px 0; border-top: 1px solid var(--border-muted);
}
.tara-pending-text { flex: 1 1 260px; font-size: 0.88rem; line-height: 1.5; min-width: 0; }
.tara-pending-actions { display: flex; gap: 8px; }
.tara-pending-actions form { margin: 0; }

.package-card-per { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; font-family: var(--font-body); }
.package-card-header { gap: 10px; }
.package-card-header h4 { min-width: 0; overflow-wrap: anywhere; }

.edit-panel-header-wrap { flex-wrap: wrap; gap: 12px; }
.edit-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.listing-grid-rooms { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.listing-card-img-sm { height: 110px; }
.empty-state-sm { padding: 32px 0; }
#addRoomForm { margin-bottom: 16px; }
.btn-upload-submit { justify-content: center; }

/* A grid track must never refuse to shrink below a long word on a phone. */
.listing-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.packages-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }

/* Wide screens: the lines stretch so long step names (German "Preisgestaltung",
   Russian "Ценообразование") never run into each other under the dots. */
@media (min-width: 701px) {
    .wizard-progress-bar { margin-bottom: 40px; }
    .wizard-line { flex: 1 1 auto; width: auto; min-width: 56px; max-width: 150px; }
}

/* ─── Phones ────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .wizard-caption { display: block; }
    .wizard-progress-bar { padding: 0 2px; margin-bottom: 24px; justify-content: space-between; }
    .wizard-step-item { flex: 0 0 auto; }
    .wizard-line { flex: 1 1 auto; width: auto; min-width: 8px; }
    .wizard-dot { width: 34px; height: 34px; font-size: 0.8rem; }
    .wizard-dot.active { box-shadow: 0 0 0 3px rgba(212,168,67,0.18), 0 4px 12px rgba(212,168,67,0.25); }
    .listing-grid { grid-template-columns: minmax(0, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .form-row-3, .form-row-4 { grid-template-columns: minmax(0, 1fr); }
    .edit-panel { padding: 18px 16px; border-radius: var(--radius-md); margin-bottom: 16px; }
    .add-form-panel { padding: 18px 16px; border-radius: var(--radius-md); }
    .edit-panel-header { margin-bottom: 18px; padding-bottom: 12px; }
    .edit-panel-header h2 { font-size: 1.02rem; }
    .manage-header { margin-bottom: 18px; gap: 12px; }
    .manage-header .page-subtitle { margin-bottom: 0; }
    .manage-header-actions { width: 100%; }
    .manage-header-actions > .btn, .manage-header-actions > form { flex: 1 1 auto; }
    .manage-header-actions > form .btn { width: 100%; }
    .manage-header-actions .btn { justify-content: center; }
    .btn-add-toggle { width: 100%; justify-content: center; padding: 14px 20px; font-size: 0.92rem; }

    /* Wizard header: the cancel button shrinks to an icon. */
    .wizard-head { margin-bottom: 18px; gap: 10px; }
    .wizard-head .add-form-title { gap: 10px; align-items: flex-start; }
    .wizard-head .add-form-title i { width: 36px; height: 36px; font-size: 0.85rem; }
    .wizard-head .add-form-title h3 { font-size: 1rem; }
    .wizard-head .add-form-title p { font-size: 0.76rem; }
    .btn-cancel-wizard { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }
    .btn-cancel-wizard span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    .wizard-step-heading { font-size: 1.12rem; line-height: 1.3; }
    .wizard-step-desc { margin-bottom: 18px; line-height: 1.45; }
    .wizard-nav { gap: 10px; margin-top: 22px; padding-top: 16px; }
    .wizard-nav > div:empty { display: none; }
    .wizard-nav .btn { min-width: 0; flex: 1 1 0; padding: 13px 14px; }
    .wizard-nav .btn-outline { flex: 0 1 auto; }
    .wizard-nav .btn-lg { font-size: 0.9rem; padding: 14px 16px; white-space: normal; line-height: 1.2; }

    .map-coords-row { gap: 10px; }
    .main-image-row { gap: 14px; }
    .current-image-box { width: 100%; height: 180px; }
    .wizard-image-upload { gap: 10px; }
    .wizard-image-preview { width: 100%; height: auto; max-height: 200px; }

    .tara-intro-row { gap: 12px; margin-bottom: 16px; padding-bottom: 14px; }
    .tara-intro-row .tara-trigger { width: 100%; justify-content: center; }
    .form-actions .btn { width: 100%; padding: 14px 18px; }
    .package-card { padding: 16px; }
    .package-card-actions { flex-wrap: wrap; }
    .listing-card-actions-4 { display: grid; grid-template-columns: 1fr 1fr; }
    .listing-card-actions-4 form { display: flex; }
    .tara-pending-actions { width: 100%; }
    .tara-pending-actions form { flex: 1; }
    .tara-pending-actions .btn { width: 100%; }
    .email-verify-row { padding: 8px; }
}