/**
 * Planity Widget - Unified Styling
 *
 * This CSS file provides consistent styling for the Planity white-label widget
 * across all three Salons Dumont locations (Laumière, Gambetta, Voltaire).
 *
 * Any changes here will apply to all three salons.
 *
 * PRIMARY COLOR CONFIGURATION:
 * - Set in: site/config/planity.php (shared.primaryColor)
 * - Current value: #000000 (black)
 * - Controls: Button backgrounds, active states, selection highlights in the widget
 * - Change location: Edit planity.php, not this CSS file
 *
 * TECHNICAL APPROACH:
 * - Uses official Planity CSS classes where available (documented at planity.gitbook.io)
 * - Uses attribute selectors [class*="prefix"] for CSS Modules classes (button-module_*, service_set-module_*)
 *   These are dynamic classes that change with each Planity build, so we match by prefix, not exact class name
 * - All overrides use !important as recommended by Planity documentation
 *
 * MAINTENANCE NOTE:
 * - Official classes (planity_*) are stable across updates
 * - Attribute selectors [class*=""] are resilient to hash changes but may need adjustment if Planity changes naming
 */

/* ============================================
   Global Widget Styling
   ============================================ */

/* Remove all border-radius globally from the widget and all children
 * This is more maintainable than targeting individual elements
 * and won't break when Planity adds new components */
.planity-widget-wrapper,
.planity-widget-wrapper * {
  border-radius: 0px !important;
}

/* ============================================
   Button Styling - Salons Dumont Design System
   ============================================ */

/* All buttons: White text on black background with white border
 * Matches the site-wide button design system */
.planity-widget-wrapper button,
.planity-widget-wrapper [class*="button-module"],
.planity-widget-wrapper .planity_appointment_service_button,
.planity-widget-wrapper .planity_ui_action_button_root,
.planity-widget-wrapper .planity_ui_button_root {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  transition: all 0.3s ease !important;
}

/* Ensure all child elements (spans, icons) inherit the color and have no border */
.planity-widget-wrapper button *,
.planity-widget-wrapper [class*="button-module"] *,
.planity-widget-wrapper .planity_appointment_service_button *,
.planity-widget-wrapper .planity_ui_action_button_root *,
.planity-widget-wrapper .planity_ui_button_root * {
  color: inherit !important;
  background-color: transparent !important; /* Force transparency to show parent button background */
  border: none !important;
  transition: color 0.3s ease !important;
  pointer-events: none !important; /* Prevent child elements from blocking hover */
}

/* Hover state: Black text on white background with black border (inverted)
 * Child elements automatically inherit the parent's color */
.planity-widget-wrapper button:hover,
.planity-widget-wrapper [class*="button-module"]:hover,
.planity-widget-wrapper .planity_appointment_service_button:hover,
.planity-widget-wrapper .planity_ui_action_button_root:hover,
.planity-widget-wrapper .planity_ui_button_root:hover {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

/* Ensure child elements also transition when parent is hovered */
.planity-widget-wrapper button:hover *,
.planity-widget-wrapper [class*="button-module"]:hover *,
.planity-widget-wrapper .planity_appointment_service_button:hover *,
.planity-widget-wrapper .planity_ui_action_button_root:hover *,
.planity-widget-wrapper .planity_ui_button_root:hover * {
  color: #000 !important;
}

/* ============================================
   Remove/Delete Button Exception
   ============================================ */

/* "Supprimer" and secondary action buttons: Minimal styling - inherit background, no border, black text
 * This includes: remove buttons, cancel buttons, and underlined text buttons */
.planity-widget-wrapper .planity_ui_action_button_root,
.planity-widget-wrapper button[class*="cancel"],
.planity-widget-wrapper button[class*="remove"],
.planity-widget-wrapper button[class*="delete"],
.planity-widget-wrapper [class*="button-module"][class*="underlined"] {
  background-color: transparent !important;
  color: #000 !important;
  border: none !important;
}

/* Hover state for secondary buttons: Keep same style (no inversion) */
.planity-widget-wrapper .planity_ui_action_button_root:hover,
.planity-widget-wrapper button[class*="cancel"]:hover,
.planity-widget-wrapper button[class*="remove"]:hover,
.planity-widget-wrapper button[class*="delete"]:hover,
.planity-widget-wrapper [class*="button-module"][class*="underlined"]:hover {
  background-color: transparent !important;
  color: #000 !important;
  border: none !important;
}

/* "Prendre RDV pour un proche" button - Black text, no border, transparent background */
.planity-widget-wrapper #add-child-button {
  background-color: transparent !important;
  color: #000 !important;
  border: none !important;
}

/* "Informations complémentaires" button - White text on black background, no hover effect */
.planity-widget-wrapper [class*="moreInfo"] {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  transition: none !important;
  text-decoration: none !important;
  border: none !important;
}

/* Ensure all children (spans, icons, +/-) in moreInfo button inherit white color */
.planity-widget-wrapper [class*="moreInfo"] * {
  color: #fff !important;
  transition: none !important;
}

/* Prevent hover effects on moreInfo button */
.planity-widget-wrapper [class*="moreInfo"]:hover {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

.planity-widget-wrapper [class*="moreInfo"]:hover * {
  color: #fff !important;
}

/* Remove underline from linked buttons */
.planity-widget-wrapper [class*="button-module"][class*="linked"] {
  text-decoration: none !important;
}

/* Selected user name - Black text */
.planity-widget-wrapper [class*="selected_user_name"] {
  color: #000 !important;
}

/* ============================================
   Account View Buttons
   ============================================ */

/* "Add to calendar" button - Minimal style like "supprimer" */
/* Using more specific selectors to override global button styles */
.planity-widget-wrapper .addToCalendar,
.planity-widget-wrapper [class*="react-add-to-calendar"],
.planity-widget-wrapper [class*="react-add-to-calendar"] button,
.planity-widget-wrapper [class*="react-add-to-calendar"] [class*="button-module"] {
  background-color: transparent !important;
  color: #000 !important;
  border: none !important;
  text-decoration: none !important;
}

/* Ensure all children in calendar button are black */
.planity-widget-wrapper .addToCalendar *,
.planity-widget-wrapper [class*="react-add-to-calendar"] *,
.planity-widget-wrapper [class*="react-add-to-calendar"] button * {
  color: #000 !important;
}

/* Cancel appointment button - Remove underline */
.planity-widget-wrapper #appointment-cancel-button-undefined {
  text-decoration: none !important;
}

/* Sign out and delete child buttons - Black text, transparent background, keep border */
.planity-widget-wrapper #profile-signOut-button,
.planity-widget-wrapper #delete-child-button {
  background-color: transparent !important;
  color: #000 !important;
}

/* Ensure children inherit black color */
.planity-widget-wrapper #profile-signOut-button *,
.planity-widget-wrapper #delete-child-button * {
  color: #000 !important;
}

/* ============================================
   Signed In User Card
   ============================================ */

/* User card text elements - Black text */
.planity-widget-wrapper [class*="signed_in-module_chooseTitle"],
.planity-widget-wrapper [class*="selectable_user-module_name"],
.planity-widget-wrapper [class*="selectable_user-module_nameSection"] {
  color: #000 !important;
}

/* Edit user button - Black text on transparent background */
.planity-widget-wrapper #selectable-user-edit-button {
  background-color: transparent !important;
  color: #000 !important;
  border: none !important;
}

/* Ensure children inherit black color */
.planity-widget-wrapper #selectable-user-edit-button * {
  color: #000 !important;
}

/* ============================================
   Modal Styling (Add Person to Account)
   ============================================ */

/* Modal container and all children - Black text, EXCEPT buttons */
/* Buttons are excluded using :not() so they inherit from global button styles */
.planity-widget-wrapper [class*="modal-module_container"],
.planity-widget-wrapper [class*="modal-module_container"] *:not(button):not([class*="button-module"]) {
  color: #000 !important;
}

/* ============================================
   Textarea/Comment Field Styling
   ============================================ */

/* Textarea container and children - Black text for user input */
.planity-widget-wrapper [class*="textarea-module_container"] textarea,
.planity-widget-wrapper [class*="textarea-module_container"] * {
  color: #000 !important;
}

/* Keep placeholder text with default styling (gray) */
.planity-widget-wrapper [class*="textarea-module_container"] textarea::placeholder {
  color: inherit !important;
  opacity: 0.5 !important;
}

/* ============================================
   Service Display Customization
   ============================================ */

/* Service cells - larger font and black text */
.planity_appointment_service_cell,
.planity_appointment_service_small-cell {
    font-size: 1.1em !important;
    color: #000 !important;
}

/* ============================================
   Date/Time Selection Styling
   ============================================ */

/* Day names (lundi, mardi, etc.) - Black text */
.planity-widget-wrapper [class*="page-module_day-"] {
    color: #000 !important;
}

/* ============================================
   Authentication/Create Account Module
   ============================================ */

/* Authentication wrapper - Black text for all form content */
.planity-widget-wrapper [class*="authentication-module"] {
    color: #000 !important;
}

/* All input fields in authentication forms - Black text, no border-radius */
.planity-widget-wrapper [class*="authentication-module"] input,
.planity-widget-wrapper [class*="authentication-module"] input[type="text"],
.planity-widget-wrapper [class*="authentication-module"] input[type="email"],
.planity-widget-wrapper [class*="authentication-module"] input[type="tel"],
.planity-widget-wrapper [class*="authentication-module"] input[type="password"] {
    color: #000 !important;
    border-radius: 0px !important;
}

/* Primary submit buttons in authentication (Create account, Login, etc.) - Main button style */
.planity-widget-wrapper [class*="authentication-module"] [class*="submit"],
.planity-widget-wrapper [class*="authentication-module"] button[class*="primary"] {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

/* Hover state for submit buttons - Inverted colors */
.planity-widget-wrapper [class*="authentication-module"] [class*="submit"]:hover,
.planity-widget-wrapper [class*="authentication-module"] button[class*="primary"]:hover {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
}

/* "Mot de passe oublié" (forgot password) button - Minimal style like "supprimer" */
.planity-widget-wrapper [class*="authentication-module"] [class*="forgot"],
.planity-widget-wrapper [class*="authentication-module"] button[class*="link"],
.planity-widget-wrapper [class*="authentication-module"] a[class*="link"] {
    background-color: transparent !important;
    color: #000 !important;
    border: none !important;
}

/* Hover state for forgot password button - Keep same style */
.planity-widget-wrapper [class*="authentication-module"] [class*="forgot"]:hover,
.planity-widget-wrapper [class*="authentication-module"] button[class*="link"]:hover,
.planity-widget-wrapper [class*="authentication-module"] a[class*="link"]:hover {
    background-color: transparent !important;
    color: #000 !important;
    border: none !important;
}

/* ============================================
   Card and Layout Styling
   ============================================ */

/* Full width for service cards and step wrappers */
.planity_ui_item-list-element,
.planity_appointment_step_wrapper {
  width: 100% !important;
}

/* ============================================
   Staff Selection Enhancement
   ============================================ */

/* Staff member names */
.planity_ui_action_worker-name {
  font-weight: 600 !important;
}

/* ============================================
   Widget Background
   ============================================ */

/* Main widget container */
.planity_ui_appointment_background
 {
  background-color: #fffffff0 !important;
  color: #000 !important;
  padding: 20px !important;
}

.step-module_timetable-eQDKH {
  background-color: #fffffff0 !important;
  color: #000 !important;
}

/* ============================================
   Hide Navigation Button
   ============================================ */

/* Hide the "Prendre un RDV" navigation button in the Planity widget */
.planity-widget-wrapper .planity-nav-button-active,
.planity-widget-wrapper button.planity-nav-button-active,
.planity-widget-wrapper [class*="button-module"].planity-nav-button-active {
  display: none !important;
}