/**
 * Frontend CSS — Automatic Upsell & Cross-Sell Pro for WooCommerce
 * Class prefix: .aucsp-
 * Uses CSS custom properties set by PHP via inline style block.
 */

/* === VARIABLES (fallback values; overridden by inline CSS from design settings) === */
:root {
        --aucsp-primary: #2271b1;
        --aucsp-secondary: #135e96;
        --aucsp-btn-bg: #2271b1;
        --aucsp-btn-text: #ffffff;
        --aucsp-radius: 4px;
        --aucsp-border: #dddddd;
        --aucsp-font-size: 14px;
        --aucsp-spacing: 16px;
        --aucsp-popup-width: 600px;
}

/* === FREQUENTLY BOUGHT TOGETHER === */
.aucsp-fbt {
        margin: calc(var(--aucsp-spacing) * 1.5) 0;
        padding: var(--aucsp-spacing);
        border: 1px solid var(--aucsp-border);
        border-radius: var(--aucsp-radius);
        font-size: var(--aucsp-font-size);
        box-sizing: border-box;
}

.aucsp-fbt__title {
        font-size: 1.2em;
        margin: 0 0 var(--aucsp-spacing);
        color: inherit;
}

.aucsp-fbt__sales-message {
        color: #e00;
        font-weight: 600;
        margin: 0 0 var(--aucsp-spacing);
}

/* Horizontal layout */
.aucsp-fbt--layout-horizontal .aucsp-fbt__products {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--aucsp-spacing);
}

/* Vertical layout */
.aucsp-fbt--layout-vertical .aucsp-fbt__products {
        display: flex;
        flex-direction: column;
        gap: calc(var(--aucsp-spacing) / 2);
}

/* Grid layout */
.aucsp-fbt--layout-grid .aucsp-fbt__products {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--aucsp-spacing);
}

.aucsp-fbt__plus {
        display: flex;
        align-items: center;
        font-size: 1.4em;
        font-weight: 700;
        color: var(--aucsp-primary);
        padding: 0 4px;
        align-self: center;
}

.aucsp-fbt__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 100px;
}

.aucsp-fbt__thumb {
        position: relative;
        margin-bottom: 8px;
}

.aucsp-fbt__thumb img {
        max-width: 100px;
        height: auto;
        border-radius: var(--aucsp-radius);
        display: block;
}

.aucsp-fbt__check {
        position: absolute;
        top: 4px;
        left: 4px;
}

.aucsp-fbt__check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--aucsp-primary);
}

.aucsp-fbt__info {
        display: flex;
        flex-direction: column;
        gap: 4px;
}

.aucsp-fbt__item-title a {
        color: inherit;
        text-decoration: none;
        font-weight: 600;
}

.aucsp-fbt__item-title a:hover {
        color: var(--aucsp-primary);
}

.aucsp-fbt__item-price {
        color: var(--aucsp-primary);
        font-weight: 700;
}

.aucsp-fbt__variations {
        margin-top: 6px;
        display: flex;
        flex-direction: column;
        gap: 4px;
}

.aucsp-fbt__variation-label {
        font-size: 0.85em;
        font-weight: 600;
}

.aucsp-fbt__variation-select {
        border: 1px solid var(--aucsp-border);
        border-radius: var(--aucsp-radius);
        padding: 4px 6px;
        font-size: 0.85em;
        max-width: 120px;
}

.aucsp-fbt__footer {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--aucsp-spacing);
        margin-top: var(--aucsp-spacing);
        padding-top: var(--aucsp-spacing);
        border-top: 1px solid var(--aucsp-border);
}

.aucsp-fbt__total {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
}

.aucsp-fbt__total-original {
        text-decoration: line-through;
        color: #999;
}

.aucsp-fbt__total-discounted {
        color: #e00;
        font-weight: 700;
        font-size: 1.1em;
}

.aucsp-fbt__total-price {
        font-weight: 700;
        font-size: 1.1em;
}

.aucsp-fbt__discount-label {
        background: #e00;
        color: #fff;
        padding: 2px 8px;
        border-radius: 100px;
        font-size: 0.8em;
        font-weight: 700;
}

.aucsp-fbt__add-btn {
        background-color: var(--aucsp-btn-bg) !important;
        color: var(--aucsp-btn-text) !important;
        border-radius: var(--aucsp-radius) !important;
        border: none !important;
        padding: 10px 20px !important;
        font-size: var(--aucsp-font-size) !important;
        cursor: pointer !important;
        transition: opacity 0.2s ease;
}

.aucsp-fbt__add-btn:hover {
        opacity: 0.88;
}

.aucsp-fbt__add-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
}

.aucsp-fbt__feedback {
        font-size: 0.9em;
        color: #0a0;
}

/* === POPUP OVERLAY === */
.aucsp-popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--aucsp-spacing);
        box-sizing: border-box;
}

.aucsp-popup {
        background: #fff;
        border-radius: var(--aucsp-radius);
        max-width: var(--aucsp-popup-width);
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
        display: flex;
        flex-direction: column;
        animation: aucsp-popup-in 0.25s ease;
}

@keyframes aucsp-popup-in {
        from { transform: scale(0.93) translateY(10px); opacity: 0; }
        to   { transform: scale(1) translateY(0); opacity: 1; }
}

.aucsp-popup__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px var(--aucsp-spacing);
        border-radius: var(--aucsp-radius) var(--aucsp-radius) 0 0;
}

.aucsp-popup__header-title {
        color: #fff;
        font-size: 1.1em;
        font-weight: 700;
}

.aucsp-popup__close {
        background: none;
        border: none;
        color: #fff;
        font-size: 1.5em;
        line-height: 1;
        cursor: pointer;
        opacity: 0.8;
        padding: 0 4px;
        transition: opacity 0.15s;
}

.aucsp-popup__close:hover {
        opacity: 1;
}

.aucsp-popup__body {
        padding: var(--aucsp-spacing);
        flex: 1;
}

.aucsp-popup__added-product {
        display: flex;
        align-items: center;
        gap: var(--aucsp-spacing);
        padding: var(--aucsp-spacing);
        background: #f9f9f9;
        border-radius: var(--aucsp-radius);
        margin-bottom: var(--aucsp-spacing);
}

.aucsp-popup__added-thumb img {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: var(--aucsp-radius);
}

.aucsp-popup__added-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
}

.aucsp-popup__added-label {
        font-size: 0.8em;
        color: #555;
}

.aucsp-popup__added-name {
        font-weight: 700;
}

.aucsp-popup__added-price {
        color: var(--aucsp-primary);
        font-weight: 700;
}

.aucsp-popup__cross-sells-title {
        font-size: 1em;
        margin: 0 0 var(--aucsp-spacing);
        font-weight: 700;
}

.aucsp-popup__products {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: var(--aucsp-spacing);
}

.aucsp-popup__product {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 1px solid var(--aucsp-border);
        border-radius: var(--aucsp-radius);
        padding: 10px;
        gap: 6px;
}

.aucsp-popup__product-thumb img {
        max-width: 80px;
        height: auto;
        border-radius: var(--aucsp-radius);
}

.aucsp-popup__product-name {
        font-size: 0.85em;
        color: inherit;
        text-decoration: none;
        font-weight: 600;
}

.aucsp-popup__product-name:hover {
        color: var(--aucsp-primary);
}

.aucsp-popup__product-price {
        color: var(--aucsp-primary);
        font-weight: 700;
        font-size: 0.9em;
}

.aucsp-popup__add-btn {
        background-color: var(--aucsp-btn-bg) !important;
        color: var(--aucsp-btn-text) !important;
        border: none !important;
        border-radius: var(--aucsp-radius) !important;
        padding: 7px 12px !important;
        font-size: 0.82em !important;
        cursor: pointer !important;
        width: 100%;
        text-align: center;
        text-decoration: none;
        transition: opacity 0.15s;
}

.aucsp-popup__add-btn:hover {
        opacity: 0.87;
}

.aucsp-popup__footer {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px var(--aucsp-spacing);
        border-top: 1px solid var(--aucsp-border);
        flex-wrap: wrap;
        background: #fafafa;
        border-radius: 0 0 var(--aucsp-radius) var(--aucsp-radius);
}

.aucsp-popup__continue-btn {
        background: none !important;
        border: none !important;
        color: #555 !important;
        text-decoration: underline;
        cursor: pointer;
        font-size: 0.9em !important;
        padding: 0 !important;
}

.aucsp-popup__cart-btn {
        margin-left: auto;
}

/* === CHECKOUT OFFER === */
.aucsp-checkout-offer {
        margin: var(--aucsp-spacing) 0;
        padding: var(--aucsp-spacing);
        border: 2px solid var(--aucsp-primary);
        border-radius: var(--aucsp-radius);
        background: #fff;
}

.aucsp-checkout-offer__title {
        font-size: 1.1em;
        font-weight: 700;
        margin: 0 0 8px;
        color: var(--aucsp-primary);
}

.aucsp-checkout-offer__text {
        margin: 0 0 var(--aucsp-spacing);
        color: #555;
}

.aucsp-checkout-offer__products {
        display: flex;
        flex-wrap: wrap;
        gap: var(--aucsp-spacing);
}

.aucsp-checkout-offer__product {
        display: flex;
        align-items: center;
        gap: var(--aucsp-spacing);
        flex: 1 1 280px;
}

.aucsp-checkout-offer__thumb img {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: var(--aucsp-radius);
        flex-shrink: 0;
}

.aucsp-checkout-offer__info {
        flex: 1;
}

.aucsp-checkout-offer__name {
        display: block;
        font-weight: 700;
        margin-bottom: 4px;
}

.aucsp-checkout-offer__price del {
        color: #999;
        margin-right: 6px;
}

.aucsp-checkout-offer__price ins {
        text-decoration: none;
        color: #e00;
        font-weight: 700;
}

.aucsp-checkout-offer__savings {
        display: inline-block;
        background: #e00;
        color: #fff;
        padding: 1px 8px;
        border-radius: 100px;
        font-size: 0.8em;
        font-weight: 700;
        margin-left: 4px;
}

.aucsp-checkout-offer__short-desc {
        font-size: 0.85em;
        color: #666;
        margin: 4px 0 0;
}

.aucsp-checkout-offer__action {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
}

.aucsp-checkout-offer__btn {
        background-color: var(--aucsp-btn-bg) !important;
        color: var(--aucsp-btn-text) !important;
        border: none !important;
        border-radius: var(--aucsp-radius) !important;
        padding: 10px 18px !important;
        font-size: var(--aucsp-font-size) !important;
        cursor: pointer !important;
        white-space: nowrap;
        transition: opacity 0.15s;
        text-decoration: none;
        display: inline-block;
}

.aucsp-checkout-offer__btn:hover {
        opacity: 0.87;
}

.aucsp-checkout-offer__btn:disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
}

.aucsp-checkout-offer__feedback {
        font-size: 0.85em;
        color: #0a0;
}

/* === POST-PURCHASE OVERLAY === */
.aucsp-pp-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--aucsp-spacing);
        box-sizing: border-box;
}

.aucsp-pp-popup {
        background: #fff;
        border-radius: var(--aucsp-radius);
        max-width: 560px;
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
        animation: aucsp-popup-in 0.28s ease;
}

.aucsp-pp-popup__header {
        background: var(--aucsp-primary);
        padding: var(--aucsp-spacing);
        border-radius: var(--aucsp-radius) var(--aucsp-radius) 0 0;
}

.aucsp-pp-popup__title {
        color: #fff;
        margin: 0;
        font-size: 1.2em;
}

.aucsp-pp-popup__body {
        padding: var(--aucsp-spacing);
}

.aucsp-pp-popup__text {
        color: #555;
        margin: 0 0 var(--aucsp-spacing);
}

.aucsp-pp-popup__countdown {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #fff4e5;
        border: 1px solid #ffd080;
        border-radius: var(--aucsp-radius);
        margin-bottom: var(--aucsp-spacing);
        font-weight: 700;
}

.aucsp-pp-countdown-min,
.aucsp-pp-countdown-sec {
        color: #e00;
}

.aucsp-pp-popup__product {
        display: flex;
        gap: var(--aucsp-spacing);
        align-items: flex-start;
}

.aucsp-pp-popup__thumb img {
        max-width: 140px;
        height: auto;
        border-radius: var(--aucsp-radius);
        flex-shrink: 0;
}

.aucsp-pp-popup__product-name {
        font-size: 1.1em;
        margin: 0 0 8px;
}

.aucsp-pp-popup__price del {
        color: #999;
        margin-right: 6px;
}

.aucsp-pp-popup__price ins {
        text-decoration: none;
        color: #e00;
        font-weight: 700;
        font-size: 1.1em;
}

.aucsp-pp-popup__discount-badge {
        display: inline-block;
        background: #e00;
        color: #fff;
        padding: 2px 10px;
        border-radius: 100px;
        font-size: 0.8em;
        font-weight: 700;
        margin-left: 6px;
}

.aucsp-pp-popup__short-desc {
        font-size: 0.9em;
        color: #555;
        margin-top: 8px;
}

.aucsp-pp-popup__footer {
        padding: var(--aucsp-spacing);
        border-top: 1px solid var(--aucsp-border);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
}

.aucsp-pp-popup__accept-btn {
        background-color: var(--aucsp-btn-bg) !important;
        color: var(--aucsp-btn-text) !important;
        border: none !important;
        border-radius: var(--aucsp-radius) !important;
        padding: 14px 28px !important;
        font-size: 1em !important;
        cursor: pointer !important;
        width: 100%;
        max-width: 360px;
        transition: opacity 0.15s;
}

.aucsp-pp-popup__accept-btn:hover {
        opacity: 0.87;
}

.aucsp-pp-popup__accept-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
}

.aucsp-pp-popup__feedback {
        font-size: 0.9em;
        color: #0a0;
}

.aucsp-pp-popup__decline {
        margin: 0;
}

.aucsp-pp-popup__decline-btn {
        background: none;
        border: none;
        color: #888;
        font-size: 0.85em;
        cursor: pointer;
        text-decoration: underline;
        padding: 0;
}

.aucsp-pp-popup__decline-btn:hover {
        color: #333;
}

/* === SHORTCODE PRODUCT GRID === */
.aucsp-shortcode-products {
        margin: var(--aucsp-spacing) 0;
}

.aucsp-shortcode-title {
        font-size: 1.2em;
        margin: 0 0 var(--aucsp-spacing);
}

.aucsp-product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--aucsp-spacing);
}

.aucsp-product-card {
        border: 1px solid var(--aucsp-border);
        border-radius: var(--aucsp-radius);
        overflow: hidden;
        text-align: center;
        transition: box-shadow 0.2s;
}

.aucsp-product-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.aucsp-product-card img {
        width: 100%;
        height: auto;
        display: block;
}

.aucsp-product-info {
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
}

.aucsp-product-title {
        color: inherit;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9em;
}

.aucsp-product-title:hover {
        color: var(--aucsp-primary);
}

.aucsp-product-price {
        color: var(--aucsp-primary);
        font-weight: 700;
}

.aucsp-add-to-cart {
        background-color: var(--aucsp-btn-bg) !important;
        color: var(--aucsp-btn-text) !important;
        border: none !important;
        border-radius: var(--aucsp-radius) !important;
        padding: 7px 10px !important;
        font-size: 0.85em !important;
        cursor: pointer !important;
        text-decoration: none;
        display: inline-block;
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
        .aucsp-fbt--layout-horizontal .aucsp-fbt__products {
                flex-direction: column;
        }

        .aucsp-fbt__plus {
                transform: rotate(90deg);
        }

        .aucsp-popup__products {
                grid-template-columns: repeat(2, 1fr);
        }

        .aucsp-pp-popup__product {
                flex-direction: column;
        }

        .aucsp-pp-popup__thumb img {
                max-width: 100%;
        }

        .aucsp-checkout-offer__product {
                flex-direction: column;
        }
}

/* === BUY X GET Y FREE — cart badges === */
.aucsp-free-gift-price {
        font-weight: 700;
        color: #2e7d32;
}

.aucsp-free-gift-badge {
        display: inline-block;
        padding: 2px 7px;
        background: #2e7d32;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        border-radius: 3px;
        margin-left: 6px;
        vertical-align: middle;
        letter-spacing: 0.02em;
}