.webcams-mosaic-page{color:#1d1d1f;background-color:#f5f5f7;min-height:100vh;padding:12px 20px 20px}.mosaic-header{text-align:center;max-width:1600px;margin-bottom:20px;margin-left:auto;margin-right:auto;padding:0 50px}.mosaic-header:after{content:"";clear:both;display:table}.mosaic-title{color:#1d1d1f;letter-spacing:-.04em;margin-bottom:20px;padding:0 80px;font-family:Inter,sans-serif;font-size:2.5rem;font-weight:800}.mosaic-subtitle{color:#86868b;font-size:1.1rem;font-weight:500}.mosaic-tagline{color:#86868b;max-width:800px;margin:-10px auto 25px;font-family:Inter,sans-serif;font-size:1.1rem;font-weight:400;line-height:1.4}.mosaic-description{text-align:justify;color:#424245;font-size:1rem;line-height:1.6}.mosaic-category-image{float:left;object-fit:cover;border-radius:12px;width:150px;height:150px;margin-bottom:10px;margin-right:24px;box-shadow:0 4px 15px #00000014}.mosaic-country-image{float:left;object-fit:cover;background:#f5f5f7;border:1.5px solid #fff;border-radius:6px;width:auto;min-width:72px;height:48px;margin:5px;box-shadow:0 4px 15px #00000014}.mosaic-description p{margin-bottom:12px}.mosaic-description p:last-child{margin-bottom:0}.state-list-container{max-width:1200px;margin:24px auto;padding:0 20px}.state-label{color:#86868b;text-transform:uppercase;letter-spacing:.1em;text-align:center;margin-bottom:16px;font-size:14px;font-weight:700;display:block}.state-grid{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px;display:flex}.state-card{-webkit-backdrop-filter:blur(8px);cursor:pointer;background:#ffffffb3;border:1px solid #0000000a;border-radius:8px;justify-content:space-between;align-items:center;padding:6px 10px;transition:all .2s;display:flex;box-shadow:0 1px 4px #00000008}.state-card:hover{background:#fff;border-color:#0000001a;transform:translateY(-1px);box-shadow:0 4px 12px #0000000f}.state-name{color:#1d1d1f;letter-spacing:-.01em;padding-right:8px;font-size:13px;font-weight:600}.state-count{color:#86868b;border-radius:6px;flex-shrink:0;padding:1px 6px;font-size:11px;font-weight:600}.mosaic-controls{justify-content:space-between;align-items:center;max-width:1600px;margin:15px auto 0;display:flex;position:relative}.country-filter{z-index:100;position:relative}.sort-filter{z-index:100;margin-left:auto;position:relative}.sort-filter .filter-dropdown{min-width:240px;left:auto;right:0}.filter-trigger{cursor:pointer;color:#1d1d1f;background:#fff;border:1px solid #0000000d;border-radius:10px;align-items:center;gap:12px;padding:10px 24px;font-size:15px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 15px #0000000d}.filter-trigger:hover{background:#f5f5f7;border-color:#0000001a;transform:translateY(-1px);box-shadow:0 6px 20px #00000014}.filter-trigger.active{background:#fff;border-color:#000}.filter-earth-icon{color:#424245}.filter-chevron{color:#86868b;width:18px;height:18px;margin-left:4px;transition:transform .2s}.filter-trigger.active .filter-chevron{transform:rotate(180deg)}.filter-dropdown{-webkit-backdrop-filter:blur(25px);z-index:1000;scrollbar-width:none;-ms-overflow-style:none;background:#ffffff80;border-radius:20px;flex-direction:column;min-width:240px;max-height:450px;padding:8px 4px;display:flex;position:absolute;top:calc(100% + 10px);left:0;overflow-y:auto;box-shadow:0 15px 35px #0000001a}.filter-dropdown::-webkit-scrollbar{display:none}.filter-item{cursor:pointer;border-bottom:1px solid #00000005;border-radius:12px;align-items:center;gap:12px;margin:1px 4px;padding:5px 14px;transition:all .2s;display:flex}.filter-item:last-child{border-bottom:none}.filter-item:hover{background:#0000000d}.filter-item.active{background:#00000008}.filter-item input[type=radio]{cursor:pointer;accent-color:#000;width:18px;height:18px}.filter-item input[type=checkbox]{accent-color:#000;cursor:pointer;border:1.5px solid #0000001a;border-radius:4px;width:18px;height:18px}.filter-info{text-align:left;flex-direction:row;flex:1;display:flex}.filter-name{color:#1d1d1f;font-size:14px;font-weight:600;line-height:1.3}.bottom-subtitle{text-align:center;margin:20px;font-size:1rem}.mosaic-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:1600px;margin:0 auto;display:grid}.mosaic-card{cursor:pointer;background:#fff;border:1px solid #0000000d;border-radius:16px;flex-direction:column;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #0000000d}.mosaic-card:hover{border-color:#0000001a;transform:translateY(-4px);box-shadow:0 12px 24px #0000001f}.mosaic-thumbnail{aspect-ratio:16/9;width:100%;position:relative;overflow:hidden}.mosaic-thumbnail img{object-fit:cover;background:#000;width:100%;height:100%}.mosaic-img-loading,.mosaic-img-error{background:#f5f5f7;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.mosaic-loading-container{color:#86868b;flex-direction:column;justify-content:center;align-items:center;gap:20px;height:60vh;display:flex}.mosaic-error{text-align:center;color:#f44;margin-top:40px;font-size:1.2rem}.mosaic-spinner{animation:1.5s linear infinite rotate}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mosaic-spinner .path{stroke-dasharray:90 200;stroke-dashoffset:0;stroke-linecap:round}.mosaic-pagination{justify-content:center;align-items:center;gap:12px;margin-top:12px;margin-bottom:12px;padding:12px;display:flex}.pagination-btn{cursor:pointer;color:#1d1d1f;background:#fff;border:1px solid #0000000d;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 8px #0000000a}.pagination-btn:hover:not(:disabled){background:#f5f5f7;border-color:#0000001a;transform:scale(1.05);box-shadow:0 4px 12px #00000014}.pagination-btn:disabled{opacity:.3;cursor:not-allowed;background:#f5f5f7}.pagination-btn svg{stroke-width:2.5px;width:20px;height:20px}.pagination-numbers{align-items:center;gap:10px;display:flex}.pagination-number{color:#1d1d1f;cursor:pointer;background:#fff;border:1px solid #0000000d;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:15px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 8px #0000000a}.pagination-number:hover{background:#f5f5f7;border-color:#0000001a;transform:scale(1.05);box-shadow:0 4px 12px #00000014}.pagination-number.active{color:#fff;background:#0f0f0f;border-color:#0f0f0f;transform:scale(1.05);box-shadow:0 4px 15px #0003}.pagination-ellipsis{color:#86868b;letter-spacing:2px;padding:0 4px;font-size:16px;font-weight:500}@media (max-width:768px){.mosaic-pagination{gap:8px;padding:6px}.pagination-btn{padding:8px 16px;font-size:13px}.pagination-number{min-width:36px;height:36px;font-size:13px}.mosaic-header{text-align:center;padding:0}.mosaic-title{margin-bottom:15px;font-size:1.8rem}.mosaic-category-image{float:left;border-radius:12px;width:120px;height:120px;margin:0 16px 8px 0}.mosaic-description{text-align:justify;padding:0;font-size:.95rem}}