.weather-page { background: #f7f9fc; }
.weather-page.weather-modal-open { overflow:hidden; }
.weather-loading-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; background:rgba(5,28,62,.64); backdrop-filter:blur(5px); }
.weather-loading-modal[hidden] { display:none; }
.weather-loading-card { width:min(100%,460px); padding:38px 36px 34px; border:1px solid rgba(255,255,255,.65); border-radius:22px; background:#fff; box-shadow:0 28px 70px rgba(5,28,62,.3); text-align:center; }
.weather-loading-icon { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 22px; border-radius:50%; color:#fff; background:linear-gradient(145deg,#1763d6,#31a5e7); box-shadow:0 12px 28px rgba(23,99,214,.3); font-size:39px; font-weight:700; }
.weather-loading-icon span { animation:weather-wave 1.2s ease-in-out infinite; }
.weather-loading-card h2 { margin:7px 0 12px; color:#17243a; font-size:27px; }
.weather-loading-card > p:last-of-type { margin:0; color:#667085; line-height:1.65; }
.weather-loading-progress { height:6px; margin-top:26px; overflow:hidden; border-radius:999px; background:#e7eef8; }
.weather-loading-progress span { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1763d6,#31a5e7); transform-origin:left; animation:weather-loading-progress 5s linear forwards; }
@keyframes weather-wave { 50% { transform:translateY(-4px); } }
@keyframes weather-loading-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce) { .weather-loading-icon span { animation:none; } }
.weather-content { padding: 24px 30px 40px; max-width: 1540px; margin: 0 auto; }
.breadcrumbs { display:flex; gap:8px; align-items:center; color:#667085; font-size:13px; margin-bottom:18px; }
.breadcrumbs a { color:#2563eb; text-decoration:none; }
.page-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:22px; }
.page-heading h1 { margin:4px 0 7px; font-size:34px; line-height:1.1; }
.page-heading p { margin:0; color:#667085; }
.eyebrow { margin:0; color:#2563eb !important; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.refresh-button { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border:1px solid #d9e2ef; border-radius:10px; color:#1d4ed8; background:#fff; font-weight:600; }
.refresh-button.is-loading span { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.forecast-status { margin:0 0 16px; padding:13px 16px; border:1px solid #cddfff; border-radius:12px; color:#1d4ed8; background:#eef5ff; font-weight:700; }
.weather-unavailable .forecast-status { border-color:#f7d7a8; color:#9a5b00; background:#fff7e8; }
.summary-hero { position:relative; min-height:390px; border-radius:20px; overflow:hidden; border:1px solid #cfdaea; box-shadow:0 18px 44px rgba(19,43,83,.12); background:#0e3567; }
.hero-image { position:absolute; inset:0; background-image:url('../assets/hero.jpg'); background-size:cover; background-position:center 32%; transform:scale(1.01); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,28,62,.94) 0%, rgba(6,34,72,.82) 37%, rgba(6,34,72,.18) 67%, rgba(6,34,72,.08) 100%); }
.hero-content { position:relative; z-index:1; max-width:690px; padding:48px; color:#fff; }
.location-label { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(255,255,255,.12); font-weight:600; margin-bottom:36px; }
.location-label span { color:#68b7ff; }
.forecast-label { margin:0 0 10px; color:#b9d8ff; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.hero-content h2 { margin:0; max-width:650px; font-size:42px; line-height:1.08; }
.hero-summary { max-width:610px; margin:18px 0 26px; color:#e8f1ff; font-size:17px; line-height:1.65; }
.condition-status { display:inline-flex; gap:9px; align-items:center; padding:12px 18px; border-radius:999px; background:#1674ea; box-shadow:0 9px 24px rgba(0,89,220,.32); font-weight:700; }
.condition-status span:first-child { width:23px; height:23px; display:grid; place-items:center; color:#14864b; background:#fff; border-radius:50%; }
.forecast-meta { display:grid; grid-template-columns:1fr 1fr 2fr; gap:16px; margin:20px 0 0; }
.forecast-meta > div { padding:18px 20px; border:1px solid #dfe6ef; border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.forecast-meta p:last-child { margin:4px 0 0; color:#263651; line-height:1.55; }
.forecast-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0; }
.forecast-card { position:relative; min-height:238px; display:flex; gap:16px; align-items:flex-start; padding:24px 22px 58px; border:1px solid #dfe6ef; border-radius:16px; background:#fff; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.forecast-icon { flex:0 0 auto; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; color:#1763d6; background:#eaf2ff; font-size:32px; font-weight:700; }
.card-label { margin:3px 0 7px !important; color:#667085 !important; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.forecast-card h3 { margin:0 0 10px; font-size:17px; }
.forecast-card p { margin:0; color:#5b6880; font-size:14px; line-height:1.6; }
.assessment { position:absolute; left:22px; right:22px; bottom:17px; display:flex; align-items:center; gap:8px; padding-top:13px; border-top:1px solid #e5eaf1; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.assessment::before { content:'✓'; width:21px; height:21px; display:grid; place-items:center; border:2px solid currentColor; border-radius:50%; font-size:12px; }
.assessment.positive { color:#169452; }
.assessment.neutral { color:#c77600; }
.assessment.negative { color:#c2410c; }
.weather-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr); gap:20px; margin-bottom:20px; }
.detail-panel,.advice-panel,.summary-panel { border:1px solid #dfe6ef; border-radius:18px; background:#fff; box-shadow:0 8px 25px rgba(15,23,42,.04); }
.detail-panel { padding:28px; }
.section-heading h2,.summary-panel h2,.advice-panel h2 { margin:5px 0 0; font-size:23px; }
.assessment-list { display:grid; margin-top:18px; }
.assessment-item { display:grid; grid-template-columns:44px 1fr; gap:17px; padding:19px 0; border-top:1px solid #edf0f4; }
.assessment-item:first-child { border-top:0; }
.assessment-item .number { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#1763d6; background:#eaf2ff; font-weight:700; }
.assessment-item h3 { margin:1px 0 6px; font-size:16px; }
.assessment-item p { margin:0; color:#667085; line-height:1.62; font-size:14px; }
.supported-by { margin:12px 0 0; padding-left:18px; color:#5b6880; font-size:13px; line-height:1.55; }
.supported-by li + li { margin-top:5px; }
.advice-panel { padding:28px; background:linear-gradient(150deg,#f7fbff,#eef5ff); border-color:#cddfff; }
.advice-icon { width:62px; height:62px; display:grid; place-items:center; margin-bottom:20px; border-radius:50%; background:#146ce0; font-size:27px; }
.advice-panel > p:not(.eyebrow) { color:#5d6b82; line-height:1.65; }
.advice-panel ul { display:grid; gap:11px; padding-left:21px; color:#263651; line-height:1.45; }
.summary-panel { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:28px; border-color:#bcd4ff; background:linear-gradient(90deg,#f2f7ff,#fff); }
.summary-mark { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#1763d6; font-size:27px; }
.summary-panel p:last-child { margin:10px 0 0; max-width:1080px; color:#53627a; line-height:1.65; }
.forecast-source { display:flex; justify-content:space-between; gap:20px; padding:17px 4px 0; color:#758198; font-size:12px; }
.forecast-source a { color:#2563eb; font-weight:700; text-decoration:none; }
.forecast-source a:not([href]) { color:#758198; cursor:not-allowed; }
@media (max-width:1150px) { .forecast-meta { grid-template-columns:1fr; } .forecast-grid { grid-template-columns:repeat(2,1fr); } .weather-layout { grid-template-columns:1fr; } }
@media (max-width:760px) { .weather-loading-card { padding:32px 24px 28px; } .weather-loading-card h2 { font-size:24px; } .weather-content { padding:20px 16px 32px; } .page-heading { align-items:flex-start; } .page-heading h1 { font-size:29px; } .refresh-button { white-space:nowrap; } .summary-hero { min-height:440px; } .hero-image { background-position:63% center; } .hero-shade { background:linear-gradient(90deg,rgba(5,28,62,.94),rgba(5,28,62,.76)); } .hero-content { padding:32px 24px; } .hero-content h2 { font-size:34px; } .forecast-grid { grid-template-columns:1fr; } .forecast-card { min-height:auto; } .summary-panel { grid-template-columns:1fr; } .forecast-source { flex-direction:column; } }