/* * Mega Tanqueray Checkout (Golden / Dark) * Objetivo: llevar el checkout de WooCommerce a un look premium (negro + dorado) * sin tocar plantillas, solo CSS. */ /* Activación por clase en (inyectada por JS del plugin) */ body.mega-tq-checkout { --tq-bg: #07070a; --tq-card: rgba(18, 18, 22, 0.78); --tq-card2: rgba(28, 28, 34, 0.72); --tq-line: rgba(255, 255, 255, 0.11); --tq-line2: rgba(246, 195, 67, 0.22); --tq-text: rgba(255, 255, 255, 0.92); --tq-muted: rgba(255, 255, 255, 0.66); --tq-soft: rgba(255, 255, 255, 0.10); --tq-gold: #f6c343; --tq-gold2: #d4a12a; --tq-radius: 18px; --tq-radius-sm: 14px; --tq-shadow: 0 22px 60px rgba(0, 0, 0, 0.55); --tq-shadow2: 0 10px 28px rgba(0, 0, 0, 0.45); color: var(--tq-text); background: radial-gradient(1100px 520px at 50% -10%, rgba(246, 195, 67, 0.22), transparent 55%), radial-gradient(900px 520px at 22% 18%, rgba(246, 195, 67, 0.10), transparent 60%), radial-gradient(720px 460px at 80% 30%, rgba(255, 255, 255, 0.08), transparent 55%), var(--tq-bg); } /* Evita que el theme pinte fondos verdes/colores */ body.mega-tq-checkout .contenedorglobal, body.mega-tq-checkout .contenedor, body.mega-tq-checkout .contenwebsinw, body.mega-tq-checkout .contenidoweb, body.mega-tq-checkout .contenidoitem { background: transparent !important; } /* Header */ body.mega-tq-checkout .headerstilo2 { background: rgba(8, 8, 10, 0.72) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body.mega-tq-checkout .enlacesmenu a, body.mega-tq-checkout .enlacesmenu li, body.mega-tq-checkout .enlacesmenu i { color: rgba(255, 255, 255, 0.86) !important; } body.mega-tq-checkout .enlacesmenu a:hover { color: var(--tq-gold) !important; } /* Breadcrumb + título */ body.mega-tq-checkout .migasdepan a, body.mega-tq-checkout .migasdepan li { color: rgba(255, 255, 255, 0.78) !important; } body.mega-tq-checkout .titulorat { color: rgba(255, 255, 255, 0.96) !important; letter-spacing: -0.02em; } /* Contenedor Woo */ body.mega-tq-checkout .woocommerce { max-width: 1160px; margin: 0 auto; padding: 18px 16px 44px; } /* Notices */ body.mega-tq-checkout .woocommerce-notices-wrapper > div { border-radius: var(--tq-radius); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: var(--tq-shadow2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body.mega-tq-checkout .woocommerce-message, body.mega-tq-checkout .woocommerce-info { background: rgba(18, 18, 22, 0.78) !important; color: rgba(255, 255, 255, 0.90) !important; padding: 14px 16px; } body.mega-tq-checkout .woocommerce-message { border-left: 3px solid var(--tq-gold); } body.mega-tq-checkout .woocommerce-info { border-left: 3px solid rgba(255, 255, 255, 0.18); } /* Layout: 2 columnas reales (soluciona el “order review se baja raro”) */ body.mega-tq-checkout form.checkout.woocommerce-checkout { max-width: 1160px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 22px; align-items: start; } /* Customer details como tarjeta */ body.mega-tq-checkout #customer_details { grid-column: 1; background: var(--tq-card); border: 1px solid var(--tq-line); border-radius: var(--tq-radius); box-shadow: var(--tq-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 18px 18px 8px; } /* Woo a veces usa floats en col-1/col-2 */ body.mega-tq-checkout #customer_details .col-1, body.mega-tq-checkout #customer_details .col-2 { float: none !important; width: 100% !important; } /* Order review: tarjeta sticky */ body.mega-tq-checkout #order_review { grid-column: 2; background: var(--tq-card); border: 1px solid var(--tq-line); border-radius: var(--tq-radius); box-shadow: var(--tq-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow: hidden; position: sticky; top: 96px; } /* Heading movido dentro de #order_review por JS */ body.mega-tq-checkout #order_review #order_review_heading { margin: 0; padding: 18px 18px 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.70); } body.mega-tq-checkout #order_review .woocommerce-checkout-review-order-table { width: 100%; margin: 0; border: 0; } body.mega-tq-checkout #order_review table th, body.mega-tq-checkout #order_review table td { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 12px 14px !important; color: rgba(255, 255, 255, 0.90) !important; } body.mega-tq-checkout #order_review table thead th { border-top: 0 !important; color: rgba(255, 255, 255, 0.70) !important; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } body.mega-tq-checkout #order_review .order-total th, body.mega-tq-checkout #order_review .order-total td { color: rgba(255, 255, 255, 0.96) !important; } body.mega-tq-checkout #order_review .woocommerce-Price-amount { color: rgba(255, 255, 255, 0.95) !important; } /* Payment */ body.mega-tq-checkout #payment { background: transparent !important; border: 0 !important; margin: 0 !important; padding: 12px 14px 16px !important; } body.mega-tq-checkout #payment ul.wc_payment_methods { margin: 0 !important; padding: 0 !important; } body.mega-tq-checkout #payment ul.wc_payment_methods li { list-style: none !important; margin: 0 0 10px !important; padding: 12px 12px !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: var(--tq-radius-sm); background: rgba(20, 20, 26, 0.62); } body.mega-tq-checkout #payment ul.wc_payment_methods li label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(255, 255, 255, 0.92) !important; font-weight: 700; } body.mega-tq-checkout #payment ul.wc_payment_methods li img { height: 18px; width: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35)); } body.mega-tq-checkout #payment .payment_box { background: rgba(12, 12, 16, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: var(--tq-radius-sm); margin-top: 10px !important; } /* Campos (Woo + MercadoPago) */ body.mega-tq-checkout .woocommerce form .form-row { margin: 0 0 14px; } body.mega-tq-checkout .woocommerce-billing-fields h3 { margin: 0 0 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.70); } body.mega-tq-checkout .woocommerce form .form-row label { color: rgba(255, 255, 255, 0.78) !important; font-size: 12px; margin-bottom: 6px; } body.mega-tq-checkout .woocommerce form .form-row input.input-text, body.mega-tq-checkout .woocommerce form .form-row textarea, body.mega-tq-checkout .woocommerce form .form-row select, body.mega-tq-checkout .mp-input-select-select, body.mega-tq-checkout .mp-document, body.mega-tq-checkout .mp-document-select { background: rgba(12, 12, 14, 0.70) !important; color: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 14px !important; padding: 12px 14px !important; min-height: 46px; outline: none; box-shadow: none; } body.mega-tq-checkout .woocommerce form .form-row input.input-text::placeholder, body.mega-tq-checkout .mp-document::placeholder { color: rgba(255, 255, 255, 0.40); } body.mega-tq-checkout .woocommerce form .form-row input.input-text:focus, body.mega-tq-checkout .woocommerce form .form-row textarea:focus, body.mega-tq-checkout .woocommerce form .form-row select:focus, body.mega-tq-checkout .mp-input-select-select:focus, body.mega-tq-checkout .mp-document:focus, body.mega-tq-checkout .mp-document-select:focus { border-color: var(--tq-gold) !important; box-shadow: 0 0 0 4px rgba(246, 195, 67, 0.16) !important; } /* Select de documentos (MercadoPago) - quita separadores raros */ body.mega-tq-checkout .mp-vertical-line { background: rgba(255, 255, 255, 0.12) !important; } /* Botón Place Order */ body.mega-tq-checkout #place_order.button.alt, body.mega-tq-checkout .woocommerce button.button.alt, body.mega-tq-checkout .woocommerce a.button.alt, body.mega-tq-checkout .woocommerce input.button.alt { width: 100% !important; border: 0 !important; border-radius: 999px !important; padding: 14px 18px !important; font-weight: 900 !important; letter-spacing: 0.02em; color: rgba(10, 10, 10, 0.96) !important; background: linear-gradient(135deg, var(--tq-gold), var(--tq-gold2)) !important; box-shadow: 0 18px 40px rgba(246, 195, 67, 0.18), 0 10px 24px rgba(0, 0, 0, 0.45) !important; transform: translateZ(0); } body.mega-tq-checkout #place_order.button.alt:hover { filter: brightness(1.06); transform: translateY(-1px); } body.mega-tq-checkout #place_order.button.alt:active { transform: translateY(0); } /* Texto de términos */ body.mega-tq-checkout .woocommerce-privacy-policy-text, body.mega-tq-checkout .mp-terms-and-conditions-container { color: rgba(255, 255, 255, 0.68) !important; } body.mega-tq-checkout .woocommerce-privacy-policy-text a, body.mega-tq-checkout .mp-terms-and-conditions-link { color: var(--tq-gold) !important; } /* Footer minimal */ body.mega-tq-checkout .footernuevo { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.08); } body.mega-tq-checkout .footernuevo a { color: rgba(255, 255, 255, 0.60) !important; } body.mega-tq-checkout .footernuevo a:hover { color: var(--tq-gold) !important; } /* Responsive */ @media (max-width: 980px) { body.mega-tq-checkout form.checkout.woocommerce-checkout { display: block; } body.mega-tq-checkout #customer_details, body.mega-tq-checkout #order_review { position: static; top: auto; margin-bottom: 18px; } }