/*
Theme Name: Proactiveaudio Multishop Theme
Author: Netzspitze 
Author URI: https://netzspitze.de
Version: 1.0.0
*/

@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Erzwinge das Scannen von Dateien in den Plugins */
@source "../../plugins/";
@source "../../plugins/netzspitze-**/*.{php,html,js,css.php}";
@source "../**/*.{php,html,js}";

/* >>> Variablen korrigiert: Quotes entfernt + zentrale Button-Tokens + Alias */
:root{
  /* Brand */
  --brand-color: #00448c;
  --brand-color-600: #64a8f0;

  /* Buttons (einheitlich) */
  --btn-fg: #fff;
  --btn-radius: .5rem; /* auf 0 setzen, wenn komplett kantig gewünscht */
  --btn-py: .9 rem;
  --btn-px: 1.6 rem;
  --btn-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  --btn-font-size:1rem;
  --btn-font-weight:600;

  /* Alias für Altcodes */
  --color-primary: var(--brand-color);
}

/* Woo Tabs */
.woocommerce-tabs .tabs { display: block; }
.woocommerce-tabs .tabs li { display: block; margin-bottom: 10px; }
.woocommerce-tabs .panel { display: block; }

/* Fonts */
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url('/wp-content/themes/paa-tailwind/font/montserrat-v29-latin-200.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 200; src: url('/wp-content/themes/paa-tailwind/font/montserrat-v29-latin-200italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('/wp-content/themes/paa-tailwind/font/montserrat-v29-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('/wp-content/themes/paa-tailwind/font/montserrat-v29-latin-italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('/wp-content/themes/paa-tailwind/font/montserrat-v29-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('/wp-content/themes/paa-tailwind/font/montserrat-v29-latin-500italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('/wp-content/themes/paa-tailwind/font/montserrat-v29-latin-700.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('/wp-content/themes/paa-tailwind/font/montserrat-v29-latin-700italic.woff2') format('woff2'); }

body{ font-family: 'Montserrat', sans-serif; height: 100%; }
html{ background-color:#f5f5f5; }

header{ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); }
nav{ padding-top:25px; padding-bottom:20px; }
nav div{ border-color: #fff !important; }
nav a.relative{ font-weight: 900; text-transform: uppercase; letter-spacing:0.1em; }



@media (max-width: 1300px) {
  header .bg-primary-color .mx-auto { flex-direction: column; align-items: center; gap: 1px; height: auto; padding-bottom: 3px; }
  header .bg-primary-color p { flex-direction: row; text-align: center; padding-left: 0px; width: 100%; }
  header .bg-primary-color p::before { position: static; }
  .free-returns::before{ background-size:cover; widh: 20px; height: 20px; position:relative; left:-5px; }
}
@media (max-width: 900px) { header .bg-primary-color { display: none; } }

/* Shop page */
/* Quick fix for product grid */
.group.rounded-lg.border.border-gray-200.bg-white{ border: none; border-radius:5px; }

/* Stock */
span.in-stock, span.out-of-stock, span.on-backorder { position: relative; display: flex; align-items: center; justify-content: center; }
.single-product .out-of-stock, .single-product .in-stock, .single-product .on-backorder { justify-content: left; margin-bottom: 20px; }
span.in-stock::before, span.out-of-stock::before, span.on-backorder::before { content: ""; background: url("/wp-content/themes/paa-tailwind/icons/in-stock.svg") no-repeat center; background-size: contain; width: 40px; height: 40px; margin-right: 5px; }
span.out-of-stock::before { background: url("/wp-content/themes/paa-tailwind/icons/preorder.svg") no-repeat center; }
span.on-backorder::before { background: url("/wp-content/themes/paa-tailwind/icons/restock.svg") no-repeat center; }
span.out-of-stock { color: #e47700; }
span.on-backorder { color: #d3b106; }

/* >>> Reset entschärft: kein !important, stattdessen Variable */
button{ border-radius: var(--btn-radius); }

section.related-products{ border: solid 2px var(--brand-color); margin-bottom:30px; }
.page-template-default section.related-products { grid-column: span 4 / span 4; }
.home section.related-products .grid .group h3{ font-size: 1.15em; }

@media (max-width: 640px) {
  section.related-products{ width: 85%; margin: 0 auto; padding: 30px; }
}

.text-indigo-400, .text-indigo-600{ color: var(--brand-color); }
.brand-color{ background-color: var(--brand-color); }

/* Product single page */
.product-container main{ background-color: white; border-radius: 5px; padding-bottom: 20px; margin-bottom: 40px; margin-top:40px; }
.product-container img { object-fit: contain !important; }
.product-container .force-contain { display:grid; place-items:center; overflow:hidden; }
.product-container .force-contain > img { width:100% !important; height:100% !important; object-fit:contain !important; }

/* Nav */
.current-menu-item{ position: relative; display: inline-block; top: 22px; }
.current-menu-item:after{ display: none; }
footer .current-menu-item{ position:revert; font-weight:900; }
footer .current-menu-item:after{ display: none; }

/* Mobile Nav */
#mobile-menu { 
    background-color: var(--brand-color); 
    margin-top: -26px; 
}

/* Text weiß machen */
#mobile-menu div span.text-lg { 
    color: white; /* war: --brand-color (ohne var()) */
}

#mobile-menu ul li { 
    border-bottom: 2px solid white; 
}

#mobile-menu ul li a { 
    text-transform: uppercase; 
    color: white; /* Jetzt weiß statt schwarz */
    font-weight: 600; 
    letter-spacing: 2px; 
    text-align: center; 
}

/* Hover in Sekundärfarbe */
#mobile-menu ul li a:hover {
    color: #64a8f0; /* Eure Sekundärfarbe */
}

/* Kontaktbereich - weiße Schrift */
.mobile-menu-contact {
    color: white;
    line-height: 1.6;
}

.mobile-menu-contact p {
    color: white;
}

.mobile-menu-contact a {
    color: white;
    text-decoration: none; /* Keine Unterstreichung */
}

/* Links im Kontaktbereich - Hover Sekundärfarbe */
.mobile-menu-contact a:hover {
    text-decoration: none; /* Auch beim Hover keine Unterstreichung */
}

/*B2B-Quatsch ausblenden*/
#mobile-menu ul:after {
  content: none !important;
  display: none !important;
}

/* Page template default */
.page-template-default main{ background-color: white; border-radius: 5px; margin-bottom: 30px; margin-top:40px; }
.page-template-default main h1{ color: var(--brand-color); margin: 30px 0px; }
.page-template-default hr.wp-block-separator{ border-color: var(--brand-color); margin: 25px 0px; }

/* Shop Table */
table.shop_table{ background-color: #fafafa; border: none !important; }
table.shop_table thead{ background-color: #d2d2d2; }
table.shop_table tbody tr.woocommerce-cart-form__cart-item.cart_item td{ border-bottom: 1px solid var(--brand-color) !important; }
table.shop_table .product-thumbnail img{ min-height: 130px; min-width: 130px; }
table.shop_table  a.remove{ background-color: var(--brand-color); color: #fff !important; width:30px; height: 30px; line-height: 1.3; }
table.shop_table td.actions{ padding:20px 0px; background-color: #fff; }

/* (Alt) Woo Buttons – bleiben vorerst stehen, werden vom Unified Block später übersteuert */
table.shop_table td.actions button.button, .woocommerce button.button{
  background-color: #dbdbdb;
  text-transform: uppercase;
  font-size: 10pt;
  padding: 20px 40px !important;
  border:none;
}
table.shop_table td.actions button.button:hover, .woocommerce button.button:hover{ background-color: #7a7a7a !important; }

table.shop_table #coupon_code{ min-width: 200px; min-height: 53px; border: none; margin-right: 20px }
.cart_totals h2{ display: none; }
.cart_totals .shop_table tr th{ background-color: #dbdbdb; }

/* Formulare */ 
[type='text'], input:where(:not([type])), [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select{
  border: none; background-color: #f5f5f5;
}

/* Contact Form */
#contactForm, .wpcf7 { margin: 0 auto; background: #e6e6e6; padding: 30px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-width: 800px; }
#contactForm p, .wpcf7 p { margin-bottom: 20px; }
#contactForm label { display: block; margin-bottom: 8px; color: #333; }
.wpcf7 input[type="text"], #contactForm input[type="text"],
.wpcf7 input[type="email"], #contactForm input[type="email"],
.wpcf7 input[type="tel"], #contactForm input[type="tel"],
.wpcf7 textarea, #contactForm textarea{
  width: 100%; padding: 12px; border: none; background: #fff; font-size: 16px;
}
.wpcf7 textarea, #contactForm textarea { height: 150px; resize: vertical; }

/* (Alt) eigene CF7-Button-Regel – bleibt, Hover unten vereinheitlicht */
.wpcf7 input[type="submit"], #contactForm input[type="submit"] {
  width: 100%;
  background: var(--brand-color);
  color: #fff;
  border: none;
  padding: 15px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.3s ease;
}
/* >>> Hover vereinheitlicht */
.wpcf7 input[type="submit"]:hover, #contactForm input[type="submit"]:hover { background: var(--brand-color-600); }

#form-message { margin-top: 20px; font-size: 14px; color: #5B2A5D; }
.wpcf7 .honeypot, #contactForm .honeypot { display: none; }

@media (max-width: 600px) {
  .wpcf7, #contactForm { padding: 20px; }
  .wpcf7 input[type="submit"], #contactForm input[type="submit"] { font-size: 16px; padding: 12px; }
}

.wp-block-columns p a{ text-decoration: underline; color: #E47700; }
.page-template-default main p + p{ margin-top: 10px; }
nav a.relative{ font-weight: 900; text-transform: uppercase; letter-spacing:0.1em; }

/* Woocommerce notices */
.woocommerce-error, .woocommerce-info, .woocommerce-message, #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment{
  background-color: white; border: 3px solid var(--brand-color);
}
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{
  background-color: var(--brand-color); color: black;
}
#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before{
  border: 1em solid var(--brand-color); border-right-color: transparent; border-left-color: transparent; border-top-color: transparent;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message{ color: black !important; }

/* (Alt) Woo Button Style – wird von Unified Block später überschrieben */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{
  color: white; background-color: var(--brand-color);
}
.woocommerce #payment .button{ background-color: var(--brand-color); }

/* Sticky Kontakt Slider */
body #new_here { 
    position: fixed; 
    right: 0px; 
    top: 50%; 
    width: 40px; 
    height: 160px; 
    background: #00448c !important; /* STAEDTLER Blau */
    z-index: 20; 
    color: #fff; 
    border-radius: 5px 0px 0px 5px; 
}
body #new_here:hover { 
    width: 200px;
    background: #64a8f0 !important; /* STAEDTLER Blau Hover */
}
body #new_here .content { width: 220px; }
body #new_here .content .opener { position: absolute; color: #fff; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); bottom: 70px; left: -20px; font-size: 16px; }
body #new_here_content { float: left; padding: 20px 0 0 50px; font-size: 12px; line-height: 20px; }
body #new_here_opener{ text-transform: uppercase; }

/* Links im Sticky Slider - immer weiß, nicht unterstrichen */
body #new_here_content a {
    color: #fff !important;
    text-decoration: none !important;
}
body #new_here_content a:hover {
    color: #fff !important;
}

@media screen and (max-width: 66.25em){ body #new_here { display:none; } }

/* Optional: Glatte Übergänge für das Ein- und Ausblenden */
#back-to-top { transition: opacity 0.3s ease, visibility 0.3s ease; }

.footer-widget-title{ color: #fff; text-transform: uppercase; font-weight: 600; margin-bottom: 0; font-size: 1.5em; }
.footer-widget li a{ color: #FFF !important; text-decoration: none; font-size: 16px; }
.footer-widget li a:hover { color: var(--brand-color) !important; }

/* (Alt) spezieller Checkout-Button – wird unten vereinheitlicht */
a.checkout-button.button.alt.wc-forward{ background-color: var(--brand-color) !important; }

/* Search */
.searchbar{ width: 500px; align-items: center; height: 100%; }
.searchbar .aws-container{ width: 100%; }
.searchbar .aws-container form{ border-left: 5px solid var(--brand-color) !important; }
.searchbar .aws-container form input.aws-search-field{ border-width: 0px; }
.aws-search-result .aws_result_item .aws_result_title{ color: rgb(17 24 39); font-weight: 600; }
.aws-search-result .aws_result_item.aws_search_more a{ color: var(--brand-color) !important; font-weight: 600; font-size:1.2em; background-color: #e3e3e3; }
.searchbar .aws-container form .aws-search-btn{ background-color: black; }
.searchbar .aws-container form .aws-search-btn_icon{ fill: white; }

.brand-filter{ display: none !important; }
.multishop .brand-filter{ display: block !important; }
.bg-footer-color { --tw-bg-opacity: 1; background-color: rgb(55 55 55 / var(--tw-bg-opacity)); }

.wp-block-heading{ color: #fff; text-transform: uppercase; font-weight: 600; margin-bottom: 0; font-size: 1.5em; }

/* Quick Fix Colspan */
.page-template-default .xl\:col-span-3 {
  @media (width >= 80rem) { grid-column: span 4 / span 4; }
}

/* My Account */
.woocommerce-MyAccount-navigation ul{ width: 90%; padding-right: 20%; border-right: 1px solid #eaeaea; }
.woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link{ font-weight:800; margin-bottom: 10px; }
.woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link.is-active{
  border-bottom: solid 3px var(--brand-color); text-transform: uppercase; letter-spacing: 0.06em;
}

/* Ordering "Sort" entfernen" */
form.woocommerce-ordering { display: none !important; }
#menu-button { display: none !important; }
[role="menu"][aria-labelledby="menu-button"] { display: none !important; }
a[href*="orderby="] { display: none !important; }

/* Abstand über Produktseite an andere Seiten anpassen */
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.tax-product_tag .site-main { margin-top: 2rem; }

/* ======================================================================= */
/* >>> Unified Button System – EIN Stil für Woo, Core & CF7 (ganz unten!)  */
/* ======================================================================= */

@layer components{
  :where(
    .btn,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    a.checkout-button.button.alt.wc-forward,
    input[type="submit"],
    button[type="submit"]
  ){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    font-weight:600;
    line-height:1;
    text-decoration:none;
    cursor:pointer;

    color: var(--btn-fg);
    background: var(--brand-color);
    border: 1px solid var(--brand-color);
    border-radius: var(--btn-radius);
    padding: var(--btn-py) var(--btn-px);
    box-shadow: var(--btn-shadow);
    transition: background-color .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
  }

  :where(
    .btn,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    a.checkout-button.button.alt.wc-forward,
    input[type="submit"],
    button[type="submit"]
  ):hover{
    background: var(--brand-color-600);
    border-color: var(--brand-color-600);
  }

  :where(
    .btn,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    a.checkout-button.button.alt.wc-forward,
    input[type="submit"],
    button[type="submit"]
  ):active{ transform: translateY(1px); }

  :where(
    .btn,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    a.checkout-button.button.alt.wc-forward,
    input[type="submit"],
    button[type="submit"]
  ):focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 35%, white);
  }

  /* Varianten – falls du sie nutzen willst */
  .btn--sm{ padding:.55rem .9rem; font-size:.9rem; }
  .btn--lg{ padding:.9rem 1.35rem; font-size:1.05rem; }
  .btn--block{ width:100%; }

  .btn--secondary{
    color:#111827;
    background:#e5e7eb;
    border-color:#9ca3af;
  }
  .btn--secondary:hover{
    background:#d1d5db;
    border-color:#9ca3af;
  }

  /* Disabled angleichen */
  :where(.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button)[disabled],
  :where(button, input[type="submit"]):disabled,
  :where(.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button).disabled{
    opacity:.6; cursor:not-allowed; box-shadow:none; transform:none;
  }
}

/* ======================================================================= */
/* Ende: Unified Button System                                             */
/* ======================================================================= */

/* === FINAL BUTTON RULES – ganz unten, außerhalb von @layer ================= */

:where(
  .btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  a.checkout-button.button.alt.wc-forward,
  input[type="submit"],
  button[type="submit"]
){
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  font-weight:var(--btn-font-weight) !important;
  font-size:var(--btn-font-size) !important;
  line-height:1.3 !important;
  text-decoration:none !important;
  cursor:pointer !important;

  color:var(--btn-fg) !important;
  background:var(--brand-color) !important;
  border:1px solid var(--brand-color) !important;
  border-radius:var(--btn-radius) !important;
  padding:var(--btn-py) var(--btn-px) !important;
  box-shadow:var(--btn-shadow) !important;

  transition:background-color .2s ease, border-color .2s ease, transform .06s ease, box-shadow .15s ease !important;
}

:where(
  .btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  a.checkout-button.button.alt.wc-forward,
  input[type="submit"],
  button[type="submit"]
):hover{
  background:var(--brand-color-600) !important;
  border-color:var(--brand-color-600) !important;
}

:where(
  .btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button
):active{ transform:translateY(1px) !important; }

:where(
  .btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button
):focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-color) 40%, white) !important;
}

/* Größen/Varianten (optional) */
.btn--sm{ padding:.65rem 1.2rem !important; font-size:.9rem !important; }
.btn--lg{ padding:1.1rem 1.8rem !important; font-size:1.1rem !important; }
.btn--block{ width:100% !important; }

.btn--secondary{
  color:#111827 !important;
  background:#f3f4f6 !important;
  border-color:#d1d5db !important;
}
.btn--secondary:hover{
  background:#e5e7eb !important;
  border-color:#9ca3af !important;
}

/* Abstand neben der Mengen-Auswahl */
.woocommerce div.product form.cart .quantity + .single_add_to_cart_button{
  margin-left:.75rem;
}

/* Mobil: untereinander */
@media (max-width:640px){
  .woocommerce div.product form.cart{
    display:grid; grid-template-columns:1fr; gap:.75rem;
  }
  .woocommerce div.product form.cart .quantity + .single_add_to_cart_button{
    margin-left:0;
  }
}

@media screen and (max-width: 1279px) {
    /* Link in jeder Navigation ausblenden */
    li:has(a[href*="quick-order"]),
    a[href*="quick-order"] {
        display: none !important;
    }
    
    /* Formular auf der Seite selbst ausblenden */
    #quick-order-form,
    table.quick-order {
        display: none !important;
    }
}