/**
 * WooCommerce My Account — HYPRO styles.
 *
 * @package Hypro_Child
 */

/* ==========================================================================
   1. Page wrapper + typography reset (overrides Twenty Twenty-Five)
   ========================================================================== */

.hypro-account-page {
  min-height: 60vh;
  background: #fff;
}

.hypro-account-wrap {
  max-width: var(--hypro-container-max, 1600px);
  margin-inline: auto;
  /* The site header (announce bar + nav) is in-flow (position: sticky), so
     this only needs its own breathing room — no header-height math. */
  padding: 12px 24px 80px;
  font-family: 'DM Sans', sans-serif;
  color: #0C0C0A;
  -webkit-font-smoothing: antialiased;
}

/* WooCommerce's own woocommerce-blocktheme.css caps
   `.woocommerce-checkout main .woocommerce` / `.woocommerce-cart main .woocommerce`
   at max-width:1000px with no margin-inline:auto — it assumes a block-theme
   layout centers it via wp-block-group's is-layout-constrained rules, which
   never applies on this classic PHP template. Left uncorrected, that 1000px
   box sits flush against the left padding instead of centering, dragging
   everything inside it (including the already-correct centered
   .hypro-checkout-layout below) off to one side. Neutralize it here.  */
.hypro-account-wrap > .woocommerce {
  max-width: none !important;
}

/* Hard-reset Twenty Twenty-Five's fluid font sizes */
.hypro-account-wrap,
.hypro-account-wrap p,
.hypro-account-wrap span,
.hypro-account-wrap a,
.hypro-account-wrap li,
.hypro-account-wrap td,
.hypro-account-wrap th,
.hypro-account-wrap label,
.hypro-account-wrap input,
.hypro-account-wrap select,
.hypro-account-wrap textarea,
.hypro-account-wrap button {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.hypro-account-wrap h1 { font-size: 28px; font-weight: 700; margin: 0 0 20px; }
.hypro-account-wrap h2 { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.hypro-account-wrap h3 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.hypro-account-wrap p  { margin: 0 0 12px; }

/* ==========================================================================
   2. Dashboard layout — flex sidebar + content
   ========================================================================== */

.hypro-account-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

@media (max-width: 640px) {
  .hypro-account-layout {
    flex-direction: column;
  }
}

/* Sidebar nav */
.woocommerce-MyAccount-navigation {
  flex: 0 0 200px;
  width: 200px;
}

@media (max-width: 640px) {
  .woocommerce-MyAccount-navigation {
    flex: none;
    width: 100%;
  }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
}

.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid #e5e7eb;
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 18px;
  font-size: 14px !important;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: #eff1fd;
  color: #1526BE;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: #1526BE;
  color: #fff;
  font-weight: 700;
}

/* Content area */
.woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
}

.woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}

/* ==========================================================================
   3. Login / Register forms
   ========================================================================== */

.hypro-account-login {
  max-width: 480px;
}

/* Tab nav */
.hypro-auth-tabs__nav {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 28px;
  gap: 0;
}

.hypro-auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.hypro-auth-tab.is-active {
  color: #1526BE;
  border-bottom-color: #1526BE;
}

.hypro-auth-tab:hover:not(.is-active) {
  color: #374151;
}

/* Panels */
.hypro-auth-panel {
  display: none;
}

.hypro-auth-panel.is-active {
  display: block;
}

.hypro-auth-hint {
  font-size: 13px !important;
  color: #6b7280;
}

/* Lost password / reset password — single column */
.hypro-account-login .woocommerce-ResetPassword,
.hypro-account-login .woocommerce-LostPasswordForm {
  max-width: 440px;
}

/* ==========================================================================
   4. Form fields — shared
   ========================================================================== */

.woocommerce-form-row,
.woocommerce form .form-row {
  margin-bottom: 16px;
}

.woocommerce-form-row label,
.woocommerce form .form-row label {
  display: block;
  font-size: 13px !important;
  font-weight: 600;
  color: #0C0C0A;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.woocommerce-Input,
.woocommerce-Input--text,
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif;
  color: #0C0C0A;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-sizing: border-box;
}

.woocommerce-Input:focus,
.woocommerce-Input--text:focus,
.woocommerce form .input-text:focus,
.woocommerce form input[type="text"]:focus,
.woocommerce form input[type="email"]:focus,
.woocommerce form input[type="password"]:focus,
.woocommerce form input[type="tel"]:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
  border-color: #1526BE;
  box-shadow: 0 0 0 3px rgba(21, 38, 190, 0.12);
}

.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 400;
  cursor: pointer;
}

.woocommerce-form__input-checkbox {
  width: 16px !important;
  height: 16px !important;
  accent-color: #1526BE;
}

.woocommerce-LostPassword {
  margin-top: 10px;
}

.woocommerce-LostPassword a {
  color: #1526BE;
  font-size: 13px !important;
  text-decoration: none;
}

.woocommerce-LostPassword a:hover { text-decoration: underline; }

.required { color: #e53e3e; margin-left: 2px; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.woocommerce .button,
.woocommerce button[type="submit"],
.woocommerce-button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.hypro-account-wrap input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1526BE;
  color: #fff !important;
  border: none;
  border-radius: 0;
  padding: 12px 28px;
  font-size: 15px !important;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}

.woocommerce .button:hover,
.woocommerce button[type="submit"]:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
  background: #0f1e9e;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   6. Orders table
   ========================================================================== */

.woocommerce-orders-table,
.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-orders-table th,
.shop_table th {
  background: #f3f4f6;
  padding: 10px 14px;
  text-align: left;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

.woocommerce-orders-table td,
.shop_table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
  color: #0C0C0A;
  vertical-align: middle;
  font-size: 14px !important;
}

.woocommerce-orders-table tr:last-child td,
.shop_table tr:last-child td { border-bottom: none; }

mark.order-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px !important;
  font-weight: 600;
  background: #f3f4f6;
  color: #374151;
}

mark.order-status.status-completed  { background: #dcfce7; color: #166534; }
mark.order-status.status-processing { background: #dbeafe; color: #1e40af; }
mark.order-status.status-on-hold    { background: #fef9c3; color: #854d0e; }
mark.order-status.status-cancelled,
mark.order-status.status-refunded   { background: #fee2e2; color: #991b1b; }

/* ==========================================================================
   7. Addresses
   ========================================================================== */

.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 480px) {
  .woocommerce-Addresses { grid-template-columns: 1fr; }
}

.woocommerce-Address {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px;
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.woocommerce-Address-title h3 { font-size: 15px !important; font-weight: 700; margin: 0; }
.woocommerce-Address-title .edit { font-size: 13px !important; color: #1526BE; text-decoration: none; }
.woocommerce-Address address { font-style: normal; font-size: 14px !important; line-height: 1.6; color: #374151; }

/* ==========================================================================
   8. Notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px !important;
  font-weight: 500;
  list-style: none;
  border: none;
  border-left: 4px solid;
}

.woocommerce-message { background: #dcfce7; color: #166534; border-color: #22c55e; }
.woocommerce-error   { background: #fee2e2; color: #991b1b; border-color: #ef4444; }

/* ==========================================================================
   9. Checkout — place order button & layout
   ========================================================================== */

#place_order,
.woocommerce #place_order {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1526BE !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 36px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#place_order:hover,
.woocommerce #place_order:hover {
  background: #0f1e9e !important;
  color: #fff !important;
}
.woocommerce-info    { background: #dbeafe; color: #1e40af; border-color: #3b82f6; }

/* ==========================================================================
   10. Checkout — single column, top to bottom: billing → shipping/notes →
   order summary. No side-by-side columns at any width.
   ========================================================================== */

.hypro-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 640px;
  margin: 0 auto;
}

.hypro-checkout-main .col2-set,
.hypro-checkout-main .col2-set .col-1,
.hypro-checkout-main .col2-set .col-2 {
  width: 100% !important;
  float: none !important;
}

.hypro-checkout-sidebar {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
}

.hypro-checkout-sidebar #order_review_heading {
  margin: 0 0 16px;
}

/* Order summary table — single column: every row stacks its cells instead of
   splitting into side-by-side table columns (was cramped: thumbnail / name /
   subtotal read as 3 columns in the narrow 380px sidebar). */

.hypro-checkout-order-table,
.hypro-checkout-order-table tbody,
.hypro-checkout-order-table tfoot,
.hypro-checkout-order-table tr,
.hypro-checkout-order-table th,
.hypro-checkout-order-table td {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hypro-checkout-order-table thead {
  display: none !important;
}

.hypro-checkout-order-table tbody tr,
.hypro-checkout-order-table tfoot tr {
  padding: 16px 4px !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: none !important;
}

.hypro-checkout-order-table tbody tr:first-child {
  padding-top: 0 !important;
}

.hypro-checkout-order-table tfoot tr:last-child {
  border-bottom: none !important;
}

.hypro-checkout-order-table th,
.hypro-checkout-order-table td {
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

.hypro-checkout-order-table .product-name {
  padding: 0 0 8px !important;
}

.hypro-checkout-order-table .product-total {
  color: #6b7280;
  font-size: 13px !important;
  /* Align under the item's title text, not its thumbnail. */
  padding-left: 68px !important;
}

.hypro-checkout-order-table tfoot th {
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  padding: 0 0 6px !important;
}

.hypro-checkout-order-table tfoot td {
  font-size: 14px !important;
}

.hypro-checkout-order-table tfoot .order-total th,
.hypro-checkout-order-table tfoot .order-total td {
  font-size: 16px !important;
  font-weight: 700;
}

.hypro-checkout-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.hypro-checkout-item__thumbnail {
  position: relative;
  flex-shrink: 0;
}

.hypro-checkout-item__thumbnail img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  display: block;
}

.hypro-checkout-item__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 100px;
  background: #1526BE;
  color: #fff;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 2px solid #fff;
}

.hypro-checkout-item__details {
  font-size: 14px !important;
  line-height: 1.4;
}

.hypro-checkout-item__details .woocommerce-Price-amount {
  font-size: 13px !important;
  color: #6b7280;
}