/* ============================================================
   HOPLON & CO. — Custom Popup (Premium Dark Edition)
   Accent: #d8ff36
   Scoped + !important to safely override WordPress theme styles
   ============================================================ */

:root {
    --pw-lime:        #d8ff36;
    --pw-lime-soft:   rgba(216, 255, 54, 0.35);
    --pw-dark:        #2c2c2e;
    --pw-dark-2:      #242426;
    --pw-black:       #0c0c0d;
    --pw-white:       #ffffff;
    --pw-muted:       #9b9b9f;
    --pw-input-text:  #1a1a1a;
    --pw-input-place: #8a8a8e;
    --pw-radius:      28px;
    --pw-pill:        999px;
    --pw-ease:        cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Overlay ---------- */
.custom-popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: radial-gradient(120% 120% at 50% 0%, rgba(216,255,54,0.10) 0%, rgba(0,0,0,0.82) 45%, rgba(0,0,0,0.9) 100%) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--pw-ease), visibility 0.45s var(--pw-ease) !important;
}

.custom-popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* ---------- Container ---------- */
.custom-popup-container {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    background: linear-gradient(160deg, var(--pw-dark) 0%, var(--pw-dark-2) 100%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: var(--pw-radius) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(216,255,54,0.06) inset !important;
    transform: translateY(24px) scale(0.96);
    opacity: 0;
    transition: transform 0.55s var(--pw-ease), opacity 0.45s var(--pw-ease) !important;
}

.custom-popup-overlay.is-active .custom-popup-container {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.custom-popup-content {
    padding: 15px 34px 15px !important;
    position: relative !important;
}

/* ---------- Close button ---------- */
.popup-close-btn {
    position: absolute !important;
    top: 18px !important;
    right: 20px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    background: rgba(255,255,255,0.06) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #cfcfcf !important;
    transition: all 0.25s var(--pw-ease) !important;
    z-index: 2 !important;
}

.popup-close-btn:hover {
    background: var(--pw-lime) !important;
    color: var(--pw-black) !important;
    transform: rotate(90deg) !important;
}

/* ---------- Header ---------- */
.popup-header {
    text-align: center !important;
    margin-bottom: 26px !important;
}

.popup-header h2 {
    color: var(--pw-white) !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 6px 0 22px !important;
    line-height: 1.1 !important;
}

.popup-header h2 .pw-dot {
    color: var(--pw-lime) !important;
}

/* Banner pill */
.popup-subtitle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--pw-black) !important;
    color: var(--pw-lime) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-radius: var(--pw-pill) !important;
    padding: 10px 24px !important;
    margin: 0 0 18px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(216,255,54,0.12) inset !important;
    position: relative !important;
    overflow: hidden !important;
}

/* subtle shimmer sweep */
.popup-subtitle::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -60% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent, rgba(216,255,54,0.18), transparent) !important;
    transform: skewX(-20deg) !important;
    animation: pwShimmer 4.5s var(--pw-ease) infinite !important;
}

@keyframes pwShimmer {
    0%, 65% { left: -60%; }
    100%    { left: 130%; }
}

.popup-subtitle .pw-phone {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    animation: pwRing 2.2s ease-in-out infinite !important;
}

@keyframes pwRing {
    0%, 70%, 100% { transform: rotate(0); }
    75%, 85%      { transform: rotate(12deg); }
    80%, 90%      { transform: rotate(-12deg); }
}

.popup-header > p:last-child {
    color: var(--pw-muted) !important;
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ---------- Form ---------- */
.popup-body { margin-top: 6px !important; }

.form-group {
    margin-bottom: 14px !important;
}

.form-group label {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.form-group input {
	height: 50px;
}

.form-group input,
.form-group textarea {
    width: 100% !important;
    background: var(--pw-white) !important;
    color: var(--pw-input-text) !important;
    border: 2px solid transparent !important;
    border-radius: var(--pw-pill) !important;
    padding: 17px 24px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
    transition: border-color 0.3s var(--pw-ease), box-shadow 0.3s var(--pw-ease), transform 0.2s var(--pw-ease) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.form-group textarea {
    border-radius: 24px !important;
    min-height: 130px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--pw-input-place) !important;
    opacity: 1 !important;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none !important;
    border-color: var(--pw-lime) !important;
    box-shadow: 0 0 0 4px var(--pw-lime-soft), 0 6px 18px rgba(0,0,0,0.22) !important;
    transform: translateY(-1px) !important;
}

/* ---------- Submit button ---------- */
.popup-submit-btn {
    width: 100% !important;
    padding: 19px !important;
    margin-top: 6px !important;
    background: var(--pw-black) !important;
    color: var(--pw-white) !important;
    border: 2px solid var(--pw-black) !important;
    border-radius: var(--pw-pill) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: all 0.3s var(--pw-ease) !important;
}

.popup-submit-btn:hover {
    background: var(--pw-lime) !important;
    border-color: var(--pw-lime) !important;
    color: var(--pw-black) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px var(--pw-lime-soft) !important;
}

.popup-submit-btn:active { transform: translateY(-1px) !important; }

.popup-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.popup-loading {
    text-align: center !important;
    padding: 12px !important;
    color: var(--pw-lime) !important;
    font-weight: 600 !important;
}

/* ---------- Messages ---------- */
#popup-form-message {
    margin-bottom: 16px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: none !important;
}

#popup-form-message.success {
    display: block !important;
    background: rgba(216,255,54,0.14) !important;
    color: var(--pw-lime) !important;
    border: 1px solid rgba(216,255,54,0.3) !important;
}

#popup-form-message.error {
    display: block !important;
    background: rgba(255,86,86,0.12) !important;
    color: #ff8a8a !important;
    border: 1px solid rgba(255,86,86,0.3) !important;
}

/* ---------- Scrollbar ---------- */
.custom-popup-container::-webkit-scrollbar { width: 8px !important; }
.custom-popup-container::-webkit-scrollbar-track { background: transparent !important; }
.custom-popup-container::-webkit-scrollbar-thumb {
    background: rgba(216,255,54,0.4) !important;
    border-radius: 999px !important;
}

/* ---------- Staggered field reveal ---------- */
.custom-popup-overlay.is-active .form-group,
.custom-popup-overlay.is-active .popup-submit-btn {
    animation: pwFieldIn 0.55s var(--pw-ease) both !important;
}
.custom-popup-overlay.is-active .form-group:nth-child(1) { animation-delay: 0.10s !important; }
.custom-popup-overlay.is-active .form-group:nth-child(2) { animation-delay: 0.16s !important; }
.custom-popup-overlay.is-active .form-group:nth-child(3) { animation-delay: 0.22s !important; }
.custom-popup-overlay.is-active .form-group:nth-child(4) { animation-delay: 0.28s !important; }
.custom-popup-overlay.is-active .popup-submit-btn        { animation-delay: 0.34s !important; line-height: 0px;}

@keyframes pwFieldIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .custom-popup-content { padding: 30px 22px 26px !important; }
    .popup-header h2 { font-size: 30px !important; }
    .popup-subtitle { font-size: 17px !important; padding: 14px 18px !important; }
    .form-group input,
    .form-group textarea { padding: 15px 20px !important; font-size: 15px !important; }
    .popup-submit-btn { padding: 17px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .custom-popup-overlay,
    .custom-popup-container,
    .popup-subtitle::after,
    .popup-subtitle .pw-phone,
    .form-group, .popup-submit-btn {
        animation: none !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }
}