/* =========================================================
   ACCOUNT PAGE
========================================================= */

.account-page {
  width: 100%;
  max-width: var(--page-standard);
  margin: 0 auto;
  padding: 8px 0 60px;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.account-heading {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 88px;
  margin-bottom: 18px;
}

.account-heading-copy {
  position: relative;
  z-index: 2;
}

.account-heading h1 {
  margin: 8px 0 10px;
  font-size: 32px;
  line-height: 1.2;
  color: #211b19;
}

.account-description {
  margin: 0;
  font-size: 14px;
  color: #756b67;
}


/* decorative SVG */
.account-heading-art {
  position: absolute;
  top: 50%;
  right : 0px;    

  width: 360px;
  max-width: 40%;
  height: 100%;

  transform: translateY(-50%);

  pointer-events: none;
  user-select: none;

  z-index: 1;
}
/* pink glow */
.account-art-glow {
  position: absolute;
  right: 0px;
  top : 50%;

  width: 300px;
  height: 220px;

  transform: translateY(-50%);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(236, 76, 125, 0.10),
      rgba(236, 76, 125, 0.035) 45%,
      transparent 70%
    );

  z-index: 0;
}

.account-heading-bg {
  position: absolute;

  top: 50%;
  right: 80px;

  width: 200px;
  height: auto;

  transform: translateY(-50%);

  opacity: 0.3 ;

  z-index: 1;
}


/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

.account-layout {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.36fr)
    minmax(0, 0.64fr);

  gap: 18px;

  align-items: stretch;
}



/* =========================================================
   COMMON CARD
========================================================= */

.account-card {
  box-sizing: border-box;

  background: #ffffff;

  border: 1px solid #eadfda;
  border-radius: 16px;

  padding: 20px;

  min-width: 0;
}

.account-card-header {
  margin-bottom: 18px;
}

.account-card-header h2 {
  margin: 0 0 6px;

  font-size: 17px;
  font-weight: 700;

  color: #2c2522;
}

.account-card-header p {
  margin: 0;

  font-size: 12px;
  line-height: 1.5;

  color: #918681;
}



/* =========================================================
   PROFILE CARD
========================================================= */

.profile-card {
  display: flex;
  flex-direction: column;
}


/* avatar */

.profile-main {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 8px 0 0;
}


.account-profile-avatar-wrap {
  position: relative;

  width: 124px;
  height: 124px;

  margin-bottom: 15px;
}


.account-profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 124px;
  height: 124px;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #fff3f6,
      #fde4eb
    );

  font-size: 37px;
  font-weight: 600;

  color: #6e6260;
}


.account-profile-camera-button {
  position: absolute;

  right: 4px;
  bottom: 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 3px solid #ffffff;
  border-radius: 50%;

  background: #ec4c7d;

  color: #ffffff;

  cursor: pointer;

  box-shadow:
    0 4px 12px
    rgba(236, 76, 125, 0.22);
}


.account-profile-camera-button:hover {
  background: #e34272;
}

.profile-name {
  display: block;

  font-size: 19px;
  font-weight: 700;

  color: #28211f;
}

.profile-email {
  display: block;

  margin-top: 7px;

  font-size: 13px;

  color: #8c817c;
}


.profile-divider {
  height: 1px;

  margin: 22px 0;

  background: #eee5e1;
}





/* =========================================================
   FIELD DESCRIPTION
========================================================= */

.field-description {
  margin: 7px 2px 0;

  font-size: 11px;
  line-height: 1.55;

  color: #918681;
}



/* =========================================================
   CLINIC AUTHORIZATION
========================================================= */

.clinic-auth-input-row {
  display: flex;
  align-items: stretch;

  gap: 10px;
}


.clinic-auth-input-row input {
  flex: 1;
  min-width: 0;
}

.clinic-verification-fields {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #eee4df;
  border-radius: 9px;
  background: #fdfbf9;
}

.clinic-verification-fields.hidden {
  display: none;
}

.clinic-verification-fields label {
  font-size: 11px;
  font-weight: 600;
  color: #675653;
}

.clinic-verification-fields input {
  min-width: 0;
}

.clinic-verification-fields small {
  grid-column: 2;
  color: #91817c;
  font-size: 11px;
}


.clinic-auth-button {
  flex: 0 0 auto;

  height: 44px;

  padding: 0 16px;

  border: 1px solid #ec4c7d;
  border-radius: 9px;

  background: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  color: #ec4c7d;

  white-space: nowrap;

  cursor: pointer;
}


.clinic-auth-button:hover {
  background: #fff5f8;
}

.clinic-auth-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.clinic-action-links {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.clinic-management-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.clinic-management-link.hidden {
  display: none;
}


.clinic-auth-guide {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 10px;
  padding: 12px 14px;

  border-radius: 10px;

  background: #fff7f9;

  color: #8b625f;
}


.clinic-auth-guide svg {
  flex: 0 0 auto;

  margin-top: 1px;

  color: #ec4c7d;
}


.clinic-auth-guide strong {
  display: block;

  margin-bottom: 3px;

  font-size: 11px;
  font-weight: 700;

  color: #675653;
}


.clinic-auth-guide p {
  margin: 0;

  font-size: 11px;
  line-height: 1.55;

  color: #91817c;
}


.clinic-membership-status {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 10px;
  padding: 10px 12px;

  border: 1px solid #eee4df;
  border-radius: 9px;

  background: #fdfbf9;

  font-size: 11px;
}


.clinic-status-label {
  color: #8d817c;
}


.clinic-status-value {
  font-weight: 600;

  color: #615753;
}



/* =========================================================
   PROFILE META
========================================================= */

.profile-meta {
  display: flex;
  flex-direction: column;

  gap: 17px;

  margin: 0;
}

.profile-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 25px;
}

.profile-meta-row dt {
  display: flex;
  align-items: center;

  gap: 10px;

  margin: 0;

  font-size: 13px;
  font-weight: 400;

  color: #756b67;
}

.profile-meta-row dt svg {
  color: #4a4542;
}

.profile-meta-row dd {
  margin: 0;

  font-size: 13px;
  font-weight: 600;

  color: #302927;
}


/* active badge */

.account-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 48px;
  height: 27px;

  padding: 0 11px;

  box-sizing: border-box;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
}

.account-status.active {
  color: #39875c;
  background: #e4f6eb;
}

.account-status.pending {
  color: #9a6b18;
  background: #fff3d9;
}

.account-status.inactive {
  color: #8b625f;
  background: #f1e9e7;
}



/* password */

.password-change-button {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  width: 100%;
  height: 44px;

  margin-top: 28px;

  padding: 0 15px;

  border: 1px solid #ec4c7d;
  border-radius: 10px;

  background: #ffffff;

  font-size: 13px;
  font-weight: 600;

  color: #ec4c7d;

  cursor: pointer;
}

.password-change-button:hover {
  background: #fff6f8;
}



/* =========================================================
   PERSONAL INFORMATION
========================================================= */

.personal-card {
  display: flex;
  flex-direction: column;
}

.personal-form {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px 16px;
}

.form-field {
  min-width: 0;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;

  margin-bottom: 8px;

  font-size: 13px;
  font-weight: 600;

  color: #3b3330;
}

.required {
  color: #ec4c7d;
}



/* inputs */

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;

  box-sizing: border-box;

  border: 1px solid #e2d8d3;
  border-radius: 9px;

  background: #ffffff;

  font-family: inherit;
  font-size: 13px;

  color: #332c29;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.form-field input,
.form-field select {
  height: 44px;
  padding: 0 13px;
}

.form-field textarea {
  display: block;

  min-height: 96px;

  padding: 13px;

  resize: vertical;

  line-height: 1.55;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #aaa19d;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;

  border-color: #ec4c7d;

  box-shadow:
    0 0 0 3px
    rgba(236, 76, 125, 0.08);
}


/* readonly email */

.form-field input[readonly] {
  background: #f7f7f7;

  color: #969696;

  cursor: default;
}



/* =========================================================
   TEXTAREA
========================================================= */

.textarea-wrap {
  position: relative;
}

.textarea-wrap textarea {
  padding-bottom: 30px;
}

.textarea-count {
  position: absolute;

  right: 12px;
  bottom: 9px;

  font-size: 11px;

  color: #a09995;

  pointer-events: none;
}



/* =========================================================
   ACTION BUTTONS
========================================================= */

.personal-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  margin-top: auto;

  padding-top: 22px;
}

.account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  height: 42px;

  padding: 0 20px;

  border-radius: 9px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.account-button.secondary {
  min-width: 82px;

  border: 1px solid #e2d8d3;

  background: #ffffff;

  color: #3f3734;
}

.account-button.secondary:hover {
  background: #faf8f7;
}

.account-button.primary {
  min-width: 118px;

  border: 1px solid #ec4c7d;

  background: #ec4c7d;

  color: #ffffff;

  box-shadow:
    0 5px 12px
    rgba(236, 76, 125, 0.15);
}

.account-button.primary:hover {
  background: #e34272;
  border-color: #e34272;
}

.clinic-credit-panel {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid #eadfda;
  border-radius: 16px;
  background: #ffffff;
}

/* =========================================================
   ACCOUNT CONTEXT SUMMARY
========================================================= */

.account-context {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr) minmax(260px, 1fr);
  gap: 14px;
  margin: 0 0 18px;
}

.account-context-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-inset);
}

.account-context-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.account-context-card h2 {
  margin: 3px 0 0;
  color: #2c2522;
  font-size: 16px;
}

.account-context-card p {
  margin: 0;
  color: #8b807b;
  font-size: 12px;
  line-height: 1.55;
}

.account-context-card > strong {
  display: block;
  margin-top: 13px;
  color: #443a36;
  font-size: 12px;
}

.account-context-badge,
.account-status.compact {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f6eef1;
  color: #a24768;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.account-clinic-list,
.account-request-list {
  display: grid;
  gap: 9px;
}

.account-clinic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 10px 0;
  border-top: 1px solid #f0e8e4;
}

.account-clinic-row:first-child { border-top: 0; padding-top: 0; }
.account-clinic-main, .account-clinic-side { min-width: 0; }
.account-clinic-main strong,
.account-clinic-main span,
.account-clinic-side small { display: block; }
.account-clinic-main strong { color: #342b28; font-size: 13px; overflow-wrap: anywhere; }
.account-clinic-main span { margin-top: 3px; color: #756b67; font-size: 11px; }
.account-clinic-side { text-align: right; }
.account-clinic-side small { margin-top: 4px; color: #8b807b; font-size: 11px; line-height: 1.4; }
.account-clinic-manage { grid-column: 1 / -1; color: #d04470; font-size: 11px; text-decoration: none; }
.account-clinic-manage:hover { text-decoration: underline; }

.account-request-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #f0e8e4;
  color: #756b67;
  font-size: 11px;
}

.account-request-item:first-child { border-top: 0; padding-top: 0; }
.account-request-item strong { color: #443a36; font-size: 12px; }
.account-request-item span { text-align: right; }
.account-context-empty { color: #978b86 !important; font-size: 11px !important; }

@media (max-width: 980px) {
  .account-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-status-card { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .account-context { grid-template-columns: 1fr; }
  .account-status-card { grid-column: auto; }
}

.clinic-credit-header,
.clinic-credit-actions,
.clinic-credit-balance,
.clinic-credit-row {
  display: flex;
  align-items: center;
}

.clinic-credit-header,
.clinic-credit-balance,
.clinic-credit-row {
  justify-content: space-between;
  gap: 16px;
}

.clinic-credit-header h2,
.clinic-credit-transactions h3 {
  margin: 4px 0 0;
  color: #2c2522;
}

.clinic-credit-header h2 { font-size: 17px; }
.clinic-credit-transactions h3 { font-size: 14px; }
.clinic-credit-actions { gap: 8px; }
.clinic-credit-workspace { margin: 4px 0 0; color: #756b67; font-size: 12px; }

.clinic-credit-balance {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #faf8f7;
  color: #756b67;
}

.clinic-credit-balance strong {
  color: #2c2522;
  font-size: 18px;
}

.clinic-credit-balance-values {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
}

.clinic-credit-balance-values small { color: #756b67; }

.clinic-credit-status {
  min-height: 18px;
  margin: 12px 0 0;
  color: #756b67;
  font-size: 12px;
}

.clinic-credit-transactions {
  margin-top: 12px;
  border-top: 1px solid #eee5e1;
  padding-top: 14px;
}

.clinic-credit-row {
  padding: 10px 0;
  border-bottom: 1px solid #f2ece9;
  font-size: 12px;
}

.clinic-credit-row-main,
.clinic-credit-row-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.clinic-credit-row-meta { align-items: flex-end; }
.clinic-credit-row a { color: #d63f70; }
.clinic-credit-empty { color: #918681; font-size: 12px; }

/* =========================================================
   PRIVACY AND ACCOUNT WITHDRAWAL
========================================================= */

.account-privacy-panel {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid #eadfda;
  border-radius: 16px;
  background: var(--surface-inset);
}

.account-privacy-header h2 {
  margin: 4px 0 7px;
  color: #2c2522;
  font-size: 18px;
}

.account-privacy-header > p:last-child,
.account-privacy-card > p {
  margin: 0;
  color: #756b67;
  font-size: 12px;
  line-height: 1.6;
}

.account-privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.account-privacy-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #eee5e1;
  border-radius: 12px;
  background: #fff;
}

.account-privacy-card h3,
.account-privacy-card h4 {
  margin: 0 0 7px;
  color: #342b28;
}

.account-privacy-card h3 { font-size: 15px; }
.account-privacy-card h4 { font-size: 13px; }

.privacy-request-form,
.account-withdrawal-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.privacy-request-form { margin-top: 15px; }

.privacy-request-form label,
.account-withdrawal-card label:not(.withdrawal-confirm) {
  color: #4a403c;
  font-size: 12px;
  font-weight: 600;
}

.privacy-request-form input,
.privacy-request-form select,
.privacy-request-form textarea,
.account-withdrawal-card > input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e2d8d3;
  border-radius: 9px;
  background: #fff;
  color: #332c29;
  font: inherit;
  font-size: 13px;
}

.privacy-request-form input,
.privacy-request-form select,
.account-withdrawal-card > input {
  min-height: 42px;
  padding: 0 12px;
}

.privacy-request-form textarea { padding: 11px 12px; resize: vertical; }
.privacy-request-form small { color: #8d817c; font-size: 11px; }
.privacy-request-form .account-button { align-self: flex-start; }

.privacy-request-history {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #eee5e1;
}

.privacy-request-list { display: grid; gap: 8px; }

.privacy-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 9px 0;
  border-top: 1px solid #f0e8e4;
  font-size: 11px;
}

.privacy-request-row:first-child { border-top: 0; }
.privacy-request-row strong { color: #443a36; }
.privacy-request-row span { color: #756b67; text-align: right; }
.privacy-request-row code { grid-column: 1 / -1; color: #8d817c; overflow-wrap: anywhere; }

.withdrawal-owner-notice {
  padding: 10px 12px;
  border-radius: 9px;
  background: #fff6f8;
  color: #8b625f !important;
}

.withdrawal-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #5d514d;
  font-size: 11px;
  line-height: 1.5;
}

.withdrawal-confirm input { margin-top: 2px; }

.account-button.danger {
  align-self: flex-start;
  border: 1px solid #b43838;
  background: #fff;
  color: #a83232;
}

.account-button.danger:hover { background: #fff3f3; }
.account-button:disabled { cursor: wait; opacity: .65; }

.privacy-inline-status {
  min-height: 18px;
  margin: 0;
  color: #756b67;
  font-size: 11px;
  line-height: 1.5;
}

.privacy-inline-status.error { color: #a83232; }
.privacy-inline-status.success { color: #2f7850; }

.clinic-join-preview {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid #e2d8d3;
  border-radius: 10px;
  background: #fffdfc;
  color: #4a403c;
  font-size: 12px;
  line-height: 1.6;
}
.clinic-join-preview-kicker { margin: 0; color: #b64066; font-size: 11px; font-weight: 800; }
.clinic-join-preview h3 { margin: 3px 0 10px; font-size: 16px; }
.clinic-join-notice-content { max-height: 220px; overflow: auto; padding: 10px; border-radius: 8px; background: #fff; }
.clinic-join-notice-content > :first-child { margin-top: 0; }
.clinic-join-disclosure { margin-top: 12px; }
.clinic-join-disclosure ul { margin: 6px 0 0; padding-left: 20px; }
.clinic-join-personal-notice { padding: 10px; border-radius: 8px; background: #f2f8f5; color: #35634d; }
.clinic-join-acknowledgement { display: flex !important; align-items: flex-start; gap: 8px; }
.clinic-join-acknowledgement input { width: auto !important; min-height: auto !important; margin-top: 3px; }



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

  .account-layout {
    grid-template-columns: 1fr;
  }

  .profile-card {
    min-height: auto;
  }

}


@media (max-width: 720px) {

  .account-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .account-heading {
    min-height: 76px;
  }

  .account-heading-art {
    display:none;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field-wide {
    grid-column: auto;
  }

  .clinic-credit-header,
  .clinic-credit-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .clinic-credit-row-meta { align-items: flex-start; }

  .account-privacy-grid { grid-template-columns: 1fr; }

}

@container app-main (max-width: 980px) {
  .account-layout { grid-template-columns:1fr; align-items:start; }
  .account-context { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-status-card { grid-column:1 / -1; }
}

@container app-main (max-width: 620px) {
  .account-context,.account-privacy-grid,.form-grid { grid-template-columns:1fr; }
  .account-status-card,.form-field-wide { grid-column:auto; }
  .account-heading-art { display:none; }
  .account-privacy-grid { gap:0; }
  .account-privacy-card { padding:0; border:0; border-radius:0; background:transparent; }
  .account-privacy-card + .account-privacy-card { margin-top:20px; padding-top:20px; border-top:1px solid var(--line-soft); }
}