/* =====================================================
   Gravtah Companion Products — Frontend Styles
   Compatível com Woodmart Theme + WooCommerce
   ===================================================== */

.gcp-companion-wrap {
    margin: 28px 0 8px;
    padding: 0;
    font-family: inherit;
}

.gcp-companion-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #222;
    margin: 0 0 16px;
    padding: 0;
    border: none;
    line-height: 1.4;
}

/* -------------------------------------------------------
   List container
------------------------------------------------------- */
.gcp-companion-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

/* -------------------------------------------------------
   Each item row — mirrors Scicon's card layout
------------------------------------------------------- */
.gcp-companion-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e5e5;
    transition: background 0.15s ease;
    position: relative;
}

.gcp-companion-item:last-child {
    border-bottom: none;
}

.gcp-companion-item:hover {
    background: #fafafa;
}

/* -------------------------------------------------------
   Product thumbnail
------------------------------------------------------- */
.gcp-item-image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    overflow: hidden;
    background: #f8f8f8;
    text-decoration: none;
}

.gcp-item-image img.gcp-thumb,
.gcp-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease;
}

.gcp-item-image:hover img {
    transform: scale(1.05);
}

/* -------------------------------------------------------
   Product info block
------------------------------------------------------- */
.gcp-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gcp-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gcp-item-name:hover {
    color: #555;
    text-decoration: underline;
}

.gcp-item-price {
    font-size: 13px;
    color: #444;
    line-height: 1;
}

.gcp-item-price .woocommerce-Price-amount {
    font-weight: 500;
}

.gcp-item-price del {
    color: #999;
    font-size: 11px;
    margin-right: 4px;
}

.gcp-item-price ins {
    text-decoration: none;
    color: #e74c3c;
    font-weight: 600;
}

/* -------------------------------------------------------
   Action button — matches Woodmart/Gravtah button style
------------------------------------------------------- */
.gcp-item-action {
    flex-shrink: 0;
    margin-left: auto;
}

.gcp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid #222;
    background: #222;
    color: #fff;
    min-width: 110px;
}

.gcp-btn:hover,
.gcp-btn:focus {
    background: #000;
    border-color: #000;
    color: #fff;
    text-decoration: none;
    outline: none;
}

.gcp-btn:active {
    transform: translateY(1px);
}

/* Select variant button */
.gcp-btn-select {
    background: transparent;
    color: #222;
}

.gcp-btn-select:hover {
    background: #222;
    color: #fff;
}

/* Out of stock */
.gcp-btn-out {
    background: transparent;
    border-color: #ccc;
    color: #999;
    cursor: default;
    min-width: 110px;
}

.gcp-btn-out:hover {
    background: transparent;
    border-color: #ccc;
    color: #999;
}

/* Loading state */
.gcp-btn.gcp-loading {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* Added state */
.gcp-btn.gcp-added {
    background: #27ae60;
    border-color: #27ae60;
    color: #fff;
}

.gcp-btn.gcp-error {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

/* -------------------------------------------------------
   Responsive
------------------------------------------------------- */
@media (max-width: 600px) {
    .gcp-companion-item {
        padding: 12px 12px;
        gap: 10px;
    }

    .gcp-item-image {
        width: 52px;
        height: 52px;
    }

    .gcp-item-name {
        font-size: 12px;
    }

    .gcp-btn {
        padding: 8px 12px;
        font-size: 11px;
        min-width: 90px;
    }
}

/* -------------------------------------------------------
   Woodmart dark theme compatibility
------------------------------------------------------- */
.woodmart-dark .gcp-companion-list {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
}

.woodmart-dark .gcp-companion-item {
    border-bottom-color: rgba(255,255,255,0.08);
}

.woodmart-dark .gcp-companion-item:hover {
    background: rgba(255,255,255,0.06);
}

.woodmart-dark .gcp-companion-title,
.woodmart-dark .gcp-item-name {
    color: #f0f0f0;
}

.woodmart-dark .gcp-item-image {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}

.woodmart-dark .gcp-item-price {
    color: #ccc;
}

.woodmart-dark .gcp-btn {
    border-color: #f0f0f0;
    background: #f0f0f0;
    color: #111;
}

.woodmart-dark .gcp-btn:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
}

/* -------------------------------------------------------
   Desconto — badge sobre a imagem
------------------------------------------------------- */
.gcp-item-image {
    position: relative;
}

.gcp-discount-badge-img {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 2;
}

/* -------------------------------------------------------
   Desconto — preço riscado + preço novo
------------------------------------------------------- */
.gcp-item-price del.gcp-price-original {
    display: inline;
    color: #aaa;
    font-size: 11px;
    font-weight: 400;
    text-decoration: line-through;
    margin-right: 4px;
}

.gcp-item-price ins.gcp-price-discounted {
    display: inline;
    text-decoration: none;
    color: #e74c3c;
    font-weight: 700;
    font-size: 14px;
}

.gcp-bundle-label {
    display: block;
    font-size: 10px;
    color: #2e7d32;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Woodmart dark */
.woodmart-dark .gcp-bundle-label { color: #81c784; }
.woodmart-dark .gcp-item-price ins.gcp-price-discounted { color: #ff6b6b; }

/* =====================================================
   COMPRE E GANHE — Bloco de promoção de brinde
   Design: fundo branco, borda esquerda rosa, texto escuro.
   ===================================================== */

.gcp-gift-promo {
    position: relative;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-left: 4px solid #111;
    border-radius: 6px;
    overflow: hidden;
    margin: 22px 0;
    font-family: inherit;
}

/* ----- Header: badge "Compre e Ganhe!" ----- */
.gcp-gift-header {
    padding: 14px 16px 0;
}

.gcp-gift-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #111;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 0;
    border-radius: 0;
    line-height: 1;
}


/* ----- Body: imagem + informações do brinde ----- */
.gcp-gift-body {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px 16px;
}

/* Imagem */
.gcp-gift-img-link {
    flex-shrink: 0;
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #ebebeb;
    text-decoration: none;
    transition: transform .2s ease;
}

.gcp-gift-img-link:hover {
    transform: scale(1.04);
}

.gcp-gift-img-link img,
.gcp-gift-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pílula "GRÁTIS" sobre a imagem */
.gcp-gift-free-pill {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: #27ae60;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
}

/* Informações textuais */
.gcp-gift-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gcp-gift-eyebrow {
    display: block;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.3;
}

.gcp-gift-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcp-gift-name:hover {
    color: #c2185b;
    text-decoration: none;
}

.gcp-gift-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gcp-gift-was {
    font-size: 12px;
    color: #aaa;
}

.gcp-gift-was del,
.gcp-gift-was .woocommerce-Price-amount {
    color: #aaa;
    text-decoration: line-through;
}

.gcp-gift-now {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    letter-spacing: .02em;
}

.gcp-gift-note {
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 1px;
}

/* ----- Dark mode (Woodmart) ----- */
.woodmart-dark .gcp-gift-promo {
    background: #1a1a1a;
    border-color: #333;
    border-left-color: #fff;
}

.woodmart-dark .gcp-gift-name  { color: #f0f0f0; }
.woodmart-dark .gcp-gift-eyebrow,
.woodmart-dark .gcp-gift-note  { color: #777; }
.woodmart-dark .gcp-gift-img-link {
    background: #222;
    border-color: rgba(255,255,255,0.08);
}

/* ----- Variante: bloco dentro do formulário de compra ----- */
.gcp-gift-promo--in-form {
    margin: 0 0 18px;
}

/* ----- Responsivo ----- */
@media (max-width: 600px) {
    .gcp-gift-img-link {
        width: 64px;
        height: 64px;
    }

    .gcp-gift-name {
        font-size: 12px;
    }

    .gcp-gift-body {
        gap: 12px;
        padding: 10px 12px 14px;
    }

    .gcp-gift-header {
        padding: 12px 12px 0;
    }
}

/* ----- Carrinho: badge e label do brinde ----- */
.gcp-gift-cart-badge {
    display: inline-block;
    background: #27ae60;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
}

.gcp-gift-cart-label {
    display: inline-block;
    font-size: 11px;
    color: #27ae60;
    font-weight: 600;
    margin-left: 6px;
}

.gcp-gift-cart-lock {
    display: inline-block;
    font-size: 16px;
    cursor: default;
    opacity: .7;
}

/* ----- Variante: bloco dentro do formulário de compra ----- */
/* Hook woocommerce_before_add_to_cart_button — aparece logo acima do botão */
.gcp-gift-promo--in-form {
    margin: 0 0 18px;   /* sem margem superior — fica colado ao conteúdo acima do form */
}

/* ----- Quantidade travada no carrinho e checkout ----- */

/* Substitui o input +/- por um display estático */
.gcp-gift-qty-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    background: #f5f5f5;
    color: #444;
    cursor: not-allowed;
    user-select: none;
}

/*
 * Oculta os botões +/- que o Woodmart injeta dinamicamente na linha do brinde.
 * A classe .gcp-is-gift-item é adicionada via PHP ao <tr> da linha.
 * Cobre os seletores mais comuns do Woodmart e WooCommerce.
 */
.gcp-is-gift-item .quantity .plus,
.gcp-is-gift-item .quantity .minus,
.gcp-is-gift-item .qty-btn,
.gcp-is-gift-item button.plus,
.gcp-is-gift-item button.minus,
.gcp-is-gift-item [class*="qty-plus"],
.gcp-is-gift-item [class*="qty-minus"],
.gcp-is-gift-item .wd-qty-wrapper .wd-btn,
.gcp-is-gift-item .wd-qty-btn {
    display: none !important;
    pointer-events: none !important;
}

/* Impede que o input de quantidade seja editável na linha do brinde */
.gcp-is-gift-item .quantity input[type="number"],
.gcp-is-gift-item .qty {
    pointer-events: none !important;
    user-select: none !important;
    background: #f5f5f5 !important;
    cursor: not-allowed !important;
    -moz-appearance: textfield !important;  /* Remove setas no Firefox */
}

.gcp-is-gift-item .quantity input[type="number"]::-webkit-inner-spin-button,
.gcp-is-gift-item .quantity input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}