/* ─────────────────────────────────────────────────────────────────
   J.Hilburn iPhone Prototype · My Account screen + More menu
   Task 7 — net-new screen. Classic chrome (frosted circles / pills).
   ───────────────────────────────────────────────────────────────── */

/* ───── More menu popover ─────
   Anchored above the floating tab bar pill, right-aligned.
   The tab bar pill is ~56px tall at bottom:24px, so
   bottom: 24 + 56 + 8 = 88px keeps clear of the pill. */
.more-menu-anchor {
  position: absolute;
  bottom: 88px;
  right: 8px;
  z-index: 10;
}

.more-menu {
  min-width: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.more-menu[hidden] { display: none; }

.more-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: 0;
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.18);
  font: var(--app-body);
  color: var(--app-text-primary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.more-menu__item:last-child { border-bottom: 0; }
.more-menu__item:active { background: rgba(0, 0, 0, 0.05); }

.more-menu__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F5F5F5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--app-text-primary);
}

.more-menu__label {
  flex: 1;
  font: var(--app-body);
  font-size: 15px;
  color: var(--app-text-primary);
}

.more-menu__chevron {
  color: rgba(60, 60, 67, 0.3);
  flex-shrink: 0;
}

/* ───── My Account screen ───── */
.screen--my-account {
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  /* Bound to the viewport (not min-height) so .ma-content becomes the real
     scroller — this is what lets the toolbar stay pinned and the profile
     card stick + collapse (Swift: ScrollView + safeAreaInset header). */
  height: 100%;
}

.ma-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 62px;             /* status-bar 54pt + 8pt gap */
  padding-right: var(--gutter-double);
  padding-bottom: 12px;
  padding-left: var(--gutter-double);
  flex-shrink: 0;
}

.ma-edit-wrapper {
  position: relative;
}

/* Edit popover — anchored below-right of the Edit pill */
.ma-edit-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 8;
}
.ma-edit-menu[hidden] { display: none; }

.ma-edit-menu__item {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: 0;
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.18);
  font: var(--app-body);
  font-size: 15px;
  color: var(--app-text-primary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ma-edit-menu__item:last-child { border-bottom: 0; }
.ma-edit-menu__item:active { background: rgba(0, 0, 0, 0.05); }

/* ───── My Account scrollable content ───── */
.ma-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--gutter-double) var(--gutter-double) var(--gutter-10);
  display: flex;
  flex-direction: column;
  gap: var(--gutter-double);
}

/* ───── Profile card — sticky collapsing header ─────
   Pinned to the top of the scroll area; content scrolls underneath.
   Swift: safeAreaInset(.top) header that swaps expanded ↔ collapsed on scroll. */
.ma-profile-card {
  flex-shrink: 0;                     /* pinned above the scroller, never scrolls */
  margin: 0 var(--gutter-double);     /* horizontal inset (scroller padding no longer applies) */
  display: flex;
  flex-direction: column;
  gap: var(--gutter-double);
}

/* Header states (mirror Swift expanded/collapsed Group) */
.ma-header[hidden] { display: none; }

.ma-header--expanded {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.ma-header__row,
.ma-profile-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-double);
}

/* Collapsed: small avatar beside name + short Call/Email buttons */
.ma-header--collapsed {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-double);
}
.ma-header--collapsed .ma-profile-info {
  flex: 1;
  gap: var(--gutter);
}

.ma-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ma-avatar--sm {
  width: 48px;
  height: 48px;
}

.ma-avatar--initials {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--app-button-black);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.ma-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.ma-profile-name {
  font: var(--app-h4);
  font-size: 18px;
  color: var(--app-text-primary);
  margin: 0;
}

.ma-profile-meta {
  font: var(--app-body-sm);
  color: var(--app-text-secondary);
  margin: 0;
}

.ma-earnings-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.16);
  font: var(--app-body-sm);
  color: var(--app-text-secondary);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}

.ma-profile-actions {
  display: flex;
  gap: var(--gutter-double);
}

.ma-profile-actions .btn-secondary {
  height: 44px;
  font: var(--app-h5);
  gap: 6px;
}

.ma-profile-tabs {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ma-profile-tabs::-webkit-scrollbar { display: none; }

/* ───── Account Details collapsible card ───── */
.ma-details-card {
  padding: 0;
  overflow: hidden;
}

.ma-details-toggle {
  display: flex;
  align-items: center;
  gap: var(--gutter-double);
  width: 100%;
  padding: var(--gutter-double);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: var(--app-text-primary);
}

.ma-details-toggle__title {
  flex: 1;
  font: var(--app-h4);
  text-align: left;
}

.ma-details-toggle__icon {
  flex-shrink: 0;
  color: var(--app-gold);   /* section icons render in the brand gold per the app */
}

.ma-details-chevron {
  flex-shrink: 0;
  color: var(--app-text-secondary);
}

.ma-details-body {
  padding-top: 0;
  padding-right: var(--gutter-double);
  padding-bottom: var(--gutter-double);
  padding-left: var(--gutter-double);
  border-top: 0.5px solid var(--app-divider);
}
.ma-details-body[hidden] { display: none; }

.ma-details-section {
  font: var(--app-h5);
  color: var(--app-text-primary);
  margin: var(--gutter-double) 0 var(--gutter-double) 0;
}

/* Stylist Info two-column grid rows */
.ma-info-rows {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-double);
}

.ma-info-pair {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-double);
}

.ma-info-pair__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Warm gold tint per reference */
  background: rgba(145, 121, 87, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--app-gold);
  margin-top: 2px;
}

.ma-info-pair__cols {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--gutter-double);
}

.ma-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ma-info-label {
  font: var(--app-body-sm);
  color: var(--app-text-tertiary);
  margin: 0;
}

.ma-info-value {
  font: var(--app-body);
  color: var(--app-text-primary);
  margin: 0;
}

/* Contact Info single-column rows */
.ma-contact-rows {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-double);
}

.ma-contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-double);
}

.ma-contact-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(145, 121, 87, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--app-gold);
  margin-top: 2px;
}

.ma-contact-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Real app icon SVGs used as <img> (baked brand gold / full-colour Visa) */
.ma-icon-img {
  display: block;
}

/* Muted "No … Added" placeholder values */
.ma-info-value--empty {
  color: var(--app-text-tertiary);
}

/* ───── Public Profile · Share rows ─────
   Same icon + label/value layout as contact rows, plus a trailing copy button. */
.ma-share-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-double);
}

.ma-share-link {
  font: var(--app-body);
  color: var(--app-text-primary);
  text-decoration: underline;
  overflow-wrap: anywhere;
  margin: 0;
}

.ma-share-copy {
  flex-shrink: 0;
  margin-left: auto;
  padding: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--app-text-secondary);
  -webkit-tap-highlight-color: transparent;
}

/* ───── Public Profile · Social Media grid ───── */
.ma-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter-double) var(--gutter-double);
}

.ma-social-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
}

/* ───── Billing · Financial Info compact rows ─────
   One icon per row + a stacked pair of label/value lines (iPhone compact layout). */
.ma-fin-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter-double);
}

.ma-fin-pair {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.ma-fin-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Visa mark keeps the tinted circle but shows in its own brand colours */
.ma-contact-row__icon--visa {
  color: inherit;
}

/* ───── Sub-tab panes ─────
   Flex column so the stacked collapsible cards keep a 16px gap between them. */
.ma-pane {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-double);
}
.ma-pane[hidden] { display: none; }

.ma-pane-placeholder {
  padding: var(--gutter-4);
  text-align: center;
  color: var(--app-text-tertiary);
  font: var(--app-body);
}