/*
 * HOCl Hub – Guest Offer Shortcodes | offer.css 1.1.0
 * All selectors prefixed with .ho- to prevent any theme/plugin conflicts.
 * Loaded only for guest users – zero overhead for logged-in members.
 */

/* ─── SHARED TOKENS ───────────────────────────────────────────── */
:root {
    --ho-g:    #1D9E75;
    --ho-gd:   #0F6E56;
    --ho-gdp:  #085041;
    --ho-gbg:  #E1F5EE;
    --ho-gbd:  #9FE1CB;
    --ho-am:   #BA7517;
    --ho-ambg: #FAEEDA;
    --ho-r:    8px;
    --ho-rl:   12px;
    --ho-ease: .15s ease;
}

/* ─── SHARED BUTTON ───────────────────────────────────────────── */
.ho-btn {
    display: inline-block;
    background: var(--ho-g);
    color: #fff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 18px;
    border-radius: var(--ho-r);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--ho-ease);
    border: none;
    cursor: pointer;
}
.ho-btn:hover { background: var(--ho-gd); color: #fff !important; }
.ho-btn--full { display: block; text-align: center; padding: 12px 18px; font-size: 14px; }
.ho-btn--outline {
    background: transparent;
    color: var(--ho-g) !important;
    border: 1.5px solid var(--ho-g);
}
.ho-btn--outline:hover { background: var(--ho-gbg); color: var(--ho-gd) !important; }

/* ════════════════════════════════════════════════════════════════
   1. PRODUCT HINT  [hoclhub_product_hint]
   ════════════════════════════════════════════════════════════════ */
.ho-hint {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    background: var(--ho-gbg);
    border-left: 3px solid var(--ho-g);
    border-radius: 0 var(--ho-r) var(--ho-r) 0;
    padding: 10px 14px;
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--ho-gdp);
    line-height: 1.6;
}
.ho-hint a {
    color: var(--ho-gd);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ho-hint a:hover { color: var(--ho-gdp); }
.ho-hint strong { font-weight: 700; }
.ho-hint__save {
    display: inline-block;
    background: var(--ho-ambg);
    color: var(--ho-am);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    margin-left: 2px;
    vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   2. CART BANNER  [hoclhub_cart_banner]
   ════════════════════════════════════════════════════════════════ */
.ho-cart-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--ho-gbg);
    border: 1px solid var(--ho-gbd);
    border-radius: var(--ho-rl);
    padding: 14px 18px;
    margin: 0 0 20px;
    flex-wrap: wrap;
}
.ho-cart-banner__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 180px;
}
.ho-cart-banner__body strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--ho-gdp);
    display: block;
}
.ho-cart-banner__save {
    display: inline-block;
    background: var(--ho-ambg);
    color: var(--ho-am);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    width: fit-content;
}
.ho-cart-banner__body > span {
    font-size: 12px;
    color: var(--ho-gd);
}



@media (max-width: 640px) {
    .ho-cart-banner { flex-direction: column; align-items: flex-start; }
    .ho-btn { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   3. CHECKOUT BOX  [hoclhub_checkout_box]
   ════════════════════════════════════════════════════════════════ */
.ho-co-box {
    background: var(--ho-gbg);
    border: 2px solid var(--ho-g);
    border-radius: var(--ho-rl);
    padding: 18px 20px;
    margin: 0 0 24px;
}
.ho-co-box__badge {
    display: inline-block;
    background: var(--ho-g);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.ho-co-box__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ho-gdp);
    margin: 0 0 6px;
    line-height: 1.4;
}
.ho-co-box__title strong { font-weight: 800; }
.ho-co-box__save {
    color: var(--ho-am);
    font-weight: 700;
    font-size: 14px;
}
.ho-co-box__sub {
    font-size: 13px;
    color: var(--ho-gd);
    margin: 0 0 14px;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════
   4. SHOP BANNER  [hoclhub_shop_banner]
   ════════════════════════════════════════════════════════════════ */
.ho-shop-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ho-gbg);
    border: 1px solid var(--ho-gbd);
    border-radius: var(--ho-r);
    padding: 12px 18px;
    margin: 0 0 22px;
    flex-wrap: wrap;
}
.ho-shop-banner__icon { font-size: 20px; flex-shrink: 0; }
.ho-shop-banner__text {
    flex: 1;
    font-size: 13px;
    color: var(--ho-gdp);
    margin: 0;
    min-width: 160px;
    line-height: 1.5;
}
.ho-shop-banner__text strong { font-weight: 700; }

@media (max-width: 640px) {
    .ho-shop-banner { flex-direction: column; align-items: flex-start; }
}