/**
 * Excuse Form CSS
 * 
 * Additional styles for the excuse form not covered by Tailwind
 */

/* Loading animation styles */
#loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.loading-dots {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 10px;
  height: 10px;
  background: #666;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-text {
  color: #666;
  font-size: 0.9rem;
}

/* Hide registration form until typewriter effect finishes */
.hide-until-typewriter-finished {
  display: none;
}

/* Modal styles */
#modal {
  transition: display 0.3s ease-in-out;
}

/* Mobile CTA Button Styles - No Tailwind */
#open-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: var(--wp--preset--color--contrast, #c80021);
  border: 1px solid #9e001b;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  padding: 26px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

/* Tablet and up styles for the button container */
@media (min-width: 640px) {
  #open-modal {
    width: auto;
    border: 0;
    border-radius: 15px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 26px 77px;
  }
}

/* Hide on large screens */
@media (min-width: 1024px) {
  #open-modal {
    display: none;
  }
}

/* Default state for the delayed or animated button */
#open-modal.hidden-button {
  opacity: 0;
  pointer-events: none;
}

/* Slide animation */
#open-modal.slide-animation.hidden-button {
  transform: translateY(100%);
}

@media (min-width: 640px) {
  #open-modal.slide-animation.hidden-button {
    transform: translate(-50%, 100%);
  }
}

/* Fade animation - no additional styles needed as opacity transition is already defined */

/* Button glow animation - simpler, more subtle */
.cake-button.cta-floating-excuse-button.glow-animation {
  animation: button-glow 0.5s infinite alternate;
}
@keyframes button-glow {
  0% {
    box-shadow: 0 0 5px rgba(242, 167, 1, 0.1); /* Changed to #F2A701 */
  }
  100% {
    box-shadow: 0 0 20px rgba(242, 167, 1, 0.9); /* Changed to #F2A701 */
  }
}

/* Open modal button styles */
#open-modal button {
  position: relative;
}

/* Mobile modal animation */
#close-modal {
  transform: translateY(0);
  transition: transform 0.2s ease-in-out;
}

#close-modal:hover {
  transform: translateY(-5px);
}

/* Transition for elements that appear after typewriter */
.excuse-action-button,
.registration-form {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

.excuse-action-button.hidden,
.registration-form.hidden {
  opacity: 0;
}

/* Common button styles */
.cake-button {
  background-color: var(--wp--preset--color--accent-2);
  color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: var(--wp--preset--font-size--text-lg);
  transition: all 150ms ease-in-out;
}

.cake-button:hover {
  background-color: var(--wp--preset--color--accent-1);
}

.cake-button .button-text {
  font-family: var(--wp--preset--font-family--creative-vintage);
  transform: translateY(2px)!important;
  line-height: 1.4;
}

/* button-text text should be different between 1024 and 1320px . It should be just Unesi izgovor */
@media (min-width: 1024px) and (max-width: 1320px) {
  .cake-button .button-text {
    font-size: 0; /* Hide the original text */
  }
  
  .cake-button .button-text::after {
    content: "Unesi izgovor";
    font-size: var(--wp--preset--font-size--text-lg); /* Restore the font size */
    font-family: var(--wp--preset--font-family--creative-vintage);
    line-height: 1.4;
  }
}

/* Font size between 1024 and 1150px */
@media (min-width: 1024px) and (max-width: 1150px) {
  .cake-button .button-text::after {
    font-size: var(--wp--preset--font-size--text-base);
  }
}

/* Form submit button specific styles */
.cake-button.submit {
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  gap: 0.75rem;
}

@media (min-width: 1280px) {
  .cake-button.submit {
    margin-top: 2rem;
    padding: 1.25rem;
    gap: 1rem;
  }
}


/* CTA FLOATING button specific styles */
.cake-button.cta-floating-excuse-button {
  padding: 1rem 2rem 1rem 2rem;
  gap: 1rem;
  min-width: 280px;
  white-space: nowrap;
  overflow: hidden; /* Ensure effects stay within button boundaries */
}

/* Simplified pulse animation with pauses */
.cake-button.cta-floating-excuse-button.pulse-animation {
  animation: simple-pulse 5s ease-in-out infinite;
}

@keyframes simple-pulse {
  0%, 10% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.06);
  }
  15% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.06);
  }
  25% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* Simple shine effect - more subtle */
.cake-button.cta-floating-excuse-button.shine-animation {
  position: relative;
  overflow: hidden;
}

.cake-button.cta-floating-excuse-button.shine-animation::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;  /* Thinner shine */
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: subtle-shine 5s ease-in-out infinite;
}

@keyframes subtle-shine {
  0%, 70% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* Auto-expanding textarea styles */
.auto-expand-textarea {
  /* Base styling */
  resize: none;
  overflow: hidden;
  min-height: 68px; /* Ensures at least a line of text */
  height: 68px; /* Set initial fixed height */
  transition: height 0.2s ease;
  box-sizing: border-box;
  
  /* Appearance */
  width: 100%;
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: 10px;
  background-color: #c80021;
  color: white;
  font-weight: 700;
  font-family: "Roboto Flex";
  
  /* Typography */
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05em; /* Added increased letter spacing */
  
  /* Padding */
  padding: 1.63rem 1.5rem;
  /* Adding a negative margin to combat the padding calculation issue */
  margin-bottom: 0;
}

/* Ensure proper calculation when hidden */
.hidden .auto-expand-textarea {
  height: auto;
}

/* Improved rendering for newly visible elements */
.auto-expand-textarea:not(:focus):not(:active) {
  contain: content;
  content-visibility: auto;
}

/* Force regular content calculation */
.auto-expand-textarea.calculating-height {
  position: absolute;
  visibility: hidden;
  display: block !important;
  z-index: -1;
  top: -9999px;
  left: -9999px;
}

/* Focus state */
.auto-expand-textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent-2);
}

/* Hover state */
.auto-expand-textarea:hover {
  border-color: var(--wp--preset--color--accent-2);
}

/* Placeholder styling */
.auto-expand-textarea::placeholder {
  color: white;
  opacity: 0.8;
}

/* Disabled and readonly textarea styles */
.auto-expand-textarea[disabled],
.auto-expand-textarea[readonly] {
  opacity: 0.9;
  cursor: default;
  font-weight: 400;
}

/* Remove disabled appearance but keep it actually disabled */
.auto-expand-textarea[disabled] {
  color: #fff;
  background-color: var(--wp--preset--color--accent-1);
  border-color: var(--wp--preset--color--accent-3);
}


/* Info text container transition styles */
.excuse-form-info-text, .registration-form, .excuse-shared-success-container {
  transition: height 0.2s ease-out, opacity 0.2s ease-out;
  overflow: hidden;
}

/* Fix container visibility transition */
.excuse-form-container,
.excuse-result-container,
.excuse-shared-success-container {
  transition: opacity 0.3s ease-out;
}

.excuse-form-container.hidden,
.excuse-result-container.hidden,
.excuse-shared-success-container.hidden {
  display: none;
}

/* Nickname input field styling to match auto-expand-textarea */
.excuse-nickname-input {
  /* Appearance */
  width: 100%;
  border: 1px solid var(--wp--preset--color--accent-3);
  border-radius: 10px;
  background-color: #c80021;
  color: white;
  font-weight: 700;
  font-family: "Roboto Flex";
  
  /* Typography */
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  
  /* Padding */
  padding: 1.63rem 1.5rem;
  height: 68px;
}

/* Focus state */
.excuse-nickname-input:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent-2);
}

/* Hover state */
.excuse-nickname-input:hover {
  border-color: var(--wp--preset--color--accent-2);
}

/* Placeholder styling */
.excuse-nickname-input::placeholder {
  color: white;
  opacity: 0.8;
}

/* Modal form content height calculation
 41 is the height of the modal title
 132 is the height of the modal content
 27 is the height of the close modal button
 10 is the height of the modal backdrop
 20 is for safty propose  
 41px - 132px - 27px - 10px - 60px - 20px
*/
.excuse-form-mobile .modal-form-content {
  max-height: calc(100vh - 290px); /* 41 + 132 + 27 + 10 + 60 + 20 = 290 */
}

/* Error message styling */
.excuse-error-message {
    color: var(--wp--preset--color--accent-2);
    margin-top: 1rem;
    text-align: center;
    font-weight: bold;
    display: none;
}