/*
Theme Name: Divi Child Theme
Theme URI: http://treehighroots.de
Description: Theme by Andreas Geibert
Author: treehighroots Andreas Geibert
Author URI: http://treehighroots.de
Template: Divi
Version: 2.0.55
*/

/* ==========================================
   TABLE OF CONTENTS:
   
   1. Component Styles
      1.1 Icon New
      1.2 APO Now Teaser
      1.3 Buy Button Styles
      
   2. Layout Elements
      2.1 Position Adjustments
      2.2 Header Elements
      
   3. Media Queries
      3.1 Mobile (max-width: 980px)
      3.2 Desktop Responsive Breakpoints
============================================ */

/* ==========================================
   1. COMPONENT STYLES
============================================ */

body.et_divi_theme {
    color: #626262;
}

body.et_divi_theme .et_pb_with_background {
    color: white;
}


/* 1.1 Icon New */
.icon-new {
    position: relative;
}

.icon-new::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    transform: translate(0, -50%);
    right: 7%;
    content: 'Neu';
    height: 100px;
    width: 100px;
    background-color: #e50150;
    color: #fff;
    border-radius: 50%;
    font-size: 25px;
    z-index: 5;
}

/* 1.2 APO Now Teaser */
.aponow-teaser {
    position: relative;
    margin-top: 60px;
    padding-top: 3rem !important;
}

.aponow-teaser h2 {
    color: white;
}

.aponow-teaser::before {
    position: absolute;
    top: 0;
    transform: translate(360px, -50%);
    left: 50%;
    content: '';
    background: url('/wp-content/themes/Divi_child/assets/images/oct-cart.svg') no-repeat;
    background-size: 65px;
    background-position: 45% 48%;
    height: 125px;
    width: 125px;
    background-color: #e50150;
    border-radius: 50%;
}

/* 1.3 Buy Button Styles */
.oct-buy-btn {
    position: fixed;
    right: 0.5882352941rem;
    bottom: 0.5882352941rem;
    z-index: 9999;
}

.oct-buy-btn--header {
    position: absolute;
    right: calc(0% - 250px);
    top: 25px;
    z-index: 9999;
    transition: top 0.6s ease;
}

.et-fixed-header .oct-buy-btn--header {
    top: 8px;
}

/* Button styling */
body .oct-buy-btn--header button,
body .oct-buy-btn--header a {
    padding: 8px 30px 8px 15px !important;
    border-radius: 26px;
    color: white !important;
    background-color: #e1013e !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* hover effect */
body .oct-buy-btn--header button:hover,
body .oct-buy-btn--header a:hover {
    background-color: #007cc4 !important;
}


body .oct-buy-btn--header button sup,
body .oct-buy-btn--header a sup {
    font-size: 12px !important;
}

body .oct-buy-btn button,
body .oct-buy-btn a {
    display: inline-block;
    background-color: #e1013e;
    color: rgb(255, 255, 255);
    font-family: "Co Text";
    font-size: 14px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 26px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

body .oct-buy-btn button sup,
body .oct-buy-btn a sup {
    font-size: 8px;
    font-weight: 400;
    color: #fff;
}

body .oct-buy-btn button.et_pb_button:after,
body .oct-buy-btn a.et_pb_button:after {
    line-height: 1.4em;
}

.et_pb_text_inner p > a,
.et_pb_text_inner p strong > a {
    color: #007cc4;
    transition: color 0.3s ease;
}
.et_pb_text_inner p > a:hover,
.et_pb_text_inner p > a:focus,
.et_pb_text_inner p strong > a:hover,
.et_pb_text_inner p strong > a:focus {
    color: #e50150;
}

/* ==========================================
   2. LAYOUT ELEMENTS
============================================ */

/* 2.1 Position Adjustments */
.et_pb_scroll_top.et-pb-icon,
.pflichttext {
    right: inherit !important;
    left: 16px;
}

/* 2.2 Header Elements */
#page-container #top-header .container #et-secondary-menu #et-secondary-nav li:first-child {
    background-color: #e1013e;
}

.logo_container a {
    position: relative;
    z-index: 99;
}

/* ==========================================
   3. MEDIA QUERIES
============================================ */

/* 3.1 Mobile (max-width: 980px) */
@media (max-width: 980px) {
    /* Icon New - Mobile */
    .icon-new {
        margin-top: 1.5rem;
    }

    .icon-new::before {
        right: 3%;
    }

    /* APO Now Teaser - Mobile */
    .aponow-teaser {
        padding-top: 2rem !important;
    }

    .aponow-teaser::before {
        height: 100px;
        width: 100px;
        background-size: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Header elements - Mobile */
    .et-fixed-header .mobile_menu_bar {
        padding-bottom: 5px;
    }

    .et_secondary_nav_only_menu #main-header {
        top: 92px !important;
    }
    
    /* Header styling - Mobile */
    #page-container #main-header #et-top-navigation #et_top_search {
        background-color: #007cc4;
    }
    
    #page-container #main-header #et_mobile_nav_menu .mobile_nav .mobile_menu_bar {
        background-color: #007cc4;
    }
}

/* 3.2 Desktop Responsive Breakpoints */
@media screen and (min-width: 980px) {
    #et_search_icon:after {
        content: " ";
    }
}

@media only screen and (min-width: 981px) and (max-width: 1023px) {
    #page-container #main-header .et_menu_container #et-top-navigation {
        transform: translateX(-11rem);
    }
}

@media screen and (min-width: 1024px) {
    #page-container #main-header .et_menu_container #et-top-navigation {
        transform: translateX(-13rem);
    }
}

@media screen and (min-width: 1050px) {
    #page-container #main-header .et_menu_container #et-top-navigation {
        transform: translateX(-14rem);
    }
}

@media screen and (min-width: 1280px) {
    #page-container #main-header .et_menu_container #et-top-navigation {
        transform: translateX(-8rem);
    }
}