/*=============================================
  File: /Hotel/css/help.css
=============================================*/

/* ── Sidebar ─────────────────────────────── */
.help-sidebar-sticky { position: sticky; top: 70px; }

.help-navlink {
  display: flex; align-items: center;
  padding: .45rem .75rem; border-radius: .375rem;
  color: #495057; text-decoration: none; font-size: .875rem;
  transition: background .15s, color .15s;
}
.help-navlink:hover { background: #e9ecef; color: #0d6efd; }
.help-navlink.active { background: #e7f0ff; color: #0d6efd; font-weight: 600; }
.help-shortcut { font-size: .8125rem; transition: color .15s; }
.help-shortcut:hover { color: #0d6efd !important; }

/* ── Card header ─────────────────────────── */
.help-card-header {
  display: flex; align-items: center;
  background: #1f4e79; color: #fff;
  font-weight: 600; font-size: .9375rem;
  padding: .65rem 1rem; border-bottom: none;
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0 !important;
}
.help-card-header .btn-outline-light { font-size: .75rem; padding: .2rem .6rem; border-color: rgba(255,255,255,.5); }
.help-card-header .btn-outline-light:hover { background: rgba(255,255,255,.15); }

/* ── Sub-heading ─────────────────────────── */
.help-subhead {
  font-size: .875rem; font-weight: 600; color: #2e75b6;
  border-bottom: 2px solid #d6e4f0; padding-bottom: .25rem;
  margin-bottom: .75rem; margin-top: 1.25rem;
}
.help-subhead:first-child { margin-top: 0; }

/* ── Steps verticali ─────────────────────── */
.help-steps { display: flex; flex-direction: column; gap: 0; }
.help-step {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #f8f9fa; border: 1px solid #dee2e6;
  border-radius: .5rem; padding: .875rem 1rem;
}
.help-step-num {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: #1f4e79; color: #fff; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.help-step-body { flex: 1; }
.help-step-connector { width: 2px; height: 1.25rem; background: #1f4e79; margin-left: calc(1rem + .95rem); opacity: .4; }

/* ── Steps orizzontali ───────────────────── */
.help-steps-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.help-step-h-item { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.help-step-h-item .help-step-num { width: 2.25rem; height: 2.25rem; font-size: .875rem; }
.help-step-arrow { color: #6c757d; font-size: 1.25rem; padding: 0 .25rem; padding-bottom: 1.5rem; }

/* ── Unit cards ──────────────────────────── */
.help-unit-card { border: 2px solid; border-radius: .5rem; padding: .875rem; height: 100%; background: #fff; }
.help-unit-title { font-weight: 700; font-size: .9375rem; margin-bottom: .5rem; }
.help-example-sm { font-size: .8rem; background: #f8f9fa; border-radius: .25rem; padding: .25rem .5rem; color: #495057; }

/* ── Tip cards ───────────────────────────── */
.help-tip-card { border: 1px solid #dee2e6; border-radius: .5rem; padding: .75rem; background: #f8f9fa; height: 100%; }

/* ── Esempio ─────────────────────────────── */
.help-example { background: #fff8e1; border-left: 4px solid #ffc107; border-radius: 0 .375rem .375rem 0; padding: .65rem .875rem; font-size: .875rem; }
.help-example-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: #856404; margin-bottom: .2rem; letter-spacing: .05em; }

/* ── Tabelle ─────────────────────────────── */
.help-table { font-size: .875rem; }
.help-table thead th { white-space: nowrap; }

/* ── Accordion ───────────────────────────── */
.help-accordion .accordion-button { font-size: .875rem; font-weight: 500; padding: .65rem 1rem; }
.help-accordion .accordion-button:not(.collapsed) { background: #e7f0ff; color: #0d6efd; }
.help-accordion .accordion-body { font-size: .875rem; padding: .75rem 1rem; }

/* ── Lista ordinata ──────────────────────── */
.help-ol { padding-left: 1.25rem; font-size: .875rem; }
.help-ol li { margin-bottom: .3rem; }

/* ── Ricerca ─────────────────────────────── */
#helpSearchResults .help-search-hit {
  background: #fff; border: 1px solid #dee2e6; border-radius: .5rem;
  padding: .75rem 1rem; margin-bottom: .5rem; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
#helpSearchResults .help-search-hit:hover { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.15); }
#helpSearchResults .help-search-hit-title { font-weight: 600; font-size: .9rem; color: #0d6efd; }
#helpSearchResults .help-search-hit-ctx { font-size: .8rem; color: #6c757d; margin-top: .15rem; }
mark { background: #fff3cd; padding: 0 2px; border-radius: 2px; }

/* ── Offcanvas help ──────────────────────── */
#helpOffcanvas .offcanvas-header { background: #1f4e79; color: #fff; }
#helpOffcanvas .offcanvas-header .btn-close { filter: invert(1); }
#helpOffcanvas .offcanvas-body { font-size: .875rem; padding: 1rem; }
#helpOffcanvas .help-oc-section { margin-bottom: 1.25rem; }
#helpOffcanvas .help-oc-title {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  color: #2e75b6; letter-spacing: .05em;
  border-bottom: 1px solid #dee2e6; padding-bottom: .25rem; margin-bottom: .5rem;
}
#helpOffcanvas .help-oc-item { padding: .3rem 0; border-bottom: 1px solid #f0f0f0; color: #495057; }
#helpOffcanvas .help-oc-item:last-child { border-bottom: none; }
#helpOffcanvas .help-oc-item strong { color: #212529; }

/* ── Pulsante ? globale ──────────────────── */
#btnHelpFloat {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1040;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #1f4e79; color: #fff; border: none;
  font-size: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
}
#btnHelpFloat:hover { background: #2e75b6; transform: scale(1.08); }

/* ── Highlight sezione ───────────────────── */
.help-section-highlight { animation: helpHL .8s ease-out; }
@keyframes helpHL {
  0%   { outline: 3px solid #0d6efd; outline-offset: 4px; }
  100% { outline: 3px solid transparent; outline-offset: 4px; }
}