/* ==========================================================================
   components.css — Buttons, Cards, Badges, Trust Bar & Inputs
   Herba Sparsh Child Theme
   Author: Pratik Patil
   ========================================================================== */

/* ==========================================================================
   0. LEAF ACCENT (shared section-heading flourish — see hst_leaf_accent()
      in functions.php; same motif as the scroll-driven botanical
      decoration, at a small restrained scale)
   ========================================================================== */

.hst-leaf-accent {
    display: block;
    width: 56px;
    margin: 0 auto var(--space-sm) auto;
}

.hst-leaf-accent svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

/* ---- Primary CTA (Buy Now, Shop Now, Submit) ---- */
.btn-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    padding: 12px 28px !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.03em !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}

.btn-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--color-accent-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-primary:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.btn-primary:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
    outline: none !important;
    box-shadow: var(--shadow-glow) !important;
}

/* ---- Secondary Button (Add to Cart on product pages) ---- */
.btn-secondary,
.woocommerce div.product form.cart .single_add_to_cart_button {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    padding: 10px 24px !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
    text-transform: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}

.btn-secondary:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    transform: translateY(-1px) !important;
}

/* Apple's Human Interface Guidelines put the minimum comfortable tap target
   at 44px; these buttons measure ~39px tall on a phone (12px/10px vertical
   padding + a 15px line that line-height: 1 doesn't pad), fine with a mouse
   pointer but tight for a thumb. Desktop is untouched. */
@media (max-width: 640px) {
    .btn-primary,
    .btn-secondary,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce div.product form.cart .single_add_to_cart_button {
        min-height: 44px !important;
    }
}

/* ---- Ghost / Text Button ---- */
.btn-ghost {
    background: transparent;
    color: var(--color-secondary);
    border: none;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 200ms ease;
}

.btn-ghost:hover {
    color: var(--color-primary);
}

/* ---- Disabled state ---- */
.btn-primary:disabled,
.btn-secondary:disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ==========================================================================
   2. TRUST BAR
   ========================================================================== */

/* Canonical trust-bar styling lives in layout.css ("TRUST SIGNAL BAR" section)
   — this file used to carry a second, conflicting copy. Removed to avoid
   two components silently fighting over the same class names. */

/* ==========================================================================
   3. BADGES
   ========================================================================== */

.hst-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.hst-badge--bestseller {
    background: var(--color-gold);
    color: var(--color-on-primary);
}

.hst-badge--new {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.hst-badge--sale {
    background: var(--color-destructive);
    color: var(--color-on-primary);
}

.hst-badge--out-of-stock {
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-on-primary);
}

/* Small inline "Sale" tag next to the price instead of a badge on the
   image — used by the shop/category grid, related/upsell cards, and the
   single product page alike (inc/shop.php, inc/product-page.php). Lives
   here (loaded on every page via hst-components) rather than shop.css,
   which never enqueues on single product pages. */
.hst-product-card__sale-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    margin-left: var(--space-xs);
    border-radius: var(--radius-sm);
    background: var(--color-destructive);
    color: var(--color-on-primary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
}

/* Override WooCommerce's default sale badge */
.woocommerce span.onsale {
    background-color: var(--color-destructive) !important;
    color: var(--color-on-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 10px !important;
    min-width: auto !important;
    min-height: auto !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   4. INPUTS & FORM ELEMENTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-foreground);
    background: var(--color-surface);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input.input-text:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: var(--shadow-glow);
}

/* Labels */
label,
.woocommerce form .form-row label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-foreground);
    margin-bottom: var(--space-xs);
    display: block;
}

/* ==========================================================================
   5. CARDS (GENERIC)
   ========================================================================== */

.hst-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    transition: box-shadow 250ms ease, transform 250ms ease;
}

.hst-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* ==========================================================================
   6. BREADCRUMBS
   ========================================================================== */

.woocommerce-breadcrumb,
.storefront-breadcrumb {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
    padding: var(--space-md) 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.woocommerce-breadcrumb a {
    color: var(--color-secondary);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   7. NOTICES & MESSAGES
   ========================================================================== */

.woocommerce-message,
.woocommerce-info {
    background-color: var(--color-success-bg) !important;
    border-top-color: var(--color-accent) !important;
    color: var(--color-foreground) !important;
    font-family: var(--font-body);
}

/* Storefront's own .woocommerce-error sets white text (#fff), sized for
   its default solid red/orange background — overriding just the
   background above to a pale tint, without this, left that white text
   sitting on a near-white background: readable nowhere, invisible in
   practice (reported live on the My Account "email not verified" error,
   2026-10-13). Links/buttons inside the notice inherit the same white
   from Storefront too (.woocommerce-error a, .woocommerce-error .button),
   so they need the same correction, not just the notice text itself. */
.woocommerce-error {
    background-color: var(--color-destructive-bg) !important;
    border-top-color: var(--color-destructive) !important;
    color: var(--color-foreground) !important;
    font-family: var(--font-body);
}

.woocommerce-error a,
.woocommerce-error .button {
    color: var(--color-destructive) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--color-accent-text) !important;
}

/* WooCommerce core floats a .button (e.g. the "Resend" link on the
   temporary-password notice) to the right of the notice text via
   `.woocommerce-message .button { float: right; }`. Floating/inline-flex
   only breaks onto its own line once the text runs out of room beside it,
   so on anything wider than a phone the button sits mid-sentence, jammed
   against plain text with no visual separation ("No order has been made
   yet. [Browse products]" all on one line). `display: block` forces the
   button onto its own line at every width, not just when it's forced to
   wrap, so the action always reads as a distinct element from the message. */
.woocommerce-message .button,
.woocommerce-info .button {
    float: none !important;
    display: block !important;
    width: fit-content;
    margin: var(--space-sm) 0 0 0 !important;
}

/* The "Resend" button is prepended before its sentence in markup (unlike
   the "Browse products" notices, where the button follows the text), so
   block-stacking alone would stack it above the text instead of below.
   Flexbox reorders it after the text node without touching markup, keeping
   every stacked notice button in the same position: message first, action
   second. */
.woocommerce-message,
.woocommerce-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.woocommerce-message .button,
.woocommerce-info .button {
    order: 2;
}

.woocommerce-error::before {
    color: var(--color-destructive) !important;
}