/* Hutsy Download Popup - Frontend v1.0.3 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --hutsy-bg: #191C1F;
    --hutsy-surface: #191C1F;
    --hutsy-border: rgba(255,255,255,0.12);
    --hutsy-blue: #27ABFA;
    --hutsy-blue-hover: #1a9be6;
    --hutsy-text: #FFFFFF;
    --hutsy-muted: rgba(255,255,255,0.68);
    --hutsy-input-bg: #222426;
    --hutsy-radius: 16px;
    --hutsy-radius-sm: 8px;
}

.hutsy-overlay,
.hutsy-overlay * { box-sizing: border-box !important; }

.hutsy-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: rgba(0,0,0,0.74) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    font-family: 'Poppins', Arial, sans-serif !important;
}

.hutsy-overlay.hutsy-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.hutsy-overlay .hutsy-modal {
    background: var(--hutsy-bg) !important;
    border-radius: var(--hutsy-radius) !important;
    /*border: 1px solid rgba(255,255,255,0.10) !important;*/
    width: 100% !important;
    max-width: 600px !important;
    padding: 64px 66px 60px !important;
    position: relative !important;
    box-shadow: 0 32px 90px rgba(0,0,0,0.66), 0 0 0 1px rgba(255,255,255,0.04) !important;
    transform: translateY(30px) scale(0.97);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    color: var(--hutsy-text) !important;
}

.hutsy-overlay.hutsy-visible .hutsy-modal {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

.hutsy-overlay .hutsy-close {
    position: absolute !important;
    top: 18px !important;
    right: 20px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, Helvetica, sans-serif !important;
    opacity: 0.95 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.hutsy-overlay .hutsy-close:hover,
.hutsy-overlay .hutsy-close:focus {
    background: transparent !important;
    color: #ffffff !important;
    opacity: 1 !important;
    outline: none !important;
    transform: scale(1.04) !important;
}

.hutsy-overlay .hutsy-logo,
.hutsy-overlay .hutsy-success-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 0 24px !important;
}

.hutsy-overlay .hutsy-logo-img {
    display: block !important;
    width: 72px !important;
    height: auto !important;
    max-width: 72px !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

.hutsy-overlay .hutsy-modal-title {
    color: var(--hutsy-text) !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin: 0 0 16px !important;
    line-height: 1.24 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    letter-spacing: -0.03em !important;
}

.hutsy-overlay .hutsy-modal-desc {
    color: var(--hutsy-muted) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: center !important;
    line-height: 1.62 !important;
    margin: 0 auto 28px !important;
    max-width: 480px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
}

.hutsy-overlay .hutsy-modal-desc.hutsy-small {
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

.hutsy-overlay .hutsy-form {
    width: 100% !important;
    margin: 0 !important;
}

.hutsy-overlay .hutsy-field-group {
    position: relative !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    width: 100% !important;
}

.hutsy-overlay .hutsy-input,
.hutsy-overlay input.hutsy-input[type='text'],
.hutsy-overlay input.hutsy-input[type='email'] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    display: block !important;
    background: var(--hutsy-input-bg) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 48px 0 18px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: var(--hutsy-blue) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 50px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.hutsy-overlay .hutsy-input::placeholder {
    color: rgba(255,255,255,0.54) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(255,255,255,0.54) !important;
}

.hutsy-overlay .hutsy-input:focus,
.hutsy-overlay input.hutsy-input[type='text']:focus,
.hutsy-overlay input.hutsy-input[type='email']:focus {
    border-color: rgba(39,171,250,0.92) !important;
    background: var(--hutsy-input-bg) !important;
    box-shadow: 0 0 0 1px rgba(39,171,250,0.20) !important;
}

/* Lock Chrome/Safari autofill so browser suggestions never turn fields white */
.hutsy-overlay .hutsy-input:-webkit-autofill,
.hutsy-overlay .hutsy-input:-webkit-autofill:hover,
.hutsy-overlay .hutsy-input:-webkit-autofill:focus,
.hutsy-overlay .hutsy-input:-webkit-autofill:active,
.hutsy-overlay input.hutsy-input[type='text']:-webkit-autofill,
.hutsy-overlay input.hutsy-input[type='email']:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--hutsy-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--hutsy-input-bg) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: var(--hutsy-blue) !important;
    border-color: rgba(255,255,255,0.16) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

.hutsy-overlay .hutsy-input:autofill {
    box-shadow: 0 0 0 1000px var(--hutsy-input-bg) inset !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hutsy-overlay .hutsy-input-icon {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
    filter: grayscale(1) brightness(1.35) !important;
}

.hutsy-overlay .hutsy-error {
    color: #ff6b6b !important;
    font-size: 13px !important;
    text-align: center !important;
    margin: 0 0 12px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
}

.hutsy-overlay .hutsy-btn-primary,
.hutsy-overlay button.hutsy-btn-primary,
.hutsy-overlay .hutsy-btn-primary[type='button'] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    background: var(--hutsy-blue) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 18px !important;
    margin: 18px 0 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 52px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.hutsy-overlay .hutsy-btn-primary:hover,
.hutsy-overlay .hutsy-btn-primary:focus {
    background: var(--hutsy-blue-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

.hutsy-overlay .hutsy-btn-primary:active { transform: scale(0.985) !important; }
.hutsy-overlay .hutsy-btn-primary:disabled { opacity: 0.72 !important; cursor: not-allowed !important; }

.hutsy-overlay .hutsy-spinner {
    width: 18px !important;
    height: 18px !important;
    animation: hutsy-spin 0.8s linear infinite !important;
}

@keyframes hutsy-spin { to { transform: rotate(360deg); } }

.hutsy-overlay .hutsy-success-icon { animation: hutsy-pop 0.5s cubic-bezier(0.22,1,0.36,1) !important; }
@keyframes hutsy-pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.hutsy-overlay .hutsy-divider {
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    margin: 28px 0 22px !important;
}

.hutsy-overlay .hutsy-store-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}

.hutsy-overlay .hutsy-store-link {
    flex: 1 1 0 !important;
    max-width: 170px !important;
    display: block !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hutsy-overlay .hutsy-store-link:hover { transform: translateY(-2px) !important; opacity: 0.92 !important; }

.hutsy-overlay .hutsy-store-badge {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    display: block !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hutsy-overlay .hutsy-store-btn {
    background: var(--hutsy-input-bg) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: var(--hutsy-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    font-family: 'Poppins', Arial, sans-serif !important;
}

.hutsy-step-exit { animation: hutsy-step-out 0.25s ease forwards !important; }
.hutsy-step-enter { animation: hutsy-step-in 0.35s cubic-bezier(0.22,1,0.36,1) forwards !important; }
@keyframes hutsy-step-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes hutsy-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
    .hutsy-overlay { align-items: flex-end !important; padding: 0 !important; }
    .hutsy-overlay .hutsy-modal {
        border-radius: var(--hutsy-radius) var(--hutsy-radius) 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 44px 24px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateY(60px) !important;
    }
    .hutsy-overlay.hutsy-visible .hutsy-modal { transform: translateY(0) !important; }
    .hutsy-overlay .hutsy-logo-img { width: 64px !important; max-width: 64px !important; }
    .hutsy-overlay .hutsy-modal-title { font-size: 23px !important; }
    .hutsy-overlay .hutsy-store-row { gap: 12px !important; }
}