/* Layout der Captcha-Box des Shops - themeunabhaengig.

   Das ALTCHA-Widget rendert in einem Shadow Root, von aussen wirken deshalb nur
   die CSS-Variablen (die vererben sich in den Shadow Root hinein) und die
   Geometrie des Host-Elements selbst.

   Die Box bekommt hier eine feste Breite. Ohne die schrumpft sie beim Wechsel
   von "Ich bin kein Roboter" auf "Ueberprueft" auf die Breite des kuerzeren
   Textes zusammen und springt im Formular herum. */

.xt-captcha
{
    display: block;
    clear: both;
    margin: 0 0 15px;
    /* Formulare stellen die Box teilweise in rechtsbuendige Bloecke
       (.text-right); der Widget-Inhalt erbt das sonst. */
    text-align: left;
}

.xt-captcha altcha-widget
{
    display: block;
    width: 100%;
    max-width: 280px;

    --altcha-max-width: 280px;
    --altcha-border-radius: 4px;
    --altcha-border-width: 1px;
    --altcha-color-border: #ccc;
    --altcha-border-color: #ccc;
}

/* Box im Fluss rechts ausrichten - fuer Formulare, deren Absende-Block
   rechtsbuendig ist. */
.xt-captcha--right altcha-widget
{
    margin-left: auto;
}

/* In den horizontalen Formularen (Label links, Feld rechts) sitzt die Box
   bereits in einer Spalte und braucht keinen zusaetzlichen Abstand. */
.form-group > .xt-captcha:last-child
{
    margin-bottom: 0;
}