/* Gosy Waiting List — integrado en la sección de tickets de EventPrime. * Los botones de acción usan las clases del tema (ep-btn ep-btn-gosy) para * heredar tamaño, color y bordes. Aquí solo se estilan el espaciado, las * cajas informativas, los enlaces secundarios y el modal (que vive en , * fuera de .emagic, por lo que necesita estilos propios). */ /* El wrapper solo centra; el espaciado lo dan las clases ep-mb-2/ep-py-2 del tema, * igual que el botón de compra y la card "sold out". */ .gwl-wrap { text-align: center; } /* Botón de la lista de espera: sin capitalizar (el tema aplica capitalize a .ep-btn). */ .gwl-cta { text-transform: none !important; } /* La caja usa las clases del tema (ep-alert ep-bg-light ep-p-3 ep-rounded * ep-shadow-sm + borde inline). Aquí solo el color del icono y el enlace salir. */ .gwl-box__icon { color: #6c757d; } .gwl-box .gwl-leave { display: block; width: 100%; margin-top: 10px; text-align: center; } /* Enlace "Salir de la lista" y secundarios */ .gwl-leave { display: inline-block; background: none; border: none; padding: 0; color: #888; text-decoration: underline; cursor: pointer; } .gwl-leave:hover { color: #555; } /* Enlace "Cómo funciona" (icono + texto, discreto) */ .gwl-info-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: #FF6F00; text-decoration: none; } .gwl-info-link:hover { text-decoration: underline; } .gwl-info-link .material-icons-outlined { font-size: 18px; } /* --- Contexto OSCURO: el bloque va sobre la card roja "evento completo" --- */ .gwl-wrap--on-dark .gwl-box { background: rgba(255, 255, 255, .15) !important; border-color: rgba(255, 255, 255, .35) !important; box-shadow: none !important; } .gwl-wrap--on-dark .gwl-box, .gwl-wrap--on-dark .gwl-box * { color: #fff !important; } .gwl-wrap--on-dark .gwl-leave { color: #fff; opacity: .85; } .gwl-wrap--on-dark .gwl-leave:hover { opacity: 1; } .gwl-wrap--on-dark .gwl-info-link { color: #fff; opacity: .9; } /* ------------------------------------------------------------------ */ /* Modal (réplica de .gosy-qr-modal / .gosy-qr-modal--content) */ /* ------------------------------------------------------------------ */ .gwl-modal { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .gwl-modal.is-open { display: flex; } .gwl-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); cursor: pointer; } .gwl-modal .gwl-modal__dialog { position: relative; background: #fff; color: #1a1a1a; padding: 24px; border-radius: 24px; max-width: 460px; width: 100%; max-height: 85vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); text-align: left; } .gwl-modal__close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 32px; line-height: 1; cursor: pointer; color: #191b1e; z-index: 1; } .gwl-modal__title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #111; text-align: center; padding-right: 24px; } .gwl-modal__lead { margin: 0 0 14px; color: #555; } .gwl-modal__dialog label, .gwl-modal__dialog strong, .gwl-modal__dialog p { color: #333; } /* Botón del modal (fuera de .emagic → estilo propio, radio del tema 6px) */ /* Réplica del botón ep-btn-gosy del tema (el modal vive en , fuera de .emagic, * por eso no puede usar las clases del tema directamente). */ .gwl-btn { display: inline-block; width: 100%; padding: 0.5rem 0.75rem; /* ep-py-2 + padding-x de .ep-btn */ border-radius: 0.375rem; /* --ep-border-radius */ font-size: 1rem; font-weight: 700; line-height: 1.5; cursor: pointer; text-align: center; text-transform: none; border: 1px solid transparent; box-sizing: border-box; transition: background-color .15s ease, border-color .15s ease; } .gwl-btn--primary, .gwl-btn--primary span { color: var(--theme-palette-color-6, #fff); } .gwl-btn--primary { background: var(--theme-palette-color-1, #FF6F00); border-color: var(--theme-palette-color-1, #FF6F00); } .gwl-btn--primary:hover { background: var(--theme-palette-color-2, #e56300); border-color: var(--theme-palette-color-2, #e56300); } /* Radios modo auto/avisar */ .gwl-radio { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #e6e6e6; border-radius: 10px; margin-bottom: 8px; cursor: pointer; } .gwl-radio:hover { border-color: #FF6F00; } .gwl-radio small { color: #777; font-weight: 400; } .gwl-radio input { margin-top: 3px; } .gwl-fields { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f0; } .gwl-modal__dialog input[type="text"], .gwl-modal__dialog input[type="email"], .gwl-modal__dialog input[type="tel"], .gwl-modal__dialog select, .gwl-modal__dialog textarea { color: #222; background-color: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 9px 11px; width: 100%; box-sizing: border-box; margin-top: 4px; } .gwl-form__actions { margin-top: 18px; } .gwl-form__msg { margin-top: 10px; min-height: 1em; } .gwl-form__msg.is-error { color: #c0392b; } .gwl-form__msg.is-success { color: #2e7d32; } /* Contenido del modal informativo (estilo gosy-perk-detail) */ .gwl-info-content { color: #1a1a1a; line-height: 1.5; } .gwl-info-content h4 { margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: .4px; } .gwl-info-content p { margin: 0 0 8px; color: #444; } .gwl-info-content ul { margin: 0 0 8px; padding-left: 18px; color: #444; }