/**
 * Frontend Style Entry
 * Import all modular SCSS files
 * @package SHPGL\Product\Categories\Assets
 * @since 1.0.0
 */

// Base Variables (loaded first)
@import "./variables.scss";
// Product Grid Styles
@import "./_grid.scss";
// Skeleton Screen Styles
@import "./_skeleton.scss";
// Quick View Modal Styles
@import "./_quickview.scss";

// Global Reset & Base Setup
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      line-height: 1.6;
      font-family: "Inter", sans-serif;
      font-display: swap;
}

// Link Styles
a {
      color: $color-primary;
      text-decoration: none;
      transition: color $transition-fast;

      &:hover {
            color: $color-primary-dark;
      }
}

// Screen Reader Only
.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
}

// Product Container
.shpgl-product-container {
      display: grid;
      margin: 0;
      padding: 0;
      list-style: none;
      gap: $grid-gap;
}

// Debug Header Styles
.shpgl-debug-header {
      margin-bottom: $spacing-md;
      padding: $spacing-md;
      background: $color-debug-bg;
      border: 1px solid $color-border;
      border-radius: $border-radius-sm;

      .shpgl-debug-title {
            margin: 0 0 $spacing-xs;
            font-size: 14px;
      }

      .shpgl-debug-item {
            margin: 0 0 $spacing-xxs;
            font-size: 12px;
      }

      .shpgl-debug-args-label {
            margin: 0 0 $spacing-xxs;
            font-size: 12px;
      }

      .shpgl-debug-pre {
            margin: 0;
            padding: $spacing-sm;
            background: $color-bg;
            border: 1px solid $color-border;
            border-radius: $border-radius-sm;
            font-size: 11px;
            overflow-x: auto;
      }
}

// Error State Styles
.shpgl-error-state {
      margin: $spacing-md 0;
      padding: $spacing-md;
      background: $color-error-bg;
      border: 1px solid $color-error-border;
      border-radius: $border-radius-sm;
      color: $color-error-text;
      grid-column: 1 / -1;
      box-sizing: border-box;

      .shpgl-error-title {
            margin: 0 0 $spacing-xs;
            font-size: 14px;
            font-weight: 600;
      }

      .shpgl-error-message {
            margin: 0 0 $spacing-xxs;
            font-size: 12px;
      }

      .shpgl-error-params {
            margin: 0;
            padding: $spacing-sm;
            background: $color-bg;
            border: 1px solid $color-error-border-light;
            border-radius: $border-radius-sm;
            font-size: 11px;
            overflow-x: auto;
            color: $color-error-text-dark;
      }
}

// Core: Horizontal Scroll Container (Original, Unchanged)
.shpgl-category-tabs-wrapper {
      width: 100% !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-behavior: smooth !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
      flex: 1 !important;
}

// Hide Scrollbar
.shpgl-category-tabs-wrapper::-webkit-scrollbar {
      display: none !important;
}

// Tab Button Styles (Unchanged)
.shpgl-category-tab {
      flex: 0 0 auto !important;
      white-space: nowrap !important;
      margin: 0 4px !important;
}

// Parent Container - Fixed Syntax Errors, Original Logic
.shpgl-tabs-container {
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
      position: relative !important;
}

// Scroll Button: Force Hide Class (High Priority)
.shpgl-btn-hidden {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      opacity: 0 !important;
      cursor: default !important;
}

// Scroll Button: Force Show Class (High Priority)
.shpgl-force-show {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important;
      opacity: 1 !important;
      cursor: pointer !important;
}

// Original Base Button Styles (100% Unchanged)
.shpgl-scroll-btn {
      width: inherit !important;
      height: inherit !important;
      min-width: 25px !important;
      min-height: 25px !important;
      border: inherit !important;
      border-width: inherit !important;
      border-color: inherit !important;
      background: transparent !important;
      color: #333 !important;
      cursor: pointer !important;
      display: flex  !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: inherit !important;
      transition: all 0.25s ease-in-out !important;
      z-index: 9998 !important;
      pointer-events: auto !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      position: absolute !important;
      transform: none !important;
      overflow: visible !important;
      margin: 0 !important;
}

// Left Arrow Icon (Original, Correct Direction)
.shpgl-scroll-left::after {
      content: "";
      display: block;
      width: 7px !important;
      height: 7px !important;
      border-top: 2.5px solid #333 !important;
      border-left: 2.5px solid #333 !important;
      border-bottom: 0 !important;
      border-right: 0 !important;
      border-style: solid !important;
      pointer-events: none !important;
      position: absolute !important;
      top: calc(50% - 3px) !important;
      left: calc(50% - 3px) !important;
      transform: rotate(-45deg) !important;
      z-index: 999 !important;
      background: transparent !important;
      box-sizing: border-box !important;
}

// Right Arrow Icon (Original, Correct Direction)
.shpgl-scroll-right::after {
      content: "";
      display: block;
      width: 7px !important;
      height: 7px !important;
      border-top: 2.5px solid #333 !important;
      border-right: 2.5px solid #333 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-style: solid !important;
      pointer-events: none !important;
      position: absolute !important;
      top: calc(50% - 3px) !important;
      left: calc(50% - 3px) !important;
      transform: rotate(45deg) !important;
      z-index: 999 !important;
      background: transparent !important;
      box-sizing: border-box !important;
}

// Arrow Color Inherit from Admin Settings (Original)
.shpgl-scroll-left::after {
      border-top: 2.5px solid inherit !important;
      border-left: 2.5px solid inherit !important;
}
.shpgl-scroll-right::after {
      border-top: 2.5px solid inherit !important;
      border-right: 2.5px solid inherit !important;
}

// Hover Slide Effect (Original, Smooth)
.shpgl-scroll-left:hover {
      background: #e9e9e9 !important;
      transform: translateX(-2px) !important;
}
.shpgl-scroll-right:hover {
      background: #e9e9e9 !important;
      transform: translateX(2px) !important;
}

.shpgl-scroll-left {
      float: left !important;
}

.shpgl-scroll-right {
      float: right !important;
}

// Core Fix: Perfect Toggle Logic, High Priority (Works in Editor & Frontend)
.shpgl-scroll-btn[style*="display:none"],
.shpgl-scroll-left[style*="display:none"],
.shpgl-scroll-right[style*="display:none"] {
      display: none !important;
}

// Responsive Fix: Hide Buttons on Mobile (High Priority)
@media (max-width: 767px) {
      .shpgl-scroll-btn,
      .shpgl-scroll-left,
      .shpgl-scroll-right {
            display: none !important;
            visibility: hidden !important;
            width: 0 !important;
            height: 0 !important;
            pointer-events: none !important;
      }
}

/* assets/css/frontend.css */
.shpgl-product-image {
      position: relative;
      width: 100%;
      overflow: hidden;
}
.shpgl-product-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
}

/* assets/css/frontend.css */
.shpgl-quickview-overlay {
      background: rgba(0,0,0,1);
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9998;
}
.shpgl-quickview-modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      z-index: 9999;
      background: #fff;
      padding: 20px;
}
.shpgl-quickview-title {
      display: none;
}
// Custom Overlay Color Support
.shpgl-quickview-overlay.custom-overlay {
      background: var(--shpgl-overlay-color);
}