/* «Πρόσθεσε το ENERGYS στην αρχική σου οθόνη» (resources/views/partials/install.blade.php): a card over the bottom of
   the page, without moving anything; on a phone the whole width. The palette of docs/DESIGN.md, the page's own font. */
.install {
  position: fixed; z-index: 550; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); left: auto;
  width: min(400px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto;
  padding: 18px; border: 1px solid #E6E9EF; border-radius: 16px; background: #FFFFFF; color: #0F1B2D;
  box-shadow: 0 12px 32px rgba(15, 27, 45, .14); font-size: 15px; line-height: 1.5; text-align: left;
}
.install[hidden], .install [hidden] { display: none; }
.install__head { display: flex; gap: 14px; align-items: flex-start; }
.install__head img { flex: none; width: 48px; height: 48px; border: 1px solid #E6E9EF; border-radius: 12px; }
.install h2 { margin: 0 0 2px; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: #183961; }
.install p { margin: 0; color: #5B6576; }
.install .install__note { margin-top: 8px; font-size: 14px; }
.install__body { margin-top: 14px; }
.install__guide { display: block; width: 100%; height: auto; border-radius: 12px; }
.install ol { margin: 12px 0 0; padding-left: 20px; }
.install li + li { margin-top: 6px; }
.install__button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 16px;
  border: 1px solid #E6E9EF; border-radius: 12px; background: #FFFFFF; color: #183961;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.install__body .install__button { margin-top: 0; }
.install__button--primary { border-color: #183961; background: #183961; color: #FFFFFF; }
.install__button:focus-visible { outline: 3px solid #0B8ACE; outline-offset: 2px; }
/* The round button of «Βοηθός ENERGYS» waits while the card is open. */
.install:not([hidden]) ~ .assistant .assistant-launcher { display: none; }

@media (max-width: 600px) {
  .install { right: 8px; left: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
}
/* In the app on a phone: above the bottom menu. */
@media (max-width: 899px) {
  .has-assistant .install { bottom: calc(96px + env(safe-area-inset-bottom)); max-height: calc(100% - 112px); }
  .has-assistant.is-focus .install { bottom: calc(8px + env(safe-area-inset-bottom)); max-height: calc(100% - 16px); }
}

/* «Εφαρμογή ENERGYS» in the customer's «Προφίλ»: the permanent way to the same card. */
.install-installed { color: #3D7A22; font-weight: 600; }

/* «Άνοιξε τις ειδοποιήσεις» of ENERGYS Partner (partials/partner-push.blade.php): the same card, once the app opens
   from the home screen. The round button of «Βοηθός ENERGYS» waits while it is open. */
body:has(.push-invite:not([hidden])) .assistant-launcher { display: none; }