/* Kort-tekst-generator. Holdt taet paa drikkevareberegnerens udtryk. */

#fbkt-app { margin: 1.5em 0; }

#fbkt-app .fbkt-intro { margin-bottom: 1em; }
#fbkt-app .fbkt-title { margin: 0 0 .3em; font-size: 1.4em; }
#fbkt-app .fbkt-subtitle { margin: 0; color: #444; }

#fbkt-app .fbkt-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .8em 1em;
    background: #f5f7f9;
    border: 1px solid #dde3e8;
    border-radius: 6px;
    padding: 1em;
}

#fbkt-app .fbkt-field { display: flex; flex-direction: column; }
#fbkt-app .fbkt-field label { font-weight: 700; margin-bottom: .25em; font-size: .95em; }
#fbkt-app .fbkt-field select,
#fbkt-app .fbkt-field input[type="text"] {
    width: 100%;
    padding: .5em;
    border: 1px solid #b9c4cd;
    border-radius: 4px;
    background: #fff;
    font-size: 1em;
}
#fbkt-app .fbkt-hint { font-weight: 400; color: #667; font-size: .85em; }

#fbkt-app .fbkt-actions { margin: 1em 0; }

/* Temaets style.css saetter globalt button:hover{color:white}, saa enhver knap
   med lys hover-baggrund SKAL saette color eksplicit paa :hover - ellers bliver
   teksten hvid paa hvidt. Derfor er begge knaptyper moerke i hover. */
#fbkt-app .fbkt-skriv,
#fbkt-app .fbkt-kopier {
    background: #0f6ca2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: .6em 1.1em;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
}
#fbkt-app .fbkt-skriv:hover,
#fbkt-app .fbkt-kopier:hover { background: #095c8a; color: #fff; }

#fbkt-app .fbkt-forslag {
    border: 1px solid #dde3e8;
    border-left: 4px solid #0f6ca2;
    border-radius: 4px;
    padding: 1em;
    margin-bottom: .9em;
    background: #fff;
}
#fbkt-app .fbkt-tekst {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 1.02em;
    line-height: 1.55;
    margin: 0 0 .8em;
    background: none;
    border: none;
    padding: 0;
}
#fbkt-app .fbkt-kopier { padding: .4em .9em; font-size: .9em; }

#fbkt-app .fbkt-note { color: #556; font-size: .9em; margin-top: 1em; }

@media print {
    #fbkt-app .fbkt-controls,
    #fbkt-app .fbkt-actions,
    #fbkt-app .fbkt-kopier { display: none; }
}