//
// Platz für eigene Style Angaben in SCSS-Notation
//
// Alle Änderungen hier müssen anschließend mit einem SCSS-Compiler
// (z.B. dem JTL-Theme-Editor Plugin) nach my-nova.css kompiliert werden
// --------------------------------------------------

// Lädt Core-Funktionen
@import '../../../../NOVA/themes/base/sass/functions';

// Lädt "my-nova"-Variablen. Hier können Variablen aus Bootstrap und dem NOVA-Theme überschrieben werden.
@import "variables";

// Lädt Style Angaben des Themes, hier "clear".
@import '../../../../NOVA/themes/clear/sass/allstyles';
// Für die anderen Themes müssen neben der "allstyles" des Themes auch die jeweiligen Regeln aus der "theme.scss"
// (z.B. für blackline aus der blackline.scss) übernommen werden.
// @import '../../../../NOVA/themes/blackline/sass/allstyles';
// @import '../../../../NOVA/themes/midnight/sass/allstyles';

// my-nova Theme
// Hier können alle Style-Angaben notiert werden, die nur Auswirkungen auf dieses Theme haben
// ------------------- Beginn eigenes CSS ----------------------------

// --- Globale Anpassungen ---
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// --- Header & Navigation (Modern & Glassmorphism) ---
header {
  background-image: url('https://stoffhaus-hanke.de/media/image/storage/opc/header/headerfinal.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  
  // Ein sanftes Overlay, damit der Header-Text besser lesbar ist, falls das Bild unruhig ist
  &::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 100%);
    z-index: 0;
  }
  
  > * {
    position: relative;
    z-index: 1;
  }
}

// Sticky Header Verfeinerung (falls im Backend aktiviert)
#header-wrapper.is-sticky {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  box-shadow: $box-shadow-sm;
  transition: all 0.3s ease;
}

#header-top-bar {
  background-color: $footer-bg-color;
  color: $white;
  padding: 8px 0;
  
  .ara-topinfo {
    font-weight: 500;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    
    li {
      display: inline-flex;
      align-items: center;
      color: $white;
    }
    
    a {
      color: $white;
      text-decoration: none;
      transition: $transition-base;
      &:hover { color: $secondary; }
    }
    
    i { margin-right: 6px; }
  }
}

#shop-logo {
  border-radius: $border-radius-lg;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px); // Glassmorphism Effekt
  padding: 10px;
  box-shadow: $box-shadow-sm;
  transition: $transition-base;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $box-shadow;
  }
}

header .nav-link {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  color: $header-color;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px; // Pillen-Form für moderne Navigation
  padding: 8px 16px !important;
  margin: 0 4px;
  transition: $transition-base;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  
  &:hover, &.active {
    background-color: $white;
    color: $primary;
    transform: translateY(-2px);
    box-shadow: $box-shadow-sm;
  }
}

// Mega-Menu (Dropdowns) Animation & Styling
.dropdown-menu {
  border: none;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
  animation: fade-in-up 0.3s ease;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.secure-checkout-topbar {
  border-radius: $border-radius-lg;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: $box-shadow-sm;
}

// --- Suchleiste (Prominent & Einladend) ---
#search-form {
  .form-control {
    border-radius: 30px 0 0 30px;
    border: 1px solid #e0e0e0;
    padding: 10px 20px;
    background-color: #f9f8f6;
    transition: all 0.3s ease;
    &:focus {
      background-color: #ffffff;
      border-color: $secondary;
      box-shadow: 0 0 0 3px rgba($secondary, 0.2);
    }
  }
  .btn-search {
    border-radius: 0 30px 30px 0;
    background: $primary;
    color: $white;
    border: 1px solid $primary;
    transition: $transition-base;
    &:hover {
      background: darken($primary, 8%);
      border-color: darken($primary, 8%);
    }
  }
}

// --- Buttons ---
.btn {
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 30px; // Moderne abgerundete Buttons
  transition: $transition-base;
  
  &.btn-primary, 
  #article_buyfield .choose_quantity .submit,
  button[name="inWarenkorb"] {
    background-color: $primary !important;
    border-color: $primary !important;
    color: $white !important;
    box-shadow: 0 4px 12px rgba($primary, 0.3);
    
    &:hover {
      background-color: darken($primary, 8%) !important;
      border-color: darken($primary, 8%) !important;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba($primary, 0.4);
    }
  }
}

// --- Produktboxen (Modernes Card-Design mit Fokus auf Texturen) ---
.productbox {
  border: none;
  border-radius: $border-radius-lg;
  background: $white;
  box-shadow: $box-shadow-sm;
  transition: $transition-base;
  overflow: hidden;
  margin-bottom: 30px;
  
  // Image Zoom Effekt für Stoffe
  .productbox-image {
    overflow: hidden;
    border-radius: $border-radius-lg $border-radius-lg 0 0;
    img {
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
  }
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: $box-shadow;
    
    .productbox-image img {
      transform: scale(1.08); // Sanfter Zoom auf die Stoffstruktur
    }
  }
  
  .productbox-title {
    font-family: $headings-font-family;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 15px;
  }
  
  .price {
    font-weight: 600;
    color: $primary;
    font-size: 1.2rem;
  }

  // Elegante Ribbons (Sale, Neu)
  .ribbon {
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    padding: 4px 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    &.ribbon-sale { background-color: #e74c3c; color: white; }
    &.ribbon-new { background-color: $secondary; color: white; }
  }
}

// --- Artikeldetailseite (PDP - Product Detail Page) ---
.product-detail {
  // Kaufbox (Sticky auf Desktop für bessere Conversion)
  @media (min-width: 992px) {
    #buy-form {
      position: sticky;
      top: 120px; // Abstand zum (sticky) Header
      padding: 25px;
      background: #ffffff;
      border-radius: $border-radius-lg;
      box-shadow: $box-shadow-sm;
      border: 1px solid rgba(0,0,0,0.03);
    }
  }

  // Großer, auffälliger Warenkorb-Button
  #add-to-cart button {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  // Preis-Darstellung
  .price_wrapper {
    .price {
      font-size: 2.2rem;
      font-weight: 700;
      color: $primary;
    }
  }
}

// --- Footer ---
#footer {
  background-color: $footer-bg-color;
  color: $footer-color;
  padding-top: 60px;
  
  .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: $white;
    border-radius: 30px;
    
    &::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }
    
    &:focus {
      background-color: rgba(255, 255, 255, 0.15);
      border-color: $secondary;
      box-shadow: 0 0 0 0.2rem rgba($secondary, 0.25);
    }
  }
  
  .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) {
    label {
      background: transparent;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  a {
    color: rgba(255, 255, 255, 0.8);
    transition: $transition-base;
    &:hover:not(.btn) {
      color: $secondary; // Warmer Hover-Effekt im Footer
      text-decoration: none;
    }
  }
  
  .productlist-filter-headline,
  .newsletter-footer-heading,
  .h3, h3 {
    color: $white;
    font-family: $headings-font-family;
  }
}

// --- Layout Wrapper ---
@media screen and (min-width: 1200px) {
  #main-wrapper {
    background-image: url('https://stoffhaus-hanke.de/media/image/storage/opc/header/stoffballen.png'); 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  
  #content {
    max-width: 1200px;
    margin: 40px auto;
    background-color: rgba(255, 255, 255, 0.97); // Leicht transparent für Eleganz
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow;
    padding: 30px;
  }
  
  .breadcrumb-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow-sm;
    padding: 10px 20px;
  }
}

// --- Custom Scrollbar (Webkit) ---
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: $body-bg; 
}
::-webkit-scrollbar-thumb {
  background: rgba($primary, 0.5); 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: $primary; 
}

// --- Mobile Menu Toggle ---
.navbar-toggler {
  border: none;
  background: transparent;
  &:focus {
    outline: none;
    box-shadow: none;
  }
  .icon-bar {
    background-color: $header-color;
    height: 2px;
    border-radius: 1px;
    transition: $transition-base;
  }
}

// --- Forms & Checkout (Trust & Clarity) ---
.form-control {
  border-radius: $border-radius-sm;
  border: 1px solid #e0e0e0;
  padding: 12px 15px;
  transition: $transition-base;
  &:focus {
    border-color: $secondary;
    box-shadow: 0 0 0 3px rgba($secondary, 0.15);
  }
}

.checkout-wrapper, .checkout-container {
  background: $white;
  border-radius: $border-radius-lg;
  box-shadow: $box-shadow-sm;
  padding: 30px;
  margin-bottom: 30px;
}

// --- Alerts & Notifications ---
.alert {
  border: none;
  border-radius: $border-radius-sm;
  box-shadow: $box-shadow-sm;
  &.alert-success {
    background-color: rgba($primary, 0.1);
    color: darken($primary, 10%);
    border-left: 4px solid $primary;
  }
  &.alert-info {
    background-color: rgba($secondary, 0.1);
    color: darken($secondary, 20%);
    border-left: 4px solid $secondary;
  }
}