/* SPDX-License-Identifier: GPL-3.0-or-later
 * The marker exists only when GLPI renders the display_login hook.
 * No marker = no theme, including on password-reset and internal pages.
 */
body:has(#apice-campaign) {
  --apice-ink: #493c13;
  --apice-accent: #755000;
  --apice-soft: #fff1bc;
  --apice-line: #e6c45f;
  background: radial-gradient(ellipse at 8% 12%, #f7d66075, transparent 48%),
    radial-gradient(ellipse at 92% 88%, #efd47866, transparent 46%), #fbf8ed !important;
  background-attachment: fixed !important;
}
body:has(#apice-campaign[data-theme="pink"]) {
  --apice-ink: #642a46;
  --apice-accent: #a12860;
  --apice-soft: #fce1ed;
  --apice-line: #e7a3c1;
  background: radial-gradient(ellipse at 8% 12%, #f4b2d075, transparent 48%),
    radial-gradient(ellipse at 92% 88%, #edb6ce66, transparent 46%), #fcf4f8 !important;
}
body:has(#apice-campaign) .card:has(form #login_name) {
  border: 1px solid var(--apice-line) !important;
  border-radius: 24px;
  box-shadow: 0 20px 65px #36261416;
}
body:has(#apice-campaign) form:has(#login_name) .btn-primary {
  background-color: var(--apice-accent);
  border-color: var(--apice-accent);
  color: #fff;
}
body:has(#apice-campaign) form:has(#login_name) .btn-primary:hover {
  filter: brightness(.9);
}
body:has(#apice-campaign) form:has(#login_name) :is(input, select, button, a):focus-visible {
  outline: 3px solid var(--apice-accent);
  outline-offset: 3px;
}
.apice-campaign {
  box-sizing: border-box;
  width: min(340px, 100%);
  margin: 8px auto;
  padding: 28px 24px;
  border-radius: 20px;
  background: var(--apice-soft, #fff1bc);
  color: var(--apice-ink, #493c13);
  text-align: left;
  font-family: inherit;
}
.apice-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
.apice-ribbon { display: block; margin: 24px auto 18px; max-width: 100%; }
.apice-month { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; }
.apice-campaign h2 { margin: 0 0 16px; font-size: 30px; line-height: 1.13; font-weight: 650; letter-spacing: -.7px; color: inherit; }
.apice-message { margin: 0; font-size: 14px; line-height: 1.65; }
.apice-signature { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--apice-line, #e6c45f); font-size: 11px; }
.apice-campaign.apice-artwork { width: min(560px, 100%); padding: 0; background: transparent; overflow: hidden; }
.apice-artwork > img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Campaign wallpaper with the login layered in front. */
body:has(#apice-campaign.apice-artwork) {
  min-height: 100vh;
  background: #faf5e5 url('../images/setembro-amarelo-rede-apice.png') center center / cover no-repeat fixed !important;
}
body:has(#apice-campaign.apice-artwork[data-theme="pink"]) {
  background-image: url('../images/outubro-rosa-rede-apice.png') !important;
  background-color: #fff4f8 !important;
}
body:has(#apice-campaign.apice-artwork) :is(.container, .container-tight):has(form #login_name) {
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
body:has(#apice-campaign.apice-artwork) .card:has(form #login_name) {
  width: 350px !important; max-width: calc(100vw - 40px) !important;
  margin: 24px auto 32px !important; padding: 0;
  position: relative; z-index: 1;
  background: rgba(255,255,255,.92); border-radius: 18px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow: 0 18px 65px #4e360b30;
}
body:has(#apice-campaign.apice-artwork) .card-body:has(#login_name) { padding: 28px 24px !important; }
body:has(#apice-campaign.apice-artwork) form:has(#login_name) .col-md-5 { width: 100%; flex: 0 0 100%; }
body:has(#apice-campaign.apice-artwork) .col-auto:has(#apice-campaign),
body:has(#apice-campaign.apice-artwork) #apice-campaign { display: none !important; }
@media (max-width: 800px) {
  body:has(#apice-campaign.apice-artwork) {
    background-position: 65% center !important; background-size: cover !important;
  }
  body:has(#apice-campaign.apice-artwork) .card:has(form #login_name) {
    margin: 24px auto !important;
    width: 380px !important;
  }
}
@media (max-width: 767px) {
  .apice-campaign { width: 100%; margin-top: 24px; padding: 24px; }
  .apice-ribbon { width: 75px; height: 86px; margin: 16px auto; }
  .apice-campaign h2 { font-size: 25px; }
}