/** * ZD Combo Selector - front.css * Los valores de color/tamano vienen de variables CSS inyectadas en el * (hook displayHeader) segun la configuracion del modulo. */ .zdcs-hidden { display: none !important; } .zdcs-wrap { margin: 10px 0 4px; font-family: var(--zdcs-font-family, inherit); text-align: center; } /* ---- Precio ---- */ .zdcs-price { margin-bottom: 8px; line-height: 1.2; } .zdcs-old-price { color: var(--zdcs-old-price-color, #9b9b9b); text-decoration: line-through; font-size: 0.95em; margin-right: 4px; } .zdcs-cur-price { color: var(--zdcs-price-color, #66b98a); font-weight: 700; font-size: 1.35em; } .zdcs-unit-price { display: block; color: var(--zdcs-old-price-color, #9b9b9b); font-size: 0.8em; margin-top: 2px; } /* ---- Etiqueta del grupo ---- */ .zdcs-group-label { font-size: 0.9em; color: var(--zdcs-text, #111); margin-bottom: 6px; opacity: 0.85; } /* ---- Contenedor de opciones ---- */ .zdcs-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 12px; } /* ---- Opcion (radio / boton) ---- */ .zdcs-opt { cursor: pointer; border: var(--zdcs-border-width, 2px) solid var(--zdcs-border-color, #111); background: var(--zdcs-bg, #fff); color: var(--zdcs-text, #111); border-radius: var(--zdcs-radius, 50px); font-family: var(--zdcs-font-family, inherit); font-size: var(--zdcs-font-size, 15px); font-weight: var(--zdcs-font-weight, 600); line-height: 1; transition: all 0.18s ease; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; } /* Tipo radio: circulos de tamano fijo */ .zdcs-type-radio .zdcs-opt { width: 44px; height: 44px; padding: 0; } /* Tipo botones: ancho segun contenido */ .zdcs-type-buttons .zdcs-opt { min-width: 54px; padding: 8px 14px; } .zdcs-opt-price { font-size: 0.8em; font-weight: 500; margin-top: 3px; opacity: 0.85; } .zdcs-opt:hover:not(.zdcs-disabled):not(.zdcs-active) { background: var(--zdcs-hover-bg, #f0f0f0); color: var(--zdcs-hover-text, #111); border-color: var(--zdcs-hover-border, #66b98a); } .zdcs-opt.zdcs-active { background: var(--zdcs-active-bg, #111); color: var(--zdcs-active-text, #fff); border-color: var(--zdcs-active-border, #111); } .zdcs-opt.zdcs-disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } /* ---- Tipo pastilla segmentada (marca / desmarca) ---- */ .zdcs-type-pill .zdcs-options { display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 3px; border: var(--zdcs-border-width, 2px) solid var(--zdcs-border-color, #d9d9d9); border-radius: 999px; background: var(--zdcs-bg, #fff); max-width: 100%; } .zdcs-type-pill .zdcs-opt { flex: 1 1 auto; width: auto; height: auto; min-width: 0; border: none; border-radius: 999px; background: transparent; color: var(--zdcs-text, #111); padding: 9px 18px; white-space: nowrap; } .zdcs-type-pill .zdcs-opt:hover:not(.zdcs-active):not(.zdcs-disabled) { background: var(--zdcs-hover-bg, #f0f0f0); color: var(--zdcs-hover-text, #111); border-color: transparent; } .zdcs-type-pill .zdcs-opt.zdcs-active { background: var(--zdcs-active-bg, #66b98a); color: var(--zdcs-active-text, #fff); } /* Aviso cuando se intenta anadir sin opcion seleccionada */ .zdcs-need-select .zdcs-options { animation: zdcs-shake 0.35s ease; border-color: var(--zdcs-hover-border, #66b98a); } @keyframes zdcs-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* ---- Select desplegable ---- */ .zdcs-select { width: 100%; max-width: 260px; padding: 10px 12px; border: var(--zdcs-border-width, 2px) solid var(--zdcs-border-color, #111); border-radius: var(--zdcs-radius, 8px); background: var(--zdcs-bg, #fff); color: var(--zdcs-text, #111); font-family: var(--zdcs-font-family, inherit); font-size: var(--zdcs-font-size, 15px); font-weight: var(--zdcs-font-weight, 600); cursor: pointer; } /* ---- Boton anadir al carro ---- */ .zdcs-add { cursor: pointer; border: none; background: var(--zdcs-btn-bg, #66b98a); color: var(--zdcs-btn-text, #fff); border-radius: var(--zdcs-btn-radius, 24px); font-family: var(--zdcs-font-family, inherit); font-size: var(--zdcs-font-size, 15px); font-weight: 600; padding: 11px 20px; width: 100%; max-width: 260px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter 0.18s ease, opacity 0.18s ease; } .zdcs-add:hover { background: var(--zdcs-btn-hover-bg, #4f9e73); color: var(--zdcs-btn-hover-text, #fff); } .zdcs-add.zdcs-loading { opacity: 0.7; cursor: wait; } .zdcs-add-ico { font-size: 1.05em; line-height: 1; }