@layer components;.newport-map-page{background:var(--color-brand-map-canvas);width:100%;height:100vh;overflow:hidden}.newport-beach-map-component{background:var(--color-brand-map-canvas);justify-content:center;align-items:center;width:100%;height:100%;font-family:system-ui,-apple-system,sans-serif;display:flex}:where(.newport-beach-map-component) .map-container{background:linear-gradient(to bottom, var(--color-brand-map-surface), var(--color-brand-map-surface-deep));border-radius:8px;width:100%;max-width:1100px;height:100%;padding:16px;box-shadow:0 0 30px #4299e14d}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .map-container{box-shadow:0 0 30px color-mix(in srgb, var(--color-brand-map-ambient-glow) 30%, transparent)}}:where(.newport-beach-map-component) .map-container{border:1px solid var(--color-brand-map-edge);flex-direction:column;display:flex;overflow:hidden}:where(.newport-beach-map-component) .map-wrapper{border:2px solid var(--color-brand-map-action);border-radius:8px;flex:1;min-height:300px;max-height:400px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:0 0 20px #1d4ed84d}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .map-wrapper{box-shadow:0 0 20px color-mix(in srgb, var(--color-brand-info-strong) 30%, transparent)}}:where(.newport-beach-map-component) .map-element{width:100%;height:100%}:where(.newport-beach-map-component) .map-loading{background:#ffffffe6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .map-loading{background:color-mix(in srgb, var(--color-brand-glass-highlight) 90%, transparent)}}:where(.newport-beach-map-component) .map-loading{gap:12px}:where(.newport-beach-map-component) .loading-spinner{border:3px solid var(--color-brand-map-loading-track);border-top-color:var(--color-brand-map-ink);border-radius:50%;width:30px;height:30px;animation:1s linear infinite newport-map-spin}:where(.newport-beach-map-component) .map-wrapper[data-visible=false]{display:none}@keyframes newport-map-spin{to{transform:rotate(360deg)}}:where(.newport-beach-map-component) .map-toolbar{flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:12px;display:flex}:where(.newport-beach-map-component) .search-input{background:linear-gradient(to right, var(--color-brand-map-surface-accent), var(--color-brand-map-input-raised));min-width:200px;color:var(--color-brand-map-input-fg);border:1px solid var(--color-brand-map-input-edge);border-radius:20px;outline:none;flex:1;padding:8px 14px;font-size:13px;transition:all .3s}:where(.newport-beach-map-component) .search-input:focus{border-color:var(--color-brand-map-action-accent);box-shadow:0 0 0 3px #f2bf404d}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .search-input:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-brand-focus) 30%, transparent)}}:where(.newport-beach-map-component) .search-input:focus{background:linear-gradient(to right, var(--color-brand-map-input-raised), var(--color-brand-map-input-focus-surface))}:where(.newport-beach-map-component) .toolbar-buttons{gap:8px;display:flex}:where(.newport-beach-map-component) .toolbar-btn{background:linear-gradient(to bottom, var(--color-brand-map-action), var(--color-brand-map-action-end));color:var(--color-brand-glass-highlight);border:1px solid var(--color-brand-map-action-hover);cursor:pointer;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .3s}:where(.newport-beach-map-component) .toolbar-btn:hover{background:linear-gradient(to bottom, var(--color-brand-map-action-hover), var(--color-brand-map-action));transform:translateY(-1px);box-shadow:0 4px 12px #1d4ed866}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .toolbar-btn:hover{box-shadow:0 4px 12px color-mix(in srgb, var(--color-brand-info-strong) 40%, transparent)}}:where(.newport-beach-map-component) .toolbar-btn.active{background:linear-gradient(to bottom, var(--color-brand-map-selected-start), var(--color-brand-map-selected-end));color:var(--color-brand-map-selected-fg);border-color:var(--color-brand-map-selected-start);font-weight:600}:where(.newport-beach-map-component) .list-view{flex:1;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;min-height:300px;max-height:400px;margin-bottom:12px;display:grid;overflow-y:auto}:where(.newport-beach-map-component) .location-item{background:linear-gradient(to right, var(--color-brand-map-surface-muted), var(--color-brand-map-surface-muted-raised));color:var(--color-brand-map-input-fg);border:1px solid var(--color-brand-map-edge-muted);cursor:pointer;border-radius:8px;align-items:start;gap:10px;padding:12px;transition:all .3s;display:flex}:where(.newport-beach-map-component) .location-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #1d4ed84d}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .location-item:hover{box-shadow:0 4px 12px color-mix(in srgb, var(--color-brand-info-strong) 30%, transparent)}}:where(.newport-beach-map-component) .location-item:hover{border-color:var(--color-brand-map-action-hover);background:linear-gradient(to right, var(--color-brand-map-surface-accent), var(--color-brand-map-action))}:where(.newport-beach-map-component) .location-item.selected{border-color:var(--color-brand-map-selected-start);box-shadow:0 0 0 2px #fbbf244d}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .location-item.selected{box-shadow:0 0 0 2px color-mix(in srgb, var(--color-brand-map-selected-start) 30%, transparent)}}:where(.newport-beach-map-component) .location-item.selected{background:linear-gradient(to right, var(--color-brand-map-action), var(--color-brand-map-action-end))}:where(.newport-beach-map-component) .location-icon{background:linear-gradient(145deg, var(--color-brand-map-action-hover), var(--color-brand-map-action));width:36px;height:36px;color:var(--color-brand-glass-highlight);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex;box-shadow:0 0 10px #1d4ed866}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .location-icon{box-shadow:0 0 10px color-mix(in srgb, var(--color-brand-info-strong) 40%, transparent)}}:where(.newport-beach-map-component) .location-details{flex:1}:where(.newport-beach-map-component) .location-details h3{color:var(--color-brand-map-action-accent);margin:0 0 4px;font-size:15px;font-weight:600}:where(.newport-beach-map-component) .location-details p{font-size:13px;line-height:var(--leading-srk-snug);color:var(--color-brand-map-muted-fg);margin:0 0 6px}:where(.newport-beach-map-component) .location-category{background:#1d4ed833;padding:2px 8px;display:inline-block}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .location-category{background:color-mix(in srgb, var(--color-brand-info-strong) 20%, transparent)}}:where(.newport-beach-map-component) .location-category{color:var(--color-brand-map-action-accent);border:1px solid #1d4ed84d;border-radius:12px;font-size:11px}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .location-category{border:1px solid color-mix(in srgb, var(--color-brand-info-strong) 30%, transparent)}}:where(.newport-beach-map-component) .location-category{font-weight:500}:where(.newport-beach-map-component) .favorite-btn{color:var(--color-brand-map-edge-muted);cursor:pointer;background:0 0;border:none;padding:2px;font-size:18px;transition:all .3s}:where(.newport-beach-map-component) .favorite-btn:hover{transform:scale(1.2)}:where(.newport-beach-map-component) .favorite-btn.active{color:var(--color-brand-map-favorite-fg)}:where(.newport-beach-map-component) .info-panel{background:linear-gradient(to bottom, var(--color-brand-map-surface-accent), var(--color-brand-map-surface-muted-deep));color:var(--color-brand-map-input-fg);border:1px solid var(--color-brand-map-action);border-radius:8px;flex-shrink:0;padding:16px;box-shadow:inset 0 1px #ffffff1a}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .info-panel{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--color-brand-glass-highlight) 10%, transparent)}}:where(.newport-beach-map-component) .info-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}:where(.newport-beach-map-component) .info-icon{background:linear-gradient(145deg, var(--color-brand-map-action-hover), var(--color-brand-map-action));width:40px;height:40px;color:var(--color-brand-glass-highlight);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex;box-shadow:0 0 15px #1d4ed880}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .info-icon{box-shadow:0 0 15px color-mix(in srgb, var(--color-brand-info-strong) 50%, transparent)}}:where(.newport-beach-map-component) .info-title h2{color:var(--color-brand-map-action-accent);margin:0;font-size:18px}:where(.newport-beach-map-component) .info-title p{color:var(--color-brand-map-muted-fg);margin:2px 0 0;font-size:13px}:where(.newport-beach-map-component) .info-content{margin-bottom:20px}:where(.newport-beach-map-component) .info-content p{color:var(--color-brand-map-body-fg);font-size:14px;line-height:1.5}:where(.newport-beach-map-component) .favorite-btn-large{background:linear-gradient(to bottom, var(--color-brand-map-surface-muted), var(--color-brand-map-surface-muted-deep));border:2px solid var(--color-brand-map-action-hover);width:100%;color:var(--color-brand-map-action-accent);cursor:pointer;border-radius:8px;margin-top:12px;padding:10px;font-size:14px;font-weight:600;transition:all .3s}:where(.newport-beach-map-component) .favorite-btn-large:hover{background:linear-gradient(to bottom, var(--color-brand-map-action-hover), var(--color-brand-map-action));color:var(--color-brand-glass-highlight);box-shadow:0 0 20px #1d4ed866}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .favorite-btn-large:hover{box-shadow:0 0 20px color-mix(in srgb, var(--color-brand-info-strong) 40%, transparent)}}:where(.newport-beach-map-component) .favorite-btn-large.active{background:linear-gradient(to bottom, var(--color-brand-map-selected-start), var(--color-brand-map-selected-end));border-color:var(--color-brand-map-selected-start);color:var(--color-brand-map-selected-fg);box-shadow:0 0 20px #fbbf2466}@supports (color:color-mix(in lab, red, red)){:where(.newport-beach-map-component) .favorite-btn-large.active{box-shadow:0 0 20px color-mix(in srgb, var(--color-brand-map-selected-start) 40%, transparent)}}:where(.newport-beach-map-component) .category-filters{flex-wrap:wrap;gap:6px;display:flex}:where(.newport-beach-map-component) .filter-btn{background:linear-gradient(to bottom, var(--color-brand-map-surface-muted-raised), var(--color-brand-map-surface-muted));color:var(--color-brand-map-body-fg);border:1px solid var(--color-brand-map-edge-muted);cursor:pointer;border-radius:16px;padding:6px 14px;font-size:13px;transition:all .3s}:where(.newport-beach-map-component) .filter-btn:hover{background:linear-gradient(to bottom, var(--color-brand-map-action-hover), var(--color-brand-map-action));color:var(--color-brand-glass-highlight);border-color:var(--color-brand-map-action-hover);transform:translateY(-1px)}:where(.newport-beach-map-component) .filter-btn.active{background:linear-gradient(to bottom, var(--color-brand-map-selected-start), var(--color-brand-map-selected-end));color:var(--color-brand-map-selected-fg);border-color:var(--color-brand-map-selected-start);font-weight:600}@media (max-width:768px){:where(.newport-beach-map-component) .map-container{height:100%;padding:12px}:where(.newport-beach-map-component) .map-wrapper{min-height:300px}:where(.newport-beach-map-component) .list-view{grid-template-columns:1fr;min-height:300px}:where(.newport-beach-map-component) .map-toolbar{flex-direction:column}:where(.newport-beach-map-component) .search-input{width:100%}:where(.newport-beach-map-component) .toolbar-buttons{justify-content:space-between;width:100%}:where(.newport-beach-map-component) .info-panel{padding:16px}}.newport-beach-map-component{--map-marker-fill:var(--color-brand-map-ink);--map-marker-stroke:var(--color-brand-map-marker-edge);--map-marker-opacity:1;--map-marker-stroke-weight:2;--map-marker-scale:8;--map-info-window-max-width:250px}.newport-map-marker:where([data-map-region=beaches]){--map-marker-fill:var(--color-brand-map-marker-beaches)}.newport-map-marker:where([data-map-region=dining]){--map-marker-fill:var(--color-brand-map-marker-dining)}.newport-map-marker:where([data-map-region=outdoors]){--map-marker-fill:var(--color-brand-map-marker-outdoors)}.newport-map-marker:where([data-map-region=shopping]){--map-marker-fill:var(--color-brand-map-marker-shopping)}.newport-map-marker:where([data-map-region=culture]){--map-marker-fill:var(--color-brand-map-marker-culture)}.newport-map-marker:where([data-map-region=landmarks]){--map-marker-fill:var(--color-brand-map-marker-landmarks)}.newport-map-marker:where([data-map-region=activities]){--map-marker-fill:var(--color-brand-map-marker-activities)}.newport-map-info-window{padding:12px;font-family:system-ui,-apple-system,sans-serif}.newport-map-info-window h3{color:var(--color-brand-map-ink);margin:0 0 8px;font-size:16px}.newport-map-info-window p{margin:0;font-size:14px;line-height:1.4}