/* Smile Account Console — light theme, aligned with login */

:root {
  --smile-bg: #3b73ff;
  --smile-bg-page: #f3f6fc;
  --smile-color-text: #646464;
  --smile-color-link: #3b73ff;
  --smile-color-link-hover: #2a5ad9;
  --smile-color-header-bg: #ffc932;
  --smile-color-btn: #3b82f6;
  --smile-color-btn-hover: #2563eb;
  --smile-color-input-bg: #ebebeb;
  --smile-color-border: #e4e4e4;
  --smile-color-nav-active-bg: #e8f0ff;
  --smile-font-base: Verdana, sans-serif;
  --smile-radius-card: 10px;
  --smile-radius-btn: 30px;

  --pf-v5-global--FontFamily--text: var(--smile-font-base);
  --pf-v5-global--FontFamily--heading: var(--smile-font-base);
  --pf-v5-global--BackgroundColor--100: #ffffff;
  --pf-v5-global--BackgroundColor--150: #ffffff;
  --pf-v5-global--BackgroundColor--200: var(--smile-bg-page);
  --pf-v5-global--primary-color--100: var(--smile-color-btn);
  --pf-v5-global--primary-color--200: var(--smile-color-btn-hover);
  --pf-v5-global--active-color--100: var(--smile-color-btn);
  --pf-v5-global--link--Color: var(--smile-color-link);
  --pf-v5-global--link--Color--hover: var(--smile-color-link-hover);
  --pf-v5-global--link--Color--visited: var(--smile-color-link);
}

body[data-page-id="account"] {
  font-family: var(--smile-font-base);
  color: var(--smile-color-text);
  background-color: var(--smile-bg-page);
}

/* Force light surfaces (override any dark-mode leftovers) */
.pf-v5-c-page,
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
.pf-v5-c-page__main-section.pf-m-light {
  background-color: #fff;
  color: var(--smile-color-text);
}

.pf-v5-c-page {
  background-color: var(--smile-bg-page);
}

/* Masthead — same blue as login (.smile-site-header) */
.pf-v5-c-masthead,
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content,
.pf-v5-c-masthead__toggle,
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
  background-color: var(--smile-bg) !important;
  color: #fff !important;
  border-color: transparent;
}

.pf-v5-c-masthead {
  border-bottom: none;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:focus {
  color: #fff !important;
  background-color: transparent !important;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* User menu toggle in header — no border / shadow */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--Color: #fff;
  --pf-v5-c-menu-toggle--BorderColor: transparent;
  --pf-v5-c-menu-toggle--BoxShadow: none;
  --pf-v5-c-menu-toggle--hover--BackgroundColor: rgba(255, 255, 255, 0.15);
  --pf-v5-c-menu-toggle--hover--Color: #fff;
  --pf-v5-c-menu-toggle--hover--BorderColor: transparent;
  --pf-v5-c-menu-toggle--hover--BoxShadow: none;
  --pf-v5-c-menu-toggle--active--BackgroundColor: rgba(255, 255, 255, 0.2);
  --pf-v5-c-menu-toggle--active--Color: #fff;
  --pf-v5-c-menu-toggle--active--BorderColor: transparent;
  --pf-v5-c-menu-toggle--active--BoxShadow: none;
  --pf-v5-c-menu-toggle--focus--BackgroundColor: rgba(255, 255, 255, 0.15);
  --pf-v5-c-menu-toggle--focus--Color: #fff;
  --pf-v5-c-menu-toggle--focus--BorderColor: transparent;
  --pf-v5-c-menu-toggle--focus--BoxShadow: none;
  --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: rgba(255, 255, 255, 0.15);
  --pf-v5-c-menu-toggle--m-expanded--Color: #fff;
  --pf-v5-c-menu-toggle--m-expanded--BorderColor: transparent;
  --pf-v5-c-menu-toggle--m-expanded--BoxShadow: none;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  color: #fff !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle::before,
.pf-v5-c-masthead .pf-v5-c-menu-toggle::after {
  border: none !important;
  box-shadow: none !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__toggle-icon,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__toggle-icon svg {
  color: #fff !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:focus,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:focus-visible,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-expanded,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle__controls,
.pf-v5-c-masthead .pf-v5-c-toolbar__item .pf-v5-c-menu-toggle {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.pf-v5-c-masthead__brand {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 120px;
  padding: 12px 16px 12px 0;
}

.pf-v5-c-masthead__brand a {
  display: block;
  line-height: 0;
  background: none !important;
}

/* Same sizing as login .smile-logo img */
.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead__brand a img {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: min(320px, 50vw);
  max-height: 56px;
  opacity: 1 !important;
  object-fit: contain;
  clip: auto !important;
  overflow: visible !important;
}

.pf-v5-c-masthead__content {
  flex: 0 0 auto;
}

.pf-v5-c-masthead .pf-v5-c-toolbar__item.pf-m-align-right {
  background-color: transparent !important;
}

/* Sidebar */
.pf-v5-c-page__sidebar {
  background-color: #fff !important;
  border-right: 1px solid var(--smile-color-border);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link,
.pf-v5-c-page__sidebar button.pf-v5-c-nav__link {
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--Color: var(--smile-color-text);
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--smile-color-nav-active-bg);
  --pf-v5-c-nav__link--hover--Color: var(--smile-color-link-hover);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--smile-color-nav-active-bg);
  --pf-v5-c-nav__link--focus--Color: var(--smile-color-link-hover);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--smile-color-nav-active-bg);
  --pf-v5-c-nav__link--active--Color: var(--smile-color-btn);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--smile-color-nav-active-bg);
  --pf-v5-c-nav__link--m-current--Color: var(--smile-color-btn);

  color: var(--smile-color-text) !important;
  background-color: transparent !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:focus,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:focus-visible,
.pf-v5-c-page__sidebar button.pf-v5-c-nav__link:hover,
.pf-v5-c-page__sidebar button.pf-v5-c-nav__link:focus,
.pf-v5-c-page__sidebar button.pf-v5-c-nav__link:focus-visible {
  color: var(--smile-color-link-hover) !important;
  background-color: var(--smile-color-nav-active-bg) !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current:hover,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded > .pf-v5-c-nav__link,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded > button.pf-v5-c-nav__link {
  color: var(--smile-color-btn) !important;
  background-color: var(--smile-color-nav-active-bg) !important;
  font-weight: 700;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav {
  background-color: #fff !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle-icon,
.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle-icon svg {
  color: var(--smile-color-text) !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded .pf-v5-c-nav__toggle-icon,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded .pf-v5-c-nav__toggle-icon svg {
  color: var(--smile-color-btn) !important;
}

/* Expandable section header (button) — never dark on focus/expanded */
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link[aria-expanded="true"],
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link:focus,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link:focus-visible,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link:active {
  color: var(--smile-color-text) !important;
  background-color: transparent !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded > button.pf-v5-c-nav__link,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link[aria-expanded="true"] {
  color: var(--smile-color-btn) !important;
  background-color: var(--smile-color-nav-active-bg) !important;
}

/* Page title band — only top-level page heading (Signing in, Personal info, …) */
.pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light:first-of-type {
  background-color: var(--smile-color-header-bg) !important;
  background-image: url("../img/bg-login.png");
  background-repeat: repeat;
  background-position: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light:first-of-type .pf-v5-c-title,
.pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light:first-of-type [data-pf-content="true"],
.pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light:first-of-type [data-pf-content="true"] p {
  color: #fff !important;
}

/* Content area below page title */
.pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light + .pf-v5-c-page__main-section {
  padding: 24px 32px 32px;
  background-color: var(--smile-bg-page) !important;
}

/* Inner blocks (Basic authentication, Two-factor authentication, …) */
.pf-v5-c-page__main-section .pf-v5-c-page__main-section.pf-m-light {
  margin-bottom: 20px;
  padding: 20px 24px !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid var(--smile-color-border);
  border-radius: var(--smile-radius-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.pf-v5-c-page__main-section .pf-v5-c-page__main-section.pf-m-light:last-child {
  margin-bottom: 0;
}

.pf-v5-c-page__main-section .pf-v5-c-page__main-section .pf-v5-c-title {
  color: var(--smile-color-text) !important;
  font-size: 1.25rem;
  font-weight: 700;
}

.pf-v5-c-page__main-section .pf-v5-c-page__main-section h3.pf-v5-c-title,
.pf-v5-c-page__main-section .pf-v5-c-page__main-section .cred-title {
  color: var(--smile-color-btn) !important;
  font-size: 1rem;
}

.pf-v5-c-page__main-section .pf-v5-c-page__main-section [data-pf-content="true"],
.pf-v5-c-page__main-section .pf-v5-c-page__main-section .pf-v5-u-color-200 {
  color: var(--smile-color-text) !important;
}

.pf-v5-c-page__main-section .pf-v5-c-data-list {
  border-top: 1px solid var(--smile-color-border);
  margin-top: 12px;
}

.pf-v5-c-page__main-section .pf-v5-c-data-list__item {
  border-bottom: 1px solid var(--smile-color-border);
}

.pf-v5-c-page__main-section .pf-v5-c-data-list__item:last-child {
  border-bottom: none;
}

.pf-v5-c-page__main-section .pf-v5-c-button.pf-m-secondary {
  border-radius: var(--smile-radius-btn);
  border-color: var(--smile-color-btn);
  color: var(--smile-color-btn);
  background-color: #fff;
}

.pf-v5-c-page__main-section .pf-v5-c-button.pf-m-secondary:hover {
  background-color: var(--smile-color-nav-active-bg);
  border-color: var(--smile-color-btn-hover);
  color: var(--smile-color-btn-hover);
}

/* Jump to section — readable links, no solid blue block */
.pf-v5-c-jump-links,
.pf-v5-c-jump-links__main,
.pf-v5-c-jump-links__list,
.pf-v5-c-page__main-section:has(.pf-v5-c-jump-links) {
  background-color: #fff !important;
  color: var(--smile-color-text) !important;
}

.pf-v5-c-jump-links__label {
  color: var(--smile-color-text) !important;
  font-weight: 700;
}

.pf-v5-c-jump-links__link,
.pf-v5-c-jump-links__link:hover,
.pf-v5-c-jump-links__link:focus {
  color: var(--smile-color-text) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.pf-v5-c-jump-links__link-text {
  color: inherit !important;
}

.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link,
.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link:hover {
  color: var(--smile-color-btn) !important;
  background-color: var(--smile-color-nav-active-bg) !important;
  font-weight: 700;
}

.pf-v5-c-jump-links__link::before {
  width: 3px !important;
  max-width: 3px !important;
  inset-inline-start: 0 !important;
}

.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link::before {
  background-color: var(--smile-color-btn) !important;
}

.pf-v5-c-jump-links__item:not(.pf-m-current) .pf-v5-c-jump-links__link::before {
  background-color: transparent !important;
}

/* Form */
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea,
.pf-v5-c-menu-toggle {
  border-radius: 5px;
  background-color: var(--smile-color-input-bg);
  font-family: var(--smile-font-base);
  color: var(--smile-color-text);
}

.pf-v5-c-form__label-text {
  color: var(--smile-color-text);
  font-weight: 700;
}

/* Buttons */
.pf-v5-c-button.pf-m-primary {
  border-radius: var(--smile-radius-btn);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-color: var(--smile-color-btn) !important;
  border-color: var(--smile-color-btn) !important;
  color: #fff !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--smile-color-btn-hover) !important;
  border-color: var(--smile-color-btn-hover) !important;
}

.pf-v5-c-button.pf-m-link {
  color: var(--smile-color-link) !important;
}

.pf-v5-c-button.pf-m-link:hover {
  color: var(--smile-color-link-hover) !important;
}

/* Avatar / toolbar — neutral */
.pf-v5-c-avatar {
  background-color: #e8e8e8;
}

@media (max-width: 768px) {
  .pf-v5-c-masthead__brand img,
  .pf-v5-c-masthead__brand a img {
    max-height: 44px;
    max-width: 60vw;
  }
}