@property --haskari-one-tap-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#google-one-tap-wrapper {
    --haskari-one-tap-angle: 0deg;
    width: min(390px, calc(100vw - 28px)) !important;
    left: auto !important;
    right: 18px !important;
    top: 82px !important;
    padding: 2px !important;
    border-radius: 21px !important;
    overflow: hidden !important;
    background: transparent !important;
    isolation: isolate;
    box-sizing: border-box !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 34px rgba(255,184,0,.10) !important;
}

#google-one-tap-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--haskari-one-tap-angle),
        rgba(255,184,0,.10) 0deg,
        #ffb800 42deg,
        #ffe08a 74deg,
        rgba(255,255,255,.92) 92deg,
        rgba(255,184,0,.16) 122deg,
        transparent 176deg,
        transparent 306deg,
        rgba(255,184,0,.12) 336deg,
        #ffb800 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: haskariOneTapOrbit 6.8s linear infinite;
    pointer-events: none;
}

#google-one-tap-wrapper::after {
    content: "";
    position: absolute;
    inset: 8px 20px auto;
    height: 26px;
    z-index: -1;
    border-radius: 999px;
    background: rgba(255,184,0,.18);
    filter: blur(22px);
    opacity: .72;
    pointer-events: none;
}

#google-one-tap-wrapper .premium-animated-border-inner {
    min-height: 76px;
    border-radius: 19px !important;
    overflow: hidden;
    background: rgba(12,15,25,.985) !important;
    border: 1px solid rgba(255,255,255,.055);
}

#google-one-tap-container {
    min-height: 74px !important;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden !important;
    border-radius: 18px;
}

#google-one-tap-container > div,
#google-one-tap-container iframe {
    max-width: 100% !important;
}

#google-one-tap-wrapper[data-google-mode="native"] .premium-animated-border-inner {
    background: rgba(9,10,16,.985) !important;
}

.haskari-google-fallback {
    width: 100%;
    min-height: 74px;
    padding: 13px 16px;
    border: 0;
    color: #202124;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    text-align: left;
    cursor: pointer;
    background: #fff;
    font-family: Roboto, Inter, system-ui, sans-serif;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.haskari-google-fallback:hover {
    background: #f8fafd;
    box-shadow: inset 0 0 0 1px rgba(66,133,244,.22);
}

.haskari-google-fallback:active {
    transform: scale(.995);
}

.haskari-google-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(60,64,67,.14);
}

.haskari-google-mark svg {
    width: 22px;
    height: 22px;
    display: block;
}

.haskari-google-copy strong {
    display: block;
    color: #202124;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
}

.haskari-google-copy small {
    display: block;
    margin-top: 4px;
    color: #5f6368;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
}

@keyframes haskariOneTapOrbit {
    to { --haskari-one-tap-angle: 360deg; }
}

@media (max-width: 640px) {
    #google-one-tap-wrapper {
        top: 72px !important;
        right: 14px !important;
        width: calc(100vw - 28px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #google-one-tap-wrapper::before { animation: none; }
}