/* ========================================
   METEOMATICS WEATHER WIDGET CSS
   ======================================== */

/* ========================================
   UTILITY CLASSES
   ======================================== */
.ml-4 {
  margin-left: 16px;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) 
             rotate(var(--tw-rotate)) 
             skew(var(--tw-skew-x)) 
             skewY(var(--tw-skew-y)) 
             scaleX(var(--tw-scale-x)) 
             scaleY(var(--tw-scale-y));
}

/* ========================================
   FONT FACE DEFINITIONS
   ======================================== */
@font-face {
  font-family: Avantt;
  font-weight: 500;
  src: url(/v2/fonts/Avantt-Medium.woff2) format("woff2"),
       url(/v2/fonts/Avantt-Medium.woff) format("woff");
  font-display: swap;
}

@font-face {
  font-family: Avantt;
  font-weight: 600;
  src: url(/v2/fonts/Avantt-SemiBold.woff2) format("woff2"),
       url(/v2/fonts/Avantt-SemiBold.woff) format("woff");
  font-display: swap;
}

/* ========================================
   MAIN WIDGET CONTAINER
   ======================================== */
.mm-widget__wrap {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-radius: 24px;
  padding: 20px;
  margin-left: 40px;
  font-family: Avantt, ui-sans-serif, system-ui, sans-serif, 
               "Apple Color Emoji", "Segoe UI Emoji", 
               Segoe UI Symbol, "Noto Color Emoji";
}

/* ========================================
   WIDGET LAYOUT VARIATIONS
   ======================================== */
/* Vertical Layout - Increased dimensions */
.mm-widget__vertical {
  height: 350px;
  width: 350px;
  flex-direction: column;
}

/* Horizontal Layout - Increased dimensions */
.mm-widget__horizontal {
  height: 250px;
  min-width: 320px;
  max-width: 650px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* ========================================
   HEADER SECTION
   ======================================== */
.mm-widget__header-wrap {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  line-height: 30px;
}

.mm-widget__header-text {
  font-size: 22px;
  line-height: 30px;
}

/* ========================================
   COLOR THEMES
   ======================================== */
/* Light Theme */
.mm-widget__color-light {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Dark Theme */
.mm-widget__color-dark {
  --tw-text-opacity: 1;
  color: rgb(0 54 82 / var(--tw-text-opacity));
}

/* ========================================
   BACKGROUND THEMES
   ======================================== */
.mm-widget__bg-primary {
  --tw-bg-opacity: 1;
  background-color: #AA9050;
}

.mm-widget__bg-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.mm-widget__bg-light {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.mm-widget__bg-gray {
  --tw-bg-opacity: 1;
  background-color: rgb(229 237 234 / var(--tw-bg-opacity));
}

/* ========================================
   HORIZONTAL LAYOUT COMPONENTS
   ======================================== */
.mm-widget__horizontal-inner-wrap {
  box-sizing: border-box;
  width: 50%;
  flex-grow: 1;
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: #AA9050;
  padding-right: 20px;
  border-right-style: solid;
}

.mm-widget__temp-horizontal-wrap {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
}

/* ========================================
   ICON STYLING
   ======================================== */
.mm-widget__icon-wrap {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mm-widget__icon {
  height: 80px;
  width: 80px;
}

@media (min-width: 768px) {
  .mm-widget__icon {
    height: 100px;
    width: 100px;
  }
}

/* ========================================
   HORIZONTAL FORECAST SECTION
   ======================================== */
.mm-widget__horizontal-forecast-wrap {
  box-sizing: border-box;
  display: flex;
  width: 50%;
  flex-grow: 1;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 20px;
}

.mm-widget__horizontal-forecast-inner-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ========================================
   TEMPERATURE DISPLAY
   ======================================== */
.mm-widget__temp-value {
  flex-grow: 1;
  font-size: 84px;
  line-height: 1;
  font-weight: 600;
}

/* ========================================
   FORECAST ROWS AND COLUMNS
   ======================================== */
.mm-widget__forecast-row {
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.mm-widget__forecast-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.mm-widget__forecast-row-icon {
  order: 2;
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
}

.mm-widget__forecast-col-icon {
  display: flex;
  justify-content: center;
}

.mm-widget__forecast-day {
  flex: 1 1 0%;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
}

.mm-widget__forecast-value-wrap {
  order: 3;
  flex: 1 1 0%;
  font-size: 16px;
  line-height: 20px;
}

.mm-widget__forecast-row-value {
  text-align: right;
}

.mm-widget__forecast-col-value {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 20px;
}

.mm-widget__forecast-value-divider {
  margin-left: 6px;
  margin-right: 6px;
  display: inline-block;
  height: 18px;
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: #AA9050;
}

/* ========================================
   COPYRIGHT SECTION
   ======================================== */
.mm-widget__copyright {
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  --tw-text-opacity: 1;
  color: rgb(209 223 219 / var(--tw-text-opacity));
}

.mm-widget__copyright a {
  border-width: 0px;
  --tw-text-opacity: 1;
  color: rgb(209 223 219 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

.mm-widget__copyright-dark,
.mm-widget__copyright-dark a {
  --tw-text-opacity: 1;
  color: rgb(130 158 149 / var(--tw-text-opacity));
}

/* ========================================
   VERTICAL LAYOUT COMPONENTS
   ======================================== */
.mm-widget__temp-vertical-wrap {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: #AA9050;
  padding-bottom: 16px;
  border-bottom-style: solid;
}

.mm-widget__temp-range-wrap {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mm-widget__temp-range-icon {
  display: inline-block;
}

.mm-widget__vertical-forecast-wrap {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

/* ========================================
   NARROW WIDGET VARIATIONS
   ======================================== */
.mm-widget__wrap-narrow .mm-widget__temp-value {
  font-size: 56px;
  line-height: 62px;
}

.mm-widget__wrap-narrow .mm-widget__icon {
  height: 56px;
  width: 56px;
}

.mm-widget__wrap-narrow .mm-widget__header-wrap {
  font-size: 16px;
  line-height: 22px;
}

.mm-widget__wrap-narrow .mm-widget__forecast-day,
.mm-widget__wrap-narrow .mm-widget__forecast-value-wrap {
  font-size: 14px;
}

.mm-widget__wrap-narrow .mm-widget__forecast-row-icon {
  height: 28px;
  width: 28px;
}

.mm-widget__wrap-narrow .mm-widget__horizontal-inner-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* ========================================
   ERROR STATE
   ======================================== */
.mm-widget__error-wrap {
  margin-top: -16px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity));
  white-space: pre-wrap;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media all and (max-width: 578px) {
  .mm-widget__temp-value {
    font-size: 60px;
  }
  
  .mm-widget__forecast-day,
  .mm-widget__forecast-value-wrap {
    font-size: 14px;
  }
  
  .mm-widget__vertical {
    width: 300px;
  }
  
  .mm-widget__horizontal {
    min-width: 280px;
    max-width: 400px;
  }
}