/* ============================================================================
   Appointment widget — STYLE ISOLATION
   ----------------------------------------------------------------------------
   The widget is embedded inside visit-card pages that each ship a different
   template stylesheet. Those template styles (fonts, colours, line-height, and
   element/utility rules) inherit/bleed into the widget and make it look
   different — or broken — from one template to the next.

   This file re-baselines the widget subtree so host-template CSS cannot leak in,
   WITHOUT raising specificity above the widget's own rules:

   • Root re-baseline (inherited props: font/colour/line-height/direction/…) is
     applied on the scope roots with class-level specificity (0,1,0). It wins over
     the template's inherited values and is what every widget element inherits.
   • Element resets (a, p, headings, lists, button, img, table) are wrapped in
     :where(...) so they keep ELEMENT-level specificity (0,0,1). They beat the
     template's bare element rules by load order (this file loads AFTER the
     template), yet LOSE to the widget's own apt-* class rules in booking.css
     (0,1,0+), so the redesign is never clobbered.

   Load order MUST be: <template css> → widget-isolation.css → booking.css.

   NOTE: this neutralises the visual bleed (typography, colours, element resets).
   It deliberately does NOT re-implement Bootstrap layout/grid/modal classes the
   widget relies on — the host card pages already provide Bootstrap. For total,
   guaranteed isolation regardless of host, a Shadow DOM / iframe embed would be
   required (larger change).
   ============================================================================ */

/* ---- Root re-baseline: inherited typography & rendering -------------------- */
.appointment-widget,
#bookingModal,
#statusModal,
#commentsModal,
#addCommentModal,
#ratingModal,
#myAppointmentsModal {
    font-family: var(--apt-font, "IRANSans", "IRANSansWeb", "Vazirmatn", "Vazir", "Segoe UI", Tahoma, sans-serif);
    color: var(--apt-text, #0F172A);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    text-align: right;
    direction: rtl;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
    text-transform: none;
    text-shadow: none;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* ---- Universal box model inside the widget (safe; booking.css assumes it) --- */
.appointment-widget *,
.appointment-widget *::before,
.appointment-widget *::after,
#bookingModal *, #bookingModal *::before, #bookingModal *::after,
#statusModal *, #statusModal *::before, #statusModal *::after,
#commentsModal *, #commentsModal *::before, #commentsModal *::after,
#addCommentModal *, #addCommentModal *::before, #addCommentModal *::after,
#ratingModal *, #ratingModal *::before, #ratingModal *::after,
#myAppointmentsModal *, #myAppointmentsModal *::before, #myAppointmentsModal *::after {
    box-sizing: border-box;
}

/* ---- Element resets at ELEMENT specificity (via :where) -------------------- */
/* These beat the template's bare element rules by load order but never override
   the widget's own apt-* class rules. */
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) a {
    color: inherit;
    text-decoration: none;
    background: transparent;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) button {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) input,
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) select,
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) p {
    margin: 0;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) :is(h1, h2, h3, h4, h5, h6) {
    font: inherit;
    font-weight: 700;
    margin: 0;
    color: inherit;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) :is(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) li {
    margin: 0;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) label {
    margin: 0;
    font-weight: inherit;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) :is(table, thead, tbody, tr, td, th) {
    border-collapse: collapse;
    background: transparent;
}
:where(.appointment-widget, #bookingModal, #statusModal, #commentsModal, #addCommentModal, #ratingModal, #myAppointmentsModal) :is(svg, i, span, small, strong, b, div) {
    letter-spacing: inherit;
}