/* =====================================================================
   Ronelle Perfume — Premium My Account (Phase 9)
   ---------------------------------------------------------------------
   Premium white, editorial. Token-driven, RTL via logical properties,
   `rui-acc-*` namespaced. Served directly (no Tailwind build). Reuses the
   frozen design system + Phase 6.5 global infra. The global reduced-motion
   rule (components.css) calms rui-* animation here too.
   ===================================================================== */

.rui-acc { padding-block: var(--rui-space-xl) var(--rui-space-3xl); }
.rui-acc__wrap { display: grid; grid-template-columns: 1fr; gap: var(--rui-space-lg); align-items: start; }
@media (min-width: 1024px) { .rui-acc__wrap { grid-template-columns: 264px 1fr; gap: var(--rui-space-xl); } }

/* ---- Mobile menu trigger ---- */
.rui-acc__menubar { display: flex; align-items: center; gap: var(--rui-space-sm); margin-block-end: var(--rui-space-md); }
.rui-acc__menu-btn {
  display: inline-flex; align-items: center; gap: var(--rui-space-xs);
  border: 1px solid var(--rui-border); border-radius: var(--rui-radius-pill);
  background: var(--rui-bg, #fff); color: var(--rui-text); padding: var(--rui-space-xs) var(--rui-space-md);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
@media (min-width: 1024px) { .rui-acc__menubar { display: none; } }

/* ---- Sidebar ---- */
.rui-acc__sidebar { background: var(--rui-bg, #fff); border: 1px solid var(--rui-border); border-radius: var(--rui-radius-xl); padding: var(--rui-space-md); }
.rui-acc__nav { display: flex; flex-direction: column; gap: 2px; }
.rui-acc__link {
  display: flex; align-items: center; gap: var(--rui-space-sm); width: 100%;
  padding: var(--rui-space-sm) var(--rui-space-md); border-radius: var(--rui-radius-md);
  color: var(--rui-text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600;
  border: none; background: transparent; cursor: pointer; text-align: start;
  transition: var(--rui-transition-colors);
}
.rui-acc__link svg { color: var(--rui-text-subtle); flex-shrink: 0; transition: var(--rui-transition-colors); }
.rui-acc__link:hover { background: var(--rui-surface-sunken); color: var(--rui-text); }
.rui-acc__link.is-active { background: var(--rui-surface-sunken); color: var(--rui-text); }
.rui-acc__link.is-active svg { color: var(--rui-accent); }
.rui-acc__link--danger { color: #dc2626; }
.rui-acc__link--danger svg { color: #dc2626; }
.rui-acc__nav-sep { height: 1px; background: var(--rui-border); margin-block: var(--rui-space-xs); }

.rui-acc__main { min-width: 0; }
.rui-acc__main > .rui-alert { margin-block-end: var(--rui-space-md); }
.rui-acc__head { margin-block-end: var(--rui-space-lg); }
.rui-acc__eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rui-accent-strong, var(--rui-accent)); }
.rui-acc__title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--rui-text); margin: var(--rui-space-2xs) 0 0; }
.rui-acc__sub { color: var(--rui-text-muted); margin-block-start: var(--rui-space-2xs); }

.rui-acc-card { background: var(--rui-bg, #fff); border: 1px solid var(--rui-border); border-radius: var(--rui-radius-xl); padding: var(--rui-space-lg); }
.rui-acc-card + .rui-acc-card { margin-block-start: var(--rui-space-lg); }
.rui-acc-card__title { font-size: 1rem; font-weight: 700; color: var(--rui-text); margin: 0 0 var(--rui-space-md); display: flex; align-items: center; gap: var(--rui-space-xs); }
.rui-acc-card__title svg { color: var(--rui-accent); }

/* ---- Dashboard stats ---- */
.rui-acc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rui-space-md); }
@media (min-width: 768px) { .rui-acc-stats { grid-template-columns: repeat(4, 1fr); } }
.rui-acc-stat { border: 1px solid var(--rui-border); border-radius: var(--rui-radius-lg); padding: var(--rui-space-md); }
.rui-acc-stat__icon { display: inline-flex; color: var(--rui-accent); margin-block-end: var(--rui-space-xs); }
.rui-acc-stat__value { font-size: 1.3rem; font-weight: 800; color: var(--rui-text); }
.rui-acc-stat__label { font-size: 0.76rem; color: var(--rui-text-muted); margin-block-start: 2px; }

.rui-acc-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rui-space-sm); }
@media (min-width: 768px) { .rui-acc-actions { grid-template-columns: repeat(3, 1fr); } }
.rui-acc-action {
  display: flex; align-items: center; gap: var(--rui-space-sm); text-decoration: none;
  border: 1px solid var(--rui-border); border-radius: var(--rui-radius-lg);
  padding: var(--rui-space-md); color: var(--rui-text); font-weight: 600; font-size: 0.9rem;
  transition: var(--rui-transition-base);
}
.rui-acc-action:hover { border-color: var(--rui-accent); transform: translateY(-1px); }
.rui-acc-action svg { color: var(--rui-accent); flex-shrink: 0; }

/* ---- Orders list ---- */
.rui-acc-orders { display: flex; flex-direction: column; gap: var(--rui-space-md); }
.rui-acc-order {
  display: grid; grid-template-columns: 1fr auto; gap: var(--rui-space-sm) var(--rui-space-md);
  border: 1px solid var(--rui-border); border-radius: var(--rui-radius-lg); padding: var(--rui-space-md);
  align-items: center;
}
.rui-acc-order__num { font-weight: 700; color: var(--rui-text); font-size: 0.9rem; }
.rui-acc-order__num span { direction: ltr; unicode-bidi: embed; }
.rui-acc-order__meta { display: flex; flex-wrap: wrap; gap: var(--rui-space-xs) var(--rui-space-md); margin-block-start: 4px; font-size: 0.78rem; color: var(--rui-text-muted); }
.rui-acc-order__total { font-size: 1rem; font-weight: 800; color: var(--rui-accent-strong, var(--rui-accent)); white-space: nowrap; }
.rui-acc-order__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--rui-space-sm); padding-block-start: var(--rui-space-sm); border-block-start: 1px solid var(--rui-border); }

/* shared status badge (mirrors success page) */
.rui-acc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--rui-radius-pill); font-size: 0.74rem; font-weight: 600; border: 1px solid var(--rui-border); color: var(--rui-text-muted); }
.rui-acc-badge--ok { color: #16a34a; border-color: color-mix(in srgb, #16a34a 30%, transparent); background: color-mix(in srgb, #16a34a 7%, transparent); }
.rui-acc-badge--warn { color: #d97706; border-color: color-mix(in srgb, #d97706 30%, transparent); background: color-mix(in srgb, #d97706 7%, transparent); }
.rui-acc-badge--info { color: var(--rui-accent-strong, var(--rui-accent)); border-color: var(--rui-border-strong); background: var(--rui-surface-sunken); }
.rui-acc-badge--bad { color: #dc2626; border-color: color-mix(in srgb, #dc2626 30%, transparent); }

/* ---- Address book ---- */
.rui-acc-addr-grid { display: grid; grid-template-columns: 1fr; gap: var(--rui-space-md); }
@media (min-width: 640px) { .rui-acc-addr-grid { grid-template-columns: 1fr 1fr; } }
.rui-acc-addr { border: 1px solid var(--rui-border); border-radius: var(--rui-radius-lg); padding: var(--rui-space-md); position: relative; }
.rui-acc-addr.is-default { border-color: var(--rui-accent); }
.rui-acc-addr__label { font-weight: 700; color: var(--rui-text); display: flex; align-items: center; gap: var(--rui-space-xs); }
.rui-acc-addr__default { font-size: 0.68rem; font-weight: 700; color: var(--rui-accent-strong, var(--rui-accent)); border: 1px solid var(--rui-border-strong); border-radius: var(--rui-radius-pill); padding: 1px 8px; }
.rui-acc-addr__body { font-size: 0.84rem; color: var(--rui-text-muted); line-height: 1.7; margin-block: var(--rui-space-xs); }
.rui-acc-addr__actions { display: flex; flex-wrap: wrap; gap: var(--rui-space-xs); }
.rui-acc-addr__act { border: none; background: transparent; color: var(--rui-text-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: var(--rui-radius-sm); }
.rui-acc-addr__act:hover { color: var(--rui-text); background: var(--rui-surface-sunken); }
.rui-acc-addr__act--danger:hover { color: #dc2626; }

/* ---- Forms (settings / address / auth) ---- */
.rui-acc-form { display: grid; grid-template-columns: 1fr; gap: var(--rui-space-md); }
@media (min-width: 640px) { .rui-acc-form--2 { grid-template-columns: 1fr 1fr; } .rui-acc-form .rui-acc-form__full { grid-column: 1 / -1; } }
.rui-acc-form__actions { display: flex; gap: var(--rui-space-sm); flex-wrap: wrap; margin-block-start: var(--rui-space-xs); }

/* ---- Auth (centered card) ---- */
.rui-acc-auth { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding-block: var(--rui-space-2xl); }
.rui-acc-auth__card { width: min(440px, 100%); background: var(--rui-bg, #fff); border: 1px solid var(--rui-border); border-radius: var(--rui-radius-xl); padding: var(--rui-space-xl); }
.rui-acc-auth__head { text-align: center; margin-block-end: var(--rui-space-lg); }
.rui-acc-auth__title { font-size: 1.5rem; font-weight: 800; color: var(--rui-text); margin: var(--rui-space-2xs) 0 0; }
.rui-acc-auth__sub { color: var(--rui-text-muted); font-size: 0.86rem; margin-block-start: var(--rui-space-2xs); }
.rui-acc-auth__form { display: flex; flex-direction: column; gap: var(--rui-space-md); }
.rui-acc-auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--rui-space-sm); font-size: 0.82rem; }
.rui-acc-auth__row label { display: inline-flex; align-items: center; gap: 6px; color: var(--rui-text-muted); cursor: pointer; }
.rui-acc-auth__link { color: var(--rui-accent-strong, var(--rui-accent)); text-decoration: none; font-weight: 600; }
.rui-acc-auth__link:hover { text-decoration: underline; }
.rui-acc-auth__foot { text-align: center; margin-block-start: var(--rui-space-lg); font-size: 0.85rem; color: var(--rui-text-muted); }

/* ---- Password strength meter ---- */
.rui-acc-pw { margin-block-start: 6px; }
.rui-acc-pw__bar { height: 5px; border-radius: var(--rui-radius-pill); background: rgba(0,0,0,.08); overflow: hidden; }
.rui-acc-pw__fill { height: 100%; width: 0; border-radius: var(--rui-radius-pill); transition: width var(--rui-duration-base) var(--rui-ease-standard), background-color var(--rui-duration-base) var(--rui-ease-standard); }
.rui-acc-pw__fill.is-weak { width: 33%; background: #dc2626; }
.rui-acc-pw__fill.is-medium { width: 66%; background: #d97706; }
.rui-acc-pw__fill.is-strong { width: 100%; background: #16a34a; }
.rui-acc-pw__hint { font-size: 0.72rem; color: var(--rui-text-subtle); margin-block-start: 4px; }

/* Customer area: the same white, gold and portrait proportions as the store. */
.rui-acc { --rui-radius-xl: 0px; --rui-radius-lg: 2px; --rui-radius-md: 2px; padding-block:40px 72px; }
.rui-acc > .rui-container { width:calc(100% - 64px);max-width:1800px;margin-inline:auto; }
.rui-acc__wrap { gap:40px; }
.rui-acc__sidebar { padding:24px 12px;position:sticky;top:100px;border-color:#e8e6df; }
.rui-acc__identity { padding:0 16px 24px;font-size:18px;letter-spacing:.14em;font-weight:700;border-bottom:1px solid #e8e6df;margin:0 0 12px; }
.rui-acc__identity span { display:block;letter-spacing:0;font-weight:400;font-size:13px;color:#73716b;margin-top:10px;overflow-wrap:anywhere; }
.rui-acc__link { min-height:48px;font-size:13px; }
.rui-acc__link.is-active { background:#f6f5f0;box-shadow:inset 3px 0 var(--rui-accent-strong,var(--rui-accent)); }
.rui-acc[dir=rtl] .rui-acc__link.is-active {box-shadow:inset -3px 0 var(--rui-accent-strong,var(--rui-accent));}
.rui-acc__head {padding-block:8px 24px;border-bottom:1px solid #e8e6df;margin-bottom:28px;}
.rui-acc__title {font-size:clamp(28px,3vw,42px);line-height:1.2;font-weight:600;overflow-wrap:anywhere;}
.rui-acc__sub {font-size:14px;line-height:1.7;margin-top:12px;}
.rui-acc-card {padding:28px;border-color:#e8e6df;}
.rui-acc-card__title {margin-bottom:24px;font-size:17px;font-weight:600;}
.rui-acc-stats {gap:0;}
.rui-acc-stat {border:0;border-inline-end:1px solid #e8e6df;border-radius:0;padding:20px;}
.rui-acc-stat:last-child {border-inline-end:0;}
.rui-acc-stat__value {font-size:clamp(20px,2vw,28px);font-weight:600;font-variant-numeric:tabular-nums;}
.rui-acc-stat__label {font-size:12px;margin-top:8px;}
.rui-acc-action {min-height:80px;font-size:13px;background:#fafaf8;}
.rui-acc-order {padding:24px;border-color:#e8e6df;border-radius:0;}
.rui-acc-order__meta>span {display:inline-flex;align-items:center;gap:6px;}
.rui-acc-order__foot {padding-top:16px;margin-top:8px;}
.rui-acc-addr {padding:24px;overflow-wrap:anywhere;}
.rui-acc-addr__label {flex-wrap:wrap;}
.rui-acc-addr__body {margin-block:16px;font-size:14px;}
.rui-acc-addr__act {display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:8px;}
.rui-acc input:not([type=checkbox]):not([type=hidden]),.rui-acc select,.rui-acc textarea {border-radius:0;min-height:48px;font-size:16px;max-width:100%;}
.rui-acc input[type=checkbox] {accent-color:var(--rui-accent-strong,var(--rui-accent));width:17px;height:17px;}
.rui-acc .rui-btn {border-radius:0;min-height:44px;}
.rui-acc .rui-btn--primary {background:#222;color:white;border-color:#222;}
.rui-acc :is(a,button,input,select,textarea):focus-visible {outline:2px solid var(--rui-accent-strong,var(--rui-accent));outline-offset:3px;}
.rui-acc-pw__fill {display:block;}
.rui-acc-auth {padding:64px 20px;background:#fafaf8;}
.rui-acc-auth__card {width:min(520px,100%);padding:40px;background:white;border-color:#e8e6df;border-radius:0;}
.rui-acc-auth__title {font-size:30px;font-weight:600;margin-top:16px;}
.rui-acc-auth__sub {line-height:1.8;margin-top:12px;}
.rui-acc .rui-pcard__media {aspect-ratio:3/4;}
.rui-acc .rui-pcard__media img {width:100%;height:100%;object-fit:cover;}
.rui-acc .rcw-grid,.rui-acc .rui-grid--products {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
@media(max-width:1023px){
 .rui-acc__wrap{gap:24px}.rui-acc__sidebar{position:static;padding:8px;border-inline:0;min-width:0;}
 .rui-acc__identity{display:none}.rui-acc__nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;}
 .rui-acc__link{width:auto;white-space:nowrap;padding:10px 14px;}.rui-acc__nav-sep{display:none;}.rui-acc__nav form{flex-shrink:0;}
 .rui-acc .rcw-grid,.rui-acc .rui-grid--products{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:600px){
 .rui-acc{padding-block:20px 40px}.rui-acc>.rui-container{width:calc(100% - 32px);}
 .rui-acc-card{padding:20px 16px}.rui-acc-stat{padding:16px 12px}.rui-acc-stat:nth-child(2){border-inline-end:0;}
 .rui-acc-stat:nth-child(-n+2){border-bottom:1px solid #e8e6df;}.rui-acc-actions{grid-template-columns:1fr;}
 .rui-acc-action{min-height:60px}.rui-acc-order{padding:18px;grid-template-columns:1fr;}.rui-acc-order__foot{justify-content:flex-end;}
 .rui-acc-auth{padding:32px 16px}.rui-acc-auth__card{padding:28px 20px;}.rui-acc-auth__row{flex-wrap:wrap;}
 .rui-acc .rcw-grid,.rui-acc .rui-grid--products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
}
@media(prefers-reduced-motion:reduce){.rui-acc *{scroll-behavior:auto!important;transition:none!important;}}

/* Align asynchronous recommendations with the account card content. */
.rui-acc .rec-rail {margin-block:24px 0;padding:28px;border:1px solid #e8e6df;background:#fff;}
.rui-acc .rec-rail>.rui-container {width:100%;max-width:none;padding:0;margin:0;}
.rui-acc .rec-rail .rui-section-header {margin-bottom:24px;}
.rui-acc .rui-pcard {min-width:0;}
.rui-acc .rui-pcard__media {display:block;position:relative;overflow:hidden;}
.rui-acc .rui-pcard__img-alt {position:absolute;inset:0;opacity:0;pointer-events:none;}
.rui-acc .rui-pcard__media:hover .rui-pcard__img-alt {opacity:1;}
.rui-acc .rui-su-grid {grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr);gap:24px;}
.rui-acc .rui-su-col {min-width:0;gap:24px;}
.rui-acc .rui-su-card {padding:24px;border-radius:0;border-color:#e8e6df;}
.rui-acc .rui-su-card__title {font-size:17px;font-weight:600;margin-bottom:24px;}
.rui-acc .rui-su-info {gap:24px 16px;}
.rui-acc .rui-su-info__label {font-size:12px;}
.rui-acc .rui-su-info__value {font-size:14px;font-weight:500;}
.rui-acc .rui-su-item {grid-template-columns:72px minmax(0,1fr);gap:12px;}
.rui-acc .rui-su-item__img {width:72px;height:96px;grid-row:span 2;border-radius:0;object-fit:cover;}
.rui-acc .rui-su-item__side {grid-column:2;text-align:start;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.rui-acc .rui-su-item__name {overflow-wrap:anywhere;}
.rui-acc .rui-su-totals {gap:14px;}.rui-acc .rui-su-row {gap:16px;}
.rui-acc .rui-su-help__link {min-height:44px;border-radius:0;}
@media(max-width:1200px){.rui-acc .rui-su-grid {grid-template-columns:minmax(0,1fr);}}
@media(max-width:600px){.rui-acc .rec-rail{padding:20px 16px;}.rui-acc .rui-su-card{padding:20px 16px;}.rui-acc .rui-su-info{grid-template-columns:minmax(0,1fr);}}