/**
 * Back in Stock Notification - Frontend Styles
 */
.tz-back-in-stock-form {

}

.tz-back-in-stock-form h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
}

.tz-back-in-stock-form p {
    margin-bottom: 1em;
}

.tz-back-in-stock-form .form-row {
    margin-bottom: 1em;
}

.tz-back-in-stock-form label {
    display: block;
    font-weight: 500;
    font-size: 80%;
}

.tz-back-in-stock-form .input-text {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
}

.tz-back-in-stock-form input[type="checkbox"] {
    margin-right: 0.5em;
}

.tz-back-in-stock-form button {

}

.tz-back-in-stock-form button:hover {
    opacity: 0.9;
}

.tz-bis-message {
    margin-top: 1em;
}

.tz-bis-message .woocommerce-message,
.tz-bis-message .woocommerce-error {
    margin: 0;
    padding: 0.75em 1em;
    border-radius: 3px;
    list-style: none;
}

.tz-bis-message .woocommerce-message {
    background-color: #f7f6f7;
    border-left: 3px solid #7eb62e;
    color: #5b841b;
}

.tz-bis-message .woocommerce-error {
    background-color: #f7f6f7;
    border-left: 3px solid #b81c23;
    color: #b81c23;
}

/**
 * Back in Stock Benachrichtigungsformular Styles
 */

.tz-back-in-stock-wrapper {
    margin-bottom: 1.5em;
    padding: 1.5em;
    border: 2px solid #520B33;
    background-color: #f8f8f8;
    border-radius: 20px;
    width: 90%
}

.tz-back-in-stock-wrapper h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.tz-bis-icon {
    display: inline-block;
    float: right;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    margin-left: 0.5em;
    /* Platz für ein Inline-SVG oder background-image */
}



.tz-bis-form-group label {
    display: block;
    font-weight: 400;
}

.tz-bis-form-group input[type="email"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom:5px;
}

/* Placeholder styling */
.tz-bis-form-group input::placeholder {
    color: #999;
    opacity: 1; /* Ensure consistent color across browsers */
}

.tz-bis-response {
    margin: 1em 0;
}

.tz-bis-message {
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 1em;
}

.tz-bis-message.success {
    background-color: #f0f8e6;
    border: 1px solid #c6e2b2;
    color: #3c763d;
}

.tz-bis-message.error {
    background-color: #f8e6e6;
    border: 1px solid #e2b2b2;
    color: #a94442;
}

.tz-bis-submit-button {
    width: 100%;
    padding: 10px !important;
    text-align: center;
}

.tz-bis-submit-button.loading {
    opacity: 0.7;
    cursor: wait;
}


.tz-back-in-stock-wrapper {
  display: inline-block;
}

.tz-bis-icon {
  display: inline-block;
  transform-origin: top center;
  animation: ring 1.5s ease-in-out 0.5s 1 both; /* 1x beim Laden */
  cursor: pointer;
}

.tz-back-in-stock-wrapper:hover .tz-bis-icon {
  animation: ring-hover 1s ease-in-out;
}

@keyframes ring {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(18deg); }
  20%  { transform: rotate(-12deg); }
  30%  { transform: rotate(9deg); }
  40%  { transform: rotate(-7deg); }
  50%  { transform: rotate(5deg); }
  60%  { transform: rotate(-3deg); }
  70%  { transform: rotate(2deg); }
  80%  { transform: rotate(-1deg); }
  90%  { transform: rotate(0.5deg); }
  100% { transform: rotate(0); }
}


@keyframes ring-hover {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(8deg); }
  40% { transform: rotate(-6deg); }
  50% { transform: rotate(4deg); }
  60% { transform: rotate(-2deg); }
  70%, 100% { transform: rotate(0deg); }
}

.cf-turnstile {
    margin-top: 1em;
}
.cf-turnstile iframe {
    width: 100% !important;
    height: 65px !important; /* Beispielhöhe passend zur Turnstile-Box */
}

.tz-back-in-stock-message {
  text-transform: uppercase;
  font-size: 80%;
  color: #520B33;
  margin-bottom: 0.5em;
  display: inline-block;
}