/* ============================================================
   harta-institutii.css — versiunea Google Maps
   Stiluri specifice paginii HartaInstitutiiEducationale
   ----
   Folosește variabilele CSS din site.css. Trebuie inclus DUPĂ site.css.
   ============================================================ */


/* ============================================================
   APP LAYOUT — full screen
   ============================================================ */
.er-harta-app {
    position: fixed;
    inset: 0;
    display: flex;
    background: var(--er-bg-page);
    overflow: hidden;
    z-index: 1;
}


/* ============================================================
   SIDEBAR
   ============================================================ */
.er-h-sidebar {
    width: 380px;
    height: 100%;
    background: var(--er-bg-surface);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid var(--er-border);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.04);
    transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    position: relative;
}

.er-harta-app.er-collapsed .er-h-sidebar {
    margin-left: -380px;
}


/* SIDEBAR HEADER */
.er-h-header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--er-border);
}

.er-h-logo {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 16px;
}

    .er-h-logo img {
        height: 72px;
        width: auto;
        display: block;
    }

.er-h-header h1 {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--er-text-main);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.er-h-header p {
    font-size: 0.88rem;
    color: var(--er-text-muted);
    margin: 0;
}


/* SIDEBAR CONTENT */
.er-h-content {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .er-h-content::-webkit-scrollbar {
        width: 6px;
    }

    .er-h-content::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 3px;
    }

.er-h-autocomplete {
    position: relative;
}

.er-h-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    background: var(--er-bg-muted);
    color: var(--er-text-muted);
    border-radius: 50%;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: none;
    transition: all 0.15s ease;
}

    .er-h-clear-btn:hover {
        background: #DBE3EE;
        color: var(--er-text-main);
    }

.er-h-autocomplete.er-has-value .er-h-clear-btn {
    display: block;
}

.er-h-autocomplete.er-has-value .er-h-input {
    padding-right: 40px;
}

.er-h-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--er-bg-surface);
    border: 1px solid var(--er-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
}

    .er-h-suggestions.er-show {
        display: block;
    }

.er-h-sug-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--er-border);
    transition: background 0.12s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .er-h-sug-item:last-child {
        border-bottom: none;
    }

    .er-h-sug-item:hover,
    .er-h-sug-item.er-active {
        background: var(--er-bg-muted);
    }

    .er-h-sug-item .material-icons {
        font-size: 18px;
        color: var(--er-color-secondary);
        flex-shrink: 0;
    }

.er-h-sug-name {
    font-weight: 600;
    color: var(--er-text-main);
    font-size: 0.92rem;
}

.er-h-sug-judet {
    font-size: 0.78rem;
    color: var(--er-text-muted);
    margin-top: 1px;
}

.er-h-sug-empty {
    padding: 14px;
    text-align: center;
    color: var(--er-text-muted);
    font-size: 0.88rem;
    font-style: italic;
}

/* FILTRU */
.er-h-filter label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--er-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.er-h-input-wrap {
    position: relative;
}

    .er-h-input-wrap > .material-icons {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--er-text-muted);
        font-size: 20px;
        pointer-events: none;
    }

.er-h-input,
.er-h-select {
    width: 100%;
    background: var(--er-bg-surface);
    color: var(--er-text-main);
    border: 1.5px solid var(--er-border);
    border-radius: 10px;
    padding: 11px 14px 11px 40px;
    font-family: inherit;
    font-size: 0.94rem;
    transition: all 0.2s ease;
    outline: none;
}

    .er-h-input:focus,
    .er-h-select:focus {
        border-color: var(--er-color-secondary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .er-h-input::placeholder {
        color: #94A3B8;
    }

.er-h-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}


/* SEGMENT */
.er-h-segment {
    display: flex;
    background: var(--er-bg-muted);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}

    .er-h-segment button {
        flex: 1;
        padding: 8px 6px;
        background: transparent;
        border: none;
        border-radius: 7px;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--er-text-muted);
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .er-h-segment button.er-active {
            background: var(--er-bg-surface);
            color: var(--er-color-primary);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }


/* COUNTER */
.er-h-counter {
    margin-top: 4px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #EBF1FB 0%, #DEEAFC 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .er-h-counter > .material-icons {
        color: var(--er-color-secondary);
        font-size: 22px;
    }

    .er-h-counter strong {
        font-size: 1rem;
        color: var(--er-color-primary);
        font-weight: 700;
        display: block;
    }

    .er-h-counter span {
        font-size: 0.83rem;
        color: var(--er-text-soft);
    }


/* SIDEBAR FOOTER — Reset + Caută */
.er-h-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--er-border);
    background: var(--er-bg-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.er-h-btn-search {
    width: 100%;
    padding: 13px 16px;
    background: var(--er-color-secondary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

    .er-h-btn-search:hover {
        background: var(--er-color-secondary-hover);
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    }

    .er-h-btn-search .material-icons {
        font-size: 20px;
    }

/* RESET — vizibil DOAR cu er-show */
.er-h-btn-reset {
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    color: var(--er-text-muted);
    border: 1.5px solid var(--er-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .er-h-btn-reset.er-show {
        display: flex;
    }

    .er-h-btn-reset:hover {
        color: var(--er-color-danger);
        border-color: var(--er-color-danger);
    }

    .er-h-btn-reset .material-icons {
        font-size: 18px;
    }


/* ============================================================
   DETAIL PANEL
   ============================================================ */
.er-h-detail {
    flex: 1;
    overflow-y: auto;
    display: none;
    flex-direction: column;
}

.er-harta-app.er-show-detail .er-h-content {
    display: none;
}

.er-harta-app.er-show-detail .er-h-footer {
    display: none;
}

.er-harta-app.er-show-detail .er-h-header {
    display: none;
}

.er-harta-app.er-show-detail .er-h-detail {
    display: flex;
}

.er-h-detail::-webkit-scrollbar {
    width: 6px;
}

.er-h-detail::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

.er-h-detail-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 24px;
    background: var(--er-bg-surface);
    color: var(--er-text-soft);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-bottom: 1px solid var(--er-border);
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

    .er-h-detail-back:hover {
        background: var(--er-bg-muted);
        color: var(--er-color-primary);
    }

    .er-h-detail-back .material-icons {
        font-size: 20px;
    }


/* DETAIL HERO */
.er-h-detail-hero {
    padding: 26px 24px 22px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .er-h-detail-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
        pointer-events: none;
    }

    .er-h-detail-hero.er-cat-school {
        background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
    }

    .er-h-detail-hero.er-cat-kindergarten {
        background: linear-gradient(135deg, #F5B82E 0%, #D97706 100%);
        color: #1A1F36;
    }

    .er-h-detail-hero.er-cat-afterschool {
        background: linear-gradient(135deg, #10B981 0%, #047857 100%);
    }

.er-h-detail-icon-big {
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

    .er-h-detail-icon-big svg {
        width: 30px;
        height: 30px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.er-h-detail-name {
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.er-h-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.er-h-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--er-radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.95);
}

.er-h-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.er-h-badge-cat-school {
    color: #2563EB;
}

    .er-h-badge-cat-school .er-h-badge-dot {
        background: #2563EB;
    }

.er-h-badge-cat-kindergarten {
    color: #92400E;
}

    .er-h-badge-cat-kindergarten .er-h-badge-dot {
        background: #F5B82E;
    }

.er-h-badge-cat-afterschool {
    color: #047857;
}

    .er-h-badge-cat-afterschool .er-h-badge-dot {
        background: #10B981;
    }

.er-h-badge-public {
    color: #2563EB;
}

    .er-h-badge-public .er-h-badge-dot {
        background: #2563EB;
    }

.er-h-badge-private {
    color: #92400E;
}

    .er-h-badge-private .er-h-badge-dot {
        background: #F5B82E;
    }


/* DETAIL BODY */
.er-h-detail-body {
    padding: 18px 24px 24px;
}

.er-h-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--er-border);
    font-size: 0.92rem;
}

    .er-h-info-row:last-of-type {
        border-bottom: none;
    }

    .er-h-info-row > .material-icons {
        color: var(--er-color-secondary);
        font-size: 20px;
        margin-top: 1px;
        flex-shrink: 0;
    }

.er-h-info-label {
    color: var(--er-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.er-h-info-value {
    color: var(--er-text-main);
    font-weight: 600;
}

.er-h-rating-box {
    margin-top: 16px;
    padding: 16px;
    background: var(--er-bg-muted);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.er-h-rating-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--er-color-primary);
    letter-spacing: -0.02em;
    line-height: 1;
}

.er-h-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

    .er-h-stars .material-icons {
        font-size: 18px;
    }

.er-h-rating-meta {
    font-size: 0.82rem;
    color: var(--er-text-muted);
}

.er-h-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
}

.er-h-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: var(--er-bg-surface);
    color: var(--er-text-main);
    border: 1.5px solid var(--er-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

    .er-h-action .material-icons {
        font-size: 18px;
    }

    .er-h-action:hover {
        border-color: var(--er-color-primary);
        color: var(--er-color-primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 76, 129, 0.12);
    }

.er-h-action-primary {
    background: var(--er-color-secondary);
    color: #fff;
    border-color: var(--er-color-secondary);
    grid-column: span 2;
}

    .er-h-action-primary:hover {
        background: var(--er-color-secondary-hover);
        color: #fff;
        border-color: var(--er-color-secondary-hover);
    }

.er-h-action-yellow {
    background: var(--er-color-accent);
    color: var(--er-text-main);
    border-color: var(--er-color-accent);
    grid-column: span 2;
}

    .er-h-action-yellow:hover {
        background: var(--er-color-accent-hover);
        color: var(--er-text-main);
        border-color: var(--er-color-accent-hover);
    }


/* ============================================================
   MAP AREA
   ============================================================ */
.er-h-map-area {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
}

#er-map {
    width: 100%;
    height: 100%;
    background: #DDE5ED;
    z-index: 1;
}


/* TOGGLE SIDEBAR — top-left */
.er-h-toggle {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    background: var(--er-bg-surface);
    color: var(--er-color-primary);
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 500;
}

    .er-h-toggle:hover {
        background: var(--er-color-primary);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(15, 76, 129, 0.30);
    }

    .er-h-toggle .material-icons {
        font-size: 24px;
        transition: transform 0.3s ease;
    }

.er-harta-app.er-collapsed .er-h-toggle .material-icons {
    transform: rotate(180deg);
}


/* MAP CONTROLS — bottom-left, container grupat (Hartă / Satelit / Locație) */
/* Inspirat din codul tău Web Forms (#mapTypeToggle), dar cu albastrul nostru */
.er-h-map-toggle {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 500;
    display: flex;
    gap: 4px;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(15, 76, 129, 0.18);
}

.er-h-mt-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: transparent;
    position: relative;
}

    .er-h-mt-btn svg {
        stroke: var(--er-color-primary);
        fill: none;
    }

    .er-h-mt-btn.er-active {
        background: var(--er-color-primary);
    }

        .er-h-mt-btn.er-active svg {
            stroke: #fff;
        }

    .er-h-mt-btn:not(.er-active):hover {
        background: var(--er-bg-muted);
    }

    /* Spinner pe butonul de locație în timpul determinării poziției */
    .er-h-mt-btn.er-loading {
        pointer-events: none;
        opacity: 0.7;
    }

        .er-h-mt-btn.er-loading svg {
            display: none;
        }

.er-h-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid var(--er-color-primary);
    border-radius: 50%;
    animation: er-h-spin 0.6s linear infinite;
    display: none;
}

.er-h-mt-btn.er-loading .er-h-spinner {
    display: block;
}

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


/* MOBILE — buton de deschidere filtre */
.er-h-mobile-open {
    display: none;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--er-color-primary);
    color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: var(--er-radius-full);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    gap: 8px;
    align-items: center;
    box-shadow: 0 6px 18px rgba(15, 76, 129, 0.30);
    cursor: pointer;
    z-index: 500;
}

    .er-h-mobile-open .material-icons {
        font-size: 18px;
    }

.er-h-mobile-counter {
    background: var(--er-color-accent);
    color: var(--er-text-main);
    border-radius: var(--er-radius-full);
    padding: 1px 8px;
    font-size: 0.78rem;
    font-weight: 700;
}


/* ============================================================
   PIN MARKERS (pentru Google Maps AdvancedMarkerElement)
   ============================================================ */

/* Wrapper-ul pinului — folosit ca content pentru AdvancedMarkerElement.
   Layout flex column: tooltip sus, pin jos. Padding-bottom compensează
   overhang-ul vizual al pinului rotit, ca tip-ul să cadă exact pe lat/lng. */
.er-h-pin-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding-bottom: 8px;
}

/* Eticheta cu denumirea — apare permanent deasupra pinului */
.er-h-pin-tooltip {
    background: var(--er-bg-surface);
    color: var(--er-text-main);
    border: 1px solid var(--er-border);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    margin-bottom: 4px;
}

/* Pinul propriu-zis (formă teardrop colorată) */
.er-h-pin {
    width: 38px;
    height: 38px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    position: relative;
}

.er-h-pin-wrap:hover .er-h-pin {
    transform: rotate(-45deg) scale(1.15);
    z-index: 1000;
}

.er-h-pin svg {
    transform: rotate(45deg);
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.er-h-pin-school {
    background: var(--er-color-school);
}

.er-h-pin-kindergarten {
    background: var(--er-color-kindergarten);
}

    .er-h-pin-kindergarten svg {
        stroke: #1A1F36;
    }

.er-h-pin-afterschool {
    background: var(--er-color-afterschool);
}


/* CLUSTER — număr pe grupuri suprapuse, colorat după categorie */
.er-h-cluster {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid var(--er-color-primary);
    color: var(--er-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.er-h-cluster-school {
    border-color: var(--er-color-school);
    color: var(--er-color-school);
}

.er-h-cluster-kindergarten {
    border-color: var(--er-color-kindergarten);
    color: #92400E;
}

.er-h-cluster-afterschool {
    border-color: var(--er-color-afterschool);
    color: #047857;
}


/* ============================================================
   MODALS
   ============================================================ */
.er-h-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

    .er-h-overlay.er-show {
        opacity: 1;
        visibility: visible;
    }

.er-h-modal {
    background: var(--er-bg-surface);
    border-radius: 18px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    transform: translateY(20px);
    transition: transform 0.25s ease;
    position: relative;
}

.er-h-overlay.er-show .er-h-modal {
    transform: translateY(0);
}

.er-h-modal-head {
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--er-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .er-h-modal-head h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--er-text-main);
        margin: 0;
    }

.er-h-modal-close {
    width: 32px;
    height: 32px;
    background: var(--er-bg-muted);
    color: var(--er-text-soft);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .er-h-modal-close:hover {
        background: #DBE3EE;
        color: var(--er-text-main);
    }

    .er-h-modal-close .material-icons {
        font-size: 20px;
    }

/* X plutitor (folosit la modalul de permisiune) */
.er-h-modal-close-floating {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.er-h-modal-body {
    padding: 22px 24px;
}

.er-h-modal-foot {
    padding: 16px 24px;
    border-top: 1px solid var(--er-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}


/* PERMISSION MODAL */
.er-h-permission {
    text-align: center;
}

.er-h-permission-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: var(--er-color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

    .er-h-permission-icon .material-icons {
        font-size: 32px;
    }

.er-h-permission h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--er-text-main);
    margin-bottom: 8px;
}

.er-h-permission p {
    color: var(--er-text-muted);
    font-size: 0.92rem;
    margin-bottom: 22px;
}

.er-h-permission-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.er-h-permission-divider {
    margin: 14px 0 8px;
    color: var(--er-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    position: relative;
    text-align: center;
}

    .er-h-permission-divider::before,
    .er-h-permission-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: calc(50% - 30px);
        height: 1px;
        background: var(--er-border);
    }

    .er-h-permission-divider::before {
        left: 0;
    }

    .er-h-permission-divider::after {
        right: 0;
    }


/* BUTOANE GENERICE PT MODALE */
.er-h-btn {
    padding: 12px 22px;
    border-radius: 10px;
    border: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .er-h-btn .material-icons {
        font-size: 18px;
    }

.er-h-btn-primary {
    background: var(--er-color-secondary);
    color: #fff;
}

    .er-h-btn-primary:hover {
        background: var(--er-color-secondary-hover);
        transform: translateY(-1px);
    }

.er-h-btn-ghost {
    background: var(--er-bg-muted);
    color: var(--er-text-main);
}

    .er-h-btn-ghost:hover {
        background: #DBE3EE;
    }


/* REVIEW STARS */
.er-h-stars-input {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    justify-content: center;
}

.er-h-star-btn {
    background: transparent;
    border: none;
    color: #D1D5DB;
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 4px;
}

    .er-h-star-btn.er-active,
    .er-h-star-btn.er-hover {
        color: var(--er-color-accent);
    }

    .er-h-star-btn .material-icons {
        font-size: 38px;
    }

.er-h-textarea {
    width: 100%;
    border: 1.5px solid var(--er-border);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.94rem;
    color: var(--er-text-main);
    resize: vertical;
    min-height: 90px;
    outline: none;
    transition: all 0.2s ease;
}

    .er-h-textarea:focus {
        border-color: var(--er-color-secondary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }


/* QR MODAL */
.er-h-qr-content {
    text-align: center;
    padding: 8px 0;
}

.er-h-qr-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--er-color-primary);
    margin-bottom: 4px;
}

.er-h-qr-phone {
    font-size: 1rem;
    color: var(--er-text-soft);
    font-weight: 600;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}

.er-h-qr-instr {
    font-size: 0.88rem;
    color: var(--er-text-muted);
    margin-bottom: 18px;
}

#er-qrcode-container {
    display: flex;
    justify-content: center;
    padding: 18px;
    background: var(--er-bg-muted);
    border-radius: 14px;
    margin-bottom: 18px;
}


/* NAVIGATION MODAL */
.er-h-nav-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.er-h-nav-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--er-bg-surface);
    border: 1.5px solid var(--er-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--er-text-main);
    font-weight: 600;
    transition: all 0.2s ease;
}

    .er-h-nav-option:hover {
        border-color: var(--er-color-primary);
        background: var(--er-bg-muted);
        transform: translateX(2px);
        color: var(--er-text-main);
        text-decoration: none;
    }

.er-h-nav-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
}

    .er-h-nav-icon.er-google {
        background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
    }

    .er-h-nav-icon.er-waze {
        background: linear-gradient(135deg, #33CCFF 0%, #1F8AFE 100%);
    }


/* ============================================================
   TOAST
   ============================================================ */
.er-h-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    background: var(--er-color-success);
    color: #fff;
    padding: 14px 18px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35);
    z-index: 10001;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    font-weight: 600;
    font-size: 0.92rem;
}

    .er-h-toast.er-show {
        transform: translateX(0);
    }

    .er-h-toast .material-icons {
        font-size: 22px;
        flex-shrink: 0;
    }

    .er-h-toast.er-error {
        background: var(--er-color-danger);
        box-shadow: 0 10px 30px rgba(220, 38, 38, 0.35);
    }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {

    .er-h-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        max-width: 380px;
        z-index: 800;
        margin-left: -100%;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
        transition: margin-left 0.3s ease;
    }

    .er-harta-app .er-h-sidebar {
        margin-left: -100%;
    }

    .er-harta-app.er-mobile-open .er-h-sidebar {
        margin-left: 0;
    }

    .er-h-toggle {
        display: none;
    }

    .er-h-mobile-open {
        display: inline-flex;
    }

    .er-harta-app.er-mobile-open .er-h-mobile-open {
        display: none;
    }
}

/* ============================================================
   DESKTOP — butoane mai mari pentru ecranele mari
   ============================================================ */
@media (min-width: 769px) {

    /* Toggle sidebar (top-left) — mai mare pe desktop */
    .er-h-toggle {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

        .er-h-toggle .material-icons {
            font-size: 30px;
        }

    /* Container butoane hartă (bottom-left) */
    .er-h-map-toggle {
        bottom: 18px;
        left: 18px;
        gap: 5px;
        padding: 5px;
        border-radius: 10px;
    }

    /* Butoane hartă/satelit/locație */
    .er-h-mt-btn {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

        .er-h-mt-btn svg {
            width: 22px;
            height: 22px;
        }

    /* Spinner pe locație */
    .er-h-spinner {
        width: 22px;
        height: 22px;
    }
}