:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#0f172a;
    --text-light:#64748b;
    --border:#e8edf3;
    --shadow:0 12px 40px rgba(15,23,42,.08);

    --active:#00AA00;
    --active-bg:#22c55e20;

    --extended:#00AA00;
    --extended-bg:#22c55e20;

    --warning:#f4b400;
    --warning-bg:#fff8e7;


    --inactive:#222;
    --inactive-bg:#CCC;

    --closed:#CC0000;
    --closed-bg:#EEE;

    --blue:#3366ff;

    /* Background */
    --risk-low:       #16A34A;
    --risk-moderate:  #2563EB;
    --risk-medium:    #EAB308;
    --risk-high:      #EA580C;
    --risk-extreme:   #B91C1C;

    /* Border */
    --risk-low-border:       #15803D;
    --risk-moderate-border:  #1D4ED8;
    --risk-medium-border:    #CA8A04;
    --risk-high-border:      #C2410C;
    --risk-extreme-border:   #991B1B;
    --right-box-shadow:   0 8px 24px rgba(0, 0, 0, 0.1)
                        , 0 2px 4px rgba(0, 0, 0, 0.04)
                        , inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.hide { display: none; }

.material-symbols-sharp {
    vertical-align: middle;
}    

.closed {
    color: var(--closed);
}    

body{
    background:var(--bg);
    font-family:'Inter',sans-serif;
    color:var(--text);
    padding:40px;
    letter-spacing: .5px !important;
}

/* =======================================================
    MAIN CARD
======================================================= */

.alert-card{
    max-width:1450px;
    margin:auto;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    border-left: 10px solid var(--leftboarder);
}

#risk_level_head {
    color:var(--color);
}    

/* =======================================================
    TOP
======================================================= */

.alert-top{
    display:grid;
    grid-template-columns:48% 52%;
}

.alert-left{
    padding:48px;
}

/* LEFT ACCENT + BEVEL */

/* HEADER */
.alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0; /* flush */
}

/* BRAND BLOCK */
.brand {
    top: 41px;
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 40px 12px 20px;
    --background: linear-gradient(135deg, #cc0000, #dc2626);
    background: var(--background);
    color: #fff;
    font-weight: 600;

    /* 🔥 Beveled cut */
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
    box-shadow: inset -1px -3px 3px 0px #00000022;
    border-top-left-radius: 13px;
}

/* =======================================================
    LABEL
======================================================= */

.alert-label{
    display:inline-flex;
    align-items:center;
    gap:14px;
    font-size:15px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#d88900;
    margin-bottom:30px;
    margin-top: 30px !important;
}

.alert-label .icon{
    min-width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}



/* =======================================================
    TITLE
======================================================= */

.alert-title{
    font-size:3em;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-1px;
    margin-bottom:35px;
    margin-top: 25px !important;
}

/* =======================================================
    STATUS
======================================================= */

.alert-meta{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:34px;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    --status: var(--success);
    --status-bg: var(--success-bg);
    color:var(--status);
    background:var(--status-bg);
    

    padding:10px 18px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
}

.status-dot{
    width:10px;
    height:10px;
    --status: var(--success);
    background:var(--status);
    border-radius:50%;
}

.date{
    color:#6b7280;
    font-size:18px;
    font-weight:500;
}

/* =======================================================
    DESCRIPTION
======================================================= */

.alert-description{
    font-size:1.3em;
    line-height:1.75;
    color:#111;
    max-width:95%;
}

/* =======================================================
    ADVICE, IMPACTED-VENDORS BOX
======================================================= */
.advice,
.impacted-vendors {
    margin-top:42px;

    background:var(--warning-bg);

    border:1px solid #ffe1a2;

    border-radius:22px;

    padding:28px;
}

.advice-title,
.impacted-vendors-title {
    display:flex;
    align-items:center;
    gap:14px;

    font-size:30px;
    font-weight:700;
    margin-bottom:12px;
}

.advice-title .icon,
.impacted-vendors .icon {
    width:42px;
    height:42px;
    border-radius:50%;
    background:#ffca57;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
}

.advice p,
.impacted-vendors div:not .vendor-logo {
    color:#111;
    font-size:1.3em;
    line-height:1.5;
}

.impacted-vendors {
    background-color: #e7f0ff;
    border: 1px solid #3b82f6;
    color: #1e40af;
}

/* =======================================================
    RIGHT PANEL
======================================================= */

.alert-right{
    background:#f7f9fc;
    padding:20px;
    padding-bottom: 48px;
    border-top-left-radius: 34px;
    border-bottom-left-radius: 28px;
    box-shadow: inset 0px 0px 2px rgba(0, 0, 0, .08);
}

.hero-image{
    margin-top: 10px;
    height:420px;
    border-radius:22px;
    overflow:hidden;
    position:relative;
    box-shadow: var(--right-box-shadow);
}

.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.airport-card{

    position:absolute;

    left:30px;
    bottom:25px;

    background:#ffffff88;

    border-radius:18px;

    padding:24px;

    width:520px;

    display:flex;
    align-items:center;
    gap:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
}

.airport-icon{

    padding: 10px;

    border-radius:50%;

    background:#3366ff;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:32px;
}

.airport-code{

    font-size:2.3em;
    font-weight:800;
    letter-spacing:-1px;
}

.airport-name{
    font-size:1.3em;
    font-weight:600;
    margin-bottom:6px;
}

.airport-location{
    color:#333;
    font-size: 1em;
}

#nearest {
    font-size: .6em;
    color:#555;
}    

#event_type {
    color: #222;
    position: relative;
    z-index: 1;
    transform: translateX(10px);
    padding: 5px 5px;
    --text-shadow: 0px 0px 2px #2563EB;
    text-align: center;
}

#event_type::after {
    content: "";
    position: absolute;
    display: flex;
    --pad:6%;
    top: calc(var(--pad) / 2 * -1);
    left: calc(var(--pad) / 2 * -1);
    width: calc(100% + var(--pad));
    height: calc(100% + var(--pad));
    background-color: #F2F2F2;
    z-index: -1;
    transform: skewX(-23deg);
    box-shadow: inset 2px 1px 2px 0px #00000022;
    border-radius: 5px;
}    


/* =======================================================
    MAP
======================================================= */

.map{
    margin-top:42px;
    border-radius:22px;
    overflow:hidden;
    height:420px;
    box-shadow: var(--right-box-shadow);
}

.map img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =======================================================
    INFO ROW
======================================================= */

.info-row{

    display:grid;
    grid-template-columns:repeat(5,1fr);

    border-top:1px solid var(--border);
}

.info-item{

    text-align:center;

    padding:36px 20px;

    border-right:1px solid var(--border);
}

.info-item:last-child{
    border-right:none;
}

.info-icon{

    width:58px;
    height:58px;

    margin:auto auto 16px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef3ff;


    font-size:24px;
}

.info-label{

    color:#8b97a8;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:.06em;

    margin-bottom:10px;
}

.info-value{

    font-size:1.3em;
    font-weight:700;
}

.info-sub{

    margin-top:6px;

    color:#64748b;

    font-size:18px;
}

/* =======================================================
    RELATED
======================================================= */

.related{

    margin:28px;

    border-radius:20px;

    background:#f8fbff;

    border:1px solid var(--border);

    padding:24px 30px;

    display:flex;

    gap:18px;

    align-items:flex-start;
}

.related-icon{

    width:54px;
    height:54px;

    border-radius:50%;

    background:#e8f1ff;

    color:#3366ff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;
}

.related-title{

    font-size:24px;
    font-weight:700;
    margin-bottom:8px;
}

.related-links{

    color:#64748b;
    font-size:18px;
}

.related-links span{

    margin:0 10px;
}

/* =======================================================
    RESPONSIVE
======================================================= */

@media(max-width:1200px){

    .alert-top{
        grid-template-columns:1fr;
    }

    .info-row{
        grid-template-columns:repeat(2,1fr);
    }

    .airport-card{
        width:90%;
    }

    .alert-title {
        font-size:2.5em;
    }
}


@media(max-width:500px){

    body {
        padding: 10px;
        zoom: .8;
         min-height: 100dvh;
    }
    .brand {
        top: 12px;
    }
    .pax-table-wrap {
        max-width: 98dvw !important;
    }
    .alert-left {
        padding: 48px 25px;
    }
    .alert-label {
        zoom: .7;
    }  
    .alert-title {
        font-size: 1.5em;      
    }
    .alert-description, #advice {
        font-size: 1em; 
        color: #111;     
    }
    .airport-card {
        zoom: .8;
    }
}    

/* ========================================================
    BUTTONS
======================================================== */ 
.btn-low{
    background:var(--risk-low);
    border:2px solid var(--risk-low-border);
    color: white;
}

.btn-moderate{
    background:var(--risk-moderate);
    border:2px solid var(--risk-moderate-border);
    color: white;
}

.btn-medium{
    background:var(--risk-medium);
    border:2px solid var(--risk-medium-border);
    color: white;
}

.btn-high{
    background:var(--risk-high);
    border:2px solid var(--risk-high-border);
    color: white;
}

.btn-extreme{
    background:var(--risk-extreme);
    border:2px solid var(--risk-extreme-border);
    color: white;
}


/* ========================================================
    BRAND
======================================================== */ 
pta {
    background: #CC0000;
    color: #FFF;
    border-radius: 5px;
    padding: 3px 10px;
    text-transform: none !important;
}    

#CR {
    font-size: .7em;
    margin: 45px 30px 25px 30px;
    color: #888;
}    


/* ========================================================
    BRAND
======================================================== */ 
.Alert-nearby-card {
  margin-top: 42px;
  background: #ffffff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.Alert-nearby-header {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  margin-bottom: 12px;
}

.Alert-sub {
  font-size: 12px;
  color: #6b7280;
}

.Alert-nearby-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 350px;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}

.Alert-impact {
  display: grid;
  grid-template-columns:35px 1fr auto;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  transition: 0.2s ease;
}

.Alert-row {
  display: grid;
  grid-template-columns:35px 50px 1fr 75px auto;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  transition: 0.2s ease;
}

.Alert-more-info {
    display: flex;
    flex-direction: column;
    font-size: 11px;
}

.Alert-row:hover, .Alert-impact:hover {
  background: #fff7ed;
  text-shadow: 0px 0px 1px #000;
  cursor: pointer;
}

.Alert-row:hover *, .Alert-impact:hover * {
    --wx-surface: #ffffffaa;
}    


.Alert-row:first-child1 {
  background: #fff7ed; /* highlight closest */
}

.Alert-code {
  font-weight: 700;
  color: #111827;
}

#ImpactCities .Alert-code {
    align-self: baseline;
}

.Alert-imp {
    font-size: .8em;
    color: #333;
    background: #ff0000;
    color: white;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 50px;
    margin: 0px 10px 0px 0px;
    padding: 3px;
    align-self: normal;
}  

.Alert-let {
    --Color:#333;
    --BGColor:#ffcc00;
    font-size: .8em;
    color: var(--Color);
    background: var(--BGColor);
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 50px;
    margin: 0px 10px 0px 0px;
    padding: 3px;
    align-self: normal;
}    

.Alert-name {
    font-size: 14px;
}

.Alert-travel-card .Alert-name {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Alert-travel-card .Alert-name > div {
    display: flex; 
    flex-direction: column;
}

.Alert-meta {
  display: block;
  font-size: 12px;
  color: #6b7280;
}

.Alert-meta div span {
    margin-right: 20px;
}

.Alert-driveTime {
    color: #000 !important;
}    

.Alert-info {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    text-align: right;
    row-gap: 10px;
}        

.Alert-meta dtt {
    padding: 2px 8px;
    background-color: var(--BGColor);
    color: var(--Color);
    border-radius: 5px;
}
.Alert-row:hover .Alert-meta dtt {
    text-shadow: 0px 0px 1px var(--Color);
}

.Alert-distance {
  text-align: right;
}

.Alert-mi {
  font-weight: 600;
  display: block;
}

.Alert-km {
  font-size: 12px;
  color: #6b7280;
}


.Alert-coords,
.Alert-map-info {
  margin-top: 48px;
  margin-left: 10px;
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff44;
  backdrop-filter: blur(5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, .18);
  position: absolute;
  padding: 3px 10px;
  z-index: 20;
  border-radius: 10px;
}

.Alert-coords:hover,
.Alert-map-info:hover {
  text-decoration: none;
  text-shadow: 0px 0px 1px #2563eb;
  cursor: pointer;
}

.Alert-map-info {
    margin-top: 75px;
    margin-left: 10px;
}


/* ========================================================
    Passengers
======================================================== */ 

.pax-table-wrap {
  margin-top: 42px;
  background: #fff;
  border-radius: 12px;
  --box-shadow: inset 0 4px 14px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: 60dvw;
  border: 1px solid #e0e0e0;
}

.pax-table-title {
  padding: 12px 16px;
  background: #F2F2F2;
  border-bottom: 1px solid #e5e7eb;
  color: #000;
  font-weight: 800;
}

.pax-scroll {
    background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)),
    linear-gradient(to left, white 30%, rgba(255,255,255,0)) right;
  background-size: 20px 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}

.pax-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.pax-table thead {
  background: #fafafa;
  display: block;
}


.pax-table th:nth-child(1), .pax-table td:nth-child(1) {
    width: 150px;
    font-size: .8em !important;
    overflow: hidden;
}    
.pax-table th:nth-child(2), .pax-table td:nth-child(2) {
    width: 125px;
    font-size: .7em !important;
    word-break: break-word;
    overflow: hidden;
}    
.pax-table th:nth-child(3), .pax-table td:nth-child(3) {
    width: 60px;
    overflow: hidden;
}    
.pax-table th:nth-child(4), .pax-table td:nth-child(4) {
    width: 100px;
    overflow: hidden;
    font-size: .7em !important;
}    
.pax-table th:nth-child(5), .pax-table td:nth-child(5) {
    width: 100px;
    font-size: .8em !important;
    word-break: break-word;
    overflow: hidden;
} 
.pax-table th:nth-child(6), .pax-table td:nth-child(6) {
    width: 50px;
    font-size: .8em !important;
    white-space: nowrap;
    overflow: hidden;
}    



.pax-table th {
  text-align: left;
  padding: 10px 7px;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #eee;
}

.pax-table td {
  padding: 12px 7px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.pax-table tr:hover {
  background: #fff7ed;
  cursor: default;
  text-shadow: 0px 0px 1px #000 !important;
}

.pax-table tbody {
    max-height: 400px;
    min-width: 500px;
    overflow-y: auto;
    display: block;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}

.pax-traveler {
  font-weight: 600;
  color: #222;
}

.pax-meta {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

.pax-status {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.pax-status.active {
  background: #e6f4ea;
  color: #1e7e34;
}

.pax-supplier {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    text-align: center;
}

.pax-supplier .cancelled-pnr {
    background-color: var(--closed);
    color: white;
    border-radius: 3px;
    padding: 2px 6px;
    margin-top: 3px;
}

PxCnt {
    font-size: 1.3em;
    float: right;
    color: #6b7280;
}    

.RenPol_DT_Ven_Logo {
    background-color: #00000010;
    box-sizing: content-box;
    border-radius: 100%;
    width: 1.7em !important;
    height: 1.7em !important;
    padding: 0em;
    object-fit: contain;
  }

.Alert-Imapct-Icons {
    margin-top: 25px;
}
.Alert-Imapct-Icons span[onclick^="open"] {
    margin:0px 2px;
    border: 1px solid #DDD;
    padding: 5px;
    border-radius: 10px;
    color: #555;
}    

.Alert-Imapct-Icons span[onclick^="open"]:hover {
    position: relative;
    --text-shadow: 0px 0px 1px #ffcc00 !important;
    z-index: 10;
    color: #000;
    background-color: #ffcc00;
}


/* ========================================================
    Vendors
======================================================== */ 
.vendor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
}

.vendor-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 75px;
    height: 75px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
    transition: box-shadow 0.2s ease;
    overflow: hidden;
}

.vendor-tile:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.vendor-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 4px;
}

.vendor-name {
    font-size: 10px;
    color: #333333;
    font-weight: 500;
}

rad {
    margin-left: 25px;
    font-weight: 400 !important;
    font-size: .8em;
}    
#impact_radius_MI, #impact_radius_KM {
    font-weight: 600;
}    


/* ========================================================
    Nearest Travel Points
======================================================== */ 
.Alert-Popout {
    cursor: pointer;
}
.top-cities.popped {
    box-shadow: 0px 0px 13px 0px #00000033
}


/* ========================================================
    Weather
======================================================== */ 
.weather-info {
  --wx-ink: #10233B;
  --wx-ink-soft: #55708C;
  --wx-ink-faint: #000000AA;
  --wx-sun: #F5A93F;
  --wx-surface: #F2F7FBAA;
  --wx-divider: #E4ECF3;

  width: 100%;
  max-width: 620px;
  border-radius: 16px;
  box-shadow: 0px 0px 10px 0px #00000011;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  box-sizing: border-box;
  overflow-x: auto;
  margin-top: 2rem;
  letter-spacing: .3px;
}


.weather-info * {
  box-sizing: border-box;
}

/* ---- time-of-day bar ---- */
.weather-info-daybar {
  position: relative;
  height: 4px;
  background: linear-gradient(
    90deg,
    #1B3A66 0%,
    #F6B26B 22%,
    #4FA8E0 45%,
    #4FA8E0 60%,
    #E0724F 80%,
    #1B3A66 100%
  );
}

.weather-info-daybar-marker {
  position: absolute;
  top: 50%;
  left: var(--day-progress, 50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 1px 3px rgba(16,35,59,0.4);
  transform: translate(-50%, -50%);
}

/* ---- single horizontal row ---- */
.weather-info-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  flex-wrap: wrap;
}

.weather-info-temp-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.weather-info-temperature {
  /*font-family: 'Fraunces', Georgia, serif;*/
  font-weight: 600;
  font-size: 2.3em;
  line-height: 1;
  color: var(--wx-ink);
  letter-spacing: -0.02em;
}

.weather-info-feels-like-row {
  font-size: 11.5px;
  color: var(--wx-ink-faint);
  white-space: nowrap;
}

.weather-info-feels-like {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: var(--wx-ink-soft);
}

.weather-info-description {
  display: flex;
  align-items: center;
  gap: 0px;
  flex-shrink: 0;
  padding-right: 14px;
  border-right: 1px solid var(--wx-divider);
  flex-direction: column;
}

.weather-info-icon {
  width: 4em;
  height: 4em;
  object-fit: contain;
  filter: drop-shadow(0px 0px 1.5px #00000088);
   margin-top: -15px;
}

#TopCities .weather-info-icon{
    margin-top: -0px;
}    

.weather-info-description span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--wx-ink-soft);
  word-wrap: break-word;
  margin-top: -10px;
  text-transform: capitalize;
}

/* ---- stat chips, inline ---- */
.weather-info-other {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.weather-info-stat {
  background: var(--wx-surface);
  border-radius: 5px;
  padding: 6px 10px;
  text-align: center;
  flex: 1;
  min-width: 45px;
}

.weather-info-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wx-ink-faint);
  margin-bottom: 2px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.weather-info-high,
.weather-info-low,
.weather-info-windspeed,
.weather-info-humidity {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--wx-ink);
  white-space: nowrap;
}

.weather-info-stat.wind {
    min-width: 65px;
}    

@media (max-width: 875px) {
  .weather-info-row {
    padding: 12px 16px;
  }
  .weather-info-description {
    border-right: none;
    padding-right: 0;
  }
  .weather-info-other {
    flex-basis: 100%;
    order: 3;
  }
  .weather-info-temperature {
    font-size: 34px;
  }
}

.weather-info.condense .weather-info-daybar,
.weather-info.condense .weather-info-description span,
.weather-info.condense .weather-info-other .high,
.weather-info.condense .weather-info-other .low,
.weather-info.condense .weather-info-other .humid {
    display: none;
}

.weather-info.condense {
    box-shadow: none;
    margin-top: 0;
    float: right;
    width: auto;
    margin-right: 16px;
}
.weather-info.condense .weather-info-description {
    padding-right: 0;
    border-right: none;
}
.weather-info.condense .weather-info-description .weather-info-icon {
    margin-right: 5px;
}
.weather-info.condense .weather-info-row {
    gap: 0;
}
.weather-info.condense .weather-info-row {
    padding: 0
}
.weather-info.condense .weather-info-temperature {
    font-size: 16px;
}
.weather-info.condense .weather-info-stat {
    max-width: 60px;
}


/* =========================================================
    TOAST NOTIFICATIONS
========================================================= */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999999;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1F2937;
    color: #F9FAFB;
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.45);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    max-width: 360px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    line-height: normal !important;
    border-radius: 10px;
}

.toast.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast.toast-leaving {
    opacity: 0;
    transform: translateY(12px);
}

.toast-message {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.toast-action-btn {
    flex-shrink: 0;
    background: #3B82F6;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.toast-action-btn:hover {
    background: #2563EB;
}

.toast-close-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
}

.toast-close-btn:hover {
    color: #F9FAFB;
}

.toast-timestamp {
    font-size: .6em;
    color: #999;
    font-weight: 500;
}



/* ========================================================
    Preloader
======================================================== */ 
.overlay {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    z-index: 99999;
}

body:has(.show) {
    overflow: hidden;
}
.show {
    display: flex;
}
.puff-out-center {
    -webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
            animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
/**
* ----------------------------------------
* animation puff-out-center
* ----------------------------------------
*/
@-webkit-keyframes puff-out-center {
0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
}
100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
}
}
@keyframes puff-out-center {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(2);
                transform: scale(2);
        -webkit-filter: blur(4px);
                filter: blur(4px);
        opacity: 0;
    }
}



.status.active .status-dot {
  animation: pulseSoft 1.8s ease-in-out infinite;
}

@keyframes pulseSoft {
  0%   { transform: scale(1);   opacity: 0.2; }
  50%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1);   opacity: 0.2; }
}