/* DARKFORGE GLOBAL VARIABLES & BASE STYLES */
:root {
   --df-bg-dark: #0e0e0e;
   --df-bg-medium: #1a1a1a;
   --df-bg-light: #252525;
   --df-accent: #ff9e00;
   --df-text-white: #ffffff;
   --df-text-gray: #cccccc;
   --df-border: #333333;
}

body {
   background-color: var(--df-bg-dark) !important;
   color: var(--df-text-white) !important;
   font-family: 'Open Sans', sans-serif;
}

a {
   color: var(--df-text-gray);
   transition: color 0.2s ease;
}

a:hover {
   color: var(--df-accent);
   text-decoration: none;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
   color: var(--df-text-white);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
}

/* Fix for white stripe at top if Body padding exists */
html,
body,
#main-wrapper {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   background-color: var(--df-bg-dark) !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
   width: 10px;
}

::-webkit-scrollbar-track {
   background: var(--df-bg-dark);
}

::-webkit-scrollbar-thumb {
   background: #333;
   border: 1px solid #444;
   border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--df-accent);
}

/* Bootstrap Overrides for Dark Mode */
/* CAREFUL SCOPING */
.card,
.card-gray,
.card-header,
.card-footer,
.jumbotron,
.bg-light,
.bg-white,
.content-wrapper {
   background-color: transparent !important;
   color: var(--df-text-white) !important;
}

/* Specific Card Handling */
.card-body {
   background-color: var(--df-bg-medium);
   border: 1px solid var(--df-border);
}

/* Forms */
.form-control,
.custom-select {
   background-color: #111 !important;
   color: #fff !important;
   border: 1px solid #444;
   border-radius: 2px;
}

.form-control:focus,
.custom-select:focus {
   border-color: var(--df-accent);
   box-shadow: 0 0 5px rgba(255, 158, 0, 0.4);
   background-color: #1a1a1a !important;
}

/* Buttons */
.btn-primary {
   background-color: var(--df-accent);
   border-color: var(--df-accent);
   color: #000;
   font-weight: bold;
   text-transform: uppercase;
}

.btn-primary:hover {
   background-color: #e68a00;
   border-color: #e68a00;
   color: #000;
}

.btn-secondary,
.btn-outline-secondary {
   background-color: #333;
   border-color: #444;
   color: #fff;
}

.btn-secondary:hover {
   background-color: #444;
   color: var(--df-accent);
}

/* Breadcrumbs */
.breadcrumb {
   background-color: transparent;
}

.breadcrumb-item.active {
   color: var(--df-accent);
}

.breadcrumb-item+.breadcrumb-item::before {
   color: #666;
}

/* --- SIDEBAR MODERNIZATION (SCOPED) --- */
.box-sidebar .list-group-item,
.box-sidebar .nav-item,
.box-sidebar .nav-link,
.box-sidebar .nav,
.snippets-categories .nav-item,
.snippets-categories .collapse {
   background-color: transparent !important;
   border: none !important;
   color: #ddd !important;
}

/* Base Link Style */
.box-sidebar .nav-link {
   padding: 12px 20px;
   border-left: 3px solid transparent;
   transition: all 0.3s ease;
   font-weight: 500;
}

/* Hover Effect - Slide & Lighten */
.box-sidebar .nav-link:hover {
   background-color: rgba(255, 255, 255, 0.05) !important;
   color: var(--df-accent) !important;
   border-left-color: rgba(255, 158, 0, 0.5);
   padding-left: 25px;
}

/* Active State - Orange Accent */
.box-sidebar .nav-link.active,
.box-sidebar .nav-item.active>.nav-link {
   background-color: rgba(255, 158, 0, 0.1) !important;
   color: var(--df-accent) !important;
   border-left-color: var(--df-accent);
   font-weight: bold;
}

/* Sub-Categories Indentation & Background */
.box-sidebar .nav .nav,
.snippets-categories .collapse {
   background-color: transparent !important;
   /* Was 0.2 opacity, but let's clear it first to avoid conflicts */
   padding-left: 0;
}

/* SUPERNOVA OPTION: Target EVERYTHING inside wrappers */

/* 1. Sidebar Supernova */
.snippets-categories .collapse.show,
.snippets-categories .card,
.snippets-categories .card-body {
   background-color: transparent !important;
   border: none !important;
}

.snippets-categories * {
   background-color: transparent !important;
   border: none !important;
}

/* Restore Input/Badge styles in Sidebar if needed (unlikely) */
.snippets-categories .badge {
   background-color: var(--df-accent) !important;
   color: #000 !important;
}


/* 2. Product Box Supernova */
.product-wrapper {
   background-color: transparent !important;
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
}

.product-wrapper * {
   background-color: transparent !important;
}

/* Restore Buttons/Badges/Inputs */
.product-wrapper .btn {
   background-color: var(--df-bg-medium) !important;
   /* Default btn background */
   border: 1px solid #444 !important;
}

.product-wrapper .btn-primary {
   background-color: var(--df-accent) !important;
   border-color: var(--df-accent) !important;
   color: #000 !important;
}

/* Restore Semantic Badge Colors (Bootstrap Classes) */
.product-wrapper .badge {
   border-radius: 4px;
   color: #fff !important;
}

.product-wrapper .badge-success {
   background-color: #28a745 !important;
}

.product-wrapper .badge-danger {
   background-color: #dc3545 !important;
}

.product-wrapper .badge-warning {
   background-color: #ffc107 !important;
   color: #000 !important;
}

.product-wrapper .badge-info {
   background-color: #17a2b8 !important;
}

/* JTL NOVA RIBBON CLASSES - RESTORED TO NATIVE */
/* We removed the overrides here to allow JTL Backend Configuration to control the colors. */
/* The layout and stacking are handled by layout/header.tpl and css/content.css */

/* RESTORED TRAFFIC LIGHT COLORS (User Request: "Original Flags" resulted in Grey, so we force Colors) */

/* NEW = Blue */
.product-wrapper .productbox-ribbon.ribbon-3,
.product-wrapper .main-ribbon.ribbon-3,
.product-wrapper .productbox-ribbon.new {
   background-color: #17a2b8 !important;
   /* Blue */
   color: #fff !important;
}

/* SALE = Red */
.product-wrapper .productbox-ribbon.ribbon-sale,
.product-wrapper .productbox-ribbon.sale {
   background-color: #dc3545 !important;
   /* Red */
   color: #fff !important;
}

/* STOCK / TOP = Green */
/* Mapping all potential Stock candidates to Green to ensure visibility */
.product-wrapper .productbox-ribbon.ribbon-1,
.product-wrapper .productbox-ribbon.ribbon-4,
.product-wrapper .productbox-ribbon.ribbon-5,
.product-wrapper .productbox-ribbon.ribbon-8,
.product-wrapper .productbox-ribbon.ribbon-stock,
.product-wrapper .productbox-ribbon.instock {
   background-color: #28a745 !important;
   /* Green */
   color: #fff !important;
}

/* TIGHTER GRID SPACING (User Request) */
.product-wrapper,
.productbox {
   margin-bottom: 0.5rem !important;
   /* Extremely tight */
}

/* Ensure columns don't have excessive padding */
.product-list-box {
   margin-bottom: 0px !important;
}

/* CYBER-SAMURAI SIDEBAR V2 (Clear Hierarchy) */

.box-categories,
.box-sidebar,
.snippets-categories {
   background: rgba(5, 5, 5, 0.98) !important;
   /* Vantablack look */
   border: 1px solid #333 !important;
   border-radius: 0px !important;
   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
   padding: 0 !important;
   margin-bottom: 2rem !important;
}

/* --- LEVEL 1: MAIN CATEGORIES (The "Headers") --- */
.box-categories .nav-item .nav-link,
.snippets-categories .nav-item .nav-link {
   font-size: 0.95rem;
   font-weight: 700;
   text-transform: uppercase;
   /* Distinguish Main */
   letter-spacing: 1px;
   color: #ccc !important;
   padding: 16px 20px 16px 25px !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
   /* Subtle separator */
   background: transparent !important;
   transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
   position: relative;
   overflow: hidden;
}

/* Blade Indicator for Main */
.box-categories .nav-link::before,
.snippets-categories .nav-link::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 4px;
   background: #ff9e00;
   transform: scaleY(0);
   transition: transform 0.2s ease-out;
   box-shadow: 0 0 15px #ff9e00;
   z-index: 2;
}

/* Hover Main */
.box-categories .nav-link:hover,
.snippets-categories .nav-link:hover {
   color: #fff !important;
   background: linear-gradient(90deg, rgba(255, 158, 0, 0.08) 0%, transparent 100%) !important;
   padding-left: 35px !important;
   text-shadow: 0 0 8px rgba(255, 158, 0, 0.4);
}

.box-categories .nav-link:hover::before,
.snippets-categories .nav-link:hover::before {
   transform: scaleY(1);
}

/* Active Main */
.box-categories .nav-item.active>.nav-link,
.snippets-categories .nav-item.active>.nav-link {
   color: #ff9e00 !important;
   background: linear-gradient(90deg, rgba(255, 158, 0, 0.15) 0%, transparent 100%) !important;
   padding-left: 35px !important;
}

.box-categories .nav-item.active>.nav-link::before,
.snippets-categories .nav-item.active>.nav-link::before {
   transform: scaleY(1);
}

/* --- LEVEL 2: SUB CATEGORIES (The "Data Points") --- */
/* Target links inside collapse/sublists */
.box-categories .collapse .nav-link,
.snippets-categories .collapse .nav-link,
.snippets-categories .nav-item .nav-item .nav-link {
   font-size: 0.85rem;
   font-weight: 400;
   /* Lighter weight */
   text-transform: none;
   /* Normal case */
   letter-spacing: 0;
   color: #888 !important;
   padding: 10px 10px 10px 30px !important;
   /* More indent */
   border-bottom: none !important;
   border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
   /* Tech Guide Line */
   margin-left: 25px;
   /* Visual Offset */
}

/* Submarker: Tech Dot instead of Blade */
.box-categories .collapse .nav-link::before,
.snippets-categories .collapse .nav-link::before {
   content: '';
   position: absolute;
   left: -4px;
   /* On the guide line */
   top: 50%;
   transform: translateY(-50%) scale(0);
   width: 7px;
   height: 7px;
   border-radius: 50%;
   /* Dot */
   background: #ff9e00;
   box-shadow: 0 0 5px #ff9e00;
   transition: transform 0.2s cubic-bezier(0.5, 1.5, 0.5, 1.5);
   /* Pop effect */
}

/* Hover Sub */
.box-categories .collapse .nav-link:hover,
.snippets-categories .collapse .nav-link:hover {
   color: #fff !important;
   padding-left: 36px !important;
   background: transparent !important;
}

.box-categories .collapse .nav-link:hover::before,
.snippets-categories .collapse .nav-link:hover::before {
   transform: translateY(-50%) scale(1);
   /* Pop dot */
}

/* Active Sub */
.box-categories .collapse .nav-item.active .nav-link,
.snippets-categories .collapse .nav-item.active .nav-link {
   color: #ff9e00 !important;
   font-weight: 600;
   padding-left: 36px !important;
}

.box-categories .collapse .nav-item.active .nav-link::before,
.snippets-categories .collapse .nav-item.active .nav-link::before {
   transform: translateY(-50%) scale(1);
}

.product-wrapper .productbox-ribbon {
   /* Fallback */
}

.product-wrapper .form-control,
.product-wrapper .custom-select {
   background-color: #111 !important;
   border: 1px solid #444 !important;
}

/* Force Text Colors again */
.product-wrapper a.title,
.productbox-title a {
   color: #fff !important;
   text-decoration: none;
}

.product-wrapper .price,
.product-wrapper .price span {
   color: var(--df-accent) !important;
}


/* Explicitly restore opacity/visibility if affected */
.product-wrapper div {
   opacity: 1 !important;
   visibility: visible !important;
}

/* Force Text Colors */
.product-wrapper a.title,
.productbox-title a {
   color: #fff !important;
   text-decoration: none;
}

.product-wrapper a.title:hover,
.productbox-title a:hover {
   color: var(--df-accent) !important;
}

.product-wrapper .price,
.product-wrapper .price_wrapper,
.product-wrapper .price span {
   color: var(--df-accent) !important;
   font-weight: bold;
}

.product-wrapper .price del {
   color: #888 !important;
   text-decoration: line-through;
}


/* --- PRODUCT DETAIL PAGE STYLING (MATCHING SCREENSHOT) --- */

/* 1. Page Background & Wrapper */
.product-detail-wrapper,
#product-offer {
   color: var(--df-text-white);
}

/* 2. Product Title */
h1.product-title {
   color: var(--df-text-white) !important;
   font-family: 'Open Sans', sans-serif;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 1.5rem;
   letter-spacing: 1px;
   margin-bottom: 1.5rem;
   border-bottom: none;
}

/* 3. Product Meta Info (Artikelnummer, Kategorie, etc.) */
.product-info-list {
   margin-bottom: 2rem;
   font-size: 0.9rem;
   color: var(--df-text-gray);
}

.product-info-list .product-sku,
.product-info-list .product-category,
.product-info-list .product-manufacturer {
   margin-bottom: 0.4rem;
   display: block;
}

/* Labels like "Artikelnummer:" */
.product-info-list strong,
.product-info-list .text-muted {
   color: var(--df-text-white) !important;
   font-weight: 600;
}

/* Links (Category/Manufacturer) */
.product-info-list a {
   color: var(--df-text-gray) !important;
   text-decoration: underline;
}

.product-info-list a:hover {
   color: var(--df-accent) !important;
}

/* 4. Description Text */
.product-description {
   margin-bottom: 2rem;
   line-height: 1.6;
   color: #ddd;
}

/* 5. Price Display */
.price-large {
   font-size: 2.2rem;
   font-weight: 700;
   color: var(--df-accent) !important;
   margin-bottom: 0.5rem;
   display: block;
}

.vat_info {
   color: #999 !important;
   font-size: 0.8rem;
}

.vat_info a {
   color: #bbb !important;
   text-decoration: underline;
}

/* 6. Availability / Stock */
.delivery-status {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
   border-top: 1px solid #333;
   padding-top: 1.5rem;
   color: #28a745 !important;
   /* Green */
   font-weight: 600;
   display: flex;
   align-items: center;
}

.delivery-status .status-text {
   color: #28a745 !important;
}

.delivery-time {
   display: block;
   font-size: 0.8rem;
   color: #888;
   margin-top: 5px;
   font-weight: normal;
}

/* 7. Action Box (Quantity & Button) */
#add-to-cart {
   background: transparent;
   padding: 0;
   border: none;
}

/* Container for the line with input and button */
#quantity-grp,
.basket-form-inline {
   display: flex;
   align-items: stretch;
   gap: 15px;
   /* Space between input and button */
}

/* Quantity Selector Styling */
.quantity-wrapper,
.input-group.quantity {
   display: flex;
   align-items: center;
   background: #000;
   border: 1px solid #333;
   padding: 0;
}

/* The input field */
.quantity-wrapper input.quantity,
.input-group.quantity input.form-control {
   background-color: transparent !important;
   border: none !important;
   color: white !important;
   text-align: center;
   font-weight: bold;
   width: 60px;
   height: 50px;
   font-size: 1.1rem;
   padding: 0;
}

/* The Plus/Minus Buttons (if they exist as unique buttons or inside dropdowns) */
.quantity-wrapper .btn,
.input-group.quantity .btn {
   background: transparent !important;
   border: none !important;
   color: #666 !important;
   width: 40px;
   height: 50px;
   font-size: 1.2rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

.quantity-wrapper .btn:hover,
.input-group.quantity .btn:hover {
   color: white !important;
   background: #222 !important;
}

/* "Stück" label if inside as appended text */
.quantity-wrapper .input-group-text,
.input-group.quantity .input-group-append .input-group-text {
   background: transparent !important;
   border: none !important;
   color: #888 !important;
   padding-right: 15px;
   font-size: 0.9rem;
}

/* The "In den Warenkorb" Button */
button.btn-basket,
#add-to-cart button[type="submit"] {
   background-color: var(--df-accent) !important;
   color: #000 !important;
   font-weight: 800;
   text-transform: uppercase;
   border: none;
   border-radius: 2px;
   padding: 0 30px;
   height: 50px;
   /* Match height of input */
   font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   letter-spacing: 0.5px;
   flex-grow: 1;
   /* Expand to fill space */
   max-width: 400px;
}

button.btn-basket:hover,
#add-to-cart button[type="submit"]:hover {
   background-color: #e68a00 !important;
   box-shadow: 0 0 15px rgba(255, 158, 0, 0.5);
   transform: translateY(-1px);
   transition: all 0.2s ease;
}

/* Cart Icon inside button */
button.btn-basket i,
#add-to-cart button[type="submit"] i {
   margin-left: 10px;
}

/* Fix for gallery background */
#product-images .image-box {
   background-color: transparent !important;
   border: none !important;
}

#product-images .main-image-wrapper {
   border: 1px solid #222;
   background: rgba(255, 255, 255, 0.02);
   background: rgba(255, 255, 255, 0.02);
}

/* 8. Attribute / Merkmale Table */
.table-striped tbody tr:nth-of-type(odd) {
   background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(even) {
   background-color: rgba(255, 255, 255, 0.05) !important;
}

.table td,
.table th {
   border-top: 1px solid #333 !important;
   color: #ccc !important;
   vertical-align: middle;
}

.table .h6,
.table h6 {
   color: #fff !important;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 0.9rem;
   margin: 0;
}

.attr-characteristic .badge {
   background-color: #333 !important;
   color: #fff !important;
   border: 1px solid #444;
   font-weight: normal;
}

/* Nav Tabs for Description/Attributes */
.nav-tabs {
   border-bottom: 1px solid #333 !important;
   margin-bottom: 2rem;
}

.nav-tabs .nav-link {
   border: none !important;
   color: #888 !important;
   background: transparent !important;
   text-transform: uppercase;
   font-weight: 700;
   padding: 10px 20px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
   color: var(--df-accent) !important;
   border-bottom: 2px solid var(--df-accent) !important;
   background: transparent !important;
}

/* SOLD OUT RIBBON */
.product-wrapper .productbox-ribbon.ribbon-6,
.product-wrapper .main-ribbon.ribbon-6,
.ribbon-sold-out,
.ribbon-soldout,
.ribbon-scarcity,
.productbox-ribbon[class*="sold"],
.productbox-ribbon[class*="out"] {
   background-color: #d32f2f !important;
   /* Dark Red */
   color: #fff !important;
   border: 1px solid #b71c1c !important;
}

.productbox-ribbon.ribbon-6 *,
.ribbon-sold-out * {
   color: #fff !important;
}

/* FORCE ACTIVE VARIATION ORANGE */
label.variation.active,
label.swatches.active,
.swatches.active,
.variation.active,
.product-detail .swatches.active,
.product-detail .variation.active,
.swatches-text.active {
   background-color: #ff9e00 !important;
   color: #000000 !important;
   border-color: #ff9e00 !important;
   font-weight: 800 !important;
   opacity: 1 !important;
}

/* Target span inside active label */
label.variation.active .label-variation,
label.swatches.active .label-variation,
.swatches.active .label-variation,
.variation.active .label-variation {
   background-color: #ff9e00 !important;
   color: #000000 !important;
}

/* Target INPUT CHECKED state directly (Fallback) */
.variation input:checked+span,
.variation input:checked+.label-variation,
.swatches input:checked+span,
.swatches input:checked+.label-variation {
   background-color: #ff9e00 !important;
   color: #000000 !important;
   border-color: #ff9e00 !important;
   box-shadow: 0 0 5px rgba(255, 158, 0, 0.5);
}

/* Hover on active */
label.variation.active:hover,
label.swatches.active:hover,
.swatches.active:hover,
.variation.active:hover {
   background-color: #e68a00 !important;
   color: #000000 !important;
}