/**
 * Inscape Component Styles
 * 
 * Buttons, Forms, Cards, Badges, Toasts
 *
 * @package PCC_Woo
 * @since 1.2.0
 */

/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ins-space-2);
  height: var(--ins-btn-height-md);
  padding: 0 var(--ins-space-5);
  font-family: inherit;
  font-size: var(--ins-text-sm);
  font-weight: var(--ins-font-semibold);
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: var(--ins-btn-radius);
  cursor: pointer;
  transition: all var(--ins-transition);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Primary Button */
.btn-primary {
  background: var(--ins-primary);
  color: var(--ins-white);
  box-shadow: var(--ins-shadow-btn);
}

.btn-primary:hover:not(:disabled) {
  background: var(--ins-primary-hover);
  box-shadow: var(--ins-shadow-btn-hover);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
  background: var(--ins-white);
  color: var(--ins-gray-700);
  border: 1px solid var(--ins-gray-300);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--ins-gray-50);
  border-color: var(--ins-gray-400);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--ins-gray-600);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--ins-gray-100);
  color: var(--ins-gray-900);
}

/* Danger Button */
.btn-danger {
  background: var(--ins-danger);
  color: var(--ins-white);
}

.btn-danger:hover:not(:disabled) {
  background: var(--ins-danger-dark);
}

/* Success Button */
.btn-success {
  background: var(--ins-success);
  color: var(--ins-white);
}

.btn-success:hover:not(:disabled) {
  background: var(--ins-success-dark);
}

/* Button Sizes */
.btn-sm {
  height: var(--ins-btn-height-sm);
  padding: 0 var(--ins-space-3);
  font-size: var(--ins-text-xs);
  border-radius: var(--ins-radius-lg);
}

.btn-lg {
  height: var(--ins-btn-height-lg);
  padding: 0 var(--ins-space-6);
  font-size: var(--ins-text-base);
}

.btn-xl {
  height: var(--ins-btn-height-xl);
  padding: 0 var(--ins-space-8);
  font-size: var(--ins-text-lg);
  border-radius: var(--ins-radius-2xl);
}

/* Full Width */
.btn-block {
  width: 100%;
}

/* Icon Only */
.btn-icon {
  width: var(--ins-btn-height-md);
  padding: 0;
}

.btn-icon.btn-sm {
  width: var(--ins-btn-height-sm);
}

.btn-icon.btn-lg {
  width: var(--ins-btn-height-lg);
}

/* Button with price (like Add to cart $400) */
.btn-with-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ins-space-4) 0 var(--ins-space-5);
  min-width: 180px;
}

.btn-with-price .btn-icon-wrapper {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ins-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--ins-space-3);
}

.btn-with-price .btn-label {
  flex: 1;
  text-align: left;
}

.btn-with-price .btn-price {
  font-size: var(--ins-text-lg);
  font-weight: var(--ins-font-bold);
}

.btn-with-price .btn-price sup {
  font-size: var(--ins-text-xs);
  vertical-align: super;
}

/* ========================================
   Forms
   ======================================== */
.form-group {
  margin-bottom: var(--ins-space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--ins-space-2);
  font-size: var(--ins-text-sm);
  font-weight: var(--ins-font-medium);
  color: var(--ins-gray-700);
}

.form-label.required::after {
  content: " *";
  color: var(--ins-danger);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: var(--ins-input-height);
  padding: 0 var(--ins-space-4);
  font-family: inherit;
  font-size: var(--ins-text-base);
  color: var(--ins-gray-900);
  background: var(--ins-white);
  border: 1px solid var(--ins-gray-200);
  border-radius: var(--ins-input-radius);
  transition: all var(--ins-transition);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--ins-gray-300);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--ins-primary);
  box-shadow: 0 0 0 3px var(--ins-primary-light);
}

.form-input::placeholder {
  color: var(--ins-gray-400);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--ins-danger);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
  box-shadow: 0 0 0 3px var(--ins-danger-light);
}

.form-textarea {
  height: auto;
  min-height: 100px;
  padding: var(--ins-space-3) var(--ins-space-4);
  resize: vertical;
}

.form-error {
  margin-top: var(--ins-space-2);
  font-size: var(--ins-text-sm);
  color: var(--ins-danger);
}

.form-hint {
  margin-top: var(--ins-space-2);
  font-size: var(--ins-text-sm);
  color: var(--ins-gray-500);
}

/* Input with icon */
.input-with-icon {
  position: relative;
}

.input-with-icon .form-input {
  padding-left: var(--ins-space-11);
}

.input-with-icon .input-icon {
  position: absolute;
  left: var(--ins-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--ins-gray-400);
  pointer-events: none;
}

/* ========================================
   Quantity Input (like in design)
   ======================================== */
.quantity-input,
.quantity-lg {
  display: inline-flex;
  align-items: center;
  gap: var(--ins-space-2);
  background: var(--ins-gray-100);
  border-radius: var(--ins-radius-xl);
  padding: var(--ins-space-1);
}

.quantity-btn,
.qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ins-gray-500);
  font-size: var(--ins-text-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ins-radius-lg);
  transition: all var(--ins-transition);
}

.quantity-btn:hover,
.qty-btn:hover {
  background: var(--ins-white);
  color: var(--ins-gray-900);
}

.quantity-btn:disabled,
.qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.quantity-value,
.qty-value {
  min-width: 32px;
  text-align: center;
  font-size: var(--ins-text-base);
  font-weight: var(--ins-font-semibold);
  color: var(--ins-gray-900);
  border: none;
  background: transparent;
}

/* Large quantity (for modals) */
.quantity-lg .quantity-btn,
.quantity-lg .qty-btn {
  width: 44px;
  height: 44px;
  font-size: var(--ins-text-xl);
  background: var(--ins-gray-200);
  border-radius: var(--ins-radius-full);
}

.quantity-lg .quantity-value,
.quantity-lg .qty-value {
  font-size: var(--ins-text-4xl);
  font-weight: var(--ins-font-bold);
  min-width: 80px;
}

/* ========================================
   Cards
   ======================================== */
.card {
  background: var(--ins-card-bg);
  border-radius: var(--ins-card-radius);
  padding: var(--ins-card-padding);
  box-shadow: var(--ins-card-shadow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ins-space-4);
}

.card-title {
  font-size: var(--ins-text-lg);
  font-weight: var(--ins-font-semibold);
  color: var(--ins-gray-900);
  margin: 0;
}

.card-body {
  /* Default body styles */
}

.card-footer {
  margin-top: var(--ins-space-4);
  padding-top: var(--ins-space-4);
  border-top: 1px solid var(--ins-gray-100);
}

/* ========================================
   Status Badges
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ins-space-1);
  padding: var(--ins-space-1) var(--ins-space-3);
  font-size: var(--ins-text-xs);
  font-weight: var(--ins-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--ins-radius-md);
}

.badge-primary {
  background: var(--ins-primary-light);
  color: var(--ins-primary);
}

.badge-success {
  background: var(--ins-success-light);
  color: var(--ins-success-dark);
}

.badge-warning {
  background: var(--ins-warning-light);
  color: var(--ins-warning-dark);
}

.badge-danger {
  background: var(--ins-danger-light);
  color: var(--ins-danger-dark);
}

.badge-info {
  background: var(--ins-info-light);
  color: var(--ins-info-dark);
}

.badge-neutral {
  background: var(--ins-gray-100);
  color: var(--ins-gray-600);
}

/* NEW badge (like in design) */
.badge-new {
  background: var(--ins-primary);
  color: var(--ins-white);
  padding: var(--ins-space-1-5) var(--ins-space-3);
  border-radius: var(--ins-radius-md);
  font-size: var(--ins-text-xs);
  font-weight: var(--ins-font-bold);
  text-transform: uppercase;
}

/* ========================================
   Star Rating
   ======================================== */
.star-rating {
  display: inline-flex;
  gap: 2px;
}

.star-rating .star {
  width: 14px;
  height: 14px;
  color: #fbbf24;
}

.star-rating .star.empty {
  color: var(--ins-gray-300);
}

/* ========================================
   Toast Notifications
   ======================================== */
.toast-container {
  position: fixed;
  top: calc(var(--ins-header-height) + var(--ins-space-4));
  right: var(--ins-space-4);
  z-index: var(--ins-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ins-space-3);
  max-width: 400px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ins-space-3);
  padding: var(--ins-space-4);
  background: var(--ins-white);
  border-radius: var(--ins-radius-xl);
  box-shadow: var(--ins-shadow-elevated);
  animation: slideIn var(--ins-duration-slow) var(--ins-ease-out);
}

.toast-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: var(--ins-font-semibold);
  color: var(--ins-gray-900);
  margin-bottom: var(--ins-space-1);
}

.toast-message {
  font-size: var(--ins-text-sm);
  color: var(--ins-gray-600);
}

.toast-close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ins-gray-400);
  cursor: pointer;
  border-radius: var(--ins-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ins-transition);
}

.toast-close:hover {
  background: var(--ins-gray-100);
  color: var(--ins-gray-600);
}

.toast.success .toast-icon {
  color: var(--ins-success);
}
.toast.error .toast-icon {
  color: var(--ins-danger);
}
.toast.warning .toast-icon {
  color: var(--ins-warning);
}
.toast.info .toast-icon {
  color: var(--ins-info);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   Loading States
   ======================================== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--ins-gray-200) 25%,
    var(--ins-gray-100) 50%,
    var(--ins-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--ins-radius-md);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--ins-gray-200);
  border-top-color: var(--ins-primary);
  border-radius: var(--ins-radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   Empty States
   ======================================== */
.empty-state {
  text-align: center;
  padding: var(--ins-space-12) var(--ins-space-6);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--ins-space-5);
  color: var(--ins-gray-300);
}

.empty-state-title {
  font-size: var(--ins-text-xl);
  font-weight: var(--ins-font-semibold);
  color: var(--ins-gray-900);
  margin-bottom: var(--ins-space-2);
}

.empty-state-text {
  font-size: var(--ins-text-base);
  color: var(--ins-gray-500);
  margin-bottom: var(--ins-space-6);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   Dropdown Menu
   ======================================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--ins-z-dropdown);
  min-width: 180px;
  margin-top: var(--ins-space-2);
  padding: var(--ins-space-2);
  background: var(--ins-white);
  border-radius: var(--ins-radius-xl);
  box-shadow: var(--ins-shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ins-transition);
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ins-space-3);
  padding: var(--ins-space-3) var(--ins-space-4);
  font-size: var(--ins-text-sm);
  color: var(--ins-gray-700);
  text-decoration: none;
  border-radius: var(--ins-radius-lg);
  transition: all var(--ins-transition);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--ins-gray-100);
  color: var(--ins-gray-900);
}

.dropdown-item svg {
  width: 18px;
  height: 18px;
  color: var(--ins-gray-500);
}

.dropdown-divider {
  height: 1px;
  background: var(--ins-gray-100);
  margin: var(--ins-space-2) 0;
}

/* ========================================
   Honeypot (Anti-Spam)
   ======================================== */
/* Hidden field to catch bots - uses multiple techniques to be invisible */
.form-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.form-hp input,
.form-hp textarea {
  position: absolute;
  width: 1px;
  height: 1px;
}