/* =========================================================================
   Sokolink — Help centre
   A self-contained, context-aware help drawer that explains every section of
   the merchant dashboard in plain language. Pure progressive enhancement:
   js/help.js builds all the DOM, this file only styles it. Scoped under
   .sl-help* class names so it can never clash with existing app styles.
   ========================================================================= */

/* ---- the little "?" launcher that sits in the dashboard header ---- */
.sl-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sl-help-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.sl-help-btn i { font-size: 0.95em; }

/* small round "?" chips that sit next to a section title */
.sl-help-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    border-radius: 50%;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    color: var(--color-gray-500);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    vertical-align: middle;
    transition: all var(--transition-fast);
}
.sl-help-chip:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* floating fallback button (bottom-right) — always reachable */
.sl-help-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 1200;
    transition: transform var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast), visibility var(--transition-fast);
}
.sl-help-fab:hover { background: var(--color-primary-hover); transform: translateY(-2px); }
.sl-help-fab:active { transform: translateY(0); }

/* Get the floating "?" out of the way whenever something slides over the
   page, so it never covers the cart's Checkout button or sits on top of an
   open panel. The moment the shopping cart (or the help drawer itself) is
   open, the button fades out; it comes back as soon as they close.
   Supported in Edge and modern phone browsers; anywhere it isn't, the button
   simply stays put exactly as before. */
body:has(.customer-cart-panel:not(.hidden)) .sl-help-fab,
body:has(.sl-help-backdrop.open) .sl-help-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
}

/* ---- backdrop + sliding drawer ---- */
.sl-help-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 1300;
}
.sl-help-backdrop.open { opacity: 1; visibility: visible; }

.sl-help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 420px;
    max-width: 92vw;
    background: var(--color-white);
    box-shadow: -8px 0 30px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: 1310;
    display: flex;
    flex-direction: column;
}
.sl-help-drawer.open { transform: translateX(0); }

.sl-help-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}
.sl-help-head .sl-help-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.sl-help-head h3 { margin: 0; font-size: var(--text-xl); color: var(--color-gray-900); }
.sl-help-head p  { margin: 1px 0 0; font-size: var(--text-xs); color: var(--color-gray-500); }
.sl-help-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--color-gray-500);
    font-size: 20px;
    cursor: pointer;
    width: 34px; height: 34px;
    border-radius: 8px;
}
.sl-help-close:hover { background: var(--color-gray-100); color: var(--color-gray-800); }

.sl-help-search {
    padding: 12px 18px;
    border-bottom: 1px solid var(--color-gray-100);
    flex-shrink: 0;
}
.sl-help-search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    font-size: var(--text-base);
    font-family: var(--font-sans);
}
.sl-help-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.sl-help-body {
    overflow-y: auto;
    padding: 10px 14px 28px;
    flex: 1 1 auto;
}

.sl-help-topic {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    margin: 8px 0;
    overflow: hidden;
    background: var(--color-white);
}
.sl-help-topic.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.sl-help-topic-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 13px 14px;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-gray-800);
}
.sl-help-topic-head i.sl-help-tico {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--color-gray-100);
    color: var(--color-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.sl-help-topic-head .sl-help-caret {
    margin-left: auto;
    color: var(--color-gray-400);
    transition: transform var(--transition-fast);
    font-size: 12px;
}
.sl-help-topic.open .sl-help-caret { transform: rotate(180deg); }
.sl-help-topic-body {
    display: none;
    padding: 2px 16px 16px 50px;
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: 1.6;
}
.sl-help-topic.open .sl-help-topic-body { display: block; }
.sl-help-topic-body p  { margin: 8px 0; }
.sl-help-topic-body ul { margin: 8px 0; padding-left: 18px; }
.sl-help-topic-body li { margin: 5px 0; }
.sl-help-topic-body strong { color: var(--color-gray-800); }
.sl-help-tip {
    background: var(--color-primary-light);
    border-radius: var(--border-radius);
    padding: 9px 12px;
    margin: 10px 0 2px;
    font-size: var(--text-sm);
    color: var(--color-primary-dark);
}
.sl-help-empty {
    text-align: center;
    color: var(--color-gray-500);
    padding: 40px 20px;
    font-size: var(--text-base);
}

.sl-help-foot {
    border-top: 1px solid var(--color-gray-200);
    padding: 12px 18px;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    flex-shrink: 0;
    text-align: center;
}

@media (max-width: 520px) {
    .sl-help-drawer { width: 100%; max-width: 100%; }
    .sl-help-btn span.sl-help-btn-label { display: none; }
}