/* ========================================================================
   Card edges for washed-out screens -- public pages and the patient side
   CavClinics - Dental Services Management Platform

   On a school TV or a projector the near-white card borders (#E1E7F0)
   disappear and the page looks scattered. Here the edges are a clear
   slate-blue instead, and a little gold marks what matters:
     - every hairline and field (--gt-line) is a step darker;
     - cards get a 2px slate-blue edge (only while not hovered or selected,
       so their own hover and "selected" colours still show);
     - cards that open something turn gold on hover;
     - a slow gold highlight travels around a few key boxes.
   Colour and width only: no layout or behaviour changes. The gold stops for
   anyone who asks for less motion. Loaded last by includes/guest-head.php.
   The About page keeps its own copy of these rules (about.php).
   ======================================================================== */

body.guest-theme {
    --gt-line: #cdd6e4;
    --tv-card-border: #b0bdd2;
    --tv-gold: #dbba6d;
    --tv-gold-light: #f4dfa4;
    --tv-gold-glow: 0 0 0 1px rgba(219, 186, 109, 0.45), 0 22px 44px -22px rgba(156, 122, 44, 0.45);
}

/* Cards that already have a border: 2px always, so hovering does not shift
   them. :not(#tv-edge) only lifts a rule above the theme's more specific ones;
   nothing has that id. */
body.guest-theme :is(.clinic-card, .gt-clinic-card, .gt-service, .gt-feature, .service-detail-card, .symptom-card,
    .service-option-card, .service-item, .quick-action-btn, .book-new-card, .appointment-card-modern,
    .record-card-modern, .search-filters-box, .summary-card, .history-table-wrap):not(#tv-edge) {
    border-width: 2px;
}

/* Slate-blue while at rest. Cards whose hover or "selected" colour is their
   own (gold on services and "Why choose", navy on symptoms and booking
   choices) keep it. */
body.guest-theme :is(.gt-service, .gt-feature, .service-detail-card, .symptom-card, .service-option-card,
    .clinic-card, .gt-clinic-card, .quick-action-btn, .book-new-card, .appointment-card-modern,
    .record-card-modern, .service-item):not(:hover):not(.selected):not(.active) {
    border-color: var(--tv-card-border);
}
/* Symptom checker: a ticked symptom keeps its navy edge. The rule above
   spares .selected / .active; these are marked by a checked box instead. */
body.guest-theme .symptom-option input:checked + .symptom-card:not(#tv-edge) {
    border-color: var(--primary-color, #2D457A);
}
/* Boxes that do not react to the mouse: slate-blue always. */
body.guest-theme :is(.search-filters-box, .summary-card, .history-table-wrap,
    .appointments-list.is-empty .empty-state):not(#tv-edge) {
    border-color: var(--tv-card-border);
}

/* Panels that had only a shadow get an edge too. */
body.guest-theme :is(.dashboard-card, .clinic-section, .sidebar-card, .profile-sidebar-modern,
    .profile-main-modern, .records-sidebar-modern, .booking-step, .form-step) {
    border: 2px solid var(--tv-card-border);
}

/* Cards that open something: a gold edge on hover. */
body.guest-theme :is(.clinic-card, .gt-clinic-card, .quick-action-btn, .book-new-card,
    .appointment-card-modern, .record-card-modern, .service-item):hover:not(#tv-edge) {
    border-color: var(--tv-gold);
    box-shadow: var(--tv-gold-glow);
}

/* ---- Gold that travels around a few key boxes -------------------------- */
@property --gold-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes gold-orbit {
    to { --gold-angle: 360deg; }
}

/* Home: the hero search. Patient dashboard: "Book new appointment" and,
   with no appointments, the empty box above it. */
body.guest-theme :is(.gt-search, .book-new-card, .appointments-list.is-empty .empty-state) {
    position: relative;
}
body.guest-theme :is(.gt-search, .book-new-card, .appointments-list.is-empty .empty-state)::before {
    content: '';
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--gold-angle),
        transparent 0deg 220deg,
        rgba(219, 186, 109, 0.35) 255deg,
        var(--tv-gold) 290deg,
        var(--tv-gold-light) 305deg,
        var(--tv-gold) 320deg,
        transparent 350deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    animation: gold-orbit 6s linear infinite;
}
body.guest-theme :is(.gt-search, .book-new-card, .appointments-list.is-empty .empty-state):hover::before {
    animation-duration: 3s;
}

@media (prefers-reduced-motion: reduce) {
    body.guest-theme :is(.gt-search, .book-new-card, .appointments-list.is-empty .empty-state)::before {
        animation: none;
        display: none;
    }
}