/* Get App (Phase 2 PRD): the header link and QR popover, the sidebar QR card and the homepage
   banner. Fonts follow Figma: Open Sans for the header link and popover title, Inter for the
   card and banner. */

/* Position 1: header link (PRD GA1), Open Sans SemiBold 13px. */
.mdb-getapp {
  position: relative;
}

.header-menus > .mdb-getapp {
  margin: auto 8px auto 0;
}

.mdb-getapp__link {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.header-menus > .mdb-getapp > .mdb-getapp__link {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  font-weight: 600;
  line-height: 18.59px;
  letter-spacing: -0.26px;
}

/* No hover or visited colour change (the theme's a:hover is blue); hovering only opens the popover. */
.header-menus > .mdb-getapp > .mdb-getapp__link:hover,
.header-menus > .mdb-getapp > .mdb-getapp__link:visited {
  color: rgba(0, 0, 0, 0.87);
}

.mdb-getapp__icon {
  flex: none;
}

.mdb-getapp__popover {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1000;
  padding-top: 4px;
  transform: translateX(-50%);
}

@media (hover: hover) {
  .mdb-getapp--desktop:hover .mdb-getapp__popover,
  .mdb-getapp--desktop.is-open .mdb-getapp__popover {
    display: block;
  }

  /* Closed with Escape while the mouse is still over it (set by get-app.js). */
  .mdb-getapp--desktop.is-dismissed .mdb-getapp__popover {
    display: none;
  }
}

/* The popover reuses the values of mudah.my's header popover (md-remote-component
   Header/style.tsx), which is 206px wide. The design shows it smaller, at 169.4px, so the card is
   zoomed to that size rather than recalculating every value. */
.mdb-getapp__card {
  zoom: 0.8224; /* 169.4px design width ÷ 206px source width */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 206px;
  box-sizing: border-box;
  padding: 12px 12px 8px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.mdb-getapp__title {
  margin: 0;
  color: rgba(0, 0, 0, 0.87);
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.32px;
}

.mdb-getapp__qr {
  padding: 12px;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 7.083px 14.167px -3.542px rgba(16, 24, 40, 0.1), 0 3.542px 7.083px -3.542px rgba(16, 24, 40, 0.06);
  line-height: 0;
}

.mdb-getapp__qr-box {
  padding: 11px; /* the source's 4px box padding plus its 8px wrapper, less 1px */
  border: 2px dashed rgba(0, 0, 0, 0.87);
  border-radius: 14px;
}

.mdb-getapp-qr {
  display: block;
  max-width: none;
  image-rendering: pixelated; /* keeps the QR code's squares sharp when scaled */
}

.mdb-getapp__rating {
  display: block;
  margin: 4px 0; /* plus the card's 4px gap, giving 8px above and below as in the source */
}

.mdb-getapp__stores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mdb-getapp__stores img {
  display: block;
  max-width: none;
}

/* Mobile header (red bar): the link goes straight to the app store through Airbridge (PRD GA4, GA5). */
.mdb-getapp--mobile {
  float: left;
  height: 42px;
}

.mdb-getapp--mobile .mdb-getapp__link {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  padding: 0 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.26px;
  text-decoration: none;
}

.mdb-getapp--mobile .mdb-getapp__link:hover,
.mdb-getapp--mobile .mdb-getapp__link:visited {
  color: #fff;
}

/* Small screens: icon only, so the link does not overlap the logo (the label stays for screen readers).
   BM's label ("Dapatkan Apl") is longer, so BM switches to the icon at a wider width. */
@media only screen and (max-width: 359px) {
  .mdb-getapp--mobile .mdb-getapp__link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media only screen and (max-width: 389px) {
  .mdb-getapp--mobile .mdb-getapp__link span:lang(ms) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Position 2: sidebar QR card (PRD GB1–GB3). */
.sidebar .widget.mdb-getapp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 16px;
  border-radius: 8px;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}

.sidebar .widget .mdb-getapp-card__title {
  margin: 0 0 4px; /* plus the card's 4px gap, giving the design's 8px */
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
}

.sidebar .widget .mdb-getapp-card__text {
  width: 276px; /* slightly wider than the card's content box, to match the design's line breaks */
  margin: 0 -4px;
  color: #000;
  font-size: 12px;
  line-height: 18px;
}

/* QR box in the style of mudah.my's ad-page QR, scaled to the design's slot: 92px, with a thin
   dashed border and 9.5px corners. */
.mdb-getapp-card__qr {
  margin: 3px 0;
  padding: 7px;
  border: 1px dashed rgba(0, 0, 0, 0.87);
  border-radius: 9.5px;
  line-height: 0;
}

.sidebar .widget .mdb-getapp-card__or {
  margin: 0;
  padding: 4px 0;
  color: #a8a8a8;
  font-size: 12px;
  line-height: 18px;
}

.mdb-getapp-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mdb-getapp-badges img {
  display: block;
  width: auto;
  height: 36px;
}

.mdb-getapp-badges__link {
  line-height: 0;
}

/* Sticky while the sidebar is its own column (PRD GB2). The columns become a flex row so the
   sidebar is as tall as the content, letting the card stay in view down to the footer. */
@media only screen and (min-width: 960px) {
  .site-content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  .site-content > #primary {
    min-width: 0;
  }

  .site-content > .sidebar {
    flex: none;
  }

  .site-content::before,
  .site-content::after {
    display: none;
  }

  .sidebar .widget.mdb-getapp-card {
    position: sticky;
    top: 16px;
    z-index: 2;
  }
}

/* Mobile: the QR card is replaced by the compact mobile card. The sidebar stacks below the
   articles on mobile, so the card appears at the bottom of the page, above the footer. */
.sidebar .widget.mdb-getapp-mobile-card {
  display: none;
}

@media only screen and (max-width: 768px) { /* the theme's mobile header switch */
  .sidebar .widget.mdb-getapp-card {
    display: none;
  }

  .sidebar .widget.mdb-getapp-mobile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 16px;
    border-radius: 8px;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
  }

  .sidebar .widget .mdb-getapp-mobile-card__title {
    max-width: 321px; /* the design's text width, so the line break stays the same on wider screens */
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
  }

  .mdb-getapp-mobile-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 98px;
    border-radius: 15.223px;
    background-color: #fff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  }

  .mdb-getapp-mobile-card__icon img {
    display: block;
    width: 78.49px;
    height: 61.26px;
  }

  .mdb-getapp-mobile-card .mdb-getapp-badges {
    gap: 8px;
  }
}

/* Position 3: homepage banner (PRD GC1, GC8). The default banner follows the Figma app banner design. */
.mdb-getapp-banner {
  display: block;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 20px;
  background-color: #b41927;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}

/* Stays white when visited or hovered (the theme's a:visited is #222). */
.mdb-getapp-banner:visited,
.mdb-getapp-banner:hover,
.mdb-getapp-banner:focus {
  color: #fff;
}

/* The article card above the banner: no divider, and the same 30px gap as below the banner. */
.content-list .hentry:has(+ .mdb-getapp-banner) {
  border-bottom: none;
  padding-bottom: 0;
}

.mdb-getapp-banner--image {
  background-color: transparent;
  line-height: 0;
}

.mdb-getapp-banner--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* The default banner is designed at 740px wide. On narrower screens it scales down as a whole,
   like the mobile design: each size is min(design px, the same share of the banner's width),
   where 1px = 0.13514cqw. Only the body text has a minimum size, so it stays readable (PRD GC8).
   Each value is preceded by a plain px fallback for browsers without container query units. */
.mdb-getapp-banner:not(.mdb-getapp-banner--image) {
  container-type: inline-size;
}

.mdb-getapp-banner__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  gap: min(10px, 1.351cqw);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 68%;
  min-height: 244px;
  min-height: min(244px, 32.973cqw);
  padding: 15px 0 15px 40.5px;
  padding: min(15px, 2.027cqw) 0 min(15px, 2.027cqw) min(40.5px, 5.473cqw);
}

.mdb-getapp-banner__logo {
  width: 162px;
  width: min(162px, 21.892cqw);
  height: auto;
}

.mdb-getapp-banner__title {
  font-size: 30px;
  font-size: min(30px, 4.054cqw);
  font-weight: bold;
  line-height: 1.2;
}

.mdb-getapp-banner__row {
  display: flex;
  align-items: center;
  gap: 14px;
  gap: min(14px, 1.892cqw);
}

.mdb-getapp-banner__qr {
  flex: none;
  padding: 8px;
  padding: min(8px, 1.081cqw);
  border-radius: 8px;
  border-radius: min(8px, 1.081cqw);
  background-color: #fff;
  line-height: 0;
}

.mdb-getapp-banner__qr .mdb-getapp-qr {
  width: 64px;
  width: min(64px, 8.649cqw);
  height: auto;
}

.mdb-getapp-banner__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  gap: min(8px, 1.081cqw);
}

.mdb-getapp-banner__body {
  font-size: 15px;
  font-size: max(10px, min(15px, 2.027cqw));
  font-weight: 500;
  line-height: 1.3;
}

.mdb-getapp-banner .mdb-getapp-badges {
  gap: 4px;
  gap: min(4px, 0.541cqw);
}

.mdb-getapp-banner .mdb-getapp-badges img {
  height: 36px;
  height: min(36px, 4.865cqw);
}

/* The device image is 222×278 on a 244px-high banner, so it intentionally runs off the bottom
   edge. It is sized by the banner's height (278 ÷ 244) rather than its width: on mobile the
   banner is relatively taller (because of the minimum text size), and a width-based size would
   stop short of the bottom. */
.mdb-getapp-banner__device {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 113.93%;
  max-width: none;
  filter: drop-shadow(4px 24px 34px rgba(0, 0, 0, 0.25));
}

@media only screen and (max-width: 768px) { /* the theme's mobile header switch */
  .mdb-getapp-banner {
    border-radius: 12px;
  }
}

/* Keyboard focus. The theme removes outlines (a:focus, button:focus { outline: 0 }), so these
   links get a visible focus ring back, for keyboard focus only (:focus-visible). The ring is
   white on the red mobile bar and banner. */
.mdb-getapp__link:focus-visible,
.mdb-getapp-badges__link:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.mdb-getapp--mobile .mdb-getapp__link:focus-visible,
.mdb-getapp-banner:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}