/* =====================================================================
 * smile_v2 — Customer account dashboard add-ons
 * ---------------------------------------------------------------------
 * Extends account-page.css. DO NOT redefine .smile-address-card,
 * .smile-order-row, .smile-order-summary, .smile-status-pill,
 * .smile-avatar — those already exist.
 *
 * All NEW classes are prefixed `.smile-account-*` to avoid collision.
 * Uses tokens loaded globally via smile-v2-tokens.css:
 *   --color-burgundy  #6B2C2C
 *   --color-rose      #E8C5C5
 *   --color-champagne #B8924F
 *   --color-ivory     #FAF7F2
 *   --color-charcoal  #2C2823
 *   --color-charcoal-muted #6B6360
 *   --font-display    "Playfair Display", serif
 *   --font-body       "Inter", sans-serif
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * Outer wrapper
 * ------------------------------------------------------------------- */
.smile-account {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  font-family: var(--font-body, "Inter", sans-serif);
  color: var(--color-charcoal, #2C2823);
}

@media (max-width: 640px) {
  .smile-account {
    padding: 24px 16px 48px;
  }
}


/* ---------------------------------------------------------------------
 * Dashboard greeting (avatar + h1 + sub)
 * ------------------------------------------------------------------- */
.smile-account__greet {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(107, 99, 96, 0.15);
}

.smile-account__greet-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.smile-account__greet h1,
.smile-account__greet .smile-account__greet-title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-charcoal, #2C2823);
  margin: 0;
}

.smile-account__greet em {
  font-style: italic;
  color: var(--color-burgundy, #6B2C2C);
  font-weight: 400;
}

.smile-account__greet-sub {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted, #6B6360);
}

@media (max-width: 480px) {
  .smile-account__greet {
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
  }
}


/* ---------------------------------------------------------------------
 * Dashboard grid of cards
 * ------------------------------------------------------------------- */
.smile-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}


/* ---------------------------------------------------------------------
 * Dashboard card (link)
 * ------------------------------------------------------------------- */
.smile-account-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon title chev"
    "icon desc  badge";
  align-items: start;
  gap: 4px 16px;
  padding: 24px;
  min-height: 112px;
  background: #FFFFFF;
  border: 1px solid rgba(107, 99, 96, 0.15);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.smile-account-card:hover,
.smile-account-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(44, 40, 35, 0.06);
  border-color: rgba(184, 146, 79, 0.45);
  text-decoration: none;
  color: inherit;
}

.smile-account-card:focus-visible {
  outline: 2px solid var(--color-champagne, #B8924F);
  outline-offset: 2px;
}

.smile-account-card__ic {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--color-burgundy, #6B2C2C);
}

.smile-account-card__ic svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.smile-account-card__title {
  grid-area: title;
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-charcoal, #2C2823);
  margin: 0;
}

.smile-account-card:hover .smile-account-card__title {
  /* champagne underline on hover */
  background-image: linear-gradient(var(--color-champagne, #B8924F), var(--color-champagne, #B8924F));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

.smile-account-card__desc {
  grid-area: desc;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-charcoal-muted, #6B6360);
  margin: 0;
}

.smile-account-card__badge {
  grid-area: badge;
  align-self: end;
  justify-self: end;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-burgundy, #6B2C2C);
  background: var(--color-rose, #E8C5C5);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.smile-account-card__chev {
  grid-area: chev;
  align-self: start;
  color: var(--color-charcoal-muted, #6B6360);
  transition: transform 200ms ease, color 200ms ease;
}

.smile-account-card__chev svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.smile-account-card:hover .smile-account-card__chev {
  color: var(--color-burgundy, #6B2C2C);
  transform: translateX(2px);
}


/* ---------------------------------------------------------------------
 * Dashboard footer actions row (logout etc.)
 * ------------------------------------------------------------------- */
.smile-account__actions {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(107, 99, 96, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}


/* ---------------------------------------------------------------------
 * Sub-page pane (identity, addresses, history, password)
 * ------------------------------------------------------------------- */
.smile-account-pane {
  max-width: 720px;
  margin: 24px auto 64px;
  padding: 32px 32px 40px;
  background: #FFFFFF;
  border: 1px solid rgba(107, 99, 96, 0.15);
  border-radius: 4px;
}

.smile-account-pane--wide {
  max-width: 960px;
}

.smile-account-pane--centered {
  max-width: 480px;
}

@media (max-width: 640px) {
  .smile-account-pane {
    margin: 16px auto 40px;
    padding: 24px 20px 32px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}


/* ---------------------------------------------------------------------
 * "Back" link (top-left of pane)
 * ------------------------------------------------------------------- */
.smile-account-pane__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted, #6B6360);
  text-decoration: none;
  min-height: 32px;
  transition: color 150ms ease;
}

.smile-account-pane__back:hover,
.smile-account-pane__back:focus-visible {
  color: var(--color-burgundy, #6B2C2C);
  text-decoration: none;
}

.smile-account-pane__back:focus-visible {
  outline: 2px solid var(--color-champagne, #B8924F);
  outline-offset: 2px;
}

.smile-account-pane__back svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}


/* ---------------------------------------------------------------------
 * Pane header (h1 + optional subtitle, already rendered by page_title)
 * ------------------------------------------------------------------- */
.smile-account-pane__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-charcoal, #2C2823);
  margin: 0 0 8px;
}

.smile-account-pane__sub {
  font-size: 13px;
  color: var(--color-charcoal-muted, #6B6360);
  margin: 0 0 24px;
}


/* ---------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------- */
.smile-account-empty {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed rgba(107, 99, 96, 0.3);
  border-radius: 4px;
  background: var(--color-ivory, #FAF7F2);
}

.smile-account-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--color-burgundy, #6B2C2C);
  margin-bottom: 16px;
}

.smile-account-empty__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.smile-account-empty__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-charcoal, #2C2823);
  margin: 0 0 6px;
}

.smile-account-empty__copy {
  font-size: 14px;
  color: var(--color-charcoal-muted, #6B6360);
  margin: 0 0 20px;
}


/* ---------------------------------------------------------------------
 * Addresses grid (reuses existing .smile-address-card)
 * ------------------------------------------------------------------- */
.smile-account-grid--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .smile-account-grid--addresses {
    grid-template-columns: repeat(2, 1fr);
  }
}

.smile-account-addresses__cta {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}


/* ---------------------------------------------------------------------
 * History list (reuses existing .smile-order-row)
 * ------------------------------------------------------------------- */
.smile-account-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.smile-account-history__pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}


/* ---------------------------------------------------------------------
 * Account form — overrides Bootstrap form-control inside our pane
 * ------------------------------------------------------------------- */
.smile-account-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.smile-account-form .form-group,
.smile-account-form .form-group-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.smile-account-form label,
.smile-account-form .form-control-label,
.smile-account-form .smile-account-form__label {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted, #6B6360);
  margin: 0;
}

.smile-account-form .form-control,
.smile-account-form input[type="text"],
.smile-account-form input[type="email"],
.smile-account-form input[type="tel"],
.smile-account-form input[type="password"],
.smile-account-form input[type="number"],
.smile-account-form input[type="date"],
.smile-account-form select,
.smile-account-form textarea {
  width: 100%;
  padding: 12px 0;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-charcoal, #2C2823);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(107, 99, 96, 0.4);
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  transition: border-color 150ms ease;
}

.smile-account-form .form-control:focus,
.smile-account-form input:focus,
.smile-account-form select:focus,
.smile-account-form textarea:focus {
  outline: 0;
  border-bottom: 1.5px solid var(--color-burgundy, #6B2C2C);
  box-shadow: none;
}

.smile-account-form .form-control:focus-visible {
  outline: 2px solid var(--color-champagne, #B8924F);
  outline-offset: 2px;
}

.smile-account-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6360' stroke-width='1.6'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px 16px;
  padding-right: 28px;
}

.smile-account-form textarea {
  min-height: 96px;
  resize: vertical;
}

.smile-account-form .form-control-comment,
.smile-account-form .help-block,
.smile-account-form small {
  font-size: 12px;
  color: var(--color-charcoal-muted, #6B6360);
}

.smile-account-form .form-control-valid {
  color: #2E5C3F;
}

.smile-account-form .form-control-error,
.smile-account-form .form-control.is-invalid + small,
.smile-account-form .has-error .help-block {
  font-size: 12px;
  color: #C4302B;
  margin-top: 4px;
}

.smile-account-form .form-control.is-invalid,
.smile-account-form .has-error .form-control {
  border-bottom-color: #C4302B;
}

.smile-account-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 540px) {
  .smile-account-form__row {
    grid-template-columns: 1fr;
  }
}

.smile-account-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(107, 99, 96, 0.12);
}

@media (max-width: 480px) {
  .smile-account-form__actions {
    justify-content: stretch;
  }

  .smile-account-form__actions > * {
    flex: 1 1 100%;
  }
}


/* ---------------------------------------------------------------------
 * Password field with eye-toggle (mirrors auth-page pattern)
 * ------------------------------------------------------------------- */
.smile-account-form .smile-field--has-toggle {
  position: relative;
}

.smile-account-form .smile-field--has-toggle .smile-account-form__toggle {
  position: absolute;
  right: 0;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--color-charcoal-muted, #6B6360);
  cursor: pointer;
  border-radius: 4px;
}

.smile-account-form .smile-field--has-toggle .smile-account-form__toggle:focus-visible {
  outline: 2px solid var(--color-champagne, #B8924F);
  outline-offset: 2px;
}

.smile-account-form .smile-field--has-toggle .smile-account-form__toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.smile-account-form .smile-field--has-toggle input {
  padding-right: 48px;
}


/* ---------------------------------------------------------------------
 * Alerts (success / danger) overrides for our pane context
 * ------------------------------------------------------------------- */
.smile-account-pane .alert,
.smile-account-pane .notifications-container .alert {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 0;
  border-left: 3px solid;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.5;
}

.smile-account-pane .alert-success {
  background: #E8F0E5;
  color: #2E5C3F;
  border-left-color: #2E5C3F;
}

.smile-account-pane .alert-danger,
.smile-account-pane .alert-error {
  background: #FCEAE8;
  color: #C4302B;
  border-left-color: #C4302B;
}

.smile-account-pane .alert-info {
  background: #E3EBF3;
  color: #2A4A66;
  border-left-color: #2A4A66;
}

.smile-account-pane .alert-warning {
  background: #FBEDDD;
  color: #8E5A1A;
  border-left-color: #B8924F;
}


/* ---------------------------------------------------------------------
 * Password strength meter (reused from forms.css if available;
 * fallback minimal styles to ensure visual continuity here)
 * ------------------------------------------------------------------- */
.smile-account-form .smile-password-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.smile-account-form .smile-password-strength__bar {
  flex: 1;
  height: 3px;
  background: rgba(107, 99, 96, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.smile-account-form .smile-password-strength__fill {
  height: 100%;
  width: 0;
  background: var(--color-burgundy, #6B2C2C);
  transition: width 200ms ease, background 200ms ease;
}

.smile-account-form .smile-password-strength__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted, #6B6360);
}


/* ---------------------------------------------------------------------
 * Misc helpers
 * ------------------------------------------------------------------- */
.smile-account__lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-charcoal-muted, #6B6360);
  margin: 0 0 24px;
}

.smile-account-link {
  color: var(--color-burgundy, #6B2C2C);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}

.smile-account-link:hover,
.smile-account-link:focus-visible {
  border-bottom-color: var(--color-champagne, #B8924F);
  color: var(--color-burgundy, #6B2C2C);
  text-decoration: none;
}

.smile-account-link:focus-visible {
  outline: 2px solid var(--color-champagne, #B8924F);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------------
 * .smile-form-field — Claude Design field row (label above input).
 * Used by themes/smile_v2/templates/_partials/form-fields.tpl.
 * ------------------------------------------------------------------- */
.smile-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.smile-form-field__label {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted, #6B6360);
  margin: 0;
}

.smile-form-field__label--required::after {
  content: " *";
  color: var(--color-burgundy, #6B2C2C);
}

.smile-form-field__static {
  padding: 12px 0;
  min-height: 44px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-charcoal, #2C2823);
  border-bottom: 1px dashed rgba(107, 99, 96, 0.32);
}

.smile-form-field--readonly .smile-form-field__label {
  color: rgba(107, 99, 96, 0.7);
}

.smile-form-field__hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-charcoal-muted, #6B6360);
}

.smile-form-field__error {
  font-size: 12px;
  color: #C4302B;
  margin-top: 4px;
}

.smile-form-field.has-error .form-control {
  border-bottom-color: #C4302B;
}

.smile-form-field__radios {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.smile-form-field__radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 14px;
  color: var(--color-charcoal, #2C2823);
  cursor: pointer;
}

.smile-form-field__radio input[type="radio"] {
  accent-color: var(--color-burgundy, #6B2C2C);
  width: 18px;
  height: 18px;
}

/* Checkbox row — input on the left, label text wraps on the right.
   Defeats theme.css globals via !important on the box so it doesn't
   stack on top of the text or balloon to input-100% width. */
.smile-account-pane .smile-form-field__checkbox,
.smile-form-field__checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-charcoal, #2C2823) !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}

.smile-account-pane .smile-form-field__checkbox input[type="checkbox"],
.smile-form-field__checkbox > input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1.5px solid rgba(107, 99, 96, 0.5) !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background 150ms ease, border-color 150ms ease !important;
}

.smile-account-pane .smile-form-field__checkbox input[type="checkbox"]:hover,
.smile-form-field__checkbox > input[type="checkbox"]:hover {
  border-color: var(--color-charcoal, #2C2823) !important;
}

.smile-account-pane .smile-form-field__checkbox input[type="checkbox"]:checked,
.smile-form-field__checkbox > input[type="checkbox"]:checked {
  background: var(--color-burgundy, #6B2C2C) !important;
  border-color: var(--color-burgundy, #6B2C2C) !important;
}

.smile-account-pane .smile-form-field__checkbox input[type="checkbox"]:checked::after,
.smile-form-field__checkbox > input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 4px;
  top: 0;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.smile-form-field__checkbox > span {
  flex: 1 1 auto;
}

.smile-form-field__checkbox em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
  color: var(--color-charcoal-muted, #6B6360);
}

.smile-form-field__birthday {
  display: flex;
  gap: 10px;
}

.smile-form-field__birthday select {
  flex: 1 1 0;
  min-width: 0;
}


/* ---------------------------------------------------------------------
 * .smile-cta inside .smile-account-pane — Claude Design primary button.
 * The auth-page version is scoped to .smile-auth; account pages need
 * their own.
 * ------------------------------------------------------------------- */
.smile-account-pane .smile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  background: var(--color-burgundy, #6B2C2C);
  color: var(--color-ivory, #FAF7F2);
  border: 1px solid var(--color-burgundy, #6B2C2C);
  border-radius: 4px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

.smile-account-pane .smile-cta:hover {
  background: #5A2424;
  border-color: #5A2424;
  color: var(--color-ivory, #FAF7F2);
  box-shadow: 0 6px 18px rgba(107, 44, 44, 0.22);
}

.smile-account-pane .smile-cta:active {
  transform: translateY(1px);
}

.smile-account-pane .smile-cta:focus-visible {
  outline: 2px solid var(--color-champagne, #B8924F);
  outline-offset: 3px;
}

.smile-account-pane .smile-cta--ghost {
  background: transparent;
  color: var(--color-burgundy, #6B2C2C);
}

.smile-account-pane .smile-cta--ghost:hover {
  background: var(--color-burgundy, #6B2C2C);
  color: var(--color-ivory, #FAF7F2);
}