/**
 * Account drawer (#offcanvas-user) — login / register / signed-in dashboard.
 *
 * Styles the markup that woocommerce/myaccount/my-account-offcanvas.php prints,
 * so the parent template stays untouched and keeps receiving theme updates.
 */

/* Bootstrap's .offcanvas-end only sets top:0, so the panel grows with content and
   can run past the viewport. Pin bottom:0 and scroll the body instead — same
   approach as the cart drawer. z-index clears the sticky mobile bars. */
#offcanvas-user.isarva-account-drawer {
  bottom: 0;
  height: auto;
  width: min(420px, 100vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  background: #fff;
  z-index: 10050 !important;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.14);
}

/* ——— Header ——— */

#offcanvas-user .isarva-account-drawer__header {
  position: relative;
  flex-shrink: 0;
  align-items: flex-start;
  padding: 1.4rem 1.25rem 1.3rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #017a3b 0%, #006c34 42%, #014f27 100%);
}

#offcanvas-user .isarva-account-drawer__header::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -34px;
  width: 150px;
  height: 118px;
  opacity: 0.16;
  pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 130' fill='none' stroke='%23ffffff' stroke-width='2.4'%3E%3Cpath d='M20 112C63 88 93 53 112 13'/%3E%3Cpath d='M52 91c-18 2-28-5-34-18 18-3 30 3 34 18zM73 72c-17-1-26-10-28-24 18 0 28 9 28 24zM91 49c-14-5-20-15-18-28 15 4 22 14 18 28zM61 87c8-16 20-23 34-21-7 17-19 24-34 21zM82 66c10-14 23-19 36-14-9 15-21 20-36 14z'/%3E%3C/svg%3E");
}

#offcanvas-user .isarva-account-drawer__head-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  padding-right: 0.5rem;
}

#offcanvas-user .isarva-account-drawer__eyebrow {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9bf7f;
}

#offcanvas-user .isarva-account-drawer__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: none;
}

#offcanvas-user .isarva-account-drawer__subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.815rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
}

#offcanvas-user .isarva-account-drawer__close {
  position: relative;
  z-index: 1;
  margin-top: 0.2rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

#offcanvas-user .isarva-account-drawer__close:hover,
#offcanvas-user .isarva-account-drawer__close:focus-visible {
  opacity: 1;
}

/* ——— Body ——— */

#offcanvas-user .offcanvas-body.isarva-account-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.25rem 1.75rem;
  background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 34%);
}

/* Section labels ("Login" / "Register") print as <p class="h2">. */
#offcanvas-user .my-offcanvas-account p.h2 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.7rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #006c34;
}

#offcanvas-user .my-offcanvas-account p.h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 108, 52, 0.28), rgba(0, 108, 52, 0));
}

#offcanvas-user .my-offcanvas-account .register {
  margin-top: 1.5rem;
}

#offcanvas-user .my-offcanvas-account .card {
  margin-top: 0 !important;
  border: 1px solid #e4efe8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 32px -24px rgba(18, 37, 29, 0.5);
}

#offcanvas-user .my-offcanvas-account .card-body {
  padding: 1.15rem 1.1rem 1.2rem;
}

#offcanvas-user .my-offcanvas-account .form-row,
#offcanvas-user .my-offcanvas-account .woocommerce-form-row {
  margin-bottom: 0.9rem;
}

#offcanvas-user .my-offcanvas-account label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2a4133;
}

#offcanvas-user .my-offcanvas-account .required {
  color: #b4453c;
  text-decoration: none;
  border: 0;
}

#offcanvas-user .my-offcanvas-account .form-control {
  height: 44px;
  padding: 0 0.9rem;
  border: 1px solid #dce8e2;
  border-radius: 10px;
  background: #f7fbf8;
  font-size: 0.9rem;
  color: #17301f;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Room for the reveal-password eye the template appends. */
#offcanvas-user .my-offcanvas-account input[type="password"].form-control {
  padding-right: 2.7rem;
}

#offcanvas-user .my-offcanvas-account .form-control::placeholder {
  color: #9baba2;
}

#offcanvas-user .my-offcanvas-account .form-control:focus {
  border-color: #006c34;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 108, 52, 0.14);
}

/* The reveal-password eye is placed by main.css with a fixed top offset measured
   from the top of the row, which only lined up with the old, larger label. Rather
   than re-tune that number, make the span a box the exact height of the input and
   pin it to the bottom of the row (the input is the last in-flow child), then centre
   the glyph inside it — that holds regardless of what the label above does. */
#offcanvas-user .my-offcanvas-account .offcanvas-password.show-password-input {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  /* woocommerce-layout.css centres this span with translateY(-50%) against a
     top:50% of its own, and that transform survived overriding the offsets —
     it dragged this box up by half its height, parking the eye on the field's
     top border. It also only applies on pages whose body carries .woocommerce,
     so leaving it in place made the eye sit differently per page type. */
  transform: none !important;
  line-height: 1;
  color: #6d8578;
}

#offcanvas-user .my-offcanvas-account .offcanvas-password.show-password-input::after {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0 !important;
}

/* Remember me */
#offcanvas-user .my-offcanvas-account .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.1rem;
  border-color: #c5d8cd;
}

#offcanvas-user .my-offcanvas-account .form-check-input:checked {
  background-color: #006c34;
  border-color: #006c34;
}

#offcanvas-user .my-offcanvas-account .form-check-input:focus {
  border-color: #006c34;
  box-shadow: 0 0 0 3px rgba(0, 108, 52, 0.14);
}

#offcanvas-user .my-offcanvas-account .form-check-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #4b5c52;
}

/* Submit buttons — the template ships them as .btn-outline-primary, which reads
   as a secondary action for what is the primary step in each card. */
#offcanvas-user .my-offcanvas-account .woocommerce-form-login__submit,
#offcanvas-user .my-offcanvas-account .woocommerce-form-register__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  padding: 0 1rem;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #007a3a, #01572b) !important;
  color: #fff !important;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 24px -14px rgba(0, 108, 52, 0.8);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#offcanvas-user .my-offcanvas-account .woocommerce-form-login__submit:hover,
#offcanvas-user .my-offcanvas-account .woocommerce-form-register__submit:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 16px 28px -14px rgba(0, 108, 52, 0.85);
}

#offcanvas-user .my-offcanvas-account .woocommerce-form-login__submit:focus-visible,
#offcanvas-user .my-offcanvas-account .woocommerce-form-register__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 108, 52, 0.28);
}

@media (hover: none) {
  #offcanvas-user .my-offcanvas-account .woocommerce-form-login__submit:hover,
  #offcanvas-user .my-offcanvas-account .woocommerce-form-register__submit:hover {
    transform: none;
  }
}

#offcanvas-user .my-offcanvas-account .woocommerce-LostPassword {
  margin-top: 0.9rem !important;
  text-align: center;
}

#offcanvas-user .my-offcanvas-account .woocommerce-LostPassword a {
  font-size: 0.82rem;
  font-weight: 700;
  color: #006c34;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 108, 52, 0.4);
}

#offcanvas-user .my-offcanvas-account .woocommerce-LostPassword a:hover {
  color: #01542a;
  border-bottom-style: solid;
}

#offcanvas-user .my-offcanvas-account .woocommerce-privacy-policy-text p {
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #6d7d74;
}

#offcanvas-user .my-offcanvas-account .woocommerce-privacy-policy-text a {
  color: #006c34;
  font-weight: 600;
}

/* ——— Signed-in state ——— */

#offcanvas-user .my-offcanvas-account .account-salution {
  padding: 0.9rem 1rem;
  margin-bottom: 1.1rem;
  border: 1px solid #e4efe8;
  border-radius: 14px;
  background: linear-gradient(140deg, #ffffff, #f2f9f5);
}

#offcanvas-user .my-offcanvas-account .account-salution p.h2 {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #12301f;
}

#offcanvas-user .my-offcanvas-account .account-salution p.h2::after {
  display: none;
}

#offcanvas-user .my-offcanvas-account .account-salution p:not(.h2) {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #6d7d74;
}

#offcanvas-user .my-offcanvas-account .list-group {
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
}

#offcanvas-user .my-offcanvas-account .list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.72rem 0.9rem;
  border: 1px solid #e4efe8 !important;
  border-radius: 12px !important;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1d3a2a;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#offcanvas-user .my-offcanvas-account .list-group-item::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: 0.55;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006c34' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

#offcanvas-user .my-offcanvas-account .list-group-item:hover,
#offcanvas-user .my-offcanvas-account .list-group-item:focus-visible {
  border-color: #006c34 !important;
  background: #f3faf6;
  color: #006c34;
}

#offcanvas-user .my-offcanvas-account .list-group-item:hover::after {
  opacity: 1;
}

/* ——— Notices ——— */

#offcanvas-user .my-offcanvas-account .woocommerce-error,
#offcanvas-user .my-offcanvas-account .woocommerce-message,
#offcanvas-user .my-offcanvas-account .woocommerce-info {
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  font-size: 0.82rem;
  list-style: none;
}

#offcanvas-user .my-offcanvas-account .woocommerce-error {
  border: 1px solid #f0d4d0;
  background: #fdf5f4;
  color: #9c3b32;
}

#offcanvas-user .my-offcanvas-account .woocommerce-message,
#offcanvas-user .my-offcanvas-account .woocommerce-info {
  border: 1px solid #d8ecdf;
  background: #f4faf6;
  color: #1d5c39;
}

@media (max-width: 575.98px) {
  #offcanvas-user .isarva-account-drawer__header {
    padding: 1.15rem 1rem 1.05rem;
  }

  #offcanvas-user .offcanvas-body.isarva-account-drawer__body {
    padding: 1rem 1rem 1.5rem;
  }

  #offcanvas-user .isarva-account-drawer__title {
    font-size: 1.2rem;
  }
}