/* ============================================
   SUNSET CHARTER TOURS - PLUGIN STYLE OVERRIDES
   Ensures booking and payment plugins match theme design
   ============================================ */

/* ============================================
   CHARTER BOOKING SYSTEM OVERRIDES
   ============================================ */

/* Calendar Header - Match Theme Colors */
.cbs-calendar-header {
  background: var(--color-white);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.cbs-calendar-title {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
}

/* Calendar Navigation Buttons - Theme Primary Style */
.cbs-calendar-prev,
.cbs-calendar-next {
  background: var(--color-sunset-orange);
  color: var(--color-white);
  border: none;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-weight: 600;
  transition: var(--transition-fast);
}

.cbs-calendar-prev:hover,
.cbs-calendar-next:hover {
  background: #E55A2B;
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* View Toggle Buttons */
.cbs-view-btn {
  padding: 10px 20px;
  background: var(--color-white);
  border: 2px solid var(--color-soft-gray);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--color-charcoal);
  transition: var(--transition-fast);
}

.cbs-view-btn.active {
  background: var(--color-sunset-orange);
  color: var(--color-white);
  border-color: var(--color-sunset-orange);
}

.cbs-view-btn:hover:not(.active) {
  border-color: var(--color-sky-blue);
  color: var(--color-sky-blue);
}

/* Calendar Grid */
.cbs-calendar-grid {
  background: var(--color-white);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.cbs-weekday {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
  background: var(--color-warm-cream);
}

/* Calendar Days */
.cbs-calendar-day {
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.cbs-calendar-day.cbs-has-events {
  background: rgba(98, 182, 203, 0.05);
  border-color: var(--color-sky-blue);
}

.cbs-calendar-day.cbs-today {
  background: rgba(247, 147, 30, 0.1);
  border-color: var(--color-golden-hour);
  box-shadow: 0 0 0 2px rgba(247, 147, 30, 0.2);
}

.cbs-day-number {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
}

/* Trip Cards in Calendar */
.cbs-trip-card {
  background: var(--color-sunset-orange);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-secondary);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.cbs-trip-card:hover {
  background: #E55A2B;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}

.cbs-trip-card.cbs-trip-sold-out {
  background: var(--color-alert-red);
  opacity: 0.8;
}

/* List View Date Badge */
.cbs-list-date {
  background: var(--color-deep-twilight);
  border-radius: var(--radius-sm);
}

.cbs-list-item {
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.cbs-list-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cbs-list-details h3 {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
}

/* Loading Spinner - Theme Colors */
.cbs-spinner {
  border: 4px solid var(--color-soft-gray);
  border-top: 4px solid var(--color-sunset-orange);
}

/* Modal Overlay */
.cbs-modal-content {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.cbs-modal-close {
  color: var(--color-charcoal);
  transition: var(--transition-fast);
}

.cbs-modal-close:hover {
  color: var(--color-sunset-orange);
}

/* Booking Form Fieldset */
.cbs-fieldset {
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-md);
}

.cbs-fieldset legend {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--color-deep-twilight);
}

.cbs-form {
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Form Labels */
.cbs-form-group label {
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--color-deep-twilight);
}

.cbs-required {
  color: var(--color-sunset-orange);
}

/* Form Inputs - Match Theme Style */
.cbs-form-group input[type="text"],
.cbs-form-group input[type="email"],
.cbs-form-group input[type="tel"],
.cbs-form-group input[type="number"],
.cbs-form-group textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-sm);
  font-family: var(--font-secondary);
  font-size: var(--font-size-body);
  transition: var(--transition-fast);
  min-height: 48px;
}

.cbs-form-group input:focus,
.cbs-form-group textarea:focus {
  outline: none;
  border-color: var(--color-sky-blue);
  box-shadow: 0 0 0 3px rgba(98, 182, 203, 0.1);
}

.cbs-form-group input.cbs-field-error {
  border-color: var(--color-alert-red);
}

/* Error Messages */
.cbs-error-message {
  color: var(--color-alert-red);
  font-size: var(--font-size-small);
}

/* Trip Summary Card */
.cbs-trip-summary {
  background: var(--color-warm-cream);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-soft-gray);
}

.cbs-trip-summary h3 {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
}

.cbs-trip-detail {
  background: var(--color-white);
  border-radius: var(--radius-sm);
}

/* Booking Summary */
.cbs-booking-summary {
  background: var(--color-warm-cream);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-soft-gray);
}

.cbs-booking-summary h4 {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
}

.cbs-summary-row {
  border-bottom: 1px solid var(--color-soft-gray);
}

.cbs-summary-total {
  border-top: 2px solid var(--color-deep-twilight);
}

/* Alert Messages */
.cbs-alert-success {
  background: rgba(39, 174, 96, 0.1);
  color: #1e7e34;
  border-left: 4px solid var(--color-success-green);
  border-radius: var(--radius-sm);
}

.cbs-alert-danger {
  background: rgba(231, 76, 60, 0.1);
  color: #9c2219;
  border-left: 4px solid var(--color-alert-red);
  border-radius: var(--radius-sm);
}

.cbs-alert-warning {
  background: rgba(247, 147, 30, 0.1);
  color: #8a5000;
  border-left: 4px solid var(--color-golden-hour);
  border-radius: var(--radius-sm);
}

/* Buttons - Match Theme Primary Button */
.cbs-btn {
  font-family: var(--font-primary);
  font-size: var(--font-size-button);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  min-height: 48px;
  padding: 0.75rem 2rem;
}

.cbs-btn-primary {
  background: var(--color-sunset-orange);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.cbs-btn-primary:hover {
  background: #E55A2B;
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

.cbs-btn:disabled {
  background: var(--color-soft-gray);
  color: rgba(44, 62, 80, 0.5);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

/* Badges */
.cbs-badge {
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
}

.cbs-badge-success {
  background: var(--color-success-green);
  color: var(--color-white);
}

.cbs-badge-warning {
  background: var(--color-golden-hour);
  color: var(--color-white);
}

.cbs-badge-danger {
  background: var(--color-alert-red);
  color: var(--color-white);
}

/* Availability Status */
.cbs-available {
  background: rgba(39, 174, 96, 0.1);
  color: var(--color-success-green);
  border-radius: var(--radius-sm);
}

.cbs-limited {
  background: rgba(247, 147, 30, 0.1);
  color: #8a5000;
  border-radius: var(--radius-sm);
}

.cbs-sold_out {
  background: rgba(231, 76, 60, 0.1);
  color: var(--color-alert-red);
  border-radius: var(--radius-sm);
}

/* ============================================
   SQUARE PAYMENT GATEWAY OVERRIDES
   ============================================ */

/* Payment Wrapper */
.spg-payment-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Test Mode Banner */
.spg-test-mode-banner {
  background: rgba(247, 147, 30, 0.1);
  border: 2px solid var(--color-golden-hour);
  border-radius: var(--radius-md);
  color: #8a5000;
}

.spg-test-mode-banner strong {
  color: var(--color-golden-hour);
  font-family: var(--font-primary);
}

/* Payment Header */
.spg-payment-header h2 {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
}

.spg-subtitle {
  color: var(--color-charcoal);
  font-family: var(--font-secondary);
}

/* Booking Summary Card */
.spg-booking-summary {
  background: var(--color-warm-cream);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.spg-booking-summary h3 {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
  border-bottom: 2px solid var(--color-sky-blue);
}

.spg-summary-item {
  border-bottom: 1px solid var(--color-soft-gray);
}

.spg-summary-item label {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--color-deep-twilight);
}

.spg-booking-reference {
  color: var(--color-sky-blue) !important;
}

.spg-summary-total {
  border-top: 2px solid var(--color-soft-gray);
  font-family: var(--font-primary);
}

.spg-total-amount {
  color: var(--color-success-green) !important;
  font-family: var(--font-primary);
}

/* Payment Form Section */
.spg-payment-form-section h3 {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
  border-bottom: 2px solid var(--color-sky-blue);
}

/* Square Card Container */
#spg-card-container {
  min-height: 200px;
}

/* Status Messages */
.spg-status-message {
  border-radius: var(--radius-md);
  font-family: var(--font-secondary);
}

.spg-status-message.spg-processing {
  background: rgba(98, 182, 203, 0.1);
  border: 1px solid var(--color-sky-blue);
  color: var(--color-deep-twilight);
}

.spg-status-message.spg-success {
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid var(--color-success-green);
  color: #1e7e34;
}

.spg-status-message.spg-error {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid var(--color-alert-red);
  color: #9c2219;
}

/* Spinner */
.spg-spinner {
  border: 3px solid var(--color-soft-gray);
  border-top-color: var(--color-sunset-orange);
}

/* Icons */
.spg-icon-success {
  background: var(--color-success-green);
}

.spg-icon-error {
  background: var(--color-alert-red);
}

/* Payment Button - Theme Primary Style */
.spg-payment-button {
  padding: 1rem 2rem;
  font-family: var(--font-primary);
  font-size: var(--font-size-button);
  font-weight: 600;
  background: var(--color-sunset-orange);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-white);
  min-height: 56px;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.spg-payment-button:hover {
  background: #E55A2B;
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
  transform: translateY(-2px);
}

.spg-payment-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

.spg-payment-button.spg-button-disabled,
.spg-payment-button:disabled {
  background: var(--color-soft-gray);
  color: rgba(44, 62, 80, 0.5);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

/* Secure Notice */
.spg-secure-notice {
  background: var(--color-warm-cream);
  border-radius: var(--radius-sm);
  color: var(--color-charcoal);
  font-family: var(--font-secondary);
}

.spg-secure-notice svg {
  color: var(--color-success-green);
}

/* Help Text */
.spg-help-text {
  color: var(--color-charcoal);
  font-family: var(--font-secondary);
}

.spg-help-text a {
  color: var(--color-sky-blue);
  transition: var(--transition-fast);
}

.spg-help-text a:hover {
  color: var(--color-sunset-orange);
}

/* Error/Notice Messages */
.spg-error {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid var(--color-alert-red);
  border-radius: var(--radius-md);
  color: #9c2219;
}

.spg-notice-success {
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid var(--color-success-green);
  border-radius: var(--radius-md);
  color: #1e7e34;
}

/* Confirmation Page */
.spg-confirmation-wrapper {
  padding: var(--spacing-2xl) var(--spacing-xl);
}

.spg-success-icon {
  background: var(--color-success-green);
  box-shadow: var(--shadow-md);
}

.spg-confirmation-header h2 {
  font-family: var(--font-primary);
  color: var(--color-deep-twilight);
}

.spg-confirmation-subtitle {
  font-family: var(--font-secondary);
  color: var(--color-charcoal);
}

.spg-confirmation-details {
  background: var(--color-warm-cream);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.spg-detail-row {
  border-bottom: 1px solid var(--color-soft-gray);
}

.spg-detail-label {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--color-deep-twilight);
}

.spg-detail-value {
  font-family: var(--font-secondary);
  color: var(--color-charcoal);
}

/* Action Buttons */
.spg-button {
  font-family: var(--font-primary);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  min-height: 48px;
}

.spg-button-primary {
  background: var(--color-sunset-orange);
  color: var(--color-white);
  border: 2px solid var(--color-sunset-orange);
  box-shadow: var(--shadow-md);
}

.spg-button-primary:hover {
  background: #E55A2B;
  border-color: #E55A2B;
  transform: scale(1.02);
}

.spg-button-secondary {
  background: var(--color-white);
  color: var(--color-sky-blue);
  border: 2px solid var(--color-sky-blue);
}

.spg-button-secondary:hover {
  background: var(--color-sky-blue);
  color: var(--color-white);
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
  /* Ensure touch-friendly button sizes */
  .cbs-btn,
  .spg-payment-button,
  .spg-button {
    min-height: 48px;
    padding: 0.875rem 1.5rem;
  }

  /* Calendar adjustments */
  .cbs-calendar-header {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .cbs-calendar-prev,
  .cbs-calendar-next {
    width: 100%;
  }

  /* Form inputs mobile friendly */
  .cbs-form-group input[type="text"],
  .cbs-form-group input[type="email"],
  .cbs-form-group input[type="tel"],
  .cbs-form-group input[type="number"],
  .cbs-form-group textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

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

/* Ensure focus states are visible */
.cbs-btn:focus,
.spg-payment-button:focus,
.spg-button:focus {
  outline: 3px solid var(--color-sky-blue);
  outline-offset: 2px;
}

.cbs-form-group input:focus,
.cbs-form-group textarea:focus {
  outline: 3px solid var(--color-sky-blue);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .cbs-btn-primary,
  .spg-payment-button {
    border: 2px solid currentColor;
  }

  .cbs-form-group input,
  .cbs-form-group textarea {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .cbs-btn,
  .cbs-trip-card,
  .cbs-list-item,
  .spg-payment-button,
  .spg-button {
    transition: none;
    transform: none !important;
  }
}