/* Мелкие правки оболочки PHP без поломки React-CSS */

.slide-placeholder--brand {
    min-height: clamp(220px, 48vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(201, 162, 39, 0.25), transparent 55%),
        linear-gradient(160deg, #1a1612 0%, #121212 60%, #0c0c0c 100%);
    border-bottom: 1px solid var(--border);
}

.slide-placeholder__inner {
    text-align: center;
    color: var(--gold);
    font-family: "Cinzel", serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.slide-placeholder__logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 12px;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}

.gallery-masonry--empty-visual {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 16px 12px;
}

.gallery-empty-tile {
    aspect-ratio: 1;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(201, 162, 39, 0.12), rgba(255, 255, 255, 0.03)),
        var(--bg3);
    border: 1px solid var(--border);
}

@media (max-width: 767px) {
    .gallery-masonry--empty-visual {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PHP booking: radio as booking-choice */
.booking-choice--radio {
    position: relative;
    cursor: pointer;
}

.booking-choice--radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.booking-choice--radio:has(input:checked),
.booking-choice--radio.is-checked {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}

.booking-time-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
}

.booking-time-grid .booking-time-btn,
.booking-time-grid .booking-choice--radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
}

.booking-time-grid .booking-choice--radio:has(input:checked),
.booking-time-grid .booking-choice--radio.is-checked {
    border-color: var(--gold);
    color: var(--gold);
}

.booking-php-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 16px;
    font-size: 0.85rem;
    color: var(--muted, #888);
}

.booking-php-steps__item.is-active {
    color: var(--gold);
    font-weight: 600;
}

.booking-php-steps__item.is-done {
    color: var(--text);
    opacity: 0.85;
}

.booking-php-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}

.booking-php-actions .btn-gold,
.booking-php-actions .btn-muted,
.booking-php-actions .btn-outline {
    text-decoration: none;
}

.booking-widget .ui-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}

.booking-widget .ui-field__label {
    font-size: 0.9rem;
    color: var(--muted, #aaa);
}

.booking-widget .ui-input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.nav-link--logout {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

/* Show visit cards on small screens if peaky hides them by default */
@media (max-width: 767px) {
    .client-cabinet .cabinet-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .client-cabinet .cabinet-table-wrap--desktop {
        display: none;
    }
}

@media (min-width: 768px) {
    .client-cabinet .cabinet-cards {
        display: none;
    }
}

/* Journal modals + matrix helpers */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 16px;
}

.modal-backdrop[hidden] {
    display: none !important;
}

.modal-card {
    width: min(440px, 100%);
    max-height: 90vh;
    overflow: auto;
    text-align: left;
}

.modal-card h3 {
    margin: 0 0 12px;
    color: var(--gold);
    font-family: "Cinzel", serif;
}

.journal-form .ui-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.schedule-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Date nav layout lives in peaky.css / schedule-ui.css / schedule-mobile.css.
   Do not force flex-row here — it collapses the mobile week strip beside
   desktop chips when both nodes are present in the dock. */

/* appointment-card positioning lives in schedule-ui.css / peaky.css */

/* Matrix is a flex container (nav + scrollport + dock), not a <table>.
   width:max-content here expanded the scrollport to content width and
   killed horizontal overflow scrolling on mobile. */
.work-journal-matrix {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.work-journal-matrix-wrap {
    overflow: auto;
    max-width: 100%;
    margin-top: 12px;
}

.work-journal-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 12px 0;
}

.schedule-branch-select {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Phone: kill pull-to-refresh / rubber-band that snaps scroll to top */
@media (max-width: 767px) {
    html,
    body {
        overscroll-behavior: none;
    }

    .schedule-dashboard.schedule-dashboard--journal,
    .work-journal-page.panel-page {
        overscroll-behavior: none;
    }
}