/* Trường Thịnh lightweight commerce actions — v3.14.0.
 * Loaded on product/shop archives instead of the full Cart/Checkout stylesheet.
 */
/*
 * Trường Thịnh Commerce UI v1.1 — child theme v3.7.1
 * Product fallback CTA + Cart + Checkout. Accents inherit Flatsome Primary Color.
 */
:root {
    --tt-commerce-bg: #f5f7fa;
    --tt-commerce-card: #fff;
    --tt-commerce-text: #161d2d;
    --tt-commerce-muted: #778196;
    --tt-commerce-border: #e1e6ed;
    --tt-commerce-radius: 18px;
    --tt-commerce-shadow: 0 10px 30px rgba(15, 23, 42, .055);
}

/* ---------- CALL TO ORDER / BUY NOW ---------- */
.tt-call-order-button,
.tt-loop-buy-now {
    box-sizing: border-box;
}

.tt-call-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 8px 16px;
    border: 1.5px solid var(--tt-primary) !important;
    border-radius: 11px;
    background: #fff !important;
    color: var(--tt-primary) !important;
    text-decoration: none !important;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.tt-call-order-button:hover,
.tt-call-order-button:focus-visible,
.tt-loop-buy-now:hover,
.tt-loop-buy-now:focus-visible {
    border-color: var(--tt-primary-strong, var(--tt-primary)) !important;
    background: var(--tt-primary-soft, rgba(227, 30, 36, .06)) !important;
    color: var(--tt-primary-strong, var(--tt-primary)) !important;
    box-shadow: 0 5px 14px var(--tt-primary-ring, rgba(227, 30, 36, .14));
    transform: translateY(-1px);
}

.tt-call-order-button__icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

.tt-call-order-button__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    line-height: 1.1;
}

.tt-call-order-button__text strong {
    color: inherit !important;
    font-size: 13px;
    font-weight: 800;
}

.tt-call-order-button__text small {
    color: inherit !important;
    font-size: 11px;
    font-weight: 650;
    opacity: .9;
}

.tt-card__actions .tt-call-order-button.tt-card__btn--call {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    height: auto;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1.5px solid var(--tt-primary) !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--tt-primary) !important;
    box-shadow: none !important;
    gap: 7px;
}

.tt-card__actions .tt-call-order-button.tt-card__btn--call:hover,
.tt-card__actions .tt-call-order-button.tt-card__btn--call:focus-visible {
    border-color: var(--tt-primary) !important;
    background: var(--tt-primary-soft, rgba(227, 30, 36, .06)) !important;
    color: var(--tt-primary-strong, var(--tt-primary)) !important;
    box-shadow: 0 5px 14px var(--tt-primary-ring, rgba(227, 30, 36, .14)) !important;
}

.tt-card__actions .tt-card__btn--call .tt-call-order-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.tt-card__actions .tt-card__btn--call .tt-call-order-button__text {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    line-height: 1;
}

.tt-card__actions .tt-card__btn--call .tt-call-order-button__text strong {
    font-size: 13px;
    white-space: nowrap;
}

/* The phone number remains in href=tel:... but is intentionally never rendered in the CTA. */
.tt-call-order-button__text small {
    display: none !important;
}

.tt-loop-buy-now {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
    color: #fff !important;
}

body.single-product .tt-single-call-order {
    margin: 15px 0 4px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 32%, #e5e7eb);
    border-radius: 13px;
    background: color-mix(in srgb, var(--tt-primary) 5%, white);
}

body.single-product .tt-single-call-order__note {
    margin: 0 0 10px !important;
    color: var(--tt-commerce-muted);
    font-size: 13px;
    line-height: 1.5;
}

body.single-product .tt-call-order-button--single {
    width: 100%;
    min-height: 52px;
}

body.single-product .tt-mobile-product-bar--call {
    grid-template-columns: 1fr !important;
}

body.single-product .tt-mobile-product-bar__call {
    width: 100%;
    min-height: 45px;
}