/*
 * Page layouts of the Wi-Fi login page. The layout is chosen in the admin (Captive Portal > appearance) and set as a
 * class on .cp-page by cp-ui.php (cp-l-<name>). Colours come from the variables that global/CaptiveTheme.php writes
 * (--cp-card-bg, --cp-page-bg, --cp-ov, --cp-soft, --cp-on-page, --cp-drawer); the background photo, when there is one,
 * arrives as --cp-bg-img on .cp-page. The default layout (centre) needs nothing from this file.
 * Selectors start with .cp-page.cp-l-* so they win over the theme colours regardless of the order of the style sheets.
 */

.cp-hero { display: none; }
.cp-hero-in { max-width: 520px; }
.cp-hero-logo { margin-bottom: 18px; }
.cp-hero-logo .cp-logo { margin: 0; }
.cp-hero h2 { font-size: 2.1rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; color: #fff; }
.cp-hero p { font-size: 1.05rem; line-height: 1.5; margin: 0; color: rgba(255,255,255,.88); }

/* ---------- split: image panel on one side, plain form panel on the other ---------- */
.cp-page.cp-l-split-left, .cp-page.cp-l-split-right {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch; justify-content: stretch; padding: 0;
  background: var(--cp-card-bg) !important; background-image: none !important;
}
.cp-page.cp-l-split-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.cp-page.cp-l-split-right .cp-hero { order: 2; }
.cp-page.cp-l-split-left::before, .cp-page.cp-l-split-right::before,
.cp-page.cp-l-split-left::after, .cp-page.cp-l-split-right::after { display: none !important; }
.cp-page.cp-l-split-left .cp-hero, .cp-page.cp-l-split-right .cp-hero {
  display: flex; align-items: flex-end; position: relative; padding: 56px; min-height: 100vh; color: #fff;
}
.cp-page.cp-l-split-left .cp-shell, .cp-page.cp-l-split-right .cp-shell {
  width: 100%; max-width: 520px; margin: 0 auto; align-self: center; padding: 40px 36px;
}
.cp-page.cp-l-split-left .cp-card, .cp-page.cp-l-split-right .cp-card,
.cp-page.cp-l-drawer-left .cp-card, .cp-page.cp-l-drawer-right .cp-card {
  background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cp-page.cp-l-split-left .cp-head, .cp-page.cp-l-split-right .cp-head,
.cp-page.cp-l-drawer-left .cp-head, .cp-page.cp-l-drawer-right .cp-head { text-align: left; padding-left: 0; padding-right: 0; }
.cp-page.cp-l-split-left .cp-logo, .cp-page.cp-l-split-right .cp-logo,
.cp-page.cp-l-drawer-left .cp-logo, .cp-page.cp-l-drawer-right .cp-logo { margin-left: 0; margin-right: 0; }
.cp-page.cp-l-split-left .cp-body, .cp-page.cp-l-split-right .cp-body,
.cp-page.cp-l-drawer-left .cp-body, .cp-page.cp-l-drawer-right .cp-body { padding-left: 0; padding-right: 0; }

/* hero panel background: photo with a dark veil, or the page gradient */
.cp-page.cp-l-split-left .cp-hero, .cp-page.cp-l-split-right .cp-hero,
.cp-page.cp-l-banner .cp-hero { background: var(--cp-page-bg); }
.cp-page.has-bg.cp-l-split-left .cp-hero, .cp-page.has-bg.cp-l-split-right .cp-hero,
.cp-page.has-bg.cp-l-banner .cp-hero {
  background: linear-gradient(var(--cp-ov), var(--cp-ov)), var(--cp-bg-img) center / cover no-repeat;
}

/* ---------- banner: a wide hero on top and the card overlapping it ---------- */
.cp-page.cp-l-banner {
  justify-content: flex-start; padding: 0; background: var(--cp-soft) !important; background-image: none !important;
}
.cp-page.cp-l-banner::before, .cp-page.cp-l-banner::after { display: none !important; }
.cp-page.cp-l-banner .cp-hero {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 44vh; padding: 48px 24px 120px; color: #fff;
}
.cp-page.cp-l-banner .cp-hero-logo .cp-logo { margin: 0 auto; }
.cp-page.cp-l-banner .cp-shell { margin-top: -96px; position: relative; z-index: 2; padding: 0 16px 28px; }
.cp-page.cp-l-banner .cp-foot { color: rgba(15,23,42,.55); }

/* ---------- drawer: the form is a full-height panel on one side of the photo ---------- */
.cp-page.cp-l-drawer-left, .cp-page.cp-l-drawer-right {
  flex-direction: row; align-items: stretch; justify-content: flex-start; padding: 0;
}
.cp-page.cp-l-drawer-left .cp-hero { order: 2; }
.cp-page.cp-l-drawer-left .cp-shell, .cp-page.cp-l-drawer-right .cp-shell {
  flex: 0 0 min(480px, 100%); width: min(480px, 100%); max-width: 480px; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; padding: 40px 38px;
  background: var(--cp-drawer); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  position: relative; z-index: 2;
}
.cp-page.cp-l-drawer-left .cp-hero, .cp-page.cp-l-drawer-right .cp-hero {
  display: flex; flex: 1 1 auto; align-items: flex-end; padding: 56px; position: relative; z-index: 1; color: #fff;
}

/* ---------- minimal: no card, the form sits straight on the page ---------- */
.cp-page.cp-l-minimal .cp-card {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cp-page.cp-l-minimal .cp-head h1, .cp-page.cp-l-minimal .cp-status h2, .cp-page.cp-l-minimal .cp-otp-note strong { color: var(--cp-on-page) !important; }
.cp-page.cp-l-minimal .cp-head p, .cp-page.cp-l-minimal .cp-status p, .cp-page.cp-l-minimal .cp-otp-note,
.cp-page.cp-l-minimal .cp-label, .cp-page.cp-l-minimal .cp-check, .cp-page.cp-l-minimal .cp-hint { color: var(--cp-on-page) !important; opacity: .9; }
.cp-page.cp-l-minimal .cp-field, .cp-page.cp-l-minimal .cp-otp input {
  background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.35) !important; color: var(--cp-on-page);
}
.cp-page.cp-l-minimal .cp-field input, .cp-page.cp-l-minimal .cp-otp input { color: var(--cp-on-page) !important; }
.cp-page.cp-l-minimal .cp-field .prefix { color: var(--cp-on-page); border-color: rgba(255,255,255,.35); }
.cp-page.cp-l-minimal .cp-field .ico, .cp-page.cp-l-minimal .cp-field .eye { color: var(--cp-on-page); opacity: .7; }
.cp-page.cp-l-minimal .cp-btn-ghost { background: transparent !important; color: var(--cp-on-page) !important; border-color: rgba(255,255,255,.45) !important; }
.cp-page.cp-l-minimal .cp-divider { color: var(--cp-on-page); opacity: .7; }
.cp-page.cp-l-minimal .cp-divider::before, .cp-page.cp-l-minimal .cp-divider::after { background: rgba(255,255,255,.3); }
.cp-page.cp-l-minimal .cp-badge { background: rgba(255,255,255,.16); color: var(--cp-on-page); }
.cp-page.cp-l-minimal .cp-logo.has-img { background: rgba(255,255,255,.92); padding: 8px 12px; border-radius: 12px; }
.cp-page.cp-l-minimal .cp-shell { max-width: 400px; }

/* ---------- small screens: the hero turns into a compact strip or disappears ---------- */
@media (max-width: 860px) {
  .cp-page.cp-l-split-left, .cp-page.cp-l-split-right { display: block; }
  .cp-page.cp-l-split-left .cp-hero, .cp-page.cp-l-split-right .cp-hero { min-height: 0; padding: 28px 24px; align-items: center; }
  .cp-page.cp-l-split-left .cp-hero h2, .cp-page.cp-l-split-right .cp-hero h2 { font-size: 1.5rem; }
  .cp-page.cp-l-split-left .cp-hero p, .cp-page.cp-l-split-right .cp-hero p { display: none; }
  .cp-page.cp-l-split-left .cp-shell, .cp-page.cp-l-split-right .cp-shell { padding: 28px 20px; }
  .cp-page.cp-l-drawer-left, .cp-page.cp-l-drawer-right { display: block; }
  .cp-page.cp-l-drawer-left .cp-hero, .cp-page.cp-l-drawer-right .cp-hero { display: none; }
  .cp-page.cp-l-drawer-left .cp-shell, .cp-page.cp-l-drawer-right .cp-shell { width: 100%; max-width: none; min-height: 100vh; padding: 32px 20px; }
  .cp-page.cp-l-banner .cp-hero { min-height: 30vh; padding-bottom: 100px; }
  .cp-page.cp-l-banner .cp-hero h2 { font-size: 1.5rem; }
  .cp-page.cp-l-banner .cp-hero p { display: none; }
}