/* =========================================================
   PSF MY ACCOUNT PAGE
   Shared My Account shell + endpoint styling.
   Dashboard component styling lives in myaccount-dashboard.css.
   No forced declarations.
   ========================================================= */


/* =========================================================
   1) SHARED MY ACCOUNT STRUCTURE
   ========================================================= */

body.woocommerce-account .page-title {
  display: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .row.vertical-tabs > .col-border {
  display: none;
}

body.woocommerce-account .page-wrapper.my-account {
  margin: 0;
}

body.woocommerce-account .page-wrapper.my-account > .container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.woocommerce-account .row.vertical-tabs,
body.woocommerce-account .row.vertical-tabs > .large-9.col,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

body.woocommerce-account .row.vertical-tabs > .large-9.col {
  flex: 0 0 100%;
}


/* =========================================================
   2) /MY-ACCOUNT/ ROOT SHELL
   Only controls the page around the dashboard.
   Dashboard cards/components are intentionally NOT styled here.
   ========================================================= */

body.psf-account-root,
body.psf-account-root #wrapper,
body.psf-account-root #main,
body.psf-account-root .page-wrapper,
body.psf-account-root .page-wrapper.my-account,
body.psf-account-root .page-wrapper.my-account > .container,
body.psf-account-root .psf-myaccount-wrap,
body.psf-account-root .woocommerce,
body.psf-account-root .woocommerce-account,
body.psf-account-root .row.vertical-tabs,
.psf-myaccount-wrap.psf-account-root,
.psf-myaccount-wrap.psf-account-root .woocommerce-MyAccount-content {
  background: #f5f5f2;
}

body.psf-account-root .psf-myaccount-wrap,
.psf-myaccount-wrap.psf-account-root {
  position: relative;
  padding: 0 0 60px;
}

body.psf-account-root .psf-myaccount-wrap::before,
.psf-myaccount-wrap.psf-account-root::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(90, 143, 54, 0.10) 0%,
      rgba(90, 143, 54, 0) 32%
    ),
    linear-gradient(
      180deg,
      #f8f8f5 0%,
      #f1f2ee 100%
    );
}


/* =========================================================
   3) MY ACCOUNT SUBPAGES
   /orders/, /psf-layaways/, addresses, account details, etc.
   ========================================================= */

body.psf-account-subpage,
body.psf-account-subpage #wrapper,
body.psf-account-subpage #main,
body.psf-account-subpage .page-wrapper,
body.psf-account-subpage .page-wrapper.my-account,
body.psf-account-subpage .page-wrapper.my-account > .container,
body.psf-account-subpage .psf-myaccount-wrap,
body.psf-account-subpage .woocommerce,
body.psf-account-subpage .woocommerce-account,
body.psf-account-subpage .row.vertical-tabs,
.psf-myaccount-wrap.psf-account-subpage,
.psf-myaccount-wrap.psf-account-subpage .woocommerce-MyAccount-content {
  background: #fff;
}

body.psf-account-subpage .psf-myaccount-wrap,
.psf-myaccount-wrap.psf-account-subpage {
  padding: 30px 0 60px;
}


/* =========================================================
   4) ORDERS ENDPOINT
   /my-account/orders/
   ========================================================= */

body.woocommerce-orders .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-orders-table) {
  max-width: 1220px;
  padding-top: 42px;
  padding-bottom: 72px;
}

/* Page heading */
body.woocommerce-orders .woocommerce-MyAccount-content::before,
body.woocommerce-account
  .woocommerce-MyAccount-content:has(.woocommerce-orders-table)::before {
  content: "Order History";
  display: block;
  margin: 0 0 10px;
  color: #171a18;
  font-family: var(--psf-body-font, "Work Sans", Arial, sans-serif);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

/* ---------------------------------------------------------
   EMAIL VERIFICATION NOTICE
   Keep this as a normal notice. Do not convert it into the
   premium "No orders yet" card.
   --------------------------------------------------------- */

body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:not(:has(a.woocommerce-Button)) {
  width: min(100%, 760px);
  margin: 24px auto 18px;
  padding: 18px 20px;
  border: 1px solid rgba(37, 77, 24, 0.16);
  border-radius: 10px;
  background: #f8faf6;
  color: #424942;
  box-shadow: 0 8px 22px rgba(17, 20, 18, 0.045);
  font-family: var(--psf-body-font, "Work Sans", Arial, sans-serif);
  font-size: 14px;
  line-height: 1.55;
}

body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:not(:has(a.woocommerce-Button))
  .message-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:not(:has(a.woocommerce-Button))
  .button {
  flex: 0 0 auto;
  min-height: 42px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid #254d18;
  border-radius: 6px;
  background: #fff;
  color: #254d18;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:not(:has(a.woocommerce-Button))
  .button:hover,
body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:not(:has(a.woocommerce-Button))
  .button:focus-visible {
  background: #edf3e9;
  border-color: #5a8f36;
  color: #254d18;
}


/* ---------------------------------------------------------
   EMPTY ORDERS STATE
   Only the real WooCommerce empty-order notice gets this card.
   The unique Browse Products link carries .woocommerce-Button.
   --------------------------------------------------------- */

body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:has(a.woocommerce-Button) {
  position: relative;
  width: min(100%, 760px);
  min-height: 330px;
  margin: 42px auto 72px;
  padding: 38px 42px 48px;
  overflow: hidden;
  border: 1px solid rgba(37, 77, 24, 0.16);
  border-radius: 14px;
  color: #171a18;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(90, 143, 54, 0.12) 0%,
      rgba(90, 143, 54, 0) 42%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8faf6 100%
    );
  box-shadow:
    0 18px 44px rgba(17, 20, 18, 0.07),
    0 2px 8px rgba(17, 20, 18, 0.025);
  font-family: var(--psf-body-font, "Work Sans", Arial, sans-serif);
  text-align: center;
}

body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:has(a.woocommerce-Button)
  .message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  font-size: 0;
  line-height: 1.6;
}

/* Package icon */
body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:has(a.woocommerce-Button)
  .message-container::before {
  content: "";
  order: 1;
  width: 62px;
  height: 62px;
  margin: 0 0 24px;
  border: 1px solid rgba(37, 77, 24, 0.18);
  border-radius: 50%;
  background-color: #edf3e9;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23254d18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 8-9 5-9-5'/%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5Z'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 8px 20px rgba(37, 77, 24, 0.10);
}

/* Custom empty-state copy */
body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:has(a.woocommerce-Button)
  .message-container::after {
  content:
    "No orders yet\A\A"
    "Your completed purchases and order updates will appear here.";
  order: 2;
  display: block;
  max-width: 470px;
  margin: 0;
  color: #646b64;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  white-space: pre-line;
}

/* Browse Products button */
body.woocommerce-orders
  .woocommerce-MyAccount-content
  > .woocommerce-info:has(a.woocommerce-Button)
  .woocommerce-Button {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 50px;
  margin: 26px 0 0;
  padding: 13px 24px;
  border: 1px solid #254d18;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #5a8f36 0%, #254d18 100%);
  box-shadow:
    0 8px 20px rgba(37, 77, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}


/* ---------------------------------------------------------
   ORDERS TABLE — DESKTOP
   --------------------------------------------------------- */

body.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  margin: 28px 0 0;
  overflow: hidden;
  border: 1px solid rgba(17, 20, 18, 0.10);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 13px;
  background: #fff;
  box-shadow:
    0 16px 38px rgba(17, 20, 18, 0.065),
    0 2px 8px rgba(17, 20, 18, 0.025);
}

body.woocommerce-account .woocommerce-orders-table thead {
  background: linear-gradient(180deg, #315f22 0%, #254d18 100%);
}

body.woocommerce-account .woocommerce-orders-table th {
  padding: 17px 18px;
  border: 0;
  color: #fff;
  background: transparent;
  font-family: var(--psf-body-font, "Work Sans", Arial, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.075em;
  text-align: left;
  text-transform: uppercase;
}

body.woocommerce-account .woocommerce-orders-table td {
  padding: 20px 18px;
  border: 0;
  border-bottom: 1px solid rgba(17, 20, 18, 0.075);
  color: #404640;
  background: #fff;
  font-family: var(--psf-body-font, "Work Sans", Arial, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
}

body.woocommerce-account .woocommerce-orders-table tbody tr:last-child td {
  border-bottom: 0;
}

body.woocommerce-account .woocommerce-orders-table tbody tr {
  transition:
    background-color 0.16s ease,
    transform 0.16s ease;
}

body.woocommerce-account .woocommerce-orders-table tbody tr:hover td {
  background: #fafcf8;
}

body.woocommerce-account
  .woocommerce-orders-table__cell-order-number a {
  color: #254d18;
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
}

body.woocommerce-account
  .woocommerce-orders-table__cell-order-number a:hover {
  color: #5a8f36;
}

body.woocommerce-account
  .woocommerce-orders-table__cell-order-status {
  color: #254d18;
  font-weight: 700;
}

body.woocommerce-account
  .woocommerce-orders-table__cell-order-total {
  color: #171a18;
  font-weight: 650;
}

body.woocommerce-account
  .woocommerce-orders-table__cell-order-actions .button,
body.woocommerce-account
  .woocommerce-orders-table__cell-order-actions a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 3px 4px 3px 0;
  padding: 10px 16px;
  border: 1px solid #254d18;
  border-radius: 6px;
  color: #254d18;
  background: #fff;
  box-shadow: none;
  font-family: var(--psf-body-font, "Work Sans", Arial, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.woocommerce-account
  .woocommerce-orders-table__cell-order-actions .button:hover,
body.woocommerce-account
  .woocommerce-orders-table__cell-order-actions a.button:hover {
  color: #fff;
  background: linear-gradient(180deg, #5a8f36 0%, #254d18 100%);
  border-color: #254d18;
}

body.woocommerce-account .woocommerce-pagination {
  margin-top: 24px;
}

body.woocommerce-account .woocommerce-pagination .button {
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid #254d18;
  border-radius: 6px;
  color: #254d18;
  background: #fff;
}


/* =========================================================
   5) FIREARMS TRANSFER APPOINTMENTS
   ========================================================= */

body.psf-account-subpage
  .woocommerce-MyAccount-content > h2:first-child:nth-last-child(2) {
  margin: 0 0 10px;
  color: #171a18;
  font-family: var(--psf-body-font, "Work Sans", Arial, sans-serif);
  font-size: 0;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: none;
}

body.psf-account-subpage
  .woocommerce-MyAccount-content > h2:first-child:nth-last-child(2)::before {
  content: "Firearms Transfer Appointments";
  display: block;
  font-size: clamp(30px, 4vw, 42px);
}

body.psf-account-subpage
  .woocommerce-MyAccount-content > h2:first-child:nth-last-child(2) + p:last-child {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 760px);
  min-height: 330px;
  margin: 42px auto 72px;
  padding: 122px 42px 48px;
  overflow: hidden;
  border: 1px solid rgba(37, 77, 24, 0.16);
  border-radius: 14px;
  color: transparent;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(90, 143, 54, 0.12) 0%,
      rgba(90, 143, 54, 0) 42%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8faf6 100%
    );
  box-shadow:
    0 18px 44px rgba(17, 20, 18, 0.07),
    0 2px 8px rgba(17, 20, 18, 0.025);
  font-family: var(--psf-body-font, "Work Sans", Arial, sans-serif);
  font-size: 0;
  line-height: 1.65;
  text-align: center;
}

body.psf-account-subpage
  .woocommerce-MyAccount-content > h2:first-child:nth-last-child(2) + p:last-child::before {
  content: "No appointments scheduled";
  display: block;
  padding-top: 88px;
  margin-bottom: 8px;
  color: #171a18;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23254d18' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 10px;
  background-size: 38px 38px;
}

body.psf-account-subpage
  .woocommerce-MyAccount-content > h2:first-child:nth-last-child(2) + p:last-child::after {
  content: "Your upcoming firearms transfer appointments will appear here.";
  display: block;
  max-width: 470px;
  color: #646b64;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
}

body.psf-account-subpage
  .woocommerce-MyAccount-content:has(> h2:first-child:nth-last-child(2) + p:last-child) {
  max-width: 1220px;
  padding-top: 42px;
  padding-bottom: 72px;
}


/* =========================================================
   6) RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
  body.woocommerce-orders .woocommerce-MyAccount-content,
  body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-orders-table) {
    padding-top: 26px;
    padding-bottom: 46px;
  }

  body.woocommerce-orders
    .woocommerce-MyAccount-content
    > .woocommerce-info:has(a.woocommerce-Button) {
    min-height: 300px;
    margin-top: 24px;
    padding: 32px 24px 38px;
  }

  body.woocommerce-orders
    .woocommerce-MyAccount-content
    > .woocommerce-info:not(:has(a.woocommerce-Button))
    .message-container {
    align-items: flex-start;
    flex-direction: column;
  }

  body.woocommerce-account .woocommerce-orders-table {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.woocommerce-account .woocommerce-orders-table thead {
    display: none;
  }

  body.woocommerce-account .woocommerce-orders-table tbody,
  body.woocommerce-account .woocommerce-orders-table tr,
  body.woocommerce-account .woocommerce-orders-table td {
    display: block;
    width: 100%;
  }

  body.woocommerce-account .woocommerce-orders-table tr {
    margin: 0 0 16px;
    overflow: hidden;
    border: 1px solid rgba(37, 77, 24, 0.14);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(17, 20, 18, 0.055);
  }

  body.woocommerce-account .woocommerce-orders-table td {
    position: relative;
    min-height: 50px;
    padding: 14px 16px 14px 48%;
    border-bottom: 1px solid rgba(17, 20, 18, 0.07);
    text-align: right;
  }

  body.woocommerce-account .woocommerce-orders-table td::before {
    content: attr(data-title);
    position: absolute;
    top: 14px;
    left: 16px;
    width: 40%;
    color: #666d66;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
  }

  body.woocommerce-account
    .woocommerce-orders-table__cell-order-actions {
    padding: 14px 16px;
    text-align: left;
  }

  body.woocommerce-account
    .woocommerce-orders-table__cell-order-actions::before {
    display: none;
  }

  body.woocommerce-account
    .woocommerce-orders-table__cell-order-actions .button,
  body.woocommerce-account
    .woocommerce-orders-table__cell-order-actions a.button {
    width: 100%;
    margin: 4px 0;
  }

  body.psf-account-subpage
    .woocommerce-MyAccount-content > h2:first-child:nth-last-child(2) + p:last-child {
    min-height: 300px;
    margin-top: 24px;
    padding: 116px 24px 38px;
  }

  body.psf-account-subpage
    .woocommerce-MyAccount-content:has(> h2:first-child:nth-last-child(2) + p:last-child) {
    padding-top: 26px;
    padding-bottom: 46px;
  }
}

@media (max-width: 700px) {
  body.woocommerce-account .row.vertical-tabs,
  body.woocommerce-account .row.vertical-tabs > .large-9.col,
  body.woocommerce-account .woocommerce-MyAccount-content {
    padding-left: 12px;
    padding-right: 12px;
  }
}