/* Roger Product Carousel — Fase 1: estructura base de Listado / Grid / Carrusel ============================================================================ Regla de especificidad del archivo: TODO selector de contenido va anclado a su raíz — ".rpc-wrapper" (tarjetas/grid/listado/carrusel/paginación) o ".rpc-modal" (vista previa/cotización/favoritos, que se inyectan directo en ). Esto garantiza al menos dos niveles de clase de especificidad (0,2,0) en cada regla, por encima de selectores genéricos de tema/plugin como "input[type=number]" o "a:hover" (0,1,1) que nos pisaban antes. Así el CSS es autocontenido y portable sin importar el tema/plugins activos. ============================================================================ PALETA OFICIAL DE COLORES ============================================================================ #1f1f1f — negro/ink: texto principal, botón "Añadir producto para comprar" #305695 — azul de marca: acento interactivo (hover de tarjeta, precio, chips SKU/Categoría, botones primarios de los modales) #5ba239 — verde de éxito: "Ver carrito", ícono de carrito agregado ============================================================================ */ .rpc-wrapper * { box-sizing: border-box; } /* ---- Tarjeta de producto (compartida por los 3 modos) ---- */ .rpc-wrapper .rpc-card { display: flex; flex-direction: column; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; background: #fff; height: 100%; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, background-color 0.35s ease; } /* Sin desplazamiento y sin sombra: el cambio se nota solo por el color de fondo/borde de la tarjeta (azul de marca). */ .rpc-wrapper .rpc-card:hover, .rpc-wrapper .rpc-card:focus-within, .rpc-wrapper .rpc-card:active { border-color: #305695; background-color: #305695; box-shadow: none; } .rpc-wrapper .rpc-card__media { position: relative; /* "visible" a propósito: la fila de iconos debe poder sobresalir mitad en la imagen, mitad en el cuerpo de la tarjeta (ver abajo). */ overflow: visible; } .rpc-wrapper .rpc-card__image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f5f5f5; } /* ---- Fila de iconos (vista previa / cotización / carrito / favoritos) ---- */ .rpc-wrapper .rpc-card__icons { position: absolute; left: 0; right: 0; /* -23px = 5px de padding + la mitad de los 36px del círculo del icono: así el CENTRO del círculo queda exactamente sobre la línea que separa la imagen del cuerpo de la tarjeta (mitad arriba, mitad abajo), igual que en el modelo de referencia. */ bottom: -23px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 0; margin: 0; list-style: none; background: transparent; opacity: 0; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; } /* Solo en escritorio: cada icono con borde del mismo color que su propio ícono (currentColor). El blur detrás de los iconos se quitó por completo (antes solo se quitaba aquí, en escritorio; ahora no existe en ningún dispositivo). */ @media (min-width: 1025px) { .rpc-wrapper .rpc-card__icons .rpc-icon-btn, .rpc-wrapper button.rpc-icon-btn, .rpc-wrapper a.rpc-icon-btn { border-color: currentColor; } } .rpc-wrapper .rpc-card__media:hover .rpc-card__icons, .rpc-wrapper .rpc-card__media:focus-within .rpc-card__icons { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Tablet y móvil no tienen hover real (es táctil), así que ahí los iconos quedan siempre visibles en los 3 modos (Listado / Grid / Carrusel), en vez de depender de un hover que nunca se dispara con el dedo. */ @media (max-width: 1024px) { .rpc-wrapper .rpc-card__icons { opacity: 1; transform: translateY(0); pointer-events: auto; } } /* Iconos: reseteados con máxima especificidad para que ningún estilo del tema (botones, anchors) los deforme — círculo fijo de 36x36. */ .rpc-wrapper .rpc-card__icons .rpc-icon-btn, .rpc-wrapper button.rpc-icon-btn, .rpc-wrapper a.rpc-icon-btn { box-sizing: border-box; flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; margin: 0; padding: 0; border-radius: 50%; background: #fff; border: 1px solid #e5e5e5; display: inline-flex; align-items: center; justify-content: center; line-height: 0; cursor: pointer; color: #1f1f1f; text-decoration: none; appearance: none; -webkit-appearance: none; font-size: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .rpc-wrapper .rpc-icon-btn svg { display: block; width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; } .rpc-wrapper .rpc-icon-btn:hover { background: #1f1f1f; border-color: #1f1f1f; color: #fff; } .rpc-wrapper .rpc-icon-favorite.is-active { background: #5ba239; border-color: #5ba239; color: #fff; } .rpc-wrapper .rpc-icon-favorite.is-active svg { fill: currentColor; } /* ---- Cuerpo de la tarjeta: SKU / Categoría / Nombre / Precio, en columna ---- */ .rpc-wrapper .rpc-card__body { /* padding-top extra: deja espacio para que el círculo de iconos, que sobresale ~18px hacia el cuerpo (ver .rpc-card__icons), no se monte encima del chip de SKU. En Listado los iconos van aparte, así que ".rpc-list .rpc-card__body" pisa este padding con el suyo propio. */ padding: 32px 14px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; flex-grow: 1; } .rpc-wrapper .rpc-card__field, .rpc-wrapper .rpc-card__field-label { margin: 0; } .rpc-wrapper .rpc-card__field { font-size: 12px; color: #666; line-height: 1.4; } .rpc-wrapper .rpc-card__field-label { font-weight: 700; color: #333; } /* ---- Chips de SKU / Categoría: fondo azul clarito, borde y texto azules. Al hacer hover en la tarjeta (fondo azul sólido), pasan a fondo blanco con el mismo texto azul, para seguir contrastando. ---- */ .rpc-wrapper .rpc-card__sku, .rpc-wrapper .rpc-card__category { display: inline-block; /* .rpc-card__body es flex-direction:column con align-items:stretch (default), así que sin esto el

se estira al 100% del ancho aunque sea inline-block — dentro de un flex container, "inline-block" queda blockified y stretch sigue mandando. align-self:flex-start saca a este ítem de ese estiramiento. */ align-self: center; background: rgba(48, 86, 149, 0.08); border: 1px solid rgba(48, 86, 149, 0.25); border-radius: 4px; padding: 4px 8px; color: #305695; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .rpc-wrapper .rpc-card:hover .rpc-card__sku, .rpc-wrapper .rpc-card:focus-within .rpc-card__sku, .rpc-wrapper .rpc-card:active .rpc-card__sku, .rpc-wrapper .rpc-card:hover .rpc-card__category, .rpc-wrapper .rpc-card:focus-within .rpc-card__category, .rpc-wrapper .rpc-card:active .rpc-card__category { background: #fff; border-color: #fff; color: #305695; } /* ---- Botón ancho completo ---- */ .rpc-wrapper .rpc-card__addcart { display: block; text-align: center; padding: 12px 10px; background: #1f1f1f; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-top: 1px solid #e5e5e5; transition: background 0.15s ease; } .rpc-wrapper .rpc-card__addcart:hover { background: #305695; color: #fff; } .rpc-wrapper .rpc-card__addcart.added { background: #5ba239; } .rpc-wrapper .rpc-card__addcart--viewcart { background: #5ba239; } .rpc-wrapper .rpc-card__addcart--viewcart:hover { background: #4c8a2f; } .rpc-wrapper .rpc-icon-cart.is-added { background: #5ba239; border-color: #5ba239; color: #fff; } /* WooCommerce inserta un enlace "Ver carrito" nativo junto al botón clicado; lo ocultamos porque el botón ancho completo cumple esa función. Se mantiene !important de forma intencional (no como parche de especificidad): es una ocultación forzosa deliberada. */ .rpc-wrapper .added_to_cart, .rpc-modal .added_to_cart { display: none !important; } .rpc-wrapper .rpc-card__title { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.4; color: #1f1f1f; } .rpc-wrapper .rpc-card__title a { color: inherit; text-decoration: none; } .rpc-wrapper .rpc-card:hover .rpc-card__title, .rpc-wrapper .rpc-card:focus-within .rpc-card__title, .rpc-wrapper .rpc-card:active .rpc-card__title, .rpc-wrapper .rpc-card:hover .rpc-card__title .rpc-card__field-label, .rpc-wrapper .rpc-card:focus-within .rpc-card__title .rpc-card__field-label, .rpc-wrapper .rpc-card:active .rpc-card__title .rpc-card__field-label { color: #fff; } /* El tema define su propio "a:hover" con la misma especificidad que ".rpc-card__title a", y al cargar después gana la cascada, dejando el enlace en el color oscuro del tema. Se apunta directo al enlace con !important para blindarlo (insurance adicional a la especificidad). */ .rpc-wrapper .rpc-card:hover .rpc-card__title a, .rpc-wrapper .rpc-card:focus-within .rpc-card__title a, .rpc-wrapper .rpc-card:active .rpc-card__title a { color: #fff !important; } .rpc-wrapper .rpc-card__price { display: inline-flex; align-items: baseline; align-self: center; gap: 8px; background: transparent; border: none; padding: 6px 10px; font-size: 20px; font-weight: 700; margin: 0; color: #305695; transition: color 0.2s ease, font-weight 0.2s ease; } /* Al hacer hover en la tarjeta, el precio pasa a blanco (para contrastar con el fondo azul del hover) y gana más peso tipográfico. */ .rpc-wrapper .rpc-card:hover .rpc-card__price, .rpc-wrapper .rpc-card:focus-within .rpc-card__price, .rpc-wrapper .rpc-card:active .rpc-card__price { color: #fff; font-weight: 800; } /* Precio de oferta: va PRIMERO (izquierda), grande y en el azul de marca, sin fondo. WooCommerce imprime (precio original) antes que (precio de oferta) — se reordena visualmente con flex "order". */ .rpc-wrapper .rpc-card__price ins { order: 1; background: transparent !important; text-decoration: none; font-size: 22px; font-weight: 800; color: #305695; } .rpc-wrapper .rpc-card:hover .rpc-card__price ins, .rpc-wrapper .rpc-card:focus-within .rpc-card__price ins, .rpc-wrapper .rpc-card:active .rpc-card__price ins { color: #fff; } /* Precio tachado: va SEGUNDO (derecha), más chico y discreto. */ .rpc-wrapper .rpc-card__price del { order: 2; font-size: 14px; font-weight: 400; color: #888; } .rpc-wrapper .rpc-card:hover .rpc-card__price del, .rpc-wrapper .rpc-card:focus-within .rpc-card__price del, .rpc-wrapper .rpc-card:active .rpc-card__price del { color: rgba(255, 255, 255, 0.65); } /* ---- Modo Listado ---- */ .rpc-wrapper .rpc-list { display: flex; flex-direction: column; gap: 16px; } .rpc-wrapper .rpc-list .rpc-card { flex-direction: row; flex-wrap: wrap; align-items: center; } .rpc-wrapper .rpc-list .rpc-card__image { width: 90px; aspect-ratio: 1 / 1; flex-shrink: 0; } .rpc-wrapper .rpc-list .rpc-card__body { padding: 10px 16px; } /* En listado, la fila de iconos se mueve por JS (moveListIconsBelowButton) para quedar debajo del botón "Añadir producto para comprar", en vez de superpuesta a la imagen como en Grid/Carrusel. */ .rpc-wrapper .rpc-list .rpc-card__icons { position: static; flex: 1 0 100%; justify-content: flex-start; background: none; padding: 10px 16px 14px; } .rpc-wrapper .rpc-list .rpc-card:hover .rpc-card__icons, .rpc-wrapper .rpc-list .rpc-card:focus-within .rpc-card__icons { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ---- Modo Grid ---- El número de columnas por dispositivo lo define el control responsivo "Columnas" del widget (Elementor genera sus propias media queries que sobrescriben --rpc-cols en tablet/móvil). No hay que forzar ningún límite adicional aquí — eso pisaba el valor que el usuario elegía. */ .rpc-wrapper .rpc-grid { display: grid; grid-template-columns: repeat(var(--rpc-cols, 4), 1fr); gap: 20px; } /* ---- Modo Carrusel (Swiper) ---- */ .rpc-wrapper .rpc-carousel { position: relative; } .rpc-wrapper .rpc-carousel .swiper { overflow: hidden; padding: 4px; } .rpc-wrapper .rpc-carousel .swiper-slide { height: auto; } /* Tamaño/color/posición por defecto — el usuario los puede sobrescribir desde Elementor → Estilo → Flechas de Navegación (ver el widget). */ .rpc-wrapper .rpc-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e5e5e5; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; color: #1f1f1f; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .rpc-wrapper .rpc-carousel__nav:hover { background: #305695; color: #fff; border-color: #305695; } .rpc-wrapper .rpc-carousel__nav--prev { left: -24px; } .rpc-wrapper .rpc-carousel__nav--next { right: -24px; } .rpc-wrapper .rpc-carousel .swiper-pagination { position: relative; margin-top: 16px; text-align: center; } .rpc-wrapper .rpc-carousel .swiper-pagination-bullet { background: #ccc; opacity: 1; } .rpc-wrapper .rpc-carousel .swiper-pagination-bullet-active { background: #305695; } .rpc-wrapper .rpc-empty { padding: 20px; color: #b32d2e; font-size: 14px; } /* ---- Paginación AJAX ---- */ .rpc-wrapper .rpc-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; } .rpc-wrapper .rpc-page-btn { padding: 9px 18px; border: none; background: #1f1f1f; color: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; transition: background 0.15s ease; } .rpc-wrapper .rpc-page-btn:hover:not([disabled]) { background: #305695; } .rpc-wrapper .rpc-page-btn[disabled] { background: #ccc; color: #888; opacity: 1; cursor: not-allowed; } .rpc-wrapper .rpc-page-info { font-size: 13px; color: #555; } .rpc-wrapper.rpc-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; } /* ---- Barra superior: cantidad de productos + orden (frontend) ---- */ .rpc-wrapper .rpc-toolbar, .rpc-wrapper .rpc-toolbar * { box-sizing: border-box; } .rpc-wrapper .rpc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .rpc-wrapper .rpc-toolbar__count { display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0; font-size: 13px; line-height: 1; color: #444; font-weight: 600; } .rpc-wrapper .rpc-sort-label { height: 36px; margin: 0; padding: 0; font-size: 13px; line-height: 1; color: #444; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .rpc-wrapper .rpc-sort-select { height: 36px; margin: 0; padding: 0 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; background: #fff; cursor: pointer; } /* Solo en móvil: la cantidad de productos queda apilada arriba del filtro de orden, en vez de ir lado a lado como en escritorio/tablet. */ @media (max-width: 767px) { .rpc-wrapper .rpc-toolbar { flex-direction: column; align-items: flex-start; } } /* ============================================================ MODALES (Vista previa + Solicitar cotización + Favoritos) ============================================================ Los modales se inyectan directo en , fuera de .rpc-wrapper, así que toman ".rpc-modal" como su propia raíz de especificidad (mismo criterio que ".rpc-wrapper" para el resto del plugin). */ .rpc-modal, .rpc-modal * { box-sizing: border-box; } /* El JS fija "top" con el scroll guardado (ver openModal en el JS) — esto congela la página exactamente donde estaba, y evita que un navegador calcule mal la posición de un elemento "fixed" cuando la página ya venía scrolleada al momento de abrir el modal. */ body.rpc-modal-open { position: fixed; left: 0; right: 0; overflow: hidden; } .rpc-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; } .rpc-modal.is-open { display: flex; } .rpc-modal .rpc-modal__backdrop { position: absolute; inset: 0; background: rgba(31, 31, 31, 0.6); } .rpc-modal .rpc-modal__dialog { position: relative; background: #fff; border-radius: 8px; max-width: 700px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 32px; box-sizing: border-box; } .rpc-modal .rpc-modal__dialog--quickview { max-width: 920px; } .rpc-modal .rpc-modal__dialog--favorite { max-width: 420px; text-align: center; } .rpc-modal .rpc-fav-modal__icon { font-size: 40px; color: #305695; line-height: 1; margin-bottom: 14px; } .rpc-modal .rpc-fav-modal__text { font-size: 15px; color: #333; margin: 0 0 24px; } .rpc-modal .rpc-fav-modal__actions { display: flex; flex-direction: column; gap: 10px; } .rpc-modal .rpc-fav-modal__actions .rpc-btn { width: 100%; } .rpc-modal .rpc-modal__close { box-sizing: border-box; position: absolute; top: 12px; right: 12px; z-index: 1; width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; margin: 0; padding: 0; border-radius: 50%; border: none; background: #f2f2f2; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; cursor: pointer; color: #333; appearance: none; -webkit-appearance: none; } .rpc-modal .rpc-modal__close:hover { background: #e5e5e5; } .rpc-modal .rpc-modal__loading, .rpc-modal .rpc-modal__error { padding: 40px 0; text-align: center; color: #666; } .rpc-modal .rpc-modal__loading { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; } .rpc-modal .rpc-spinner { width: 64px; height: 64px; color: #305695; opacity: 0.5; animation: rpc-spin 1s linear infinite; } @keyframes rpc-spin { from { transform: rotate( 0deg ); } to { transform: rotate( 360deg ); } } /* ---- Vista previa ---- */ .rpc-modal .rpc-qv { display: grid; grid-template-columns: 360px 1fr; gap: 32px; position: relative; } @media (max-width: 760px) { .rpc-modal .rpc-qv { grid-template-columns: 1fr; } } .rpc-modal .rpc-qv__gallery { position: relative; } .rpc-modal .rpc-qv__counter { position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(255, 255, 255, 0.9); border: 1px solid #333; font-size: 11px; font-weight: 700; padding: 3px 8px; } .rpc-modal .rpc-qv__main-image { position: relative; background: #f7f7f7; border-radius: 6px; overflow: hidden; } .rpc-modal .rpc-qv__main-image img { width: 100%; display: block; object-fit: contain; aspect-ratio: 1 / 1; } .rpc-modal .rpc-qv__badge { position: absolute; top: 10px; right: 10px; z-index: 1; background: #305695; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 3px; } .rpc-modal .rpc-qv__thumbs { display: flex; gap: 8px; margin-top: 10px; } .rpc-modal .rpc-qv__thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background: #f7f7f7; } .rpc-modal .rpc-qv__thumb.is-active { border-color: #305695; } .rpc-modal .rpc-qv__title { font-size: 19px; line-height: 1.35; margin: 0 0 10px; color: #1f1f1f; } .rpc-modal .rpc-qv__price { font-size: 18px; font-weight: 600; color: #1f1f1f; margin: 0 0 14px; } .rpc-modal .rpc-qv__cart-row { display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 18px 0 0; } .rpc-modal .rpc-qv__viewcart { display: block; width: 100%; margin: 10px 0 18px; background: #5ba239; } .rpc-modal .rpc-qv__viewcart:hover { background: #4c8a2f; } /* El tema fuerza `input[type=number] { width:100% }` globalmente (para sus propios formularios); aunque nuestra especificidad ya le gana con el prefijo ".rpc-modal", se deja !important como insurance documentada. Cantidad y botón van 50%/50% (juntos suman el 100% de la fila). */ .rpc-modal .rpc-qv__cart-row .rpc-qv__qty { flex: 0 0 50%; width: 50% !important; max-width: 50% !important; height: 44px !important; padding: 5px !important; border: 1px solid #ccc; border-radius: 4px 0 0 4px; font-size: 14px; line-height: 1; text-align: center; } .rpc-modal .rpc-qv__cart-row .ajax_add_to_cart { flex: 0 0 50%; width: 50% !important; max-width: 50%; height: 44px !important; padding: 5px !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 0 4px 4px 0; background: #305695; color: #fff; } .rpc-modal .rpc-qv__cart-row .ajax_add_to_cart:hover { background: #26467a; } .rpc-modal .rpc-qv__divider { border: none; border-top: 1px solid #eee; margin: 18px 0; } .rpc-modal .rpc-qv__details { margin-top: 6px; } .rpc-modal .rpc-qv__meta { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13px; color: #555; display: flex; flex-direction: column; gap: 4px; } .rpc-modal .rpc-qv__actions { display: flex; gap: 10px; flex-wrap: wrap; } .rpc-modal .rpc-btn { display: inline-block; padding: 11px 20px; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; text-align: center; } .rpc-modal .rpc-btn--primary { background: #305695; color: #fff; } .rpc-modal .rpc-btn--primary:hover { background: #26467a; color: #fff; } .rpc-modal .rpc-btn--secondary { background: #f2f2f2; color: #1f1f1f; } .rpc-modal .rpc-btn--secondary:hover { background: #e5e5e5; } /* ---- Solicitar cotización (layout de 2 columnas, imagen + formulario) ---- Una sola región de scroll: el diálogo exterior (igual que los otros modales). Antes el formulario tenía su propio scroll interno separado del diálogo exterior (que además tenía overflow:hidden) — cuando el contenido combinado (imagen + formulario) superaba el límite exterior, lo que quedaba abajo se recortaba de forma invisible en vez de poder scrollearse, sobre todo notorio en móvil con las columnas apiladas. */ .rpc-modal .rpc-modal__dialog--quote { max-width: 900px; padding: 0; overflow-x: hidden; overflow-y: auto; } .rpc-modal .rpc-qf { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 700px) { .rpc-modal .rpc-qf { grid-template-columns: 1fr; } } .rpc-modal .rpc-qf__media { background: #fafafa; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-right: 1px solid #eee; } .rpc-modal .rpc-quote-product__img { width: 90%; max-width: 90%; height: auto; max-height: 400px; object-fit: contain; margin-bottom: 16px; } .rpc-modal .rpc-quote-product__name { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.4; color: #1f1f1f; } .rpc-modal .rpc-qf__form { padding: 32px; } .rpc-modal .rpc-qf__form h2 { margin: 0 0 20px; font-size: 18px; color: #1f1f1f; } .rpc-modal .rpc-quote-form { display: flex; flex-direction: column; gap: 16px; } .rpc-modal .rpc-qf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { .rpc-modal .rpc-qf__row { grid-template-columns: 1fr; } } .rpc-modal .rpc-quote-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #444; font-weight: 600; } .rpc-modal .rpc-quote-form input, .rpc-modal .rpc-quote-form textarea { font-family: inherit; font-size: 14px; padding: 10px 12px; background: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 4px; font-weight: 400; } .rpc-modal .rpc-qf__checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; } .rpc-modal .rpc-qf__checkbox input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; } .rpc-modal .rpc-qf__checkbox a { color: #305695; text-decoration: underline; } .rpc-modal .rpc-qf__submit { width: 100%; text-transform: uppercase; letter-spacing: 0.03em; padding: 14px 20px; } .rpc-modal .rpc-quote-form__feedback { font-size: 13px; margin: 0; } .rpc-modal .rpc-quote-form__feedback.is-success { color: #5ba239; } .rpc-modal .rpc-quote-form__feedback.is-error { color: #d63638; }