/* Appoint-360 Unified Widget Styles */

.appoint360-widget {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: #333;
}

.appoint360-widget * {
  box-sizing: border-box;
}

/* Input Fields */
.appoint360-widget input[type="text"],
.appoint360-widget input[type="email"],
.appoint360-widget input[type="tel"],
.appoint360-widget input[type="time"],
.appoint360-widget select,
.appoint360-widget textarea {
  font-size: 14px;
  font-family: inherit;
}

.appoint360-widget input[type="text"]:focus,
.appoint360-widget input[type="email"]:focus,
.appoint360-widget input[type="tel"]:focus,
.appoint360-widget input[type="time"]:focus,
.appoint360-widget select:focus,
.appoint360-widget textarea:focus {
  outline: none;
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* Buttons */
.appoint360-widget button {
  transition: all 0.2s ease-in-out;
}

.appoint360-widget button[type="submit"] {
  background-color: #9333ea;
}

.appoint360-widget button[type="submit"]:hover {
  background-color: #7e22ce;
}

.appoint360-widget button[type="submit"]:active {
  transform: scale(0.98);
}

/* Messages */
.appoint360-widget .success-message {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

.appoint360-widget .error-message {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Calendar */
#appoint360-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

#appoint360-calendar-grid button {
  padding: 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  min-height: 40px;
}

#appoint360-calendar-grid button:hover {
  background-color: #f3f4f6;
  border-color: #9333ea;
}

#appoint360-calendar-grid button:active {
  background-color: #9333ea;
  color: white;
}

/* Responsive */
@media (max-width: 600px) {
  .appoint360-widget {
    margin: 15px 0;
  }

  .appoint360-widget input,
  .appoint360-widget select,
  .appoint360-widget textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  #appoint360-calendar-grid {
    gap: 5px;
  }

  #appoint360-calendar-grid button {
    min-height: 35px;
    padding: 8px;
    font-size: 12px;
  }
}

/* ===================================================== */
/* CALENDAR STYLE THEMES */
/* ===================================================== */

/* Default Theme - Purple (backward compatibility) */
.appoint360-theme-default #appoint360-calendar {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.appoint360-theme-default #appoint360-calendar-header h4 {
  color: #111827;
}

.appoint360-theme-default #appoint360-calendar-grid button {
  border-color: #e5e7eb;
}

.appoint360-theme-default #appoint360-calendar-grid button:hover {
  background-color: #f3f4f6;
  border-color: #9333ea;
  color: #9333ea;
}

.appoint360-theme-default #appoint360-calendar-grid button:active {
  background-color: #9333ea;
  color: white;
}

/* ===================================================== */
/* Theme 1: Modern Clean - Light Blue (#0066CC) */
/* ===================================================== */
.appoint360-theme-modern-clean #appoint360-calendar {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%);
  border: 2px solid #0066cc;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 102, 204, 0.1);
}

.appoint360-theme-modern-clean #appoint360-calendar-header h4 {
  color: #0066cc;
  font-size: 18px;
  font-weight: 600;
}

.appoint360-theme-modern-clean #appoint360-calendar-header button {
  color: #0066cc;
  font-weight: 600;
}

.appoint360-theme-modern-clean #appoint360-calendar-grid button {
  background: white;
  border: 1px solid #b3d9ff;
  color: #0066cc;
  font-weight: 500;
  transition: all 0.2s ease;
}

.appoint360-theme-modern-clean #appoint360-calendar-grid button:hover {
  background-color: #e0effe;
  border-color: #0066cc;
  box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
}

.appoint360-theme-modern-clean #appoint360-calendar-grid button:active {
  background-color: #0066cc;
  color: white;
  border-color: #0052a3;
}

.appoint360-theme-modern-clean button[type="submit"] {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
  color: white;
  font-weight: 600;
  border: none;
}

.appoint360-theme-modern-clean button[type="submit"]:hover {
  background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
}

/* ===================================================== */
/* Theme 2: Corporate Blue - Deep Blue (#003366) */
/* ===================================================== */
.appoint360-theme-corporate-blue #appoint360-calendar {
  background: linear-gradient(135deg, #f5f9fc 0%, #e8f1f8 100%);
  border: 2px solid #003366;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 51, 102, 0.15);
}

.appoint360-theme-corporate-blue #appoint360-calendar-header h4 {
  color: #003366;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.appoint360-theme-corporate-blue #appoint360-calendar-header button {
  color: #003366;
  font-weight: 700;
}

.appoint360-theme-corporate-blue #appoint360-calendar-grid button {
  background: white;
  border: 1px solid #99b3cc;
  color: #003366;
  font-weight: 600;
  transition: all 0.3s ease;
}

.appoint360-theme-corporate-blue #appoint360-calendar-grid button:hover {
  background-color: #e8f1f8;
  border-color: #003366;
  box-shadow: 0 3px 8px rgba(0, 51, 102, 0.25);
  transform: translateY(-1px);
}

.appoint360-theme-corporate-blue #appoint360-calendar-grid button:active {
  background-color: #003366;
  color: white;
  border-color: #001a33;
  transform: translateY(0);
}

.appoint360-theme-corporate-blue button[type="submit"] {
  background: #003366;
  color: white;
  font-weight: 700;
  border: none;
}

.appoint360-theme-corporate-blue button[type="submit"]:hover {
  background: #001a33;
}

/* ===================================================== */
/* Theme 3: Warm & Welcoming - Orange (#FF6B35) */
/* ===================================================== */
.appoint360-theme-warm-orange #appoint360-calendar {
  background: linear-gradient(135deg, #fff4f0 0%, #ffe8de 100%);
  border: 2px solid #ff6b35;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

.appoint360-theme-warm-orange #appoint360-calendar-header h4 {
  color: #ff6b35;
  font-size: 18px;
  font-weight: 600;
}

.appoint360-theme-warm-orange #appoint360-calendar-header button {
  color: #ff6b35;
  font-weight: 600;
}

.appoint360-theme-warm-orange #appoint360-calendar-grid button {
  background: white;
  border: 1px solid #ffb399;
  color: #ff6b35;
  font-weight: 500;
  transition: all 0.2s ease;
}

.appoint360-theme-warm-orange #appoint360-calendar-grid button:hover {
  background-color: #ffe8de;
  border-color: #ff6b35;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
  transform: scale(1.05);
}

.appoint360-theme-warm-orange #appoint360-calendar-grid button:active {
  background-color: #ff6b35;
  color: white;
  border-color: #e55a27;
}

.appoint360-theme-warm-orange button[type="submit"] {
  background: linear-gradient(135deg, #ff6b35 0%, #e55a27 100%);
  color: white;
  font-weight: 600;
  border: none;
}

.appoint360-theme-warm-orange button[type="submit"]:hover {
  background: linear-gradient(135deg, #e55a27 0%, #cc4920 100%);
}

/* ===================================================== */
/* Theme 4: Dark Modern - Cyan on Dark (#00D9FF) */
/* ===================================================== */
.appoint360-theme-dark-modern #appoint360-calendar {
  background: linear-gradient(135deg, #0f172a 0%, #1a1f35 100%);
  border: 2px solid #00d9ff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 217, 255, 0.15);
}

.appoint360-theme-dark-modern #appoint360-calendar-header h4 {
  color: #00d9ff;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

.appoint360-theme-dark-modern #appoint360-calendar-header button {
  color: #00d9ff;
  font-weight: 700;
}

.appoint360-theme-dark-modern #appoint360-calendar-grid button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #00d9ff;
  color: #00d9ff;
  font-weight: 600;
  transition: all 0.2s ease;
}

.appoint360-theme-dark-modern #appoint360-calendar-grid button:hover {
  background-color: rgba(0, 217, 255, 0.1);
  border-color: #00d9ff;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

.appoint360-theme-dark-modern #appoint360-calendar-grid button:active {
  background-color: #00d9ff;
  color: #0f172a;
  border-color: #00d9ff;
}

.appoint360-theme-dark-modern button[type="submit"] {
  background: linear-gradient(135deg, #00d9ff 0%, #00b8d4 100%);
  color: #0f172a;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 217, 255, 0.3);
}

.appoint360-theme-dark-modern button[type="submit"]:hover {
  background: linear-gradient(135deg, #00b8d4 0%, #0099b8 100%);
  box-shadow: 0 6px 20px rgba(0, 217, 255, 0.4);
}

/* ===================================================== */
/* Theme 5: Minimalist Green - Sage (#2D7A3D) */
/* ===================================================== */
.appoint360-theme-minimalist-green #appoint360-calendar {
  background: linear-gradient(135deg, #f0fdf4 0%, #dbeae0 100%);
  border: 2px solid #2d7a3d;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(45, 122, 61, 0.12);
}

.appoint360-theme-minimalist-green #appoint360-calendar-header h4 {
  color: #2d7a3d;
  font-size: 18px;
  font-weight: 600;
}

.appoint360-theme-minimalist-green #appoint360-calendar-header button {
  color: #2d7a3d;
  font-weight: 600;
}

.appoint360-theme-minimalist-green #appoint360-calendar-grid button {
  background: white;
  border: 1px solid #a8d5ba;
  color: #2d7a3d;
  font-weight: 500;
  transition: all 0.2s ease;
}

.appoint360-theme-minimalist-green #appoint360-calendar-grid button:hover {
  background-color: #dbeae0;
  border-color: #2d7a3d;
  box-shadow: 0 2px 6px rgba(45, 122, 61, 0.15);
}

.appoint360-theme-minimalist-green #appoint360-calendar-grid button:active {
  background-color: #2d7a3d;
  color: white;
  border-color: #1f5628;
}

.appoint360-theme-minimalist-green button[type="submit"] {
  background: linear-gradient(135deg, #2d7a3d 0%, #1f5628 100%);
  color: white;
  font-weight: 600;
  border: none;
}

.appoint360-theme-minimalist-green button[type="submit"]:hover {
  background: linear-gradient(135deg, #1f5628 0%, #153d1f 100%);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .appoint360-widget {
    color: #e5e7eb;
  }

  .appoint360-widget input[type="text"],
  .appoint360-widget input[type="email"],
  .appoint360-widget input[type="tel"],
  .appoint360-widget input[type="time"],
  .appoint360-widget select,
  .appoint360-widget textarea {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
  }

  #appoint360-calendar-grid button {
    background-color: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
  }

  #appoint360-calendar-grid button:hover {
    background-color: #374151;
  }
}