/*
Plugin Name: FP Bookings
Plugin URI: https://datenwege-informatik.de
Description: Stylings for Wordpress Frontend
Author: Gernot Daum
Author URI: https://datenwege-informatik.de
Version: 1.0
License: properitary
*/


/* Globale Konstanten */
body {
	/*   # Farben */
	--global--color-primary: black;
	--global--color-background: rgba(138, 30, 130, 1);
	--global--color-background-light: rgba(138, 30, 130, 0.15);
	
	  /*   Breiten und Abstände */
  --global--spacing-unit: 15px;
  --global--spacing-horizontal: var(--global--spacing-unit);
  --global--spacing-vertical: calc(2 * var(--global--spacing-unit));
  --default-outer-margin-mult: 4;
	--default-outer-margin: calc(var(--default-outer-margin-mult) * var(--global--spacing-horizontal));
	--default-outer-spacing: calc(2 * var(--default-outer-margin));
	
	--shoppage-width: 1140px;
  --responsive--shoppage-width: min(calc(100vw - var(--default-outer-spacing)), var(--shoppage-width));
}

/* Allgemein */
section.fp-section {
	margin-top: 60px;
	margin-bottom: 60px
}


/* Woocommerce */

/*   Buttons */

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, 
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background-color: var(--global--color-background)
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
  background-color: var(--global--color-background-light)
}

/*   Produktübersicht */
.woocommerce #respond input#submit, .woocommerce a.button, 
.woocommerce button.button, .woocommerce input.button {
	border-radius: 12px 12px 12px 12px;
}

/*   Zusätzliche Produktseiten */
.products #content .page-header h1 {
	margin-bottom: 30px;
  color: black;
  font-family: "Javacom", Sans-serif;
  font-size: 40px;
  text-align: center
}
.products #content .button {
	color: white;
  background-color: var( --e-global-color-primary );
  line-height: 1.2em;
  margin-top: 0px;
}
.products #content .duration {
}
.products #content .price {
  color: var( --e-global-color-primary );
  font-size: 18px;
  font-weight: 800;
}

/*   Produkteinzelseiten */
.small-image img {max-width: 400px}
.wc-appointments-appointment-hook {text-align: start}
.product .tax-info {text-align: right}

.fp-packages, .fp-compact {padding: 15px; border: 1px solid}
.fp-packages a, .fp-compact a {text-decoration: none}
.fp-packages .wc-block-grid__product-image img {padding: 0 25%}
.fp-compact .wc-block-grid__product {
	display: flex;
	text-align: left
}
.fp-compact .wc-block-grid__product > *:nth-child(1) {width: 40%}
.fp-compact .wc-block-grid__product > *:nth-child(2) {width: 25%}
.fp-compact .wc-block-grid__product > *:nth-child(3) {width: 10%}
.fp-compact .wc-block-grid__product > *:nth-child(4) {width: 25%}
.fp-compact .woocommerce-Price-amount,
.fp-compact .wc-gzd-additional-info.tax-info {
	display: none
}

/*   Warenkorb */
.hidden-login {display: none}
.hidden-login.show {display: initial}
.togglelogin {
	cursor: pointer;
	color: var(--e-global-color-primary);
	text-decoration: underline;
}

/* Kontodaten */ 
.woocommerce .pers-acc-data-section {
  margin-top: 60px;
	max-width: 360px;
}

/*   Buchungs Plugin */
.ui-datepicker.ui-widget td a {display: inline-block}
.wc-appointments-date-picker .ui-datepicker td .ui-state-default {
  padding: 0;
  margin: 0.8em 0
}
.wc-appointments-date-picker .ui-datepicker td.appointable a {
  background-color: var(--global--color-background-light)
}
.wc-appointments-date-picker .ui-datepicker td.ui-datepicker-current-day a,
.wc-appointments-date-picker .ui-datepicker td.appointable a:hover {
	color: white;
	background-color: var(--global--color-background)
}

/*   Termintabelle */
.courses .woocommerce ul.products li.product {
	float: none;
	width: 100%;
	margin: 0 0 10px 0
}
.courses .woocommerce ul.products li.product a {
  display: flex;
  align-items: center
}
.courses .woocommerce ul.products li.product a > * {padding-right: 25px }
.courses .woocommerce ul.products li.product a img {
  width: 12%;
  margin: 0
}
#content .courses .woocommerce-loop-product__title {
	flex-basis: 55%;
	padding: 0 15px 0 0
}
#content .courses  .price {
    margin: 0
}
.courses .woocommerce-LoopProduct-link {
  flex-basis: 90%;
}
.courses .products p.tax-info {display: none}
.courses .products .add_to_cart_button {
  flex-basis: 10%;
  align-self: center
}

/*   Teilnehmerliste */
.checkout .participant > p:nth-child(1), .checkout .participant > p:nth-child(2) {
	float: left;
	width: 50%
}

/* Styling für "Event For Me" */
body {
	--event-for-me--blue: #01628b;
}
#fp-booking td {padding: 6px}
#fp-booking.event-for-me thead td {
	font-weight: 700;
	color: var(--event-for-me--blue)
}
#fp-booking.event-for-me h2 {
	margin-top: 30px;
	color: var(--event-for-me--blue)
}

/* Formatiere Seitenbreiten für  "Nicht Elementor" Seiten im Elementorkontext, betrifft mit Stand 10.03.23
- Produkteinzelseiten, die Elementorbestandteile enthalten
- Die Buchungstabelle in einem Elementorkontext (also auf einer Produkteinzelseite)  
- Die Kassenseite, Ursache ist noch nicht klar
- Woocommerce Produktübersichten in jedem Kontext
*/
.single-product .site-main, #fp-booking, .woocommerce-checkout .site-main, .wc-block-product-category {
	max-width: var(--responsive--shoppage-width);
	margin-left: auto;
	margin-right: auto
}

/*   Fehler aus dem Plugin kaschieren */
.ui-datepicker .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before {
  display: none
}

/* Sonstiges */
/*   Fehlende Formatierungen für Gutenberg Blöcke - werden nicht in jeder Umgebung benötigt */
.wp-block-columns {
  display: flex;
  gap: 2em;
  flex-wrap: nowrap;
  align-items: center;
}
.product_cat-coming-soon a {pointer-events: none}

/* Add-On Selektion mit Ein- und Ausblenden von Feldern */
.wc-pao-addon-gipfelstuermerinnen {display: flow-root}
.wc-pao-addon-gipfelstuermerinnen a {font-weight: 700}
.hidden, .fp-hidden {display: none}

/* Hotfix 10.03.23 */ 
.woocommerce-cart .cart_totals > p {display: none}

/* Hotfix 19.03.23 */ 
section.related.products {display: none}


/* Responsive */

/*   Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 781px) {
	body {
		--default-outer-margin-mult: 3
	}
}

/*   Smartphone groß */
@media only screen and (max-width: 599px) {
	body {
		--default-outer-margin-mult: 2
	}
}

/*   Smartphone */
@media only screen and (max-width: 480px) {
	body {
		--default-outer-margin-mult: 1
	}
}