:root{--and-blue:#0b6bdc;--and-text:#10284c;--and-muted:#6d7f98;--and-border:#dbe7f4;--and-shadow:0 16px 40px rgba(32,70,110,.12);--and-radius:18px}.and-cam-page{background:linear-gradient(180deg,#f8fbff 0,#fff 36%);padding:22px 0 48px;color:var(--and-text)}.and-cam-inner{width:min(1040px,calc(100% - 30px));margin:0 auto}.and-cam-breadcrumbs{margin-bottom:16px}.and-cam-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.and-cam-hero h1{font-size:clamp(32px,4vw,52px);line-height:1.05;margin:0 0 10px;font-weight:800;color:#0a2348}.and-cam-hero p{max-width:760px;margin:0;font-size:17px;line-height:1.55;color:var(--and-muted)}.and-cam-stats{display:flex;gap:10px}.and-stat{display:flex;align-items:center;gap:12px;min-width:190px;background:#fff;border:1px solid var(--and-border);border-radius:14px;padding:14px 16px;box-shadow:0 8px 24px rgba(27,75,124,.08)}.and-stat-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef6ff;color:var(--and-blue);font-size:24px;font-weight:800}.and-stat strong,.and-stat small{display:block}.and-stat strong{font-size:15px}.and-stat small{font-size:12px;color:var(--and-muted);margin-top:2px}.and-cam-toolbar{display:flex;gap:12px;align-items:center;margin:0 0 16px}.and-search{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--and-border);border-radius:14px;padding:0 14px;height:50px;box-shadow:0 8px 22px rgba(20,67,114,.06)}.and-search input{border:0!important;outline:0!important;box-shadow:none!important;width:100%;font-size:15px;background:transparent!important;padding:0!important}.and-btn{border:0;border-radius:12px;min-height:44px;padding:0 16px;font-weight:700;cursor:pointer;white-space:nowrap}.and-btn-light{background:#fff;border:1px solid var(--and-border);color:var(--and-text)}.and-btn-primary{background:var(--and-blue);color:#fff}.and-cam-layout{position:relative;display:grid;grid-template-columns:255px minmax(0,1fr);gap:14px}.and-camera-list-panel,.and-map-card,.and-camera-detail{background:#fff;border:1px solid var(--and-border);border-radius:var(--and-radius);box-shadow:var(--and-shadow);overflow:hidden}.and-camera-list-panel{height:650px;display:flex;flex-direction:column}.and-panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--and-border)}.and-panel-head h2{font-size:20px;margin:3px 0 0}.and-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--and-blue)}.and-badge{display:grid;place-items:center;min-width:34px;height:34px;border-radius:999px;background:#eef6ff;color:var(--and-blue);font-weight:800}.and-camera-list{padding:10px;overflow:auto}.and-camera-item{width:100%;text-align:left;background:#fff;display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px;border-radius:13px;border:1px solid transparent;cursor:pointer;margin-bottom:7px}.and-camera-item:hover{background:#f7fbff;border-color:#d9eaff}.and-camera-item.is-active{background:#eef6ff;border-color:#8fc1ff;box-shadow:inset 3px 0 0 var(--and-blue)}.and-camera-item img{width:92px;height:62px;object-fit:cover;border-radius:9px}.and-camera-item h3{font-size:14px;margin:2px 0 5px}.and-camera-item p{font-size:12px;color:var(--and-muted);margin:0}.and-online{color:#16a267;font-weight:700;margin-top:5px;display:block;font-size:11px}.and-map-card{height:650px}.and-map-topbar{height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--and-border)}.and-map-topbar strong,.and-map-topbar span{display:block}.and-map-topbar>div>span{font-size:12px;color:var(--and-muted);margin-top:3px}.and-map-legend{font-size:12px;color:var(--and-muted);display:flex!important;align-items:center;gap:7px}.and-dot{width:10px;height:10px;background:var(--and-blue);border-radius:50%}#and_map_canvas{height:calc(100% - 64px);width:100%;z-index:1}.and-camera-marker{background:transparent;border:0}.and-camera-marker span{width:38px;height:38px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);background:var(--and-blue);border:3px solid #fff;box-shadow:0 6px 18px rgba(0,73,153,.28);display:grid;place-items:center}.and-camera-marker svg{width:18px;height:18px;transform:rotate(45deg);fill:#fff}.and-camera-detail{position:absolute;z-index:650;top:0;left:269px;right:0;width:auto;height:650px;max-height:none;padding:18px;display:none;flex-direction:column;overflow:auto;box-shadow:0 22px 65px rgba(12,42,78,.22);transform:translateY(8px);opacity:0;border-radius:var(--and-radius)}.and-camera-detail.is-open{display:flex;animation:andDetailIn .18s ease-out forwards}@keyframes andDetailIn{to{opacity:1;transform:translateY(0)}}.and-detail-head{display:flex;justify-content:space-between}.and-detail-head h2{font-size:25px;margin:5px 0}.and-detail-head p{margin:0 0 12px;color:var(--and-muted);font-size:14px}.and-live-row{display:flex;align-items:center;gap:7px;font-size:12px;color:#168f5f;font-weight:700}.and-live-dot{width:9px;height:9px;background:#19b36f;border-radius:50%}.and-detail-close{border:0;background:#f3f7fb;color:#55708f;width:34px;height:34px;border-radius:10px;font-size:25px;cursor:pointer}.and-main-image-wrap{position:relative;border-radius:14px;overflow:hidden;background:#0c1725;aspect-ratio:16/9}.and-main-image-wrap img{width:100%;height:100%;object-fit:cover}.and-image-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(11,26,46,.55);color:#fff;font-size:30px;cursor:pointer}.and-prev{left:12px}.and-next{right:12px}.and-image-time{position:absolute;left:12px;bottom:10px;color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:7px;font-size:12px}.and-detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.and-detail-meta>div{background:#f7fbff;border:1px solid #e2edf8;border-radius:11px;padding:9px 11px}.and-detail-meta span,.and-detail-meta strong{display:block}.and-detail-meta span{font-size:10px;color:var(--and-muted);text-transform:uppercase}.and-detail-meta strong{font-size:12px;margin-top:3px}.and-recent-head{display:flex;justify-content:space-between;margin:2px 0 8px}.and-recent-head h3{font-size:16px;margin:0}.and-recent-head span{font-size:10px;color:var(--and-muted)}.and-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.and-thumb{position:relative;border:2px solid transparent;border-radius:10px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;background:#edf2f7;padding:0}.and-thumb.is-active{border-color:var(--and-blue)}.and-thumb img{width:100%;height:100%;object-fit:cover}.and-thumb span{position:absolute;left:3px;bottom:3px;font-size:9px;color:#fff;background:rgba(0,0,0,.62);padding:2px 4px;border-radius:4px}.and-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto;padding-top:12px}
@media(max-width:1100px){
  .and-cam-inner{width:min(960px,calc(100% - 24px))}
  .and-cam-layout{grid-template-columns:230px minmax(0,1fr)}
  .and-camera-item{grid-template-columns:78px 1fr}
  .and-camera-item img{width:78px;height:56px}
  .and-map-card{height:610px}
  .and-camera-detail{left:244px;right:0;width:auto;height:610px;max-height:none}
}

@media(max-width:900px){
  .and-cam-inner{width:min(100% - 22px,820px)}
  .and-cam-hero{align-items:flex-start;flex-direction:column}
  .and-cam-stats{width:100%}
  .and-stat{flex:1;min-width:0}
  .and-cam-layout{grid-template-columns:1fr}
  .and-camera-list-panel{order:2;height:auto}
  .and-camera-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:300px}
  .and-camera-item{margin:0}
  .and-map-card{order:1;height:520px}
  .and-camera-detail{
    position:fixed;
    left:50%;
    right:auto;
    top:auto;
    bottom:16px;
    width:min(620px,calc(100% - 24px));
    max-height:78vh;
    transform:translate(-50%,18px);
    border-radius:20px;
    z-index:9999
  }
  .and-camera-detail.is-open{animation:andDetailTabletIn .2s ease-out forwards}
  @keyframes andDetailTabletIn{to{opacity:1;transform:translate(-50%,0)}}
}

@media(max-width:600px){
  .and-cam-page{padding-top:12px}
  .and-cam-inner{width:100%}
  .and-cam-breadcrumbs,.and-cam-hero,.and-cam-toolbar{margin-left:14px;margin-right:14px}
  .and-cam-hero h1{font-size:34px}
  .and-cam-hero p{font-size:15px}
  .and-cam-stats{gap:7px}
  .and-stat{padding:10px}
  .and-stat-icon{width:34px;height:34px;font-size:18px}
  .and-stat strong{font-size:12px}
  .and-stat small{font-size:10px}
  .and-cam-toolbar{flex-direction:column;align-items:stretch}
  .and-camera-list-panel{display:none}
  .and-map-card{height:455px;border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .and-map-topbar{height:54px}
  .and-map-legend{display:none!important}
  #and_map_canvas{height:calc(100% - 54px)}
  .and-camera-detail{
    left:0;
    bottom:0;
    width:100%;
    max-height:82vh;
    padding:14px;
    border-radius:20px 20px 0 0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    transform:translateY(24px)
  }
  .and-camera-detail.is-open{animation:andDetailMobileIn .2s ease-out forwards}
  @keyframes andDetailMobileIn{to{opacity:1;transform:translateY(0)}}
  .and-detail-head h2{font-size:22px}
  .and-detail-meta{grid-template-columns:1fr 1fr}
  .and-thumbs{grid-template-columns:repeat(4,minmax(80px,1fr));overflow-x:auto;padding-bottom:4px}
  .and-thumb{min-width:80px}
  .and-detail-actions{grid-template-columns:1fr 1fr;margin-top:14px}
  .and-btn{width:100%;font-size:12px;padding:0 10px}
}

/* V4 - galerie foto */
.and-main-image-wrap{
  aspect-ratio:16/9;
  min-height:0;
  background:#eaf1f8;
  display:flex;
  align-items:center;
  justify-content:center;
}
.and-main-image-wrap img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center;
  opacity:0;
  transition:opacity .15s ease;
}
.and-main-image-wrap img.is-loaded{opacity:1}
.and-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.and-thumb{background:#edf3f9}
.and-thumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  max-width:none!important;
}
.and-thumb.is-missing{
  display:none!important;
}
.and-camera-detail{
  justify-content:flex-start;
}
.and-detail-actions{
  margin-top:12px;
}
@media(min-width:901px){
  .and-main-image-wrap{max-height:330px}
}


/* V5 - corectie importanta: elementele din panoul camerei nu se mai comprima */
.and-camera-detail{
    align-items:stretch;
}

.and-detail-head,
.and-main-image-wrap,
.and-detail-meta,
.and-recent-head,
.and-thumbs,
.and-detail-actions{
    flex-shrink:0 !important;
}

.and-main-image-wrap{
    width:100%;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
    background:#0d1826;
    overflow:hidden;
}

.and-main-image-wrap img{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
}

.and-thumbs{
    grid-auto-rows:auto;
}

.and-thumb{
    aspect-ratio:16 / 9 !important;
    min-height:0 !important;
}

.and-thumb img{
    object-fit:cover !important;
}

@media(min-width:901px){
    .and-camera-detail{
        overflow-y:auto;
    }

    .and-main-image-wrap{
        max-height:none !important;
    }
}


/* V6 - close button sticky + hover states */
.and-detail-head{
    position: sticky;
    top: -18px;
    z-index: 20;
    background: #fff;
    padding-top: 18px;
    padding-bottom: 10px;
    margin: -18px -18px 10px -18px;
    padding-left: 18px;
    padding-right: 18px;
    border-bottom: 1px solid #eef3f9;
}

.and-detail-close{
    position: sticky;
    top: 10px;
    align-self: flex-start;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.and-detail-close:hover{
    background: #e8f1ff;
    color: var(--and-blue);
    box-shadow: 0 6px 14px rgba(11,107,220,.16);
    transform: scale(1.04);
}

.and-btn{
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.and-btn:hover{
    transform: translateY(-1px);
}

.and-btn-light:hover{
    background: #eef6ff;
    border-color: #9dc8ff;
    color: var(--and-blue);
    box-shadow: 0 8px 18px rgba(11,107,220,.12);
}

.and-btn-primary:hover{
    background: #095cc0;
    box-shadow: 0 10px 20px rgba(11,107,220,.22);
}

@media(max-width:600px){
    .and-detail-head{
        top: -14px;
        margin: -14px -14px 10px -14px;
        padding-top: 14px;
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* V7 - compact list + one-line title + white next button */
.and-panel-head h2{
    white-space: nowrap;
    font-size: 19px;
}

.and-camera-list{
    padding: 8px;
}

.and-camera-item{
    grid-template-columns: 84px 1fr;
    gap: 8px;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 11px;
}

.and-camera-item img{
    width: 84px;
    height: 56px;
    border-radius: 8px;
}

.and-camera-item h3{
    font-size: 13px;
    margin: 1px 0 4px;
}

.and-camera-item p{
    font-size: 11px;
}

.and-online{
    margin-top: 3px;
    font-size: 10px;
}

.and-detail-actions .and-btn,
.and-detail-actions .and-btn-primary,
.and-detail-actions .and-btn-light{
    background: #fff !important;
    border: 1px solid var(--and-border) !important;
    color: var(--and-text) !important;
    box-shadow: none !important;
}

.and-detail-actions .and-btn:hover,
.and-detail-actions .and-btn-primary:hover,
.and-detail-actions .and-btn-light:hover{
    background: #eef6ff !important;
    border-color: #9dc8ff !important;
    color: var(--and-blue) !important;
    box-shadow: 0 8px 18px rgba(11,107,220,.12) !important;
}

@media(max-width:1100px){
    .and-panel-head h2{font-size:18px}
    .and-camera-item{grid-template-columns:78px 1fr;gap:7px;padding:7px;margin-bottom:4px}
    .and-camera-item img{width:78px;height:52px}
}

@media(max-width:600px){
    .and-panel-head h2{white-space:normal;font-size:18px}
}


/* V8 - listă și mai compactă */
.and-panel-head{
    padding:14px 16px !important;
}
.and-panel-head h2{
    font-size:18px !important;
    margin:2px 0 0 !important;
}
.and-kicker{
    font-size:10px !important;
}
.and-badge{
    min-width:30px !important;
    height:30px !important;
    font-size:13px !important;
}

.and-camera-list{
    padding:6px !important;
}

.and-camera-item{
    grid-template-columns:72px 1fr !important;
    gap:7px !important;
    padding:6px !important;
    margin-bottom:3px !important;
    border-radius:10px !important;
}

.and-camera-item img{
    width:72px !important;
    height:48px !important;
    border-radius:7px !important;
}

.and-camera-item h3{
    font-size:12px !important;
    line-height:1.15 !important;
    margin:0 0 2px !important;
}

.and-camera-item p{
    font-size:10px !important;
    line-height:1.15 !important;
}

.and-online{
    font-size:9px !important;
    line-height:1.1 !important;
    margin-top:2px !important;
}

@media(max-width:1100px){
    .and-camera-item{
        grid-template-columns:68px 1fr !important;
    }
    .and-camera-item img{
        width:68px !important;
        height:46px !important;
    }
}


/* V9 - lista ajustată corect la dimensiunea panoului */
.and-cam-layout{
    grid-template-columns:260px minmax(0,1fr) !important;
}

.and-camera-list-panel{
    height:650px !important;
    min-width:0;
}

.and-camera-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:7px !important;
    scrollbar-width:thin;
}

.and-camera-list::-webkit-scrollbar{
    width:6px;
}

.and-camera-list::-webkit-scrollbar-thumb{
    background:#0b6bdc;
    border-radius:10px;
}

.and-camera-list::-webkit-scrollbar-track{
    background:#edf4fb;
}

.and-camera-item{
    width:100% !important;
    min-height:66px;
    grid-template-columns:78px minmax(0,1fr) !important;
    align-items:center !important;
    gap:9px !important;
    padding:7px !important;
    margin:0 0 5px !important;
    box-sizing:border-box !important;
}

.and-camera-item img{
    width:78px !important;
    height:52px !important;
    object-fit:cover !important;
    flex:none;
}

.and-camera-item > div{
    min-width:0;
}

.and-camera-item h3{
    margin:0 0 4px !important;
    font-size:13px !important;
    line-height:1.15 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.and-camera-item p{
    margin:0 !important;
    font-size:11px !important;
    line-height:1.15 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.and-online{
    display:block !important;
    margin-top:4px !important;
    font-size:10px !important;
    line-height:1.1 !important;
    white-space:nowrap;
}

.and-panel-head{
    flex:0 0 auto;
    padding:14px 14px !important;
}

.and-panel-head h2{
    font-size:18px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
}

.and-badge{
    flex:0 0 30px;
}

@media(max-width:1100px){
    .and-cam-layout{
        grid-template-columns:245px minmax(0,1fr) !important;
    }

    .and-camera-item{
        grid-template-columns:72px minmax(0,1fr) !important;
    }

    .and-camera-item img{
        width:72px !important;
        height:48px !important;
    }
}


/* V10 - scoate textul "CAMERE VIDEO" si scrollbar in culoarea site-ului */
.and-kicker{
    display:none !important;
}

.and-panel-head{
    padding-top:16px !important;
}

/* Scrollbar pentru lista si panoul camerei */
.and-camera-list,
.and-camera-detail{
    scrollbar-width: thin;
    scrollbar-color: #0b6bdc #eaf2fb;
}

.and-camera-list::-webkit-scrollbar,
.and-camera-detail::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

.and-camera-list::-webkit-scrollbar-track,
.and-camera-detail::-webkit-scrollbar-track{
    background: #eaf2fb;
    border-radius: 12px;
}

.and-camera-list::-webkit-scrollbar-thumb,
.and-camera-detail::-webkit-scrollbar-thumb{
    background: #0b6bdc;
    border-radius: 12px;
    border: 1px solid #eaf2fb;
}

.and-camera-list::-webkit-scrollbar-thumb:hover,
.and-camera-detail::-webkit-scrollbar-thumb:hover{
    background: #095cc0;
}

/* daca browserul afiseaza bara pe containerul extern */
.and-camera-list-panel,
.and-map-card,
.and-cam-page{
    scrollbar-color: #0b6bdc #eaf2fb;
}


/* V11 - cardurile statistice de sus au fost eliminate din HTML */
.and-cam-hero{
    justify-content:flex-start !important;
}
.and-cam-stats{
    display:none !important;
}


/* V12 - descrierea într-un singur rând pe desktop */
.and-cam-hero p{
    max-width:none !important;
    width:100% !important;
    white-space:nowrap !important;
    font-size:16px !important;
}

.and-cam-hero > div{
    width:100%;
}

@media(max-width:900px){
    .and-cam-hero p{
        white-space:normal !important;
        font-size:15px !important;
    }
}


/* V14 - spații mai mici în panoul camerei */
.and-camera-detail{
    padding: 12px !important;
}

.and-detail-head{
    margin: -12px -12px 8px -12px !important;
    padding: 12px 12px 8px !important;
}

.and-detail-head h2{
    margin: 4px 0 2px !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
}

.and-detail-head p{
    margin: 0 0 8px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

.and-live-row{
    gap: 6px !important;
    font-size: 11px !important;
}

.and-main-image-wrap{
    margin-top: 2px !important;
    border-radius: 12px !important;
}

.and-image-nav{
    width: 36px !important;
    height: 36px !important;
    font-size: 26px !important;
}

.and-prev{left: 10px !important;}
.and-next{right: 10px !important;}

.and-detail-meta{
    gap: 6px !important;
    margin: 8px 0 !important;
}

.and-detail-meta > div{
    padding: 7px 9px !important;
    border-radius: 10px !important;
}

.and-detail-meta span{
    font-size: 9px !important;
}

.and-detail-meta strong{
    font-size: 11px !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
}

.and-recent-head{
    margin: 0 0 6px !important;
}

.and-recent-head h3{
    font-size: 15px !important;
    line-height: 1.2 !important;
}

.and-thumbs{
    gap: 6px !important;
}

.and-thumb{
    border-radius: 8px !important;
}

.and-detail-actions{
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
}

.and-detail-actions .and-btn{
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}

@media(max-width:600px){
    .and-camera-detail{
        padding: 10px !important;
    }

    .and-detail-head{
        margin: -10px -10px 8px -10px !important;
        padding: 10px 10px 8px !important;
    }

    .and-detail-head h2{
        font-size: 20px !important;
    }

    .and-detail-head p{
        font-size: 12px !important;
    }

    .and-detail-actions .and-btn{
        min-height: 38px !important;
        font-size: 12px !important;
    }
}



/* =====================================================
   RESPONSIVE TABLETĂ + TELEFON
   ===================================================== */

/* TABLETĂ */
@media (min-width: 601px) and (max-width: 1024px) {

    .and-cam-inner {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin: 0 auto !important;
    }

    /* Harta sus, lista camerelor jos */
    .and-cam-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .and-map-card {
        order: 1 !important;
        width: 100% !important;
        height: 520px !important;
    }

    /* Lista pe un singur rând */
    .and-camera-list-panel {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .and-panel-head {
        padding: 10px 14px !important;
    }

    .and-camera-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;

        width: 100% !important;
        height: auto !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 8px !important;

        scroll-behavior: smooth;
    }

    .and-camera-item {
        flex: 0 0 190px !important;

        width: 190px !important;
        min-width: 190px !important;
        min-height: 66px !important;

        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;

        gap: 7px !important;
        padding: 6px !important;
        margin: 0 !important;
    }

    .and-camera-item img {
        width: 72px !important;
        height: 50px !important;
        object-fit: cover !important;
    }

    .and-camera-item h3 {
        font-size: 12px !important;
        margin: 0 0 3px !important;
    }

    .and-camera-item p {
        font-size: 10px !important;
    }

    .and-online {
        font-size: 9px !important;
        margin-top: 2px !important;
    }

    /* scrollbar orizontal în culoarea site-ului */
    .and-camera-list::-webkit-scrollbar {
        height: 6px !important;
    }

    .and-camera-list::-webkit-scrollbar-track {
        background: #eaf2fb !important;
    }

    .and-camera-list::-webkit-scrollbar-thumb {
        background: #0b6bdc !important;
        border-radius: 10px !important;
    }

    /* Fereastra camerei ocupă zona hărții */
    .and-camera-detail {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 520px !important;
        max-height: 520px !important;
    }
}


/* =====================================================
   TELEFON
   ===================================================== */

@media (max-width: 600px) {

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .and-cam-page {
        width: 100% !important;
        padding: 8px 0 25px !important;
    }

    .and-cam-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* descriere */
    .and-cam-hero {
        margin: 0 0 10px !important;
    }

    .and-cam-hero p {
        white-space: normal !important;
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    /* căutare și buton */
    .and-cam-toolbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;

        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .and-search {
        width: 100% !important;
        height: 44px !important;
        box-sizing: border-box !important;
    }

    #and-fit-map {
        width: 100% !important;
        min-height: 42px !important;
    }

    /* Layout pe verticală */
    .and-cam-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;

        width: 100% !important;
    }

    /* Harta se adaptează ecranului */
    .and-map-card {
        order: 1 !important;

        width: 100% !important;
        height: clamp(360px, 62vh, 500px) !important;

        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .and-map-topbar {
        height: 54px !important;
        padding: 0 12px !important;
    }

    .and-map-topbar strong {
        font-size: 15px !important;
    }

    #and_map_canvas {
        width: 100% !important;
        height: calc(100% - 54px) !important;
    }

    /* Lista camerelor tot orizontală */
    .and-camera-list-panel {
        display: block !important;
        order: 2 !important;

        width: 100% !important;
        height: auto !important;
    }

    .and-panel-head {
        padding: 9px 12px !important;
    }

    .and-panel-head h2 {
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    .and-camera-list {
        display: flex !important;
        flex-direction: row !important;

        gap: 6px !important;

        width: 100% !important;
        height: auto !important;

        padding: 6px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .and-camera-item {
        flex: 0 0 155px !important;

        width: 155px !important;
        min-width: 155px !important;

        display: block !important;

        padding: 6px !important;
        margin: 0 !important;
    }

    .and-camera-item img {
        width: 100% !important;
        height: 78px !important;

        object-fit: cover !important;

        margin-bottom: 5px !important;
    }

    .and-camera-item h3 {
        font-size: 12px !important;
        margin: 0 0 2px !important;
    }

    .and-camera-item p {
        font-size: 10px !important;
    }

    .and-online {
        font-size: 9px !important;
    }

    /* Panoul unei camere */
    .and-camera-detail {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;

        width: 100% !important;
        height: auto !important;
        max-height: 88vh !important;

        border-radius: 18px 18px 0 0 !important;

        overflow-y: auto !important;

        z-index: 99999 !important;
    }

    .and-main-image-wrap {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    .and-main-image-wrap img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }

    .and-detail-meta {
        grid-template-columns: 1fr 1fr !important;
    }

    .and-thumbs {
        grid-template-columns: repeat(4, minmax(78px, 1fr)) !important;
        overflow-x: auto !important;
    }
}