/* Météo360 Satellite */
/* Layout: theme standard content width by default (centered).
   - We try to follow the theme/container width via CSS vars and a JS-set var (--m360sat-theme-width).
   - Set shortcode fullbleed="1" to intentionally break out to 100vw.
*/
.m360sat{width:100%;box-sizing:border-box;max-width:1280px;margin:12px auto;border:1px solid #e6e6e6;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.06);position:relative;height:1400px}

/* Overlay UI (so plugin height == map height) */
.m360sat-header{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #eee;flex-wrap:wrap;position:absolute;top:0;left:0;right:0;z-index:1005;background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}
.m360sat-header-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:240px}
.m360sat-header-right{display:flex;align-items:center;justify-content:flex-end;flex:1;min-width:240px}

/* Mode tabs */
.m360sat-modes{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.m360sat-modebtn{padding:7px 10px;border:1px solid #ddd;border-radius:999px;background:#fff;cursor:pointer;font-size:13px;line-height:1.1}
.m360sat-modebtn:hover{background:#f5f5f5}
.m360sat-modebtn.is-active{background:#1f6feb;color:#fff;border-color:#1f6feb}
.m360sat-modebtn.is-active:hover{filter:brightness(0.95)}

.m360sat-select{padding:8px 10px;border:1px solid #ddd;border-radius:10px;background:#fff;min-width:220px}
.m360sat-btn{padding:8px 12px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7;cursor:pointer}
.m360sat-btn:hover{background:#efefef}
.m360sat-meta{color:#555;font-size:13px;flex:1;min-width:240px}
.m360sat-meta-main{font-weight:600;color:#222;line-height:1.1}
.m360sat-meta-sub{margin-top:2px;color:#555;line-height:1.2}
.m360sat-mapwrap{position:absolute;top:0;left:0;right:0;bottom:0;background:transparent}
.m360sat-map{width:100%;height:100%;min-height:0}

/* Multi-view grid (3 panels on top, 2 below) */
.m360sat-mapgrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:10px;padding:78px 12px 122px 12px;box-sizing:border-box}
.m360sat-panel{position:relative;border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fafafa;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.m360sat-panel:nth-child(1),.m360sat-panel:nth-child(2),.m360sat-panel:nth-child(3){grid-column:span 2}
.m360sat-panel:nth-child(4),.m360sat-panel:nth-child(5){grid-column:span 3}
.m360sat-panel-label{position:absolute;top:8px;left:8px;z-index:500;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:6px 8px;max-width:calc(100% - 16px)}
.m360sat-panel-label .t{font-weight:600;font-size:12px;color:#222;line-height:1.15}
.m360sat-panel-label .s{font-size:12px;color:#555;line-height:1.15;margin-top:2px}

/* Keep Leaflet UI tidy inside panels */
.m360sat-panel .leaflet-control-attribution{display:none}
.m360sat-panel .leaflet-control-zoom{margin:8px}

@media (max-width: 1100px){
  .m360sat-mapgrid{grid-template-columns:repeat(2,1fr);padding:86px 10px 132px 10px}
  .m360sat-panel:nth-child(1),.m360sat-panel:nth-child(2),.m360sat-panel:nth-child(3),.m360sat-panel:nth-child(4),.m360sat-panel:nth-child(5){grid-column:auto}
}

@media (max-width: 640px){
  .m360sat-mapgrid{grid-template-columns:1fr;gap:8px;padding:96px 8px 150px 8px}
}

/* Leaflet rendering tweaks (avoid white flash between frames) */
.m360sat .leaflet-container{background:transparent !important;}
.m360sat .leaflet-image-layer{transition:none !important;}
.m360sat-controls{display:flex;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid #eee;flex-wrap:wrap;position:absolute;left:0;right:0;bottom:28px;z-index:1005;background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}
.m360sat-slider{flex:1;min-width:220px}
.m360sat-stamp{color:#555;font-size:13px;min-width:160px;text-align:right}
.m360sat-error{padding:12px;color:#b00020;background:#fff3f3;border:1px solid #ffd0d0;border-radius:12px;margin:12px}

/* Better visual smoothing for satellite overlay */
.leaflet-image-layer{image-rendering:auto}
.m360sat-footer{padding:6px 12px;color:#666;font-size:12px;border-top:1px solid #eee;position:absolute;left:0;right:0;bottom:0;z-index:1005;background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}

/* Keep Leaflet UI visible below overlay header/controls (single-map legacy) */
.m360sat:not(.m360sat-layout-grid) .leaflet-top{top:64px}
.m360sat:not(.m360sat-layout-grid) .leaflet-bottom{bottom:76px}

@media (max-width: 640px){
  .m360sat-stamp{text-align:left;min-width:0}
  .m360sat-header-right{justify-content:flex-start}
  .m360sat-modes{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .m360sat-modebtn{white-space:nowrap}
}

.m360sat-oplabel{color:#555;font-size:12px}
.m360sat-opslider{width:140px;min-width:120px}
.m360sat .leaflet-image-layer{image-rendering:auto;transform:translateZ(0);backface-visibility:hidden;will-change:transform}

/* Optional: break out of theme container (full viewport width) */
.m360sat.m360sat-fullbleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

.m360sat-speedlabel{color:#555;font-size:12px}
.m360sat-speedslider{width:170px;min-width:140px}
.m360sat-speedval{color:#555;font-size:12px;min-width:52px;text-align:right}


/* LIVE button state */
.m360sat-btn.is-on{background:#1f6feb;color:#fff;border-color:#1f6feb}
.m360sat-btn.is-on:hover{filter:brightness(0.95)}