/* ============================================================
   NYHEDSBREVSFELTET I FOOTEREN
   Indlæses efter sidernes egen CSS og breakpoint-filerne, så
   reglerne her overskriver de gamle uden !important.
   ============================================================ */

/* Én lang pille med tynd, dæmpet kant, og den fyldte cirkel med
   pilen sidder fast i højre ende — altid synlig.
   --nb-h styrer både pillens højde og cirklens diameter. */
.footer__form{
    --nb-h: 49px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    width: 250px;
    max-width: 100%;
}

.footer__felt{
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--nb-h);
    padding: 0 calc(var(--nb-h) + 14px) 0 22px;   /* plads til cirklen */
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
}

/* Intet ikon i feltet */
.footer__ikon{
    display: none;
}

/* Feltet står tomt. Teksten bliver i footer.php, så
   skærmlæsere stadig har labelen. */
.footer__input::placeholder{
    color: transparent;
}

/* Cirklen er altid fremme. De gamle regler gemte den, til man tastede;
   "er-sendt"-reglen i sidernes CSS gemmer den stadig efter afsendelse. */
.footer__send{
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nb-h);
    height: var(--nb-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: visible;
    cursor: pointer;
    background-color: var(--fg);
    color: var(--bg);
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity .25s ease;
}

.footer__send:hover{
    opacity: .82;
}

@media (max-width: 767px){
    .footer__form{
        --nb-h: 46px;
        margin: 0 auto;
    }

    /* Overskriver den udfoldende knap fra styles-mobile.css */
    .footer__form .footer__send,
    .footer__form.har-tekst .footer__send{
        width: var(--nb-h);
        height: var(--nb-h);
        margin-left: 0;
    }

    .footer__form .footer__felt{
        height: var(--nb-h);
        flex-shrink: 1;
    }
}