/**
 * Amelia Booking Plugin Responsive Integration & Styling
 * Adapts Amelia shortcodes ([ameliastepbooking], [ameliabooking], [ameliacustomerpanel])
 * to the Hasnaa-Psy deep teal healthcare theme and guarantees 100% mobile responsiveness.
 *
 * @package Hasnaa_Psy
 */

/* 1. Global Container Sizing & Fluid Width */
.amelia-theme-wrapper,
#amelia-app-booking-loaded,
#amelia-v2-booking,
.amelia-v2-booking,
.am-step-booking-catalog,
.am-fs__step-wrapper,
.am-fs__main-content,
.am-fs__body,
#amelia-app-customer-panel,
.am-customer-cabinet {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
}

/* Remove any unwanted fixed outer margins from Amelia */
.am-step-booking-catalog,
.amelia-v2-booking {
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 2. Responsive Mobile Stacking (< 768px) */
@media (max-width: 768px) {
  .am-fs__step-wrapper,
  .am-step-booking-catalog > div {
    flex-direction: column !important;
    display: flex !important;
  }

  .am-fs__sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 1.5rem !important;
  }

  .am-fs__main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Reduce internal paddings on mobile */
  .am-fs__body,
  .am-fs__content {
    padding: 12px 6px !important;
  }
}

/* 3. Calendar & Date Picker Fluidity */
.am-fs__calendar,
.am-select-date,
.el-picker-panel,
.el-date-picker {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.am-fs__calendar table,
.el-date-table {
  width: 100% !important;
  table-layout: fixed !important;
}

@media (max-width: 480px) {
  .am-fs__calendar th,
  .am-fs__calendar td,
  .el-date-table th,
  .el-date-table td {
    padding: 4px 1px !important;
    font-size: 11px !important;
  }

  .el-date-table td span {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    margin: 0 auto !important;
  }
}

/* 4. Time Slots Grid on Mobile */
.am-fs__slots,
.am-slots-list,
.am-slots-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 420px) {
  .am-fs__slots,
  .am-slots-list,
  .am-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 5. Hasnaa-Psy Signature Palette Styling (Deep Teal & Emerald) */
/* Primary Action Buttons */
.el-button--primary,
.am-button--primary,
.am-fs__btn-primary,
button.am-fs__continue-btn,
.am-confirmation-booking-btn {
  background-color: #0f766e !important;
  border-color: #0f766e !important;
  color: #ffffff !important;
  border-radius: 0.75rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(15, 118, 110, 0.2) !important;
}

.el-button--primary:hover,
.am-button--primary:hover,
.am-fs__btn-primary:hover,
button.am-fs__continue-btn:hover {
  background-color: #115e59 !important;
  border-color: #115e59 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(15, 118, 110, 0.25) !important;
}

/* Selected Active Date & Time Slots */
.el-date-table td.current:not(.disabled) span,
.el-date-table td.today span,
.am-fs__slot--selected,
.am-slot-selected {
  background-color: #0f766e !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
  font-weight: 700 !important;
}

/* Service Cards inside Amelia */
.am-service-card,
.am-fs__service-card,
.am-catalog-card {
  border-radius: 1rem !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease-in-out !important;
  background-color: #ffffff !important;
}

.am-service-card:hover,
.am-fs__service-card:hover,
.am-fs__service-card.selected,
.am-service-card.is-selected {
  border-color: #0d9488 !important;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.12) !important;
}

/* Form Inputs & Fields */
.el-input__inner,
.el-textarea__inner {
  border-radius: 0.75rem !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-size: 0.875rem !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #0d9488 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2) !important;
}

/* Checkboxes and Radios */
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #0f766e !important;
  border-color: #0f766e !important;
}

/* Dropdowns and Selects */
.el-select-dropdown__item.selected {
  color: #0f766e !important;
  font-weight: 700 !important;
}

/* 6. Customer Panel Responsiveness ([ameliacustomerpanel]) */
.am-customer-cabinet,
#amelia-app-customer-panel {
  border-radius: 1.5rem !important;
  overflow: hidden !important;
}

.am-customer-cabinet table,
.el-table {
  width: 100% !important;
  overflow-x: auto !important;
}

@media (max-width: 768px) {
  .am-customer-cabinet .el-tabs__header {
    margin-bottom: 1rem !important;
  }

  .am-customer-cabinet .el-tabs__nav {
    display: flex !important;
    width: 100% !important;
  }

  .am-customer-cabinet .el-tabs__item {
    flex: 1 !important;
    text-align: center !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}