/**
 * Variant Restrictions - Theme App Extension Styles
 * Works with multiple Shopify themes
 */


/* restricted swatch */


.variant-restricted-product.button--disabled.button--outline {
  justify-content: center;
  background: rgb(255, 205, 88) !important;
  color: rgb(0, 0, 0) !important;
  --initial-gradient: linear-gradient(#ffcd58, #ffcd58);
  border: 1px solid;
}

.variant-option-restricted-label {
  position: relative;
}



input.variant-option-restricted::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%) rotate(-15deg);
  opacity: 0.6;
}

.variant-option-restricted-label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%) rotate(-35deg);
  opacity: 0.6;
}
label.color-swatch.variant-option-restricted-label::after {
  transform: unset;
  height: unset;
}

label.color-swatch.variant-option-restricted-label:after {
    content: "";
    margin: var(--swatch-disabled-margin, var(--swatch-offset));
    background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--swatch-disabled-strike-color) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.product-form__color-swatch-label.variant-option-restricted-label::after {
  transform: translateY(-50%) rotate(-45deg);
  content: "";
    width: 1px;
    height: 139%;
    position: absolute;
    background: #000;
    transform: rotate(45deg);
    right: 12px;
    bottom: -5px;
    top: unset;
    left: unset;
}

label.block-swatch.variant-option-restricted-label::after {
    transform: translateY(-50%) rotate(-10deg);
}
/* For radio buttons */

.inventory .restricted--variant-stock.stock_value[data-status=error]:before,
.inventory__wrapper .restricted--variant-stock.stock_value[data-status=error]:before {
    background-color: red;
    animation: pulse-animation-error 3s linear infinite;
    content: " ";
    width: 13px;
    height: 13px;
    display: inline-block;
        border-radius: 50%;
    
}
@keyframes pulse-animation-error {
  0% {
      box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.2);
  }
  100% {
      box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.2);
  }
}

label.color-swatch.is-disabled.variant-option-restricted-label:after {
    content: unset;
}

input.variant-option-restricted + label {
  position: relative;
}

.product .product-form__buttons [name=add].button[data-restricted-global="true"]{
  background: #ffcd58 !important;
  color:black;
}

/* For dropdowns */
option.variant-option-restricted {
  color: #999 !important;
  text-decoration: line-through;
}

/* Theme-specific overrides */

button.variant-restricted-product:hover,
.variant-restricted-product:hover {
  transform: none !important;
  box-shadow: none !important;
}

.prestige-btn.button[disabled="true"]{
 background: #ffcd58 !important;
}

/* Restriction message container */
.variant-restriction-message {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #fff4e6;
  border: 1px solid #ffa94d;
  border-radius: 8px;
  animation: slideDown 0.3s ease-out;
}

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

/* Message content */
.variant-restriction-message__content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Icon styling */
.variant-restriction-message__icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  color: #e67700;
  margin-top: 2px;
}

/* Message text */
.variant-restriction-message__text {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #744210;
}

/* Theme-specific overrides */


/* Responsive adjustments */
@media screen and (max-width: 749px) {
  .variant-restriction-message {
    padding: 0.875rem;
    font-size: 0.8125rem;
  }
  
  .variant-restriction-message__icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
  }
}

/* Dark mode support (if theme supports it) */
@media (prefers-color-scheme: dark) {
  .variant-restriction-message {
    background-color: #3d2f00;
    border-color: #664d00;
  }
  
  .variant-restriction-message__text {
    color: #ffd699;
  }
  
  .variant-restriction-message__icon {
    color: #ffa94d;
  }
}

/* Print styles */
@media print {
  .variant-restriction-message {
    display: none;
  }
}

.variant-restricted-product {
    opacity: 1 !important;
}