/* Portal-flow styles shared by every skin (package list, verify blocks,
   connected/upgrade state, emulation badge). Skin CSS owns the shell. */

.none { display: none !important; }

.packages { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.package-option {
  text-align: left; padding: 14px 18px; border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px; background: rgba(255,255,255,.55); cursor: pointer; width: 100%;
  display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s;
}
.package-option:hover, .package-option:focus { border-color: rgba(0,0,0,.55); background: rgba(255,255,255,.85); }
.package-option .pkg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.package-option strong { font-size: 1.05em; }
.package-option .pkg-price { font-weight: 600; white-space: nowrap; }
.package-option span { font-size: .85em; opacity: .7; }

.muted { opacity: .6; }
.code-entry { margin-top: 16px; text-align: center; }

.connected-state { width: 100%; }
.connected-state .current {
  padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.15); margin-bottom: 14px; font-size: .95em;
}
.connected-state .current strong { display: block; font-size: 1.05em; }
.connected-state h3 { margin: 12px 0 8px; font-size: 1em; }

/* PAN pairing panel (pair with your room / casting state) */
.pan-panel {
  padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.15); margin-bottom: 14px; font-size: .95em;
  text-align: left;
}
.pan-panel p { margin: 0 0 8px; }
.pan-panel p:last-child { margin-bottom: 0; }
.pan-panel .pan-devices { font-size: .9em; }
.pan-panel .pan-paired { font-weight: 600; }
.pan-panel fieldset { margin-bottom: 8px; }
.pan-panel .pan-btns { margin-top: 4px; }

/* Marketing email capture panel (connected screen; skins opt in with
   contact_capture - see portal.njk) */
.contact-capture {
  padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.15); margin: 14px 0; font-size: .95em;
  text-align: left;
}
.contact-capture p { margin: 0 0 8px; }
.contact-capture p:last-child { margin-bottom: 0; }
.contact-capture fieldset { margin-bottom: 8px; }
.contact-capture .contact-btns { margin-top: 4px; }
.contact-capture .contact-done { font-weight: 600; }

/* Private WiFi address guidance. Only shown to a guest whose device is using a
   randomised address on a long stay, so it is allowed to be a little louder
   than a hint - but it is still advice, not an error, so no red. Colours are
   kept to the same translucent-surface language the skins share. */
.mac-notice {
  width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.15); border-left: 3px solid rgba(180,83,9,.85);
  border-radius: 12px; background: rgba(255,255,255,.62); font-size: .92em;
}
.mac-notice strong { display: block; margin-bottom: 4px; font-size: 1em; }
.mac-notice p { margin: 0; opacity: .78; line-height: 1.45; }
.mac-notice-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.mac-notice-link, .mac-notice-dismiss {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .95em; text-underline-offset: 3px;
}
.mac-notice-link { font-weight: 600; text-decoration: underline; }
.mac-notice-dismiss { opacity: .55; }
.mac-notice-link:hover, .mac-notice-dismiss:hover { opacity: 1; }

/* Steps are measured by width inside a fixed shell, so a full-size panel opens
   above the flow instead of widening a step. */
.mac-help {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,20,30,.55);
}
.mac-help-sheet {
  position: relative; width: 100%; max-width: 440px; max-height: 88vh;
  overflow-y: auto; padding: 24px; border-radius: 16px;
  background: #fff; color: #16202F; text-align: left;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.mac-help-sheet h3 { margin: 0 0 6px; padding-right: 34px; font-size: 1.15em; }
.mac-help-lead { margin: 0 0 14px; font-size: .9em; opacity: .72; line-height: 1.45; }
.mac-help-close {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: inherit; opacity: .5;
}
.mac-help-close:hover { opacity: 1; }
.mac-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mac-tab {
  border: 1px solid rgba(0,0,0,.15); background: none; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font: inherit; font-size: .82em;
  transition: background .15s, border-color .15s;
}
.mac-tab:hover { border-color: rgba(0,0,0,.4); }
.mac-tab.is-active { background: #16202F; border-color: #16202F; color: #fff; }
.mac-shot { display: block; width: 100%; height: auto; border-radius: 12px; }
.mac-help-alt { margin: 14px 0 0; font-size: .85em; opacity: .72; line-height: 1.5; }

.preview-badge {
  position: fixed; top: 12px; left: 12px; z-index: 50;
  background: #b45309; color: #fff; letter-spacing: .08em; font-size: 11px;
  font-weight: 700; padding: 4px 10px; border-radius: 6px; text-transform: uppercase;
}

.error-list.none { display: none !important; }

/* Uploaded hotel logo (Portal Designer): hidden until a logo asset exists. */
.portal-logo {
  max-height: 64px;
  max-width: 70%;
  object-fit: contain;
  margin: 0 auto 0.75rem;
  display: block;
}
.portal-logo.none {
  display: none;
}

/* Organization sign-in (portal SSO): one full-width button per provider. */
.sso-providers { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.sso-providers .sso-provider { width: 100%; }