/**
 * Atlas Recon Labs - Developer Overrides
 * -----------------------------------------------------------------
 * This file holds CSS fixes/additions made during WordPress + WooCommerce
 * integration that are NOT part of the original static design files
 * (css/style.css, sass/). Keeping these separate makes it easy to track
 * what we changed vs. what came from the designer's HTML/Sass.
 *
 * Loaded AFTER css/style.css so these rules take priority.
 * -----------------------------------------------------------------
 */

/* Ensure WooCommerce's price markup (wc_price() wraps text in nested spans)
   always inherits the card's font-size/weight/color instead of any default styling */
.als-pr-card__price .woocommerce-Price-amount,
.als-product-detail__price .woocommerce-Price-amount,
.als-related-card__price .woocommerce-Price-amount,
.als-option-card__price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Currency symbol ($) is wrapped in its own span by WooCommerce - same inheritance fix */
.als-pr-card__price .woocommerce-Price-currencySymbol,
.als-product-detail__price .woocommerce-Price-currencySymbol,
.als-related-card__price .woocommerce-Price-currencySymbol,
.als-option-card__price .woocommerce-Price-currencySymbol {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Contact Form 7 integration - styles elements CF7 generates automatically
   that aren't covered by the form template's own classes (validation
   error tips under each field, and the success/error response banner). */
.als-contact-form .wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 4px;
    display: block;
}
.als-contact-form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
}
.als-contact-form form.invalid .wpcf7-response-output {
    border-color: #dc3545;
    color: #dc3545;
    background: #fdecea;
}
.als-contact-form form.sent .wpcf7-response-output {
    border-color: #198754;
    color: #198754;
    background: #eafbf0;
}
.als-contact-form .wpcf7-spinner {
    margin-left: 8px;
}

/* Our form wrappers (needed for real WooCommerce add-to-cart submission -
   the original static HTML had no <form> here at all) broke the parent
   .als-product-detail__summary flex gap rhythm between Choose Option /
   Quantity / Buttons. Re-apply the same gap so spacing matches the
   original design exactly - covers both the variable-product form
   (.als-variation-form) and the simple-product form (.cart). */
.als-product-detail__summary form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* CF7 wraps every field in its own <p> tag with default margins - remove
   those since our .als-form-group/.col-md-* grid already handles spacing,
   to avoid the extra vertical gaps CF7's wrapper introduces. */
.als-contact-form form p {
    margin: 0;
}

/* CF7 outputs the submit button as <input type="submit">, not <a>/<button> -
   make sure it picks up our exact brand blue and pill shape regardless of
   element type (the lighter/faded look came from CF7's own default styling). */
.als-contact-form input.wpcf7-submit.btn-primary {
    background-color: var(--bs-primary, #0D4AA5);
    color: #fff;
    border: none;
    opacity: 1;
}
.als-contact-form input.wpcf7-submit.btn-primary:hover {
    opacity: 0.92;
}

/* WooCommerce native Reviews tab - styled to match our design system since
   it ships with zero CSS of its own (we intentionally disabled WC's default
   stylesheet earlier). Uses our existing card/form-control/button look. */
.als-reviews-tab #reviews-title,
.als-reviews-tab .woocommerce-Reviews-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.als-reviews-tab .woocommerce-noreviews {
    color: #6b7280;
    margin-bottom: 16px;
}
.als-reviews-tab #comments {
    margin-bottom: 24px;
}
.als-reviews-tab .comment-text {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.als-reviews-tab .comment-text .star-rating {
    color: #f5a623;
    font-size: 0.9rem;
    margin-bottom: 6px;
}
.als-reviews-tab .comment-text .description p {
    margin: 0;
    color: #374151;
}
.als-reviews-tab #review_form_wrapper {
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
}
.als-reviews-tab #reply-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.als-reviews-tab .comment-notes,
.als-reviews-tab .comment-form-cookies-consent label {
    color: #6b7280;
    font-size: 0.85rem;
}
.als-reviews-tab .comment-form-rating,
.als-reviews-tab .comment-form-comment,
.als-reviews-tab .comment-form-author,
.als-reviews-tab .comment-form-email {
    margin-bottom: 16px;
}
.als-reviews-tab .comment-form-rating label,
.als-reviews-tab .comment-form-comment label,
.als-reviews-tab .comment-form-author label,
.als-reviews-tab .comment-form-email label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #111827;
}
.als-reviews-tab select#rating {
    width: auto;
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.95rem;
    background-color: #fff;
}

/* Visually hide the native <select> (kept accessible to screen readers and
   form submission - NOT display:none, which would break native validation
   and skip it during form submit in some browsers). Our custom star widget
   below drives this select's value via JS. */
.als-rating-select-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.als-star-rating-input {
    display: inline-flex;
    gap: 4px;
}
.als-star-rating-input__star {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    color: #f5a623;
}
.als-star-rating-input__star i {
    pointer-events: none;
}
.als-star-rating-input__star:focus-visible {
    outline: 2px solid var(--bs-primary, #0D4AA5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Hide WooCommerce's own auto-injected "View cart" link - it appears
   automatically right after any Add to Cart button once the "added_to_cart"
   event fires (core wc-add-to-cart.js behavior, applies everywhere: Shop
   cards, Homepage cards, and the Product Detail page buttons). We already
   show an equivalent "View cart" link inside our own toast notification,
   so this extra inline one next to the button is redundant everywhere. */
.added_to_cart.wc-forward {
    display: none !important;
}

/* Fixes a known Chrome rendering bug: when a `position: sticky` element
   (our header) coexists with `overflow-x: hidden` on body/html, Chrome can
   fail to properly composite the sticky element while scrolling, causing a
   brief white flash/flicker. Forcing the header onto its own GPU layer
   resolves this reliably without touching the overflow-x:hidden elsewhere
   (which is needed to prevent horizontal scrollbars from minor overflow). */
/* NOTE: previously used transform:translateZ(0) + will-change:transform here
   to fix a sticky-header flicker bug, but this makes .als-header a
   containing block for position:fixed descendants (per spec), which trapped
   the mobile offcanvas menu inside the header's compositing layer and
   caused it to render translucent/broken on some pages. Removed until we
   find a fix that doesn't break the offcanvas. */
.als-header {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Toast/flash messages - replaces WooCommerce's plain stacked notice boxes
   with a floating, auto-dismissing notification (used for AJAX add-to-cart
   feedback on the product detail page). */
.als-toast-container {
    position: fixed !important;
    top: 90px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    pointer-events: none;
}
.als-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 0.92rem;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.als-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.als-toast--success {
    border-left: 4px solid #198754;
}
.als-toast--error {
    border-left: 4px solid #dc3545;
}
.als-toast__icon {
    font-size: 1.1rem;
    line-height: 1.4;
}
.als-toast--success .als-toast__icon {
    color: #198754;
}
.als-toast--error .als-toast__icon {
    color: #dc3545;
}
.als-toast__text {
    color: #1B1F24;
}
.als-toast__text a {
    color: var(--bs-primary, #0D4AA5);
    font-weight: 600;
    text-decoration: underline;
}
@media (max-width: 575.98px) {
    .als-toast-container {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}
.als-reviews-tab .comment-form-comment textarea,
.als-reviews-tab .comment-form-author input,
.als-reviews-tab .comment-form-email input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.95rem;
}
.als-reviews-tab .comment-form-comment textarea {
    min-height: 140px;
}
.als-reviews-tab .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.als-reviews-tab #submit {
    background-color: var(--bs-primary, #0D4AA5);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 600;
    cursor: pointer;
}
.als-reviews-tab #submit:hover {
    opacity: 0.92;
}

/* WooCommerce's native checkout Order Review + Payment section
   (do_action('woocommerce_checkout_order_review')) - styled to match our
   card/button design system since it ships with zero CSS of its own (WC's
   default stylesheet is intentionally disabled site-wide). */
#order_review .shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
#order_review .shop_table th,
#order_review .shop_table td {
    padding: 10px 0;
    text-align: left;
    border-bottom: 1px solid #E4EAF1;
    font-size: 0.92rem;
}
#order_review .shop_table th {
    font-weight: 700;
}
#order_review .shop_table td {
    text-align: right;
}
#order_review .shop_table td:first-child,
#order_review .shop_table th:first-child {
    text-align: left;
}
#order_review .shop_table .product-name {
    text-align: left;
}
#order_review .shop_table tfoot th,
#order_review .shop_table tfoot td {
    border-bottom: none;
}
#order_review .order-total th,
#order_review .order-total td {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-primary, #0D4AA5);
}

#order_review .woocommerce-NoticeGroup .woocommerce-error,
#order_review .woocommerce-NoticeGroup .woocommerce-info {
    background: #fdecea;
    border-left: 4px solid #dc3545;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    list-style: none;
}

#order_review #payment {
    margin-top: 20px;
    background: #F7F9FC;
    border-radius: 12px;
    padding: 20px;
}
#order_review ul.payment_methods {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
#order_review ul.payment_methods li {
    margin-bottom: 12px;
}
#order_review ul.payment_methods li label {
    font-weight: 600;
    margin-left: 8px;
}
#order_review .payment_box {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #5E6978;
}
#order_review .payment_box p {
    margin: 0;
}

#order_review .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: #5E6978;
}

#order_review #place_order {
    display: block;
    width: 100%;
    background-color: var(--bs-primary, #0D4AA5);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}
#order_review #place_order:hover {
    opacity: 0.92;
}
#order_review .woocommerce-privacy-policy-text {
    font-size: 0.82rem;
    color: #5E6978;
    margin-top: 12px;
}
/* WooCommerce's checkout blockUI overlay while placing the order */
#order_review.processing {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

/* Checkout Step 2 - saved address selector (new addition for the multi-
   address system, not part of the original static design's CSS). */
.als-checkout__saved-addresses {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.als-checkout__saved-address-option .als-option-card__title .badge-primary {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}
.als-checkout__saved-address-text {
    display: block;
    font-size: 0.85rem;
    color: #5E6978;
    margin-top: 2px;
}

/* Delete button variant on address cards */
.als-edit-btn--danger {
    color: #dc3545;
    border-color: #dc3545;
}
.als-edit-btn--danger:hover {
    background: #fdecea;
}

/* Account badges (Default/status tags) - these classes exist in the
   designer's SASS source (_account-badge.scss) but were never included in
   their compiled css/style.css, so we compile them here ourselves using
   the same color variables from their _variables.scss. */
.account-badge,
.badge-primary,
.badge-success,
.badge-info,
.badge-warning,
.badge-default,
.badge-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
.badge-primary {
    background: rgba(13, 74, 165, 0.12);
    color: #0D4AA5;
}
.badge-success {
    background: rgba(23, 178, 106, 0.14);
    color: #17B26A;
}
.badge-info {
    background: rgba(89, 211, 255, 0.25);
    color: #0D4AA5;
}
.badge-warning {
    background: rgba(255, 193, 7, 0.2);
    color: #1B1F24;
}
.badge-default {
    background: #F8F9FA;
    color: #5E6978;
}
.badge-light {
    background: #F7F9FC;
    color: #1B1F24;
}

/* WooCommerce's own form field wrapper (woocommerce_form_field() outputs
   <p class="form-row als-form-group"><label>...</label>
   <span class="woocommerce-input-wrapper"><input>...</span></p>)
   These wrapper elements have zero styling of their own since the original
   design never used real WooCommerce form fields - explicitly resetting
   them here fixes inconsistent/doubled spacing across all our WC-powered
   forms (Checkout, Edit Address, Edit Account). */
p.form-row.als-form-group {
    margin-bottom: 20px !important;
    padding: 0;
}
p.form-row.als-form-group label {
    margin-bottom: 8px !important;
}
.woocommerce-input-wrapper {
    display: block;
    width: 100%;
}
.woocommerce-input-wrapper .select2-container,
.woocommerce-input-wrapper select {
    width: 100% !important;
}

/* Fix mobile menu (offcanvas) items appearing invisible/clipped. Classic
   flexbox gotcha: flex items default to min-height:auto (not 0), which
   breaks overflow-y:auto's clipping/scroll calculation inside a
   height-constrained flex container - the content area can collapse to
   near-zero visible height even though the actual menu items are present
   and correctly styled in the DOM. min-height:0 here lets it size and
   scroll correctly while still allowing scrolling for long menus. */
.als-offcanvas .offcanvas-body {
    min-height: 0;
    overflow-y: visible !important;
}

/* Small icon badge above the Lost Password / Reset Password form titles */
.als-auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(13, 74, 165, 0.1);
    color: var(--bs-primary, #0D4AA5);
    font-size: 1.3rem;
    margin: 0 auto 12px;
}

/* Safety net: if WooCommerce ever prints its raw default notice markup
   directly (bypassing our template entirely for a given state), at least
   make it look intentional instead of completely unstyled plain text. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-NoticeGroup-checkout,
.woocommerce-NoticeGroup-account {
    max-width: 700px;
    margin: 24px auto;
    padding: 16px 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-left: 4px solid var(--bs-primary, #0D4AA5);
    list-style: none;
}
.woocommerce-error {
    border-left-color: #dc3545;
}