/* ============================================================
   ProcureHub Step-Guide Overlay  (guides.css)
   Brand colour: #DE5700 (orange)
   ============================================================ */

/* ── CSS custom properties (scoped to overlay) ── */
#sgOv {
    --or : #DE5700;
    --od : #b84700;
    --ol : #fff0e8;
    --nv : #1b2a4a;
    --nvl: #3a5080;
    --bl : #1a4fa0;
    --bll: #e8effc;
    --gr : #1aab6d;
    --grl: #e6f9f1;
    --bd : #e0e6f0;
    --bg : #f7f9fc;
    --t1 : #1b2a4a;
    --t2 : #5a6a80;
    --t3 : #8a9ab8;
    --s3 : #c8d4e8;
    --sh2: 0 8px 32px rgba(27,42,74,.18);
}

/* ── Overlay backdrop ── */
#sgOv {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(27, 42, 74, .45);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#sgOv.open { display: flex; }

/* ── Guide card ── */
.sg-card {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 460px;
    box-shadow: var(--sh2);
    animation: sg-in .35s ease;
    overflow: hidden;
}

/* ── Header ── */
.sg-head {
    padding: 22px 26px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.sg-step  { display: flex; align-items: center; gap: 8px; }
.sg-num   { padding: 6px 14px; background: var(--bll); color: var(--nvl); font-size: 12px; font-weight: 700; border-radius: 6px; }
.sg-role  { padding: 4px 10px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.sg-role.buyer  { background: var(--bll); color: var(--bl); }
.sg-role.seller { background: var(--ol);  color: var(--or); }
.sg-x {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--bd);
    color: var(--t3); display: flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 14px; flex-shrink: 0;
}
.sg-x:hover { color: var(--t1); border-color: var(--or); }

/* ── Body ── */
.sg-body { padding: 18px 26px 22px; }
.sg-body h3 { font-size: 20px; font-weight: 800; color: var(--nv); margin-bottom: 10px; }
.sg-body p  { font-size: 13px; color: var(--t2); line-height: 1.65; margin-bottom: 16px; }

/* ── Action list ── */
.sg-acts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.sg-act  {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--bg);
    border: 1px solid var(--bd); border-radius: 8px;
    font-size: 12.5px; color: var(--t2);
}
.sg-act .sg-ai { font-size: 15px; flex-shrink: 0; }
.sg-act .sg-at { flex: 1; }
.sg-act .sg-ck {
    padding: 2px 8px; border-radius: 5px;
    background: var(--ol); color: var(--or);
    font-size: 9.5px; font-weight: 800;
    text-transform: uppercase; flex-shrink: 0;
}

/* ── Footer ── */
.sg-foot {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 26px 22px;
}
.sg-dots { display: flex; gap: 5px; }
.sg-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--s3); transition: all .3s; }
.sg-dot.done { background: var(--gr); }
.sg-dot.cur  { background: var(--or); }
.sg-gotit {
    padding: 10px 28px; border-radius: 9px;
    background: var(--or); color: #fff;
    border: none; font-family: inherit;
    font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all .2s;
}
.sg-gotit:hover { background: var(--od); }

/* ── Entrance animation ── */
@keyframes sg-in {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .sg-card { max-width: 100%; }
}