/**
 * Theme Name:        Piko Theme
 * Template:          generatepress
 * Description:       Child Theme created by Piko
 * Version:           0.1.0
 * Author:            Piko Solutions
 */


/* Strategy Eingabe Stufe 1 */

/* Strategy Eingabe Stufe 1 - Layout - Zeilen als Flex-Container */
.piko-kompass-wrapper .piko-row {
    display: flex;
    gap: 3rem;            
    margin-bottom: 2rem;
}

/* Strategy Eingabe Stufe 1 - Layout - Spalten: 2 Spalten nebeneinander */
.piko-kompass-wrapper .piko-col {
    flex: 1 1 0;        /* exakt 50 % Breite */
}

/* Strategy Eingabe Stufe 1 - Labels / Überschriften */
.piko-kompass-wrapper label,
.piko-kompass-wrapper .piko-label {
    display: block; /*Input/Textarea darunter, nicht daneben*/
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Strategy Eingabe Stufe 1 - Inputfeld + Textarea */
.piko-kompass-wrapper input[type="text"],
.piko-kompass-wrapper textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #555;
    padding: 0.25rem 0;
    resize: vertical; /* Felder nur nach unten größer ziehen*/
}

/* Strategy Eingabe Stufe 1 - Radiobuttons/Gruppen */
.piko-kompass-wrapper .piko-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
/* Strategy Eingabe Stufe 1 - Radiobuttons/Label */
.piko-kompass-wrapper .piko-radio-group label {
    font-weight: 400; /* n Bisl schlanker als die Überschriften */
}

/* Strategy Eingabe Stufe 1 - Button Kompass Anzeigen - Ausrichtung in der Mitte*/

.piko-kompass-wrapper .piko-row.piko-row-center {
    justify-content: center;
}

/* Strategy Eingabe Stufe 1 - Button Kompass Anzeigen - Styling (Farbe, Ecken rund, Innenabstand)*/
.piko-kompass-wrapper button#piko-ai-stage1-submit {
    padding: 0.6rem 2rem; 
    border-radius: 8px;
    background: #222;
    color: #fff;
    cursor: pointer;
}

/* Strategy Eingabe Stufe 1 - Button Kompass Anzeigen - Hoveraussehen*/
.piko-kompass-wrapper button#piko-ai-stage1-submit:hover {
    background: #444;
}

/* Strategy Eingabe Stufe 1 - Zeichenzähler*/
.piko-counter{
  margin-top: .25rem;
  font-size: .8rem;
  opacity: .7;
}

/* Strategy Ausgabe Stufe 1*/

/* Strategy Ausgabe Stufe 1 - Styling & Abstände Outputblöcke*/
.piko-output-block {
    margin-bottom: 1.75rem;
}

.piko-output-block h4 {
    margin: 0 0 0.25rem 0;
    font-weight: 600;
}


/* Strategy Ausgabe Stufe 1 - Button "Kompass freischalten"  Styling (Farbe, Ecken rund, Innenabstand, Verstecken) */
.piko-output-wrapper .piko-row.piko-row-center {
    margin-top: 2rem;
}

.piko-output-wrapper button#piko-unlock {
    padding: 0.6rem 2rem; 
    border-radius: 8px;
    background: #222;
    color: #fff;
    cursor: pointer;
}

.piko-output-wrapper button#piko-unlock:hover {
    background: #444;
}

.piko-output-wrapper {
    display: none;
}

/* Strategy Ausgabe Stufe 1 - Ladekreis */

.piko-spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:pikoSpin .8s linear infinite;
  margin-right:.5rem;
  vertical-align:middle;
	
}

/* Strategy Ausgabe Stufe 1 - Ladekreis - Ausrichtung */

/* Fullscreen Loader Overlay */
#piko-ai-stage1-loading {
    position: fixed;
    inset: 0;
    display: none; /* wird per JS gesteuert */
    z-index: 9999;
    background: rgba(0,0,0,.35);
}

/* Strategy Ausgabe Stufe 1 - Ladekreis - auf Aktiv setzen */
#piko-ai-stage1-loading.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Strategy Ausgabe Stufe 1 - Ladekreis - Animation */
@keyframes pikoSpin{to{transform:rotate(360deg);}}


/* Footer  */

/* Footer - Einstellungen damit Footer immer am Ende des Bildschirms bleibt. */
body { 
	display: flex; 
	flex-direction: column; 
	align-items: stretch; 
	min-height: 100vh; }

.site { 
	flex-grow: 1;
	}

body.admin-bar { 
	min-height: calc(100vh - 32px); 
	} /* for logged in users to not have vertical scrolls */

.container.grid-container { 
	width: 100%; 
} /* fix to allow for container width set in customizer to keep working */


/* Product Page Strategiekompass*/
.piko_kompass_product_page_title {
	margin-bottom: 0px !important;
}

/* Kasse bei WooCommerce Produktsektion Hintergrund wieder Schwarz machen */
.wc-gzd-checkout .wc-block-components-order-summary {
    background-color: transparent !important;
}

/* Zähler bei WooCommerce Kasse am Produkt ausblenden */

.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    display: none;
}

/* Weißer Hintergrund der Dropdownlist der Länderliste schwarz machen */

.wc-blocks-components-select .wc-blocks-components-select__select {
	background: #000000 !important;
}

/* Kauf Button sichtbar machen */
.wc-block-components-checkout-place-order-button {
	color: #000000;
	background-color: #fff;
}

.site-info {
	display: none;
}

@media (max-width: 768px) {

	/* Strategy Eingabe Stufe 1 Mobil - Untereinander statt nebeneinander */
    .piko-kompass-wrapper .piko-row {
        flex-direction: column;
    }

    .piko-kompass-wrapper .piko-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}