/* weather.css — Hamidiz Weather Widget */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap');

.hamidiz-weather *,
.hamidiz-weather *::before,
.hamidiz-weather *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.hamidiz-weather {
    --wx-bg1: #0d2137;
    --wx-bg2: #1a3a5c;
    --wx-accent: #38bdf8;
    --wx-text: #ffffff;
    --wx-muted: rgba(255,255,255,.55);
    --wx-card: rgba(255,255,255,.09);
    --wx-border: rgba(255,255,255,.14);
    --wx-r: 22px;
    --wx-dr: 14px;
    --hw-out-height: auto;
    --hw-out-width: 700px;
    --hw-padding: 20px;
    --hw-gap: 10px;
    --hw-days: 7;
    --hw-day-bg: .05;
    --hw-day-border: .35;
    --hw-line-opacity: .45;
    --hw-icon-size: 45px;
    --hw-main-icon-size: 90px;
    --hw-city-size: 50px;
    --hw-city-weight: 800;
    --hw-temp-size: 64px;
    --hw-cond-size: 14px;
    --hw-day-font: 13px;
    --hw-day-temp-font: 18px;
    display: block;
    width: 100%;
    font-family: Inter,Arial,sans-serif;
}

/* Main card */
    .hamidiz-weather .hw-card {
        max-width: var(--hw-out-width) !important;
        margin: 0 auto;
        padding: var(--hw-padding) !important;
        background: linear-gradient(145deg,var(--wx-bg1),var(--wx-bg2));
        border-radius: var(--wx-r);
        color: var(--wx-text);
        overflow: hidden;
        position: relative;
        box-shadow: 0 24px 72px rgba(0,0,0,.32);
        min-height: var(--hw-out-height, auto);
    }

.hamidiz-weather .hw-card::after{
  content:"";
  position:absolute;
  top:-55px;
  right:-55px;
  width:220px;
  height:220px;
  background:radial-gradient(circle,color-mix(in srgb,var(--wx-accent) 22%,transparent),transparent 70%);
  pointer-events:none;
  z-index:0;
}

.hamidiz-weather .hw-card > *{
  position:relative;
  z-index:1;
}

/* Text */
.hamidiz-weather .hw-city{
  font-size:var(--hw-city-size) !important;
  font-weight:var(--hw-city-weight) !important;
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--wx-text);
}

.hamidiz-weather .hw-city small,
.hamidiz-weather .hw-country{
  font-size:.42em;
  font-weight:700;
  color:var(--wx-muted);
  margin-left:6px;
  letter-spacing:0;
}

.hamidiz-weather .hw-cond{
  font-size:var(--hw-cond-size) !important;
  color:var(--wx-accent);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-top:5px;
}

.hamidiz-weather .hw-temp{
  font-size:var(--hw-temp-size) !important;
  font-weight:300;
  line-height:1;
  letter-spacing:-2px;
}

.hamidiz-weather .hw-temp sup{
  font-size:calc(var(--hw-temp-size) * .32);
  vertical-align:super;
  letter-spacing:0;
  font-weight:400;
}

/* Icons */
.hamidiz-weather .hw-icon-main{
  font-size:var(--hw-main-icon-size) !important;
  line-height:1;
  display:flex;
  align-items:center;
  filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--wx-accent) 35%,transparent));
}

.hamidiz-weather .hw-day-icon{
  font-size:var(--hw-icon-size) !important;
  line-height:1;
}

/* Pills */
.hamidiz-weather .hw-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

    .hamidiz-weather .hw-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255,255,255,var(--hw-day-bg));
        border: 1px solid var(--hw-day-border-rgba, rgba(255,255,255,var(--hw-day-border))) !important;
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 800;
        color: var(--wx-text);
    }

/* Days */
.hamidiz-weather .hw-days{
  display:grid;
  grid-template-columns:repeat(var(--hw-days),minmax(0,1fr)) !important;
  gap:var(--hw-gap) !important;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--hw-line-rgba, rgba(255,255,255,var(--hw-line-opacity))) !important;
}

    .hamidiz-weather .hw-day,
    .hamidiz-weather .hw-day.today {
        background: rgba(255,255,255,var(--hw-day-bg)) !important;
        border: 1px solid var(--hw-day-border-rgba, rgba(255,255,255,var(--hw-day-border))) !important;
        border-radius: var(--wx-dr) !important;
        padding: 11px 6px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        box-shadow: none !important;
    }

.hamidiz-weather .hw-day-name{
  font-size:var(--hw-day-font) !important;
  font-weight:900;
  color:var(--wx-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.hamidiz-weather .hw-hi{
  font-size:var(--hw-day-temp-font) !important;
  font-weight:900;
}

.hamidiz-weather .hw-lo{
  font-size:calc(var(--hw-day-temp-font) * .75) !important;
  color:var(--wx-muted);
  font-weight:800;
}

/* Date box */
.hamidiz-weather .hw-datebox{
  text-align:right;
}

.hamidiz-weather .hw-time{
  font-size:24px;
  font-weight:300;
  line-height:1;
}

.hamidiz-weather .hw-date{
  font-size:11px;
  color:var(--wx-muted);
  font-weight:800;
  margin-top:3px;
}

/* Source */
.hamidiz-weather .hw-source{
  margin-top:12px;
  font-size:10px;
  font-weight:800;
  color:var(--wx-muted);
  opacity:.65;
  text-align:right;
}

/* Compact */
.hamidiz-weather .hw-compact {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0 16px;
  align-items: start;
}

.hamidiz-weather .hw-compact > .hw-icon-main {
  grid-row: 1 / 3;
  align-self: center;
}

.hamidiz-weather .hw-compact > .hw-datebox {
  grid-column: 3;
  grid-row: 1;
  text-align: center;
}

.hamidiz-weather .hw-compact > .hw-temp {
  grid-column: 4;
  grid-row: 1;
  text-align: right;
  align-self: center;
}

.hamidiz-weather .hw-compact > .hw-pills,
.hamidiz-weather .hw-compact > .hw-days,
.hamidiz-weather .hw-compact > .hw-source {
  grid-column: 1 / 5;
}

/* Seven */
.hamidiz-weather .hw-seven .hw-seven-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}

.hamidiz-weather .hw-seven .hw-seven-left{
  flex:1;
  min-width:0;
}

.hamidiz-weather .hw-seven .hw-seven-right{
  text-align:right;
  flex-shrink:0;
}

/* Vertical */
.hamidiz-weather .hw-vertical .hw-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.hamidiz-weather .hw-vertical .hw-head-left {
  flex-shrink: 0;
}

.hamidiz-weather .hw-vertical .hw-head-right {
  flex: 1;
  min-width: 0;
}

.hamidiz-weather .hw-vertical .hw-days {
  grid-template-columns: 1fr !important;
  margin-top: 14px;
}

.hamidiz-weather .hw-vertical .hw-day {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 10px 14px;
}

.hamidiz-weather .hw-vertical .hw-day-name {
  min-width: 44px;
  text-align: left;
}

.hamidiz-weather .hw-vertical .hw-day-icon {
  margin: 0 auto;
}

.hamidiz-weather .hw-vertical .hw-hi,
.hamidiz-weather .hw-vertical .hw-lo {
  min-width: 36px;
  text-align: right;
}

/* Horizontal — fixed: no scroll, days fill available space */
.hamidiz-weather .hw-horizontal{
  display:flex;
  align-items:stretch;
  gap:var(--hw-gap);
  overflow:hidden;
  width:100%;
}

.hamidiz-weather .hw-card.hw-horizontal{
  width:100%;
  max-width:var(--hw-out-width) !important;
}

.hamidiz-weather .hw-horizontal .hw-head{
  flex-shrink:0;
  min-width:160px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hamidiz-weather .hw-horizontal .hw-city{
  font-size:calc(var(--hw-city-size) * .62) !important;
}

.hamidiz-weather .hw-horizontal .hw-temp{
  font-size:calc(var(--hw-temp-size) * .62) !important;
}

.hamidiz-weather .hw-horizontal .hw-days{
  display:flex !important;
  grid-template-columns:none !important;
  flex:1;
  min-width:0;
  border-top:0 !important;
  margin-top:0;
  padding-top:0;
  overflow:hidden;
  gap:var(--hw-gap);
}

.hamidiz-weather .hw-horizontal .hw-day{
  flex:1;
  min-width:0;
  flex-shrink:1;
}

/* Minimal */
.hamidiz-weather .hw-minimal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.hamidiz-weather .hw-minimal .hw-days{
  display:none;
}

/* Hero */
.hamidiz-weather .hw-hero {
  display: block;
}

.hamidiz-weather .hw-hero .hw-hero-top {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
}

.hamidiz-weather .hw-hero .hw-hero-icon {
  flex-shrink: 0;
}

.hamidiz-weather .hw-hero .hw-hero-main {
  flex: 1;
  min-width: 0;
}

.hamidiz-weather .hw-hero .hw-pills {
  margin-bottom: 16px;
  margin-top: 0;
}

.hamidiz-weather .hw-hero .hw-days {
  margin-top: 0;
}

/* Split */
.hamidiz-weather .hw-split {
  display: grid !important;
  grid-template-columns: minmax(100px, .40fr) 1fr;
  gap: 0;
  padding: 0 !important;
}

.hamidiz-weather .hw-split .hw-split-left {
  padding: var(--hw-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,.10);
}

.hamidiz-weather .hw-split .hw-split-left .hw-icon-main {
  margin-bottom: 4px;
}

.hamidiz-weather .hw-split .hw-split-left .hw-temp {
  margin-bottom: 8px;
}

.hamidiz-weather .hw-split .hw-split-right {
  padding: var(--hw-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hamidiz-weather .hw-split .hw-split-right .hw-days {
  margin-top: 0;
  padding-top: 0;
  border-top: none !important;
}

.hamidiz-weather .hw-split .hw-split-right .hw-pills {
  margin-top: 14px;
}

/* Tile */
.hamidiz-weather .hw-tile .hw-tile-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.hamidiz-weather .hw-tile .hw-tile-cell.main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hamidiz-weather .hw-tile .hw-tile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hamidiz-weather .hw-tile .hw-tile-cell {
  background: rgba(255,255,255,var(--hw-day-bg));
  border: 1px solid rgba(255,255,255,var(--hw-day-border));
  border-radius: var(--wx-dr);
  padding: 10px 12px;
}

.hamidiz-weather .hw-tile .hw-tile-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--wx-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

.hamidiz-weather .hw-tile .hw-tile-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--wx-accent);
}

.hamidiz-weather .hw-tile .hw-days {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,var(--hw-line-opacity));
  margin-top: 0;
}

/* Glass */
.hamidiz-weather .hw-card.hw-glass .hw-glass-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,var(--hw-line-opacity));
}

.hamidiz-weather .hw-card.hw-glass .hw-glass-left {
  flex: 1;
  min-width: 0;
}

.hamidiz-weather .hw-card.hw-glass .hw-glass-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.hamidiz-weather .hw-card.hw-glass .hw-glass-right .hw-icon-main {
  order: 1;
}

.hamidiz-weather .hw-card.hw-glass .hw-glass-right .hw-temp {
  order: 2;
}
.hamidiz-weather .hw-card.hw-glass .hw-days {
  border-top: none !important;
  padding-top: 0;
  margin-top: 0;
}

/* Loading / error */
.hamidiz-weather .hw-loading{
  padding:32px;
  text-align:center;
  color:rgba(255,255,255,.42);
  font-size:14px;
}

.hamidiz-weather .hw-error{
  padding:20px;
  color:#f87171;
  font-size:13px;
  text-align:center;
}

/* Responsive */
@media(max-width:700px){
  .hamidiz-weather .hw-card{
    max-width:100% !important;
  }

  .hamidiz-weather .hw-seven .hw-seven-top,
  .hamidiz-weather .hw-hero,
  .hamidiz-weather .hw-tile-main{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  .hamidiz-weather .hw-seven .hw-seven-right{
    text-align:left;
  }

  .hamidiz-weather .hw-compact{
    grid-template-columns:1fr;
    text-align:left;
  }

  .hamidiz-weather .hw-compact > .hw-icon-main,
  .hamidiz-weather .hw-compact > .hw-pills,
  .hamidiz-weather .hw-compact > .hw-days,
  .hamidiz-weather .hw-compact > .hw-source{
    grid-column:1;
    grid-row:auto;
  }

  .hamidiz-weather .hw-datebox{
    text-align:left;
  }

  .hamidiz-weather .hw-days{
    grid-template-columns:repeat(var(--hw-days),minmax(0,1fr)) !important;
    overflow-x:auto;
  }

  .hamidiz-weather .hw-day{
    min-width:72px;
  }

  .hamidiz-weather .hw-split{
    grid-template-columns:1fr;
  }

  .hamidiz-weather .hw-minimal{
    flex-direction:column;
    text-align:center;
  }
}

/* Builder select dark fix */
.form-select{
  background-color:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

.form-select option{
  background:#0f172a !important;
  color:#fff !important;
}