/* ========================================
   PennaStory Shared Styles
   ======================================== */

/* Global Typography and Base Styles */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #FFF3E0; /* Warm Ivory background from design system */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Enhanced Focus States - WCAG 2.1 AA compliant */
.input:focus,
.textarea:focus,
.select:focus {
  outline: 2px solid #4A6FA5;
  outline-offset: 2px;
  border-color: #4A6FA5;
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.btn:focus-visible {
  outline: 2px solid #4A6FA5;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.checkbox:focus,
.radio:focus {
  outline: 2px solid #4A6FA5;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.link:focus-visible {
  outline: 2px solid #4A6FA5;
  outline-offset: 2px;
  background-color: rgba(74, 111, 165, 0.1);
  border-radius: 0.25rem;
}

/* Skip link for screen readers - WCAG 2.1 requirement */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #4A6FA5;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 0 0 4px 4px;
}
.skip-link:focus {
  top: 0;
}

/* ========================================
   TOUCH TARGET OPTIMIZATION - WCAG 2.1 AA
   ======================================== */

/* Ensure all interactive elements meet minimum 44px touch target */
.btn {
  min-height: 44px;
  min-width: 44px;
}

.btn-sm {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
}

.btn-circle {
  min-height: 44px;
  min-width: 44px;
  width: 44px;
  height: 44px;
}

.btn-circle.btn-sm {
  min-height: 44px;
  min-width: 44px;
  width: 44px;
  height: 44px;
}

/* Enhanced touch targets for form controls */
.checkbox {
  min-height: 20px;
  min-width: 20px;
  margin: 12px; /* Provides 44px total touch area */
}

.radio {
  min-height: 20px;
  min-width: 20px;
  margin: 12px; /* Provides 44px total touch area */
}

/* Improve checkbox/radio labels for better touch targets */
.checkbox + .label-text,
.radio + .label-text {
  padding: 12px 8px;
  cursor: pointer;
}

/* Mobile navigation improvements */
.dropdown [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

.menu li > * {
  min-height: 44px;
  padding: 12px 16px;
}

/* Link touch targets */
.navbar a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Input fields should have adequate height */
.input {
  min-height: 44px;
}

.textarea {
  min-height: 44px;
}

.select {
  min-height: 44px;
}

/* Tab buttons need adequate touch targets */
.tab {
  min-height: 44px;
  padding: 8px 16px;
}


/* ========================================
   ANIMATIONS & EFFECTS
   ======================================== */

/* Floating animation */
.floating {
  animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Character floating animation */
.character-float {
  animation: character-float 5s ease-in-out infinite;
}
@keyframes character-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

/* Twinkle animation for magical elements */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Pulse animation */
.dropzone-active {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* Pulse border animation */
@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 15px 2px rgba(74, 111, 165, 0.5); }
  50% { box-shadow: 0 0 20px 5px rgba(74, 111, 165, 0.8); }
}

/* Floating shapes animation */
.floating-shape {
  position: absolute;
  opacity: 0.6;
  z-index: -1;
  filter: blur(5px);
  animation: float-shape 8s ease-in-out infinite;
}
@keyframes float-shape {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(15px, -25px) rotate(5deg); }
}

/* Bubble floating animation */
@keyframes float-bubble {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -30px); }
}

/* Gradient rotation for borders */
@keyframes rotate {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ========================================
   DECORATIVE ELEMENTS & BACKGROUNDS
   ======================================== */

/* Fun vibrant decorations */
.shape-decoration {
  position: absolute;
  z-index: -1;
  opacity: 0.6;
  filter: blur(1px);
}

/* Background decorations for screen-3 */
.deco-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  z-index: -1;
  filter: blur(40px);
}
.deco-1 {
  background-color: rgba(74, 111, 165, 0.6); /* Increased opacity for better visibility */
  width: 300px;
  height: 300px;
  top: 10%;
  left: -150px;
}
.deco-2 {
  background-color: rgba(147, 112, 219, 0.6); /* Increased opacity for better visibility */
  width: 400px;
  height: 400px;
  top: 40%;
  right: -200px;
}
.deco-3 {
  background-color: rgba(76, 175, 80, 0.6); /* Increased opacity for better visibility */
  width: 250px;
  height: 250px;
  bottom: 10%;
  left: 20%;
}

/* Floating bubbles for screen-2 */
.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8; /* Increased from 0.5 to 0.8 for better visibility */
  filter: blur(5px);
  z-index: -1;
}
.bubble-1 {
  width: 100px;
  height: 100px;
  background-color: rgba(74, 111, 165, 0.5); /* Increased from 0.2 to 0.5 for better visibility */
  top: 20%;
  left: 10%;
  animation: float-bubble 8s ease-in-out infinite;
}
.bubble-2 {
  width: 150px;
  height: 150px;
  background-color: rgba(147, 112, 219, 0.5); /* Increased from 0.2 to 0.5 for better visibility */
  top: 60%;
  right: 5%;
  animation: float-bubble 12s ease-in-out infinite 2s;
}
.bubble-3 {
  width: 80px;
  height: 80px;
  background-color: rgba(76, 175, 80, 0.5); /* Increased from 0.2 to 0.5 for better visibility */
  bottom: 15%;
  left: 20%;
  animation: float-bubble 10s ease-in-out infinite 1s;
}

/* Floating shapes for screen-4 */
.shape-1 {
  background-color: rgba(74, 111, 165, 0.5); /* Increased from 0.2 to 0.5 for better visibility */
  width: 150px;
  height: 150px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  top: 10%;
  left: 5%;
}
.shape-2 {
  background-color: rgba(147, 112, 219, 0.5); /* Increased from 0.2 to 0.5 for better visibility */
  width: 180px;
  height: 180px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  bottom: 15%;
  right: 5%;
  animation-delay: 2s;
}

/* Pattern background */
.pattern-bg {
  background-color: rgba(74, 111, 165, 0.15); /* Increased from 0.05 to 0.15 for better visibility */
  background-image: radial-gradient(rgba(147, 112, 219, 0.3) 2px, transparent 2px); /* Increased from 0.1 to 0.3 */
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* Gradient border effects */
.gradient-border {
  position: relative;
  border-radius: 1rem;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 1.2rem;
  background: linear-gradient(45deg, #4A6FA5, #9370DB, #4CAF50, #FFD54F);
  z-index: -1;
  animation: rotate 4s linear infinite;
}

/* ========================================
   CARD EFFECTS & INTERACTIONS
   ======================================== */

/* Character card styling (screen-2) */
.character-card {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.character-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(74, 111, 165, 0.2), 
    rgba(147, 112, 219, 0.2),
    rgba(76, 175, 80, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.character-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}
.character-card:hover::after {
  opacity: 1;
}

/* Story card styling (screen-3) */
.story-card {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.story-card:hover {
  transform: translateY(-5px);
}
.story-card:hover::before {
  opacity: 1;
}
.story-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  color: white;
  z-index: 2;
}

/* Story selection shine effect */
.story-selected {
  position: relative;
}
.story-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #4A6FA5;
  border-radius: 1rem;
  box-shadow: 0 0 15px 2px rgba(74, 111, 165, 0.5);
  animation: pulse-border 2s infinite;
  pointer-events: none;
  z-index: 2;
}

/* Image preview effects (screen-1) */
.image-preview {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.image-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.image-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74, 111, 165, 0.5), rgba(147, 112, 219, 0.5));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-preview:hover::before {
  opacity: 0.3;
}

/* Custom button hover effect */
.btn-fancy:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(76, 175, 80, 0.5);
}

/* ========================================
   BADGES & SPECIAL ELEMENTS
   ======================================== */

/* Magical sparkle effects for primary character */
.primary-character-badge {
  position: relative;
}
.primary-character-badge::before {
  content: "✨";
  position: absolute;
  right: -12px;
  top: -4px;
  font-size: 1.2rem;
  animation: twinkle 2s infinite;
}

/* Magic wand for story elements */
.magic-element {
  position: relative;
}
.magic-element::after {
  content: "✨";
  position: absolute;
  top: -5px;
  right: -10px;
  font-size: 0.9rem;
  animation: twinkle 3s infinite;
}

/* Magic wand for inputs */
.input-magic {
  position: relative;
}
.input-magic::before {
  content: "✨";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
}

/* ========================================
   BOOK & PAYMENT SPECIFIC STYLES
   ======================================== */

/* Book preview effects (screen-4) */
.book-preview {
  position: relative;
  perspective: 1000px;
}
.book-cover {
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  transform: rotateY(10deg);
  box-shadow: -10px 10px 15px rgba(0, 0, 0, 0.1);
}
.book-preview:hover .book-cover {
  transform: rotateY(20deg);
}

/* Dedication page styling */
.dedication-preview {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.dedication-preview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #4A6FA5, #9370DB, #4CAF50);
}

/* Shipping form highlights */
.input-highlight:focus {
  border-color: #4A6FA5;
  box-shadow: 0 0 0 1px rgba(74, 111, 165, 0.3);
}

/* Payment card styling (screen-5) */
.payment-card {
  position: relative;
  border-radius: 1rem;
  background-color: white;
  overflow: hidden;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
}
.payment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}
.payment-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4A6FA5, #9370DB, #4CAF50);
}

/* Credit card input styling */
.cc-input {
  position: relative;
}
.cc-input::after {
  content: attr(data-card-type);
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-size: 0.8rem;
  opacity: 0.7;
  font-weight: bold;
}
.cc-input[data-card-type="visa"]::after {
  content: "VISA";
  color: #1A1F71;
}
.cc-input[data-card-type="mastercard"]::after {
  content: "MasterCard";
  color: #EB001B;
}
.cc-input[data-card-type="amex"]::after {
  content: "AMEX";
  color: #006FCF;
}

/* Security badge styling */
.security-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.2);
  border-radius: 0.5rem;
  font-weight: 600;
  color: #4CAF50;
}

/* Payment method selection styling */
.payment-method-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 2px solid #E5E7EB;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.payment-method-label:hover {
  border-color: #4A6FA5;
  background-color: rgba(74, 111, 165, 0.05);
}
.payment-method-radio:checked + .payment-method-label {
  border-color: #4A6FA5;
  background-color: rgba(74, 111, 165, 0.1);
}

/* ========================================
   SUCCESS ANIMATIONS (screen-5)
   ======================================== */

/* Confetti animation for completed order */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.confetti-container.show {
  opacity: 1;
}
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--color);
  border-radius: 0;
  animation: confetti-fall var(--fall-duration) linear forwards, confetti-shake var(--shake-duration) ease-in-out infinite;
}
@keyframes confetti-fall {
  0% { transform: translateY(-100vh); }
  100% { transform: translateY(100vh); }
}
@keyframes confetti-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(15px) rotate(45deg); }
  50% { transform: translateX(-15px) rotate(-45deg); }
  75% { transform: translateX(7px) rotate(22.5deg); }
}

/* Success overlay styling */
.success-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.success-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.success-animation {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #4CAF50;
  animation: success-circle 0.3s ease-in-out, success-pulse 2s infinite;
  position: relative;
  margin-bottom: 2rem;
}
.success-animation::before, .success-animation::after {
  content: "";
  position: absolute;
  background-color: #4CAF50;
}
.success-animation::before {
  width: 20px;
  height: 4px;
  left: 22px;
  top: 60px;
  transform: rotate(45deg);
}
.success-animation::after {
  width: 40px;
  height: 4px;
  left: 36px;
  top: 56px;
  transform: rotate(-45deg);
}
@keyframes success-circle {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes success-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
  50% { box-shadow: 0 0 0 15px rgba(76, 175, 80, 0); }
}