:root {
  --haitaii-ink: #10252e;
  --haitaii-muted: #61727a;
  --haitaii-paper: #f2f7f6;
  --haitaii-card: #ffffff;
  --haitaii-teal: #007b82;
  --haitaii-teal-dark: #07545c;
  --haitaii-gold: #c28a32;
  --haitaii-line: #d9e4e3;
}

.woocommerce-account .site-main {
  overflow: visible;
}

.woocommerce-account .entry-content {
  color: var(--haitaii-ink);
}

.woocommerce-account .entry-header {
  display: none;
}

.haitaii-account-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: center;
  overflow: hidden;
  margin: 0 0 30px;
  padding: clamp(28px, 5vw, 54px);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 14%, rgba(53, 194, 193, .3), transparent 18rem),
    linear-gradient(125deg, #10252e, #07545c 72%, #08777b);
  box-shadow: 0 24px 70px rgba(12, 48, 56, .16);
}

.haitaii-account-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -130px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(255, 255, 255, .16);
  transform: rotate(36deg);
  box-shadow: inset 0 0 0 52px rgba(255, 255, 255, .025), inset 0 0 0 104px rgba(255, 255, 255, .025);
}

.haitaii-account-hero > * {
  position: relative;
  z-index: 1;
}

.haitaii-account-eyebrow {
  margin: 0 0 8px;
  color: #e8c273;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
}

.haitaii-account-hero h1 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
}

.haitaii-account-hero p:last-child {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
}

.haitaii-account-status {
  display: grid;
  grid-template-columns: 12px auto auto;
  gap: 13px;
  align-items: center;
  min-width: 290px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(8px);
}

.haitaii-account-status small,
.haitaii-account-status strong {
  display: block;
}

.haitaii-account-status small {
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
}

.haitaii-account-status strong {
  color: #fff;
  font-size: 15px;
}

.haitaii-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b8c4c8;
  box-shadow: 0 0 0 5px rgba(184, 196, 200, .15);
}

.haitaii-status-verified {
  background: #66d9ad;
  box-shadow: 0 0 0 5px rgba(102, 217, 173, .16);
}

.haitaii-status-pending {
  background: #f1bd62;
  box-shadow: 0 0 0 5px rgba(241, 189, 98, .16);
}

.haitaii-profile-score {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, .17);
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 25%;
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 71%;
}

.woocommerce-MyAccount-navigation ul {
  overflow: hidden;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--haitaii-line);
  border-radius: 15px;
  background: var(--haitaii-card);
  box-shadow: 0 13px 36px rgba(24, 65, 71, .07);
}

.woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  list-style: none;
  border: 0 !important;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 13px;
  border-radius: 9px;
  color: #324a52;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li.haitaii-menu-locked a {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: #718086;
  background: #f7f9f8;
}

.woocommerce-MyAccount-navigation li.haitaii-menu-locked a::after {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background-color: #8b9699;
  -webkit-mask: url("data:image/svg+xml,%3Csvg height='512' viewBox='0 0 24 24' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 13a1.49 1.49 0 0 0 -1 2.61v1.39a1 1 0 0 0 2 0v-1.39a1.49 1.49 0 0 0 -1-2.61zm5-4v-2a5 5 0 0 0 -10 0v2a3 3 0 0 0 -3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-7a3 3 0 0 0 -3-3zm-8-2a3 3 0 0 1 6 0v2h-6zm9 12a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1-1v-7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg height='512' viewBox='0 0 24 24' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 13a1.49 1.49 0 0 0 -1 2.61v1.39a1 1 0 0 0 2 0v-1.39a1.49 1.49 0 0 0 -1-2.61zm5-4v-2a5 5 0 0 0 -10 0v2a3 3 0 0 0 -3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-7a3 3 0 0 0 -3-3zm-8-2a3 3 0 0 1 6 0v2h-6zm9 12a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1-1v-7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  color: var(--haitaii-teal-dark);
  background: #e9f4f2;
}

.haitaii-dashboard-intro {
  margin-bottom: 22px;
}

.haitaii-dashboard-intro h2,
.haitaii-profile-heading h2,
.haitaii-profile-state h2 {
  margin: 0 0 8px;
  font-size: clamp(27px, 3vw, 38px);
}

.haitaii-dashboard-intro p,
.haitaii-profile-heading p,
.haitaii-profile-state p {
  margin: 0;
  color: var(--haitaii-muted);
}

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

.haitaii-account-card {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  padding: 25px;
  border: 1px solid var(--haitaii-line);
  border-radius: 15px;
  background: var(--haitaii-card);
  box-shadow: 0 14px 34px rgba(23, 69, 74, .06);
}

.haitaii-card-mark {
  display: block;
  width: 42px;
  height: 7px;
  margin-bottom: 23px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--haitaii-gold), #e4bc71);
}

.haitaii-account-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.haitaii-account-card p {
  margin: 0 0 22px;
  color: var(--haitaii-muted);
  font-size: 14px;
}

.haitaii-account-card a {
  position: absolute;
  right: 24px;
  bottom: 22px;
  color: var(--haitaii-teal-dark);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.haitaii-account-card a span {
  margin-left: 7px;
}

.haitaii-account-card.is-locked {
  border-color: #d7dddc;
  background: #f1f3f3;
  box-shadow: none;
}

.haitaii-account-card.is-locked .haitaii-card-mark {
  background: #c4ccca;
}

.haitaii-account-card.is-locked h3 {
  color: #6f7b7f;
}

.haitaii-account-card.is-locked p {
  color: #929c9f;
}

.haitaii-account-card.is-locked a {
  color: #7f8b8e;
}

.haitaii-card-lock {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #cbd2d1;
  border-radius: 50%;
  background: #e7eae9;
}

.haitaii-card-lock svg {
  width: 16px;
  height: 16px;
  fill: #879295;
}

.haitaii-profile-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 25px;
}

.haitaii-profile-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 99px;
  color: #176047;
  background: #e5f5ed;
  font-size: 12px;
  font-weight: 800;
}

.haitaii-profile-state {
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--haitaii-line);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #f2f8f7);
}

.haitaii-profile-state .button {
  margin-top: 24px;
}

.haitaii-lock-notice {
  display: flex;
  gap: 6px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid #ead6aa;
  border-radius: 10px;
  color: #6d5327;
  background: #fff8e8;
  font-size: 13px;
}

.haitaii-lock-notice strong,
.haitaii-lock-notice span {
  display: block;
}

.haitaii-profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.haitaii-profile-field {
  min-width: 0;
}

.haitaii-profile-field.is-wide {
  grid-column: 1 / -1;
}

.haitaii-field-label {
  display: block;
  margin-bottom: 8px;
  color: #233b43;
  font-size: 13px;
  font-weight: 750;
}

.haitaii-field-label span {
  color: #b65a41;
}

.haitaii-profile-form input[type="text"],
.haitaii-profile-form input[type="tel"],
.haitaii-profile-form input[type="file"],
.haitaii-profile-form select,
.haitaii-profile-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #cddcda;
  border-radius: 9px;
  color: var(--haitaii-ink);
  background: #fff;
}

.haitaii-profile-form textarea {
  min-height: 125px;
  resize: vertical;
}

.haitaii-profile-form input:focus,
.haitaii-profile-form select:focus,
.haitaii-profile-form textarea:focus {
  border-color: var(--haitaii-teal);
  outline: 3px solid rgba(0, 123, 130, .1);
}

.haitaii-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.haitaii-choice-grid label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--haitaii-line);
  border-radius: 9px;
  background: #f8fbfa;
  cursor: pointer;
}

.haitaii-choice-grid input {
  flex: 0 0 auto;
  margin-top: 4px;
}

.haitaii-choice-grid span {
  color: #344d54;
  font-size: 13px;
}

.haitaii-current-file {
  margin-bottom: 9px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #38575d;
  background: #edf6f4;
  font-size: 13px;
}

.haitaii-profile-submit {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--haitaii-line);
}

.haitaii-profile-submit span {
  color: var(--haitaii-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 24px;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding: 6px;
    scrollbar-width: thin;
  }

  .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto;
  }

  .woocommerce-MyAccount-navigation li a {
    white-space: nowrap;
  }
}

@media (max-width: 680px) {
  .haitaii-account-hero {
    display: block;
    padding: 28px 22px;
    border-radius: 15px;
  }

  .haitaii-account-status {
    grid-template-columns: 12px 1fr auto;
    min-width: 0;
    margin-top: 22px;
    padding: 14px;
  }

  .haitaii-account-grid,
  .haitaii-profile-fields,
  .haitaii-choice-grid {
    grid-template-columns: 1fr;
  }

  .haitaii-account-card {
    min-height: 190px;
  }

  .haitaii-profile-heading,
  .haitaii-profile-submit,
  .haitaii-lock-notice {
    display: block;
  }

  .haitaii-lock-notice span {
    margin-top: 4px;
  }

  .haitaii-profile-badge {
    display: inline-block;
    margin-top: 16px;
  }

  .haitaii-profile-submit span {
    display: block;
    margin-top: 12px;
  }
}