/* =============================================================================
   IT-Life UI Components
   ONLY targets: WooCommerce elements, base HTML forms, and custom .il-* classes.
   Elementor buttons/widgets are styled by the user in Elementor editor.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   WOOCOMMERCE BUTTONS
   ----------------------------------------------------------------------------- */

/* WooCommerce buttons — all variants */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px !important;
  font-family: var(--il-font-family) !important;
  font-size: var(--il-font-size-sm) !important;
  font-weight: var(--il-font-weight-semibold) !important;
  line-height: 1.4 !important;
  color: var(--il-btn-primary-text) !important;
  background-color: var(--il-btn-primary-bg) !important;
  border: none !important;
  border-radius: var(--il-border-radius) !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: var(--il-shadow-button) !important;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--il-btn-primary-hover) !important;
  color: var(--il-btn-primary-text) !important;
  transform: translateY(-2px);
  box-shadow: var(--il-shadow-lg) !important;
}

.woocommerce .button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
  transform: translateY(0);
}

/* Disabled state */
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Gradient theme WC buttons */
html[data-theme="gradient"] .woocommerce .button,
html[data-theme="gradient"] .woocommerce a.button,
html[data-theme="gradient"] .woocommerce button.button,
html[data-theme="gradient"] .woocommerce a.button.alt,
html[data-theme="gradient"] .woocommerce button.button.alt {
  background: linear-gradient(135deg, #f72585, #7209b7) !important;
}

html[data-theme="gradient"] .woocommerce .button:hover,
html[data-theme="gradient"] .woocommerce a.button:hover {
  background: linear-gradient(135deg, #ff4da6, #9b30ff) !important;
  box-shadow: 0 4px 20px rgba(247, 37, 133, 0.4) !important;
}


/* -----------------------------------------------------------------------------
   CUSTOM IL- BUTTONS (for use in templates/shortcodes)
   ----------------------------------------------------------------------------- */

.il-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--il-font-family);
  font-size: var(--il-font-size-sm);
  font-weight: var(--il-font-weight-semibold);
  line-height: 1.4;
  color: var(--il-btn-primary-text);
  background-color: var(--il-btn-primary-bg);
  border: none;
  border-radius: var(--il-border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  text-transform: none;
  box-shadow: var(--il-shadow-button);
}

.il-btn:hover {
  background-color: var(--il-btn-primary-hover);
  color: var(--il-btn-primary-text);
  transform: translateY(-2px);
  box-shadow: var(--il-shadow-lg);
}

.il-btn--secondary {
  background-color: var(--il-btn-secondary-bg);
  color: var(--il-btn-secondary-text);
  border: 2px solid var(--il-btn-secondary-border);
  box-shadow: none;
}

.il-btn--secondary:hover {
  background-color: var(--il-btn-secondary-hover-bg);
  color: var(--il-btn-secondary-text);
}

.il-btn--sm {
  padding: 8px 18px;
  font-size: var(--il-font-size-xs);
}

.il-btn--lg {
  padding: 16px 36px;
  font-size: var(--il-font-size-lg);
}

html[data-theme="gradient"] .il-btn {
  background: linear-gradient(135deg, #f72585, #7209b7);
}

html[data-theme="gradient"] .il-btn:hover {
  background: linear-gradient(135deg, #ff4da6, #9b30ff);
  box-shadow: 0 4px 20px rgba(247, 37, 133, 0.4);
}


/* -----------------------------------------------------------------------------
   CUSTOM IL- CARDS
   ----------------------------------------------------------------------------- */

.il-card {
  background: var(--il-bg-card);
  border: 1px solid var(--il-border-color);
  border-radius: var(--il-border-radius-lg);
  padding: var(--il-space-lg);
  transition: all 0.3s ease;
}

.il-card:hover,
.il-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--il-shadow-card-hover);
}

html[data-theme="gradient"] .il-card {
  background: var(--il-glass-bg);
  border-color: var(--il-glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* -----------------------------------------------------------------------------
   BASE HTML FORMS (not Elementor)
   ----------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-family: var(--il-font-family);
  font-size: var(--il-font-size-base);
  color: var(--il-input-text);
  background-color: var(--il-input-bg);
  border: 1px solid var(--il-input-border);
  border-radius: var(--il-border-radius);
  padding: 12px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--il-input-focus-border);
  box-shadow: var(--il-input-focus-shadow);
}

input::placeholder,
textarea::placeholder {
  color: var(--il-input-placeholder);
}

/* Labels */
label {
  font-family: var(--il-font-family);
  font-size: var(--il-font-size-sm);
  font-weight: var(--il-font-weight-medium);
  color: var(--il-text-secondary);
  margin-bottom: 6px;
  display: inline-block;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--il-accent-primary);
}

/* Base button (submit) */
button[type="submit"],
input[type="submit"] {
  font-family: var(--il-font-family);
  font-size: var(--il-font-size-sm);
  font-weight: var(--il-font-weight-semibold);
  color: var(--il-btn-primary-text);
  background-color: var(--il-btn-primary-bg);
  border: none;
  border-radius: var(--il-border-radius);
  padding: 12px 28px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--il-btn-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--il-shadow-button);
}


/* -----------------------------------------------------------------------------
   BADGES
   ----------------------------------------------------------------------------- */

.il-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--il-font-size-xs);
  font-weight: var(--il-font-weight-semibold);
  border-radius: var(--il-border-radius-full);
  line-height: 1.4;
}

.il-badge--sale {
  background-color: var(--il-sale-bg);
  color: var(--il-sale-text);
}

.il-badge--popular {
  background-color: var(--il-accent-primary);
  color: var(--il-text-inverse);
}

.il-badge--new {
  background-color: var(--il-accent-success);
  color: #ffffff;
}


/* -----------------------------------------------------------------------------
   TABLES (base HTML, WC tables styled in cart-checkout.css)
   ----------------------------------------------------------------------------- */

table {
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--il-border-light);
  color: var(--il-text-secondary);
}

table th {
  font-weight: var(--il-font-weight-semibold);
  color: var(--il-text-primary);
  font-size: var(--il-font-size-sm);
}


/* -----------------------------------------------------------------------------
   WOOCOMMERCE NOTICES
   ----------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info {
  background-color: var(--il-accent-primary-light) !important;
  color: var(--il-accent-primary) !important;
  border-top-color: var(--il-accent-primary) !important;
  border-radius: var(--il-border-radius) !important;
  font-family: var(--il-font-family) !important;
}

.woocommerce-error {
  background-color: var(--il-accent-danger-light) !important;
  color: var(--il-accent-danger) !important;
  border-top-color: var(--il-accent-danger) !important;
  border-radius: var(--il-border-radius) !important;
  font-family: var(--il-font-family) !important;
}

.woocommerce-message a,
.woocommerce-info a {
  color: var(--il-accent-primary) !important;
  font-weight: var(--il-font-weight-semibold);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--il-accent-primary) !important;
}

.woocommerce-error::before {
  color: var(--il-accent-danger) !important;
}


/* -----------------------------------------------------------------------------
   WOOCOMMERCE STAR RATINGS
   ----------------------------------------------------------------------------- */

.woocommerce .star-rating {
  color: var(--il-accent-warning) !important;
}

.woocommerce .star-rating::before {
  color: var(--il-border-color) !important;
}


/* -----------------------------------------------------------------------------
   WOOCOMMERCE PRICE
   ----------------------------------------------------------------------------- */

.woocommerce .price,
.woocommerce .amount,
.woocommerce-Price-amount {
  color: var(--il-price-color) !important;
  font-weight: var(--il-font-weight-bold) !important;
  font-family: var(--il-font-family) !important;
}

.woocommerce del .amount,
.woocommerce del .woocommerce-Price-amount {
  color: var(--il-price-old) !important;
  font-weight: var(--il-font-weight-normal) !important;
  opacity: 0.6;
}


/* -----------------------------------------------------------------------------
   PAGINATION
   ----------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--il-bg-card) !important;
  color: var(--il-text-secondary) !important;
  border-color: var(--il-border-color) !important;
  border-radius: var(--il-border-radius-sm) !important;
  transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--il-accent-primary-light) !important;
  color: var(--il-accent-primary) !important;
  border-color: var(--il-accent-primary) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--il-accent-primary) !important;
  color: var(--il-text-inverse) !important;
  border-color: var(--il-accent-primary) !important;
}