/* My account and order tracking: WooCommerce markup styled to the design. */

/* Form fields printed by woocommerce_form_field() (address forms) and the design's .form-field. */
.form-grid .form-row { margin: 0; grid-column: auto; }
.form-grid .form-row.full { grid-column: 1 / -1; }
.form-field .woocommerce-input-wrapper { display: block; }
/* The design's labels carry no required/optional markers (fields stay required in the markup). */
.form-field label .required, .form-field label .optional { display: none; }
.form-field label .optional { display: none; }
.form-field select { display: block; width: 100%; min-height: 48px; padding: 11px; font-size: 16px; border: 1px solid #ccc; border-radius: 0; background: white; color: #111; }
.form-field select:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.form-field input[type=checkbox], .form-field input[type=radio] { display: inline-block; width: auto; min-height: 0; accent-color: var(--red); }
.form-field strong { display: block; font-size: 16px; padding: 13px 0; }
.form-field.woocommerce-invalid input, .form-field.woocommerce-invalid select { border-color: var(--red); }
.form-help { display: block; margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--grey); }
.form-check { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 0 8px; font-size: 14px; cursor: pointer; }
.form-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }

/* Show-password button (woocommerce.js wraps password inputs in .password-input). */
.password-input { position: relative; display: block; }
.password-input input { padding-inline-end: 48px; }
.show-password-input {
	position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%); width: 34px; height: 34px; padding: 0;
	background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.show-password-input.display-password { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }

/* Password strength meter. */
.woocommerce-password-strength { margin-top: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; background: #f4f4f2; border-inline-start: 3px solid var(--line); }
.woocommerce-password-strength.short, .woocommerce-password-strength.bad { border-color: var(--red); color: var(--red); }
.woocommerce-password-strength.good { border-color: #c98a00; }
.woocommerce-password-strength.strong { border-color: #2f7d32; }
.woocommerce-password-hint { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--grey); }
.store-form .button.disabled, .store-form .button:disabled { background: #aaa; color: white; cursor: not-allowed; }

/* Login / register. */
.auth-panels.auth-single { grid-template-columns: minmax(0, 650px); }
.woocommerce-privacy-policy-text p { font-size: 13px; line-height: 1.7; margin: 0 0 15px; }
.woocommerce-privacy-policy-text a { text-decoration: underline; text-underline-offset: 3px; }
.state-panel.narrow { max-width: 650px; }

/* Dashboard. */
.account-body > .account-signed-in { margin-bottom: 10px; color: var(--black); }
.account-signed-in .text-link { display: inline-block; margin-inline-start: 10px; }
.account-body > p + p { margin-bottom: 0; }

/* Tables: order number links, action buttons, pagination. */
.table-scroll tbody th { font-size: 14px; text-align: start; background: none; padding: 20px 15px; border-bottom: 1px solid #ddd; }
.table-scroll tbody th a { border-bottom: 1px solid; padding-bottom: 3px; }
.table-scroll tbody th a:hover { color: var(--red); }
.table-scroll td .woocommerce-Price-amount { white-space: nowrap; }
.account-action { min-height: 0; padding: 9px 14px; margin: 2px 0; margin-inline-end: 8px; font-size: 12px; border: 1px solid var(--black); }
.account-action:last-child { margin-inline-end: 0; }
.account-action:not(.red):hover { background: var(--black); color: white; }
.account-action.red { border-color: var(--red); }
.account-pagination { display: flex; gap: 25px; margin: 0 0 25px; }
.account-body > .button { margin-top: 25px; }

/* Address cards: WooCommerce's formatted address. */
.address-card p { line-height: 1.8; }

/* Order details (view order and tracking). */
.account-body > .order-meta, .tracking-result > .order-meta { margin-top: 0; }
.tracking-result h2 { font-size: 25px; margin-bottom: 20px; }
.order-items { border-top: 1px solid #ddd; }
.order-items .checkout-item a:hover { color: var(--red); }
.order-items .checkout-item strong, .checkout-totals strong { font-weight: 600; text-align: end; }
.order-detail-sections .checkout-totals { margin: 0 0 30px; }
.checkout-totals .summary-line small, .checkout-totals .summary-total small { display: block; font-weight: 400; color: #666; }
.order-detail-sections p { line-height: 1.8; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.order-actions .account-action { min-height: 48px; padding: 14px 22px; font-size: 14px; margin: 0; }
.order-again { margin: 0 0 30px; }
.order-again .button { background: var(--red); color: white; }
.order-again .button:hover { background: #bf181e; }
.order-updates { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid #ddd; }
.order-updates li { padding: 18px 0; border-bottom: 1px solid #ddd; }
.order-updates time { display: block; font-size: 13px; color: var(--grey); }
.order-detail-sections .order-updates p { margin: 8px 0 0; font-size: 15px; color: #555; }
.tracking-result > .text-link { display: inline-block; }

/* Add payment method: WooCommerce's gateway list inside .payment-placeholder. */
.payment-placeholder h2 { font-size: 22px; margin-bottom: 22px; }
.payment-placeholder .payment_methods { list-style: none; margin: 0 0 25px; padding: 0; border: 1px solid #ddd; }
.payment-placeholder .payment_methods li { padding: 18px; border-bottom: 1px solid #ddd; }
.payment-placeholder .payment_methods li:last-child { border-bottom: 0; }
.payment-placeholder .payment_methods li > input { accent-color: var(--red); margin: 0; margin-inline-end: 10px; vertical-align: middle; }
.payment-placeholder .payment_methods li > label { font-size: 14px; font-weight: 600; cursor: pointer; }
.payment-placeholder .payment_methods label img { max-height: 24px; vertical-align: middle; margin-inline-start: 6px; }
.payment-placeholder .payment_box { margin-top: 14px; font-size: 14px; line-height: 1.7; color: #666; }
.payment-placeholder .payment_box p { margin: 0 0 12px; font-size: 14px; color: #666; }
.payment-placeholder .payment_box input:not([type=checkbox]):not([type=radio]), .payment-placeholder .payment_box select { width: 100%; min-height: 48px; padding: 13px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 0; background: white; }
.payment-placeholder .form-row { margin: 0; }

@media (max-width: 700px) {
	.account-action { padding: 8px 12px; }
	.order-actions .account-action { min-height: 44px; padding: 12px 18px; font-size: 13px; }
	.tracking-result h2 { font-size: 22px; }
	.payment-placeholder { padding: 23px; }
}