/* Custom Dropdown and Scrollbar Styling */

/* Custom Service Selection Dropdown */
.custom-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.custom-dropdown select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 14px 45px 14px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-family: "Bricolage", sans-serif;
  font-size: 1rem;
  color: #333;
  background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.custom-dropdown select:focus {
  border-color: #d35d94;
  outline: none;
  box-shadow: 0 0 0 3px rgba(211, 93, 148, 0.1),
    0 5px 15px rgba(211, 93, 148, 0.15);
  transform: translateY(-1px);
  background: linear-gradient(145deg, #ffffff 0%, #fffbfd 100%);
}

.custom-dropdown select:hover {
  border-color: #ff9ec3;
  box-shadow: 0 4px 12px rgba(255, 158, 195, 0.15);
  transform: translateY(-1px);
}

/* Custom dropdown arrow */
.custom-dropdown::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #d35d94;
  pointer-events: none;
  transition: all 0.3s ease;
}

.custom-dropdown:hover::after {
  border-top-color: #ff9ec3;
  transform: translateY(-50%) scale(1.1);
}

.custom-dropdown select:focus + ::after,
.custom-dropdown:focus-within::after {
  border-top-color: #d35d94;
  transform: translateY(-50%) rotate(180deg);
}

/* Placeholder styling for select */
.custom-dropdown select option[value=""] {
  color: #999;
  font-style: italic;
}

.custom-dropdown select option {
  padding: 12px 15px;
  background: #fff;
  color: #333;
  border: none;
  font-family: "Bricolage", sans-serif;
}

.custom-dropdown select option:hover {
  background: linear-gradient(135deg, #fff8fa 0%, #ffe6f0 100%);
  color: #d35d94;
}

.custom-dropdown select option:checked {
  background: linear-gradient(135deg, #d35d94 0%, #ff9ec3 100%);
  color: #fff;
  font-weight: 600;
}

/* Enhanced dropdown with floating label effect */
.form-group.floating-label {
  position: relative;
  margin-bottom: 2rem;
}

.form-group.floating-label label {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #999;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1;
  background: transparent;
}

.form-group.floating-label select:focus + label,
.form-group.floating-label select:valid + label,
.form-group.floating-label select:not([value=""]) + label {
  top: -8px;
  left: 12px;
  font-size: 0.8rem;
  color: #d35d94;
  background: #fff;
  padding: 0 5px;
  font-weight: 600;
}

/* Service dropdown with wedding theme icons */
.service-option-icon {
  display: inline-block;
  width: 20px;
  margin-right: 8px;
  text-align: center;
}

/* Animated dropdown opening effect */
.custom-dropdown select:focus {
  animation: dropdown-focus 0.3s ease;
}

@keyframes dropdown-focus {
  0% {
    transform: scale(1) translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  50% {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 8px 25px rgba(211, 93, 148, 0.2);
  }
  100% {
    transform: scale(1) translateY(-1px);
    box-shadow: 0 0 0 3px rgba(211, 93, 148, 0.1),
      0 5px 15px rgba(211, 93, 148, 0.15);
  }
}

/* Custom scrollbar design for dropdown (webkit browsers) */
.custom-dropdown select::-webkit-scrollbar {
  width: 8px;
}

.custom-dropdown select::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
  border-radius: 10px;
}

.custom-dropdown select::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #d35d94, #ff9ec3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.custom-dropdown select::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #c04c83, #ff8ab6);
  box-shadow: 0 2px 8px rgba(211, 93, 148, 0.3);
}

/* Custom Website Scrollbar */
/* Main body scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    rgba(255, 248, 250, 0.8) 0%,
    rgba(255, 230, 240, 0.9) 50%,
    rgba(255, 248, 250, 0.8) 100%
  );
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #d35d94 0%, #ff9ec3 50%, #ffb7d5 100%);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 10px rgba(211, 93, 148, 0.3);
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #c04c83 0%, #ff8ab6 50%, #ff9ec3 100%);
  box-shadow: 0 4px 15px rgba(211, 93, 148, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(45deg, #b44074 0%, #f071a7 50%, #ff8ab6 100%);
  box-shadow: 0 6px 20px rgba(211, 93, 148, 0.6);
}

/* Corner where scrollbars meet */
::-webkit-scrollbar-corner {
  background: rgba(255, 248, 250, 0.9);
}

/* Horizontal scrollbar (if needed) */
::-webkit-scrollbar:horizontal {
  height: 12px;
}

::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(to right, #d35d94 0%, #ff9ec3 50%, #ffb7d5 100%);
}

/* Firefox scrollbar styling */
html {
  scrollbar-width: thin;
  scrollbar-color: #d35d94 rgba(255, 248, 250, 0.8);
}

/* Scrollbar for specific elements */
.works-gallery-container::-webkit-scrollbar,
.photo-viewer::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  width: 6px;
}

.works-gallery-container::-webkit-scrollbar-thumb,
.photo-viewer::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ff9ec3, #d35d94);
  border-radius: 6px;
}

/* Enhanced form input styling to match dropdown */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form textarea {
  padding: 14px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-family: "Bricolage", sans-serif;
  font-size: 1rem;
  background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form input[type="date"]:focus,
.contact-form textarea:focus {
  border-color: #d35d94;
  box-shadow: 0 0 0 3px rgba(211, 93, 148, 0.1),
    0 5px 15px rgba(211, 93, 148, 0.15);
  transform: translateY(-1px);
  background: linear-gradient(145deg, #ffffff 0%, #fffbfd 100%);
}

.contact-form input[type="text"]:hover,
.contact-form input[type="email"]:hover,
.contact-form input[type="tel"]:hover,
.contact-form input[type="date"]:hover,
.contact-form textarea:hover {
  border-color: #ff9ec3;
  box-shadow: 0 4px 12px rgba(255, 158, 195, 0.15);
  transform: translateY(-1px);
}

/* Wedding date input special styling */
.contact-form input[type="date"] {
  position: relative;
  color: #333;
}

.contact-form input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d35d94"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>');
  background-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.contact-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(211, 93, 148, 0.1);
  transform: scale(1.1);
}

/* Floating hearts animation for focused inputs */
.form-group {
  position: relative;
  overflow: hidden;
}

.form-group::before {
  content: "♥";
  position: absolute;
  top: 50%;
  right: -30px;
  color: #ff9ec3;
  font-size: 1.2rem;
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
  z-index: 1;
}

.form-group input:focus ~ ::before,
.form-group select:focus ~ ::before,
.form-group textarea:focus ~ ::before {
  opacity: 0.6;
  right: 10px;
  transform: translateY(-50%) scale(1);
  animation: heart-float 2s ease-in-out infinite;
}

@keyframes heart-float {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-60%) scale(1.2);
    color: #d35d94;
  }
}

/* Custom radio-style indicators for service options */
.service-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ff9ec3;
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse-indicator 2s ease-in-out infinite;
}

@keyframes pulse-indicator {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .custom-dropdown select {
    padding: 12px 40px 12px 12px;
    font-size: 0.95rem;
  }

  .custom-dropdown::after {
    right: 12px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #d35d94;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form input[type="date"],
  .contact-form textarea {
    padding: 12px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  ::-webkit-scrollbar {
    width: 6px;
  }

  .custom-dropdown select {
    padding: 10px 35px 10px 10px;
    font-size: 0.9rem;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .custom-dropdown select {
    border-width: 3px;
  }

  ::-webkit-scrollbar-thumb {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .custom-dropdown select,
  .contact-form input,
  .contact-form textarea,
  ::-webkit-scrollbar-thumb {
    transition: none !important;
    animation: none !important;
  }

  .form-group::before {
    animation: none !important;
  }

  .service-indicator {
    animation: none !important;
  }
}