/* =============================================================================
   PharmaHub Rx — FRONT-END design tokens for KiviCare widgets ONLY.
   Every selector is a KiviCare-namespaced class (.iq-* / .kc-* / .iq-kivicare-*),
   so this stylesheet cannot affect Listeo / WooCommerce / Dokan / Elementor.
   Covers the appointment-booking + patient-registration stepper widgets.
   ============================================================================= */

:root{
  --ph-teal-500:#1b7a88; --ph-teal-600:#156470; --ph-teal-700:#0f4c56; --ph-teal-50:#eef7f9;
  --ph-n-900:#0f172a; --ph-n-500:#64748b; --ph-n-300:#cbd5e1; --ph-n-200:#e2e8f0; --ph-n-100:#f1f5f9;
}

/* ---- Primary / secondary buttons ---- */
.iq-button-primary,
.iq-kivicare-form .iq-button-primary,
.kivicare-book-appointment .iq-button-primary{
  background-color:var(--ph-teal-500) !important; border-color:var(--ph-teal-500) !important;
  color:#fff !important; border-radius:10px !important; font-weight:600 !important; box-shadow:none !important;
}
.iq-button-primary:hover,.iq-button-primary:focus{
  background-color:var(--ph-teal-600) !important; border-color:var(--ph-teal-600) !important;
  box-shadow:0 0 0 3px var(--ph-teal-50) !important;
}
.iq-button-secondary{
  color:var(--ph-teal-600) !important; border-color:var(--ph-teal-500) !important;
  background:transparent !important; border-radius:10px !important; font-weight:600 !important;
}
.iq-button-secondary:hover{ background:var(--ph-teal-500) !important; color:#fff !important; }
.iq-color-secondary,.iq-kivicare-form a{ color:var(--ph-teal-600) !important; }

/* ---- Form controls ---- */
.iq-kivicare-form-control{
  border:1px solid var(--ph-n-300) !important; border-radius:8px !important; color:var(--ph-n-900) !important;
}
.iq-kivicare-form-control:focus{
  border-color:var(--ph-teal-500) !important; box-shadow:0 0 0 3px rgba(27,122,136,.18) !important; outline:none !important;
}

/* ---- Registration / booking stepper ---- */
.kc-stepper .kc-step .kc-step-icon,
.kc-stepper .kc-step-active .kc-step-icon{ border-radius:999px !important; }
.kc-step-active .kc-step-icon,
.kc-step.kc-step-active .kc-step-icon,
.kc-stepper .kc-step-active [class*="number"]{
  background:var(--ph-teal-500) !important; border-color:var(--ph-teal-500) !important; color:#fff !important;
}
.kc-step-active .kc-step-label,
.kc-step-active [class*="label"]{ color:var(--ph-teal-700) !important; font-weight:600 !important; }
.kc-stepper .kc-step-line.active,
.kc-stepper .kc-step-active ~ .kc-step-line{ background:var(--ph-teal-500) !important; }

/* ---- Accessible focus ring on interactive widget elements ---- */
.iq-button-primary:focus-visible,.iq-button-secondary:focus-visible,
.iq-kivicare-form-control:focus-visible,.iq-kivicare-form a:focus-visible{
  outline:2px solid var(--ph-teal-500) !important; outline-offset:2px !important;
}

@media (prefers-reduced-motion:reduce){
  .iq-fade{ transition:none !important; animation:none !important; }
}

/* =============================================================================
   Booking-flow polish — the multi-step widget on /appointment/ (Select Doctor →
   Select Service → Select Date/Time → More About Appointment → Enter Details →
   Confirmation). Confirmed class names by inspecting the live rendered markup.
   ============================================================================= */

/* Outer widget card: premium elevation + rounded corners instead of a flat block. */
.widget-tabs.iq-card{
  border:none !important; border-radius:18px !important; overflow:hidden;
  box-shadow:0 1px 2px rgba(15,76,86,.05), 0 20px 44px -24px rgba(15,76,86,.35) !important;
}
.widget-tabs.iq-bg-primary{ background:var(--ph-teal-700) !important; }

/* Step title + its progress animation bar */
.iq-kivi-tab-panel-title{
  font-weight:700 !important; letter-spacing:-.01em; color:#fff !important;
}
.iq-kivi-tab-panel-title-animation{
  background:rgba(255,255,255,.28) !important; border-radius:3px !important;
}

/* Search box inside "Select Doctor/Service" steps */
.iq-kivicare-form-control.iq-search-bg-color{
  border-radius:999px !important; border-color:rgba(255,255,255,.3) !important;
}

/* Category / service selection cards */
.iq-kivi-tab-panel-title ~ * .iq-card.iq-card-sm,
.tab-content.iq-card{
  border-radius:14px !important;
}

/* Calendar day + time-slot cards */
.iq-calendar-card{
  border-radius:14px !important; transition:transform .15s ease, box-shadow .15s ease;
}
.iq-kivi-calendar-slot{
  border-radius:10px !important;
}
.iq-kivi-calendar-slot .iq-button-primary,
.iq-kivi-calendar-slot .iq-button-secondary{
  border-radius:8px !important; font-size:13px !important;
}

/* Confirmation screen */
.kc-confirmation-buttons .iq-button{
  border-radius:10px !important; font-weight:650 !important;
}
.kc-confirmation-hr{ border-color:var(--ph-n-200) !important; opacity:.7; }
.kc-check-email{ color:var(--ph-n-500) !important; }

/* Auth panels (sign in / register) that appear inline within the flow */
.kivicare-login-form-data .iq-button-primary,
.kivicare-register-form-data .iq-button-primary{
  width:100%;
}