/*=============================================================================
  HELP TEXTS - the (?) icon beside a label and its light yellow popup.
  New classes only (ptHelp*); nothing of the theme is overridden.
  Markup: help_icon() in core/funchelp.php. Behaviour: js/helptips.js.
=============================================================================*/

:root{
    --ptHelpBg:#FFF9DB;
    --ptHelpBorder:#E6D98A;
    --ptHelpText:#4a3f10;
}

/* ---- the icon ---- */
.ptHelp{
    display:inline-flex;
    align-items:center;
    vertical-align:middle;
    margin:0 4px;
    padding:1px;
    border-radius:50%;
    cursor:help;
    line-height:1;
    outline:none;
}
.ptHelp:focus-visible{ box-shadow:0 0 0 2px var(--ptHelpBorder); }
.ptHelpIcon{
    width:14px;
    height:14px;
    display:block;
    opacity:.85;
    transition:opacity .15s;
}
.ptHelp:hover .ptHelpIcon,
.ptHelp.ptHelpOn .ptHelpIcon{ opacity:1; }
/* an editor's reminder that this key has no text yet */
.ptHelpEmpty .ptHelpIcon{ opacity:.3; filter:grayscale(1); }

/* ---- the popup (one element, appended to <body>, position:fixed so it is
        never clipped by a modal or a scrolling container) ---- */
.ptHelpTip{
    position:fixed;
    z-index:100000;
    top:0;
    left:0;
    max-width:280px;
    min-width:120px;
    box-sizing:border-box;
    padding:7px 10px;
    background:var(--ptHelpBg);
    color:var(--ptHelpText);
    border:1px solid var(--ptHelpBorder);
    border-radius:6px;
    box-shadow:0 3px 10px rgba(0,0,0,.14);
    font-size:12px;
    line-height:1.5;
    font-weight:normal;
    text-align:start;
    white-space:normal;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .15s ease, visibility 0s linear .15s;
    --ptArrowX:50%;
}
.ptHelpTip.ptHelpShow{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .15s ease;
}
.ptHelpTipTitle{
    font-weight:bold;
    margin-bottom:3px;
}
.ptHelpTipTitle:empty{ display:none; }
.ptHelpTipBody{
    white-space:pre-line;   /* the text's own line breaks, no HTML */
    overflow-wrap:anywhere;
}

/* the arrow: border triangle + fill triangle, pointing at the icon */
.ptHelpTip::before,
.ptHelpTip::after{
    content:"";
    position:absolute;
    left:var(--ptArrowX);
    width:0;
    height:0;
    border:solid transparent;
    pointer-events:none;
}
.ptHelpTip::before{ border-width:7px; margin-left:-7px; }
.ptHelpTip::after { border-width:6px; margin-left:-6px; }
/* popup above the icon: arrow at the bottom, pointing down */
.ptHelpTip.ptHelpAbove::before{ top:100%; border-top-color:var(--ptHelpBorder); }
.ptHelpTip.ptHelpAbove::after { top:100%; border-top-color:var(--ptHelpBg); }
/* popup below the icon: arrow at the top, pointing up */
.ptHelpTip.ptHelpBelow::before{ bottom:100%; border-bottom-color:var(--ptHelpBorder); }
.ptHelpTip.ptHelpBelow::after { bottom:100%; border-bottom-color:var(--ptHelpBg); }

/* editor's pencil inside the popup */
.ptHelpTipFoot{ text-align:end; margin-top:4px; }
.ptHelpTipFoot:empty{ display:none; }
.ptHelpEditBtn{
    background:none;
    border:0;
    padding:0 2px;
    font-size:12px;
    color:#7a6a14;
    cursor:pointer;
    text-decoration:underline;
}
.ptHelpEditBtn:hover{ color:#4a3f10; }
.ptHelpTipEmptyNote{ font-style:italic; opacity:.8; }

/* ---- editor modal ---- */
.ptHelpModalBg{
    position:fixed;
    inset:0;
    z-index:100001;
    background:rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.ptHelpModal{
    background:#fff;
    border-radius:8px;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    width:100%;
    max-width:620px;
    max-height:calc(100vh - 32px);
    overflow:auto;
    padding:14px 16px;
    box-sizing:border-box;
    font-size:13px;
}
.ptHelpModal h3{ margin:0 0 4px; font-size:15px; }
.ptHelpModalKey{ font-family:monospace; font-size:11px; color:#777; direction:ltr; unicode-bidi:embed; }
.ptHelpModalGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:10px;
}
.ptHelpModalGrid label{ display:block; font-weight:bold; margin-bottom:3px; }
.ptHelpModalGrid input[type=text],
.ptHelpModalGrid textarea,
.ptHelpAdmin textarea,
.ptHelpAdmin input[type=text]{
    width:100%;
    box-sizing:border-box;
    font:inherit;
    font-size:12px;
    padding:5px 6px;
    border:1px solid #ccc;
    border-radius:4px;
}
.ptHelpModalGrid textarea{ min-height:150px; resize:vertical; }
.ptHelpModalRow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.ptHelpModalRow .ptHelpGrow{ flex:1; }
.ptHelpMsg{ font-size:12px; }
.ptHelpMsg.ok{ color:#1f7a2e; }
.ptHelpMsg.err{ color:#b3261e; }
@media (max-width:560px){
    .ptHelpModalGrid{ grid-template-columns:1fr; }
}

/* ---- management page (helptexts.php) ---- */
.ptHelpAdminBar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0 10px; }
.ptHelpAdminBar input[type=text]{ max-width:260px; }
.ptHelpAdmin{ width:100%; border-collapse:collapse; font-size:12px; }
.ptHelpAdmin th, .ptHelpAdmin td{ border-bottom:1px solid #e3e3e3; padding:6px 5px; vertical-align:top; text-align:start; }
.ptHelpAdmin td.ptHelpKeyCell{ font-family:monospace; font-size:11px; direction:ltr; unicode-bidi:embed; word-break:break-all; width:15%; }
.ptHelpAdmin textarea{ min-height:84px; resize:vertical; }
.ptHelpAdmin tr.ptHelpOff td{ opacity:.55; }
.ptHelpAdmin .ptHelpMeta{ font-size:11px; color:#777; margin-top:3px; }
.ptHelpAdminNew{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
@media (max-width:760px){
    .ptHelpAdmin thead{ display:none; }
    .ptHelpAdmin tr{ display:block; border-bottom:2px solid #ddd; padding:6px 0; }
    .ptHelpAdmin td{ display:block; border:0; width:auto !important; }
}

/* theme buttons inside the help blocks: sized to their text, not full width */
.ptHelpModalRow .buttom1,
.ptHelpAdminBar .buttom1,
.ptHelpAdminNew .buttom1,
.ptHelpAdmin .buttom1{
    width:auto;
    display:inline-block;
    min-width:80px;
    padding:0 14px;
    text-align:center;
    text-decoration:none;
    box-sizing:border-box;
}