/* ============================================================
   wcgtp-elementor.css  v2.3.3
   Estilos específicos dos widgets Elementor do WC Gráfica.
   ============================================================ */

/* ── Placeholder no editor ──────────────────────────────────────────────── */
.wcgtp-elementor-placeholder {
    padding: 20px;
    background: #f8f9fa;
    border: 2px dashed #c3c4c7;
    border-radius: 4px;
    text-align: center;
    color: #8c8f94;
    font-size: 13px;
    line-height: 1.5;
}

/* ── Widget: Preço do Produto ───────────────────────────────────────────── */
.wcgtp-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25em;
    line-height: 1.3;
}

.wcgtp-product-price__prefix {
    font-size: 0.75em;
    color: #777;
    font-weight: 400;
}

.wcgtp-product-price__value {
    font-size: 1.6em;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.wcgtp-product-price__value .woocommerce-Price-amount {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}

.wcgtp-product-price__suffix {
    font-size: 0.75em;
    color: #999;
    font-weight: 400;
}

/* ── Widget: Formulário de Compra (Add to Cart) ─────────────────────────── */

/* O seletor de faixas e o multiplicador ficam dentro do widget. */
.wcgtp-add-to-cart-widget .wcgtp-tier-selector {
    margin-top: 0.5rem;
}

/* Oculta o preço nativo do WC (R$ 25,00) — substituído pelo widget de preço */
.wcgtp-add-to-cart-widget .woocommerce-variation-price,
.wcgtp-add-to-cart-widget .woocommerce-variation .price {
    display: none !important;
}

/* Oculta o botão nativo do WC — usamos .wcgtp-submit-btn dentro do multiplier-wrap */
.wcgtp-add-to-cart-widget button.single_add_to_cart_button:not(.wcgtp-submit-btn) {
    display: none !important;
}

/* Nosso botão ocupa largura total */
.wcgtp-add-to-cart-widget .wcgtp-submit-btn,
.wcgtp-add-to-cart-widget button.single_add_to_cart_button {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Garante que o qty nativo não apareça quando nossa UI está ativa */
.wcgtp-add-to-cart-widget .wcgtp-tiers-active .quantity,
.wcgtp-add-to-cart-widget form.wcgtp-tiers-active .quantity {
    display: none !important;
}

/* ── Modo Editor Elementor (.wcgtp-editor-mode) ─────────────────────────── */

/* No editor, o JS não roda — ocultamos os elementos nativos via CSS
   e deixamos apenas a prévia estática renderizada pelo PHP. */
.wcgtp-editor-mode .woocommerce-variation-price,
.wcgtp-editor-mode .woocommerce-variation.single_variation,
.wcgtp-editor-mode .woocommerce-variation-add-to-cart,
.wcgtp-editor-mode .variations_button,
.wcgtp-editor-mode .quantity {
    display: none !important;
}

/* A prévia estática injetada pelo PHP sempre aparece no editor */
.wcgtp-editor-mode .wcgtp-tier-selector,
.wcgtp-editor-mode .wcgtp-multiplier-wrap {
    display: flex !important;
}

/* ── Widget: Serviços Opcionais (Checagem Profissional) ─────────────────── */
.wcgtp-optional-service {
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 14px 16px;
    background: #f7f9ff;
}

.wcgtp-optional-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    cursor: pointer;
}

.wcgtp-optional-check input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
}

/* Texto ocupa o espaço disponível; preço fica à direita sem quebrar. */
.wcgtp-optional-text {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    line-height: 1.35;
}

.wcgtp-optional-option {
    color: #1a1a1a;
}

.wcgtp-optional-help {
    font-style: italic;
    color: #c0392b;
    cursor: help;
    font-size: 0.85em;
    white-space: nowrap;
}

.wcgtp-optional-price {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 700;
    color: #c0392b;
}

/* ── Widget: Download dos Padrões / Instruções de Montagem ──────────────── */
.wcgtp-patterns {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 320px;
}

.wcgtp-patterns-instructions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border: 1px solid #d6dae0;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.2s ease;
}

.wcgtp-patterns-instructions:hover {
    background: #f2f4f7;
}

.wcgtp-instr-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex: 0 0 auto;
}

.wcgtp-instr-icon svg {
    width: 1.2em;
    height: 1.2em;
    display: block;
}

.wcgtp-patterns-select {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: menulist;
    appearance: menulist;
}

.wcgtp-patterns-empty {
    color: #8c8f94;
    font-size: 0.85em;
}