/* ===========================================
   Smart app banner — theme override
   Loaded AFTER smartbanner.min.css.

   The library positions every child absolutely with hard-coded offsets, which
   is why the default is cramped and misaligns as soon as the text length
   changes. This replaces that with flexbox and the site's own type and palette.

   It also fixes a bug in the shipped library CSS: `background:f9f9f1` is
   missing its "#", so the banner and its button render with no background at
   all. Both are set properly below.
   =========================================== */

.smartbanner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9998;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 70px;
  padding: 11px 14px 11px 8px;
  overflow: visible;
  background: #ffffff;
  border-bottom: 1px solid #dcdcdc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -- Close -- */
.smartbanner .smartbanner__exit,
.smartbanner.smartbanner--android .smartbanner__exit {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  margin: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .15s;
}
.smartbanner .smartbanner__exit:hover,
.smartbanner.smartbanner--android .smartbanner__exit:hover { background: #f0f0ea; }

/* the X itself: two 13px strokes centred in the 28px hit area */
.smartbanner .smartbanner__exit::before,
.smartbanner .smartbanner__exit::after,
.smartbanner.smartbanner--android .smartbanner__exit::before,
.smartbanner.smartbanner--android .smartbanner__exit::after {
  position: absolute;
  top: 7px;
  left: 13px;
  width: 1.5px;
  height: 14px;
  border-radius: 1px;
  background: #8a8a80;
  content: " ";
}
.smartbanner .smartbanner__exit::before { transform: rotate(45deg); }
.smartbanner .smartbanner__exit::after  { transform: rotate(-45deg); }

/* -- App icon -- */
.smartbanner .smartbanner__icon,
.smartbanner.smartbanner--android .smartbanner__icon {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* -- Text -- */
.smartbanner .smartbanner__info,
.smartbanner.smartbanner--android .smartbanner__info {
  position: relative;
  top: auto;
  left: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: auto;
  min-width: 0;
  height: auto;
  overflow: hidden;
  color: #1a1a1b;
  line-height: 1.3;
}
.smartbanner .smartbanner__info__title,
.smartbanner.smartbanner--android .smartbanner__info__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #1a1a1b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smartbanner .smartbanner__info__author,
.smartbanner .smartbanner__info__price,
.smartbanner.smartbanner--android .smartbanner__info__author,
.smartbanner.smartbanner--android .smartbanner__info__price {
  font-size: 12.5px;
  font-weight: 400;
  color: #6b6b63;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- Call to action -- */
.smartbanner .smartbanner__button,
.smartbanner.smartbanner--android .smartbanner__button {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0;
  min-width: 0;
  border-radius: 30px;
  background: none;
  box-shadow: none;
  text-decoration: none;
}
.smartbanner .smartbanner__button__label,
.smartbanner.smartbanner--android .smartbanner__button__label {
  display: block;
  padding: 8px 18px;
  border-radius: 30px;
  background: #1a1a1b;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
  transition: background .15s;
}
.smartbanner .smartbanner__button:hover .smartbanner__button__label,
.smartbanner.smartbanner--android .smartbanner__button__label:hover { background: #3a3a3b; }
.smartbanner .smartbanner__button:active .smartbanner__button__label { background: #000; }

/* -- Narrow phones -- */
@media (max-width: 400px) {
  .smartbanner { gap: 9px; padding: 10px 10px 10px 4px; min-height: 66px; }
  .smartbanner .smartbanner__icon,
  .smartbanner.smartbanner--android .smartbanner__icon { width: 42px; height: 42px; border-radius: 10px; }
  .smartbanner .smartbanner__info__title,
  .smartbanner.smartbanner--android .smartbanner__info__title { font-size: 14px; }
  .smartbanner .smartbanner__info__author,
  .smartbanner .smartbanner__info__price,
  .smartbanner.smartbanner--android .smartbanner__info__author,
  .smartbanner.smartbanner--android .smartbanner__info__price { font-size: 11.5px; }
  .smartbanner .smartbanner__button__label,
  .smartbanner.smartbanner--android .smartbanner__button__label { padding: 7px 14px; font-size: 12px; }
}

/* -- Android variant --
   The library's .smartbanner.smartbanner--android rules carry higher
   specificity than the base ones above, so these have to match it or Android
   keeps the stock grey background and a cyan tap state. */
.smartbanner.smartbanner--android {
  background: #ffffff;
  border-bottom: 1px solid #dcdcdc;
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.smartbanner.smartbanner--android .smartbanner__button__label:active,
.smartbanner.smartbanner--android .smartbanner__button__label:hover { background: #3a3a3b; }
.smartbanner.smartbanner--android .smartbanner__exit:active,
.smartbanner.smartbanner--android .smartbanner__exit:hover { background: #f0f0ea; color: inherit; }

/* -- Spacing: tighten the text against the icon --
   The library positions children absolutely (.smartbanner__info is left:100px,
   the button right:10px). Setting `left:auto` leaves those declarations live
   and only neutralises them; switching the children to `position:static` makes
   every offset the library ships completely inert, so the flex gaps below are
   the only thing controlling spacing.

   Container gap is dropped to 0 so each gap can be set individually — the text
   sits close to the icon, while the close button keeps its own breathing room. */
.smartbanner,
.smartbanner.smartbanner--android { gap: 0; }

.smartbanner .smartbanner__icon,
.smartbanner .smartbanner__info,
.smartbanner .smartbanner__button,
.smartbanner.smartbanner--android .smartbanner__icon,
.smartbanner.smartbanner--android .smartbanner__info,
.smartbanner.smartbanner--android .smartbanner__button {
  position: static;
}

.smartbanner .smartbanner__exit,
.smartbanner.smartbanner--android .smartbanner__exit { margin-right: 6px; }

.smartbanner .smartbanner__icon,
.smartbanner.smartbanner--android .smartbanner__icon { margin-right: 12px; }

.smartbanner .smartbanner__info,
.smartbanner.smartbanner--android .smartbanner__info {
  margin-right: 12px;
  padding-left: 0;
}

@media (max-width: 400px) {
  .smartbanner .smartbanner__icon,
  .smartbanner.smartbanner--android .smartbanner__icon { margin-right: 10px; }
  .smartbanner .smartbanner__info,
  .smartbanner.smartbanner--android .smartbanner__info { margin-right: 8px; }
}

/* -- Close the remaining gap, which is inside the artwork --
   connect-app.png carries ~22px of flat cream padding per side out of 128px.
   At a 48px box that is 8.2px of dead space on each side, which no margin can
   remove — it reads as a gap between the icon and the text.

   Zooming the background to 140% crops 9.6px per side, leaving ~2px of cream
   and letting the coloured squares fill the tile. border-radius re-rounds the
   cropped corners, so it still reads as an app icon.

   If the PNG is ever re-exported edge-to-edge, drop this back to `cover`. */
.smartbanner .smartbanner__icon,
.smartbanner.smartbanner--android .smartbanner__icon {
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}

/* -- Left-align the text against the icon --
   The library sets `align-items:center` on .smartbanner__info. That centres
   vertically in its original row layout, but this theme makes the block a
   COLUMN, where align-items governs the horizontal axis — so the title and
   subtitle were being centred in the leftover space instead of sitting against
   the icon. Declaring it explicitly fixes that. */
.smartbanner .smartbanner__info,
.smartbanner.smartbanner--android .smartbanner__info {
  align-items: flex-start;
  text-align: left;
}
.smartbanner .smartbanner__info__title,
.smartbanner .smartbanner__info__author,
.smartbanner .smartbanner__info__price,
.smartbanner.smartbanner--android .smartbanner__info__title,
.smartbanner.smartbanner--android .smartbanner__info__author,
.smartbanner.smartbanner--android .smartbanner__info__price {
  align-self: flex-start;
  width: 100%;
  text-align: left;
}