/*
Theme Name: Botiga Child
Theme URI: https://yourwebsite.com/
Description: Child theme for Botiga
Author: Your Name
Author URI: https://yourwebsite.com/
Template: botiga
Version: 1.0.0
Text Domain: botiga-child
*/

/*
botiga-child/
├── style.css
├── functions.php
├── screenshot.png
├── assets/
│   ├── css/
│   │   └── custom.css
│   ├── js/
│   │   └── custom.js
│   └── fonts/
├── woocommerce/
└── template-parts/

To overwrite template files of the parent theme, copy them to the corresponding
folder of your child theme and edit them as required. Keep the same folder 
structure.

To overwrite WooCommerce templates, you need to copy the corresponding
files from the WooCommerce plugin or the parent theme into your `woocommerce` 
folder.
For example (wp-content/plugins/woocommerce/templates/single-product.php):

botiga-child/
└── woocommerce/
    ├── single-product.php
    ├── content-product.php
    └── cart/
        └── cart.php

For example (wp-content/plugins/wc-vendors/templates/front/vendor-list.php):

botiga-child/
└── wc-vendors/
    └── front/
        └── vendor-list.php

*/

/* Add your custom CSS here */


/********************************************************************
 *
 * The default elementor specification (copied by 'Entwicklertools')
 * Version: 2025-03-09
 *
 * .th-reference-only-elementor-kit-63 for reference pupose only
 *
 ********************************************************************/

.th-reference-only-elementor-kit-63 {
    --e-global-color-primary: #77C5D5;    /* mint */
    --e-global-color-secondary: #004680;  /* blue */
    --e-global-color-text: #333333;       /* gray */
    --e-global-color-accent: #E1CD00;     /* lemmon */
    --e-global-color-3a498ca: #C2A990;    /* */
    --e-global-color-48335d5: #D8613C;    /* */
    --e-global-color-3754408: #F9F9F9;    /* */
    --e-global-color-74833c1: #E3E3E3;    /* */
    --e-global-color-4121560: #F9F9F9;    /* */
    --e-global-color-d9c87bd: #F9F9F9;    /* */
    --e-global-color-2778c97: #3C55B9;    /* icon-1 */
    --e-global-color-ae380aa: #B15C9B;    /* icon-2 */
    --e-global-color-ed833cc: #E55966;    /* icon-3 */
    --e-global-color-e230af4: #FD751F;    /* icon-4 */
    --e-global-color-1c23982: #FFB606;    /* icon-5 */
    --e-global-color-5a95954: #000000;    /* black */
    --e-global-color-48d70b2: #FFFFFF;    /* white */
    --e-global-color-0ca5c31: #E40D0D;    /* red */
    --e-global-color-a0adbc1: #333333;    /* grey20 */
    --e-global-color-ce572c5: #666666;    /* grey40 */
    --e-global-color-5a8bae6: #9A9A9A;    /* grey60 */
    --e-global-color-3a9e175: #CCCCCC;    /* grey80 */
    --e-global-color-b2c091a: #E6E6E6;    /* grey90 */
    --e-global-color-704429f: #F3F3F3;    /* grey95 */
    --e-global-color-17df32d: #808080;    /* grey50 */
    --e-global-typography-primary-font-size: 32px;
    --e-global-typography-primary-font-weight: 400;
    --e-global-typography-secondary-font-family: "Roboto";
    --e-global-typography-secondary-font-size: 24px;
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: "Roboto";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Roboto";
    --e-global-typography-accent-font-size: 16px;
    --e-global-typography-accent-font-weight: 500;
    color: var( --e-global-color-text );
}

 /*
  * The intesion is to make the colors specified in Elemenetor available
  * as CSS variables here sas well. This way, the colors can be used in 
  * the custom CSS of the child theme.
  *
  * We can not define the colors in the :root selector, because the
  * Elementor CSS variables are defined in the .elementor-kit-63 selector.
  * Therefore, they are not defined, when :root is initialized.
  */
 .elementor-kit-63 {
    --th-color-bg: var(--e-global-color-48d70b2);        /* white */
    --th-color-bg-block: var(--e-global-color-704429f);  /* grey95 */
    --th-color_btn_bg: var(--e-global-color-secondary);  /* blue */
}

:root {
    --th-font-family: HelveticaNowDisplay-Regular, sans-serif;
    --th-font-size: 20px;
    --th-font-weight: 400;
    --th-line-height: 33px;

    --th-font-weight: 300;
    --th-font-weight-em: 400;
}  

/**************************************************************
 * Hide the WooCommerce breadcrum, which is include by  the
 * 'woocommerce_before_main_content' action hook to the layout
 *************************************************************/

nav.woocommerce-breadcrumb {
    display: none;
}

/**************************************************************
 * Settings for template parts
 *************************************************************/

body {
    background-color: var(--th-color-bg);
    color: var(--e-global-color-text);
}

/*
.th-header {

}
*/

.th-content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    margin-top: 24px;
    margin-right: 24px;
    margin-bottom: 48px;
    font-weight: var(--th-font-weight);
}

/* Responsive */
@media (max-width: 800px) {
    .th-content {
        grid-template-columns: 1fr;
    }
}

.th-footer {
    margin-bottom: 48px;
}

/***********************************************************
 * The styles of .th-image-column
 **********************************************************/

.th-image {
    margin-right: 24px;
}

.th-image img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/***********************************************************
 * The styles of .th-info-column
 **********************************************************/

.th-base-info-wrapper {
    background-color: var(--th-color-bg-block);
}

.th-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.th-title {
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
    padding: 12pt;
    font-size: 24pt;
    font-weight: 400;
}

.th-language-switcher-wrapper {
    display: flex;
    justify-content: flex-end; /* Rechtsbündige Ausrichtung */
    flex-shrink: 0; /* Verhindert, dass das Element schrumpft */
}

.trp-language-switcher-container {
    display: flex;
    justify-content: flex-end; /* Rechtsbündige Ausrichtung innerhalb des Containers */
    position: relative; /* Notwendig für absolut positionierte Dropdowns */
}

.trp-ls-shortcode-language {
    position: absolute; /* Absolut positioniert */
    right: 0; /* Rechtsbündig im Container */
    display: none; /* Standardmäßig ausblenden */
    background-color: white; /* Hintergrundfarbe */
    border: 1px solid #ccc; /* Rahmen */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
    z-index: 1000; /* Damit es über anderen Elementen liegt */
}

.trp-language-switcher-container:hover .trp-ls-shortcode-language {
    display: block; /* Einblenden, wenn der Container gehovert wird */
}

.trp-ls-shortcode-current-language {
    cursor: pointer; /* Zeigt, dass es klickbar ist */
}

.th-short-description {
    padding: 12pt;

}

.th-languages {
    padding: 12pt;
}

.th-description {
    margin-top: 12pt;
    padding: 12pt;
    background-color: var(--th-color-bg-block);
}

.th-description ul {
    margin-top: 12pt;
    margin-bottom: 12pt;
}
  
.th-description em {
    color: var(--th-color);
    font-weight: var(--th-font-weight-em);
}

.th-rating {
    margin-top: 12pt;
    padding: 12pt;
    background-color: var(--th-color-bg-block);
}

.th-review {
   padding: 12pt;
    background-color: var(--th-color-bg-block);
}

.th-booking-wrapper {
    background-color: var(--th-color-bg-block);
}

.th-price-range {
    margin-top: 12pt;
    padding: 12pt;
}

.th-web-app {
    padding: 12pt;
}

.th-qr-code, .th-link-btn {
    margin: 20px 0;
}

.th-link-btn a {
    text-decoration: none; /* Entfernt die Unterstreichung vom Link */
}

.th-link-btn button {
    background-color: var(--th-color_btn_bg); /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe des Buttons */
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px; /* Abgerundete Ecken */
    transition: background-color 0.3s; /* Übergangseffekt bei Hover */
}

.th-link-btn button:hover {
    background-color: var(--e-global-color-accent); /* Hintergrundfarbe des Buttons bei Hover */
}


/***********************************************************
 * The style of the button to open the reviews
 **********************************************************/

 #th-review #th-review-content {
    display: none;
}

#th-review:target #th-review-content {
    display: block;
}

#th-review:target a {
    display: none;
}

.th-link-btn a, .th-review a {
    text-decoration: none; /* Entfernt die Unterstreichung vom Link */
}

.th-link-btn button, .th-review-button {
    background-color: var(--th-color_btn_bg); /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe des Buttons */
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px; /* Abgerundete Ecken */
    transition: background-color 0.3s; /* Übergangseffekt bei Hover */
}

.th-link-btn button:hover, .th-review-button:hover {
    background-color: var(--e-global-color-accent); /* Hintergrundfarbe des Buttons bei Hover */
}


/***********************************************************
 * The style of the header menu
 **********************************************************/

.th-hfe-header a.hfe-menu-item {
    background-color: #77C5D5 !important;
}


/***********************************************************
 * The style of the footer menu
 **********************************************************/

.th-hfe-footer a.hfe-menu-item {
    background-color: #77C5D5 !important;
}



/**********************************************************************************
 * Disable Botiga-generated headers
 *
 * In file: botiga/inc/modules/hf-builder/components/header/header-builder/css.php
 * header structures are generated. 
 * The following CSS rules appley if screen width >  1024
 * .bhfb-header.bhfb-mobile -> display: block
 * .bhfb-header.bhfb-desktop -> display: none;
 **********************************************************************************/

 .bhfb-header.bhfb-mobile {
    display: none !important;
 }

 .bhfb-header.bhfb-desktop {
    display: none !important;
 }


/****************************************************************
 * Formatting of the descriptio of the product
 * Text blocks could be separated by <blockquote> elements.
 * To include an empty line, use <blockquote>&zwnj;</blockquote>
 ****************************************************************/

.th-description blockquote {
    margin-bottom: 16px;
}