/* Vita Vision customer profile design system
   Visual language aligned with the Login/Register page: charcoal glass surfaces,
   restrained orange glow, crisp typography and consistent controls.
   ViBook markup, tabs, forms, AJAX and security behavior remain untouched. */

html body .vvb-customer-profile {
  --vv-profile-orange: #ff941f;
  --vv-profile-orange-bright: #ffad32;
  --vv-profile-panel: #101114;
  --vv-profile-panel-soft: #151619;
  --vv-profile-line: rgba(255,255,255,.15);
  --vv-profile-muted: #aeb0b8;
  width: min(1120px, calc(100% - 48px)) !important;
  max-width: 1120px !important;
  margin: clamp(28px, 5vw, 64px) auto 64px !important;
  color: #f5f5f7 !important;
  font-family: inherit !important;
}
html body .vvb-customer-profile *,
html body .vvb-customer-profile *::before,
html body .vvb-customer-profile *::after { box-sizing: border-box; }

/* Hero: same orange-edged glass banner as Create Account / Sign In. */
html body .vvb-customer-profile > .vvb-account-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  margin: 0 0 18px !important;
  padding: clamp(25px, 3.2vw, 42px) clamp(25px, 3.4vw, 46px) !important;
  min-height: 150px !important;
  border: 1px solid rgba(255,153,35,.85) !important;
  border-left: 4px solid var(--vv-profile-orange) !important;
  border-radius: 19px !important;
  background:
    radial-gradient(ellipse at 82% -30%, rgba(255,145,22,.19), transparent 48%),
    linear-gradient(115deg, #111216 0%, #101114 72%, #151311 100%) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html body .vvb-customer-profile > .vvb-account-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 180px !important;
  height: 180px !important;
  right: 24px !important;
  top: -42px !important;
  border-radius: 50% !important;
  opacity: .18 !important;
  background: repeating-conic-gradient(from 8deg, rgba(255,255,255,.20) 0deg 18deg, transparent 18deg 36deg) !important;
  box-shadow: inset 0 0 0 18px rgba(255,255,255,.08), inset 0 0 0 38px rgba(0,0,0,.3) !important;
  pointer-events: none !important;
}
html body .vvb-customer-profile .vvb-account-eyebrow,
html body .vvb-customer-profile .vvb-account-kicker {
  display: block !important;
  color: var(--vv-profile-orange) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase !important;
}
html body .vvb-customer-profile > .vvb-account-hero h1 {
  position: relative !important;
  margin: 9px 0 8px !important;
  color: #fff !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase !important;
}
html body .vvb-customer-profile > .vvb-account-hero p {
  max-width: 720px !important;
  margin: 0 !important;
  color: #b9bbc2 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Tabs: four matching glass navigation cards. */
html body .vvb-customer-profile .vvb-profile-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body .vvb-customer-profile .vvb-profile-tabs .vvb-profile-tab {
  min-width: 0 !important;
  min-height: 58px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  color: #c8c9ce !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 6px 18px rgba(0,0,0,.12) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
}
html body .vvb-customer-profile .vvb-profile-tabs .vvb-profile-tab svg {
  width: 19px !important; height: 19px !important; flex: 0 0 19px !important;
  fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important;
}
html body .vvb-customer-profile .vvb-profile-tabs .vvb-profile-tab:hover,
html body .vvb-customer-profile .vvb-profile-tabs .vvb-profile-tab:focus-visible {
  border-color: rgba(255,160,43,.72) !important;
  background: linear-gradient(110deg, rgba(255,145,25,.13), rgba(255,145,25,.035)) !important;
  color: #fff !important;
}
html body .vvb-customer-profile .vvb-profile-tabs .vvb-profile-tab.is-active,
html body .vvb-customer-profile .vvb-profile-tabs .vvb-profile-tab[aria-selected="true"] {
  border-color: var(--vv-profile-orange) !important;
  border-left: 3px solid var(--vv-profile-orange) !important;
  background: linear-gradient(110deg, rgba(255,145,25,.17), rgba(255,145,25,.035)) !important;
  color: var(--vv-profile-orange-bright) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(255,145,25,.07) !important;
}

/* All major profile panels share the account-card surface from the login page. */
html body .vvb-customer-profile .vvb-account-card {
  min-width: 0 !important;
  margin: 0 0 14px !important;
  padding: clamp(21px, 2.6vw, 32px) !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,145,25,.055), transparent 34%),
    linear-gradient(145deg, #151619 0%, #101114 100%) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035) !important;
  color: #f4f4f5 !important;
}
html body .vvb-customer-profile .vvb-profile-heading,
html body .vvb-customer-profile .vvb-profile-security-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 22px !important;
  padding: 0 0 17px !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;
}
html body .vvb-customer-profile .vvb-profile-heading h2,
html body .vvb-customer-profile .vvb-profile-security-heading h2,
html body .vvb-customer-profile .vvb-account-card h2 {
  margin: 7px 0 7px !important;
  color: #fff !important;
  font-size: clamp(21px, 2.5vw, 29px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase !important;
}
html body .vvb-customer-profile .vvb-profile-heading p,
html body .vvb-customer-profile .vvb-profile-security-heading p,
html body .vvb-customer-profile .vvb-account-card > p {
  margin: 0 !important;
  color: #b5b6bd !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
html body .vvb-customer-profile .vvb-profile-avatar {
  flex: 0 0 54px !important; width: 54px !important; height: 54px !important;
  border: 1px solid rgba(255,164,52,.72) !important;
  background: linear-gradient(145deg, rgba(255,155,35,.18), rgba(255,155,35,.04)) !important;
  color: var(--vv-profile-orange-bright) !important;
  box-shadow: 0 0 0 4px rgba(255,151,31,.07), 0 6px 18px rgba(0,0,0,.25) !important;
}

/* Profile fields, photo picker and form controls match the registration inputs. */
html body .vvb-customer-profile .vvb-profile-fields {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 17px 15px !important;
}
html body .vvb-customer-profile .vvb-profile-fields > label {
  display: flex !important; flex-direction: column !important; gap: 5px !important;
  min-width: 0 !important; color: #f2f2f4 !important;
  font-size: 12px !important; font-weight: 750 !important; line-height: 1.4 !important;
}
html body .vvb-customer-profile .vvb-profile-fields input:not([type=checkbox]),
html body .vvb-customer-profile .vvb-profile-fields select,
html body .vvb-customer-profile .vvb-profile-fields textarea {
  width: 100% !important; min-width: 0 !important; min-height: 45px !important;
  margin: 4px 0 0 !important; padding: 11px 13px !important;
  border: 1px solid #44464d !important; border-radius: 6px !important;
  background: #0d0e10 !important; color: #f5f5f6 !important;
  font: inherit !important; font-size: 14px !important; box-shadow: none !important;
}
html body .vvb-customer-profile .vvb-profile-fields input:focus,
html body .vvb-customer-profile .vvb-profile-fields select:focus,
html body .vvb-customer-profile .vvb-profile-fields textarea:focus {
  border-color: var(--vv-profile-orange) !important;
  outline: 2px solid rgba(255,151,31,.22) !important; outline-offset: 1px !important;
}
html body .vvb-customer-profile .vvb-profile-fields input[readonly] {
  background: #1b1c20 !important; color: #b9bac0 !important;
}
html body .vvb-customer-profile .vvb-profile-fields small,
html body .vvb-customer-profile .vvb-profile-photo-copy,
html body .vvb-customer-profile .vvb-profile-file-name {
  color: #a7a8af !important; font-size: 11px !important; line-height: 1.45 !important;
}
html body .vvb-customer-profile .vvb-profile-fields small a { color: var(--vv-profile-orange-bright) !important; }
html body .vvb-customer-profile .vvb-profile-photo-control,
html body .vvb-customer-profile .vvb-profile-file-control {
  border: 1px solid rgba(255,255,255,.16) !important; border-radius: 9px !important;
  background: rgba(255,255,255,.025) !important; padding: 15px !important;
}
html body .vvb-customer-profile .vvb-profile-file-button {
  border-radius: 6px !important; border: 1px solid rgba(255,160,43,.65) !important;
  background: linear-gradient(135deg,#ffad32,#f28a08) !important; color: #17120a !important;
  font-weight: 800 !important;
}
html body .vvb-customer-profile .vvb-profile-photo-remove {
  border-radius: 7px !important; border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.025) !important; color: #c9cbd1 !important;
  font-weight: 650 !important;
}

/* Booking cards and their status/actions. */
html body .vvb-customer-profile .vvb-customer-booking-list { display: grid !important; gap: 12px !important; }
html body .vvb-customer-profile .vvb-customer-booking-item {
  display: grid !important; grid-template-columns: minmax(0,1fr) auto !important;
  gap: 12px 18px !important; align-items: center !important;
  padding: 18px !important; border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important;
}
html body .vvb-customer-profile .vvb-customer-booking-main h3,
html body .vvb-customer-profile .vvb-customer-invoice-copy strong {
  color: #fff !important; font-size: 16px !important; font-weight: 850 !important;
  text-transform: uppercase !important; letter-spacing: -.015em !important;
}
html body .vvb-customer-profile .vvb-customer-booking-main p,
html body .vvb-customer-profile .vvb-customer-booking-main small,
html body .vvb-customer-profile .vvb-customer-invoice-copy p {
  color: #b0b1b8 !important; font-size: 12px !important;
}
html body .vvb-customer-profile .vvb-customer-booking-status,
html body .vvb-customer-profile .vvb-2fa-status {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 6px 10px !important; border: 1px solid rgba(255,164,52,.4) !important;
  border-radius: 999px !important; background: rgba(255,151,31,.08) !important;
  color: var(--vv-profile-orange-bright) !important; font-size: 10px !important;
  font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .04em !important;
}
html body .vvb-customer-profile .vvb-customer-booking-actions {
  grid-column: 1 / -1 !important; padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.11) !important;
}
html body .vvb-customer-profile .vvb-customer-booking-buttons { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; }

/* Invoices: consistent row cards, document labels and action controls. */
html body .vvb-customer-profile .vvb-invoice-list { display: grid !important; gap: 11px !important; }
html body .vvb-customer-profile .vvb-customer-invoice-item {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 16px !important; padding: 17px 18px !important;
  border: 1px solid rgba(255,255,255,.14) !important; border-radius: 10px !important;
  background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important;
}
html body .vvb-customer-profile .vvb-invoice-number {
  color: var(--vv-profile-orange-bright) !important; font-size: 11px !important;
  font-weight: 850 !important; letter-spacing: .09em !important; text-transform: uppercase !important;
}

/* Vault controls, gallery cards and empty states. */
html body .vvb-customer-profile .vvb-vault-toolbar,
html body .vvb-customer-profile .vvb-vault-browser {
  padding: 15px !important; border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important; background: rgba(255,255,255,.025) !important;
}
html body .vvb-customer-profile .vvb-vault-search,
html body .vvb-customer-profile .vvb-vault-view-toggle,
html body .vvb-customer-profile .vvb-vault-action {
  border: 1px solid rgba(255,255,255,.18) !important; border-radius: 7px !important;
  background: #111216 !important; color: #e8e8eb !important;
}
html body .vvb-customer-profile .vvb-vault-item,
html body .vvb-customer-profile .vvb-vault-preview,
html body .vvb-customer-profile .vvb-vault-empty-state {
  border-color: rgba(255,255,255,.14) !important; border-radius: 10px !important;
  background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important;
}
html body .vvb-customer-profile .vvb-vault-tag,
html body .vvb-customer-profile .vvb-vault-new-badge {
  border: 1px solid rgba(255,160,43,.35) !important; border-radius: 999px !important;
  background: rgba(255,145,25,.09) !important; color: var(--vv-profile-orange-bright) !important;
}

/* Security panel, messages, and every profile action button. */
html body .vvb-customer-profile .vvb-profile-security-card { margin-top: 14px !important; }
html body .vvb-customer-profile .vvb-2fa-intro,
html body .vvb-customer-profile .vvb-2fa-enabled-panel {
  color: #b9bac1 !important; font-size: 13px !important; line-height: 1.6 !important;
}
html body .vvb-customer-profile .vvb-account-button {
  min-height: 45px !important; padding: 11px 18px !important;
  border: 1px solid #ff9d24 !important; border-radius: 7px !important;
  background: linear-gradient(110deg,#ffad32 0%,#ff8500 100%) !important;
  color: #17120a !important; font-family: inherit !important;
  font-size: 12px !important; font-weight: 900 !important;
  letter-spacing: .035em !important; text-transform: uppercase !important;
  box-shadow: 0 6px 18px rgba(255,139,20,.16), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
html body .vvb-customer-profile .vvb-account-button:hover {
  filter: brightness(1.08) !important; transform: translateY(-1px) !important;
}
html body .vvb-customer-profile .vvb-account-button-outline {
  background: transparent !important; color: var(--vv-profile-orange-bright) !important;
  box-shadow: none !important;
}
html body .vvb-customer-profile .vvb-account-button-danger {
  border-color: #d9362b !important; background: linear-gradient(110deg,#ed493b,#c92720) !important;
  color: #fff !important;
}
html body .vvb-customer-profile .vvb-account-message {
  border: 1px solid rgba(255,160,43,.4) !important; border-left: 4px solid var(--vv-profile-orange) !important;
  border-radius: 9px !important; background: #151619 !important; color: #f4f4f5 !important;
}
html body .vvb-customer-profile .vvb-bookings-empty,
html body .vvb-customer-profile .vvb-vault-empty-state {
  padding: 24px !important; border: 1px dashed rgba(255,255,255,.2) !important;
  border-radius: 10px !important; color: #b5b6bd !important; background: rgba(255,255,255,.018) !important;
}
html body .vvb-customer-profile [data-vvb-profile-panel][hidden] { display: none !important; }

@media (max-width: 760px) {
  html body .vvb-customer-profile { width: calc(100% - 28px) !important; margin: 24px auto 42px !important; }
  html body .vvb-customer-profile > .vvb-account-hero { min-height: 130px !important; padding: 24px 20px !important; }
  html body .vvb-customer-profile > .vvb-account-hero::after { width: 125px !important; height: 125px !important; right: -22px !important; top: -20px !important; }
  html body .vvb-customer-profile .vvb-profile-tabs { gap: 6px !important; }
  html body .vvb-customer-profile .vvb-profile-tabs .vvb-profile-tab {
    flex-direction: column !important; gap: 6px !important; min-height: 64px !important;
    padding: 9px 4px !important; font-size: 10px !important;
  }
  html body .vvb-customer-profile .vvb-profile-tabs .vvb-profile-tab svg { width: 18px !important; height: 18px !important; }
  html body .vvb-customer-profile .vvb-account-card { padding: 19px 16px !important; }
  html body .vvb-customer-profile .vvb-profile-fields { grid-template-columns: minmax(0,1fr) !important; gap: 13px !important; }
  html body .vvb-customer-profile .vvb-profile-fields label.is-wide { grid-column: auto !important; }
  html body .vvb-customer-profile .vvb-customer-booking-item { grid-template-columns: minmax(0,1fr) !important; }
  html body .vvb-customer-profile .vvb-customer-booking-status { justify-self: start !important; }
  html body .vvb-customer-profile .vvb-customer-invoice-item { align-items: flex-start !important; flex-direction: column !important; }
  html body .vvb-customer-profile .vvb-profile-heading,
  html body .vvb-customer-profile .vvb-profile-security-heading { align-items: flex-start !important; }
}
@media (max-width: 390px) {
  html body .vvb-customer-profile .vvb-profile-tabs { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}