/* ============================================================
   Guides section — literal match of guides.coolshrimpmodz.com
   (phpBB Milk_v2 theme, Purple_Love colours)
   Reference: Forum/Our Guides (Current)/styles/Milk_v2/theme/
   ============================================================ */

/* ---- Hero banner (.headerbar): gradient + animated particles ---- */
.gb--hero {
    position: relative;
    background: #4568dc;
    background: linear-gradient(to right, #4568dc 0%, #b06ab3 100%);
    color: #ffffff;
    text-align: center;
    overflow: hidden;
}
.gb--hero #gb-particles {
    position: absolute;
    inset: 0;
}
.gb--hero .gb--hero-inner {
    position: relative;
    padding: 90px 15px 80px;
    pointer-events: none;
}
.gb--hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: 36px;
    font-weight: 400;
}
.gb--hero p {
    margin: 10px 0 0;
    font-size: 14px;
    color: #ffffff;
    opacity: .9;
}

/* ---- Page body area (html/body #ECF0F1, content on white card) ---- */
.gb--page { background: #ECF0F1; padding: 25px 0 60px; }
.gb--sheet { background: #fff; border-radius: 5px; padding: 25px 30px 35px; }

/* ---- phpBB breadcrumb ---- */
.gb--crumbs { font-size: 13px; color: rgba(0,0,0,.4); margin-bottom: 20px; }
.gb--crumbs a { color: rgba(0,0,0,.55); text-decoration: none; }
.gb--crumbs a:hover { color: #B06AB3; }
.gb--crumbs .sep { margin: 0 7px; color: rgba(0,0,0,.3); }
.gb--crumbs .fa { margin-right: 4px; }

/* ---- Board (.forabg): category block with gradient header ---- */
.gb--board { margin-bottom: 30px; border-radius: 5px; overflow: hidden; }
.gb--board-header {
    display: flex;
    align-items: center;
    background: #4568dc;
    background: linear-gradient(to right, #4568dc 0%, #b06ab3 100%);
    color: #ffffff;
    padding: 12px 15px;
}
.gb--board-header h2 { margin: 0; flex: 1 1 auto; font-size: 15px; font-weight: 600; color: #fff; }
.gb--board-header .gb--col { text-align: center; font-size: 14px; color: #fff; }
.gb--board-header .gb--col.num { width: 95px; }
.gb--board-header .gb--col.last { width: 300px; text-align: left; padding-left: 5px; }

/* ---- Rows (li.row): white, separated by #ECF0F1 ---- */
.gb--row {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #ECF0F1;
    padding: 12px 15px;
    min-height: 67px;
}
.gb--row:last-child { border-bottom: 0; }

/* forum icon: 32px circle, rgba(0,0,0,0.1) border, fa-minus dash */
.gb--row-icon {
    flex: 0 0 32px;
    height: 32px;
    margin-right: 20px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    color: rgba(0,0,0,0.15);
    text-align: center;
    line-height: 30px;
    font-size: 13px;
}
.gb--row-icon.link { border-color: #4aa3df; color: #4aa3df; }

.gb--row-main { flex: 1 1 auto; min-width: 0; padding-right: 12px; }
.gb--row-main .gb--title {
    font-size: 15px;
    font-weight: 600;
    color: #303030;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1px;
}
.gb--row-main .gb--title:hover { color: #B06AB3; }
.gb--row-main p { margin: 0; font-size: 12.5px; color: rgba(0,0,0,.45); line-height: 1.5; }
.gb--row-main .gb--subforums { margin-top: 4px; }
.gb--row-main .gb--subforums strong { color: rgba(0,0,0,.55); }
.gb--row-main .gb--subforums a { color: #4568dc; text-decoration: none; }
.gb--row-main .gb--subforums a:hover { color: #B06AB3; }

.gb--row .gb--num {
    width: 95px;
    flex: 0 0 95px;
    text-align: center;
    font-size: 13.5px;
    color: rgba(0,0,0,.45);
}
.gb--row .gb--last {
    width: 300px;
    flex: 0 0 300px;
    font-size: 12.5px;
    color: rgba(0,0,0,.5);
    line-height: 1.55;
    padding-left: 5px;
}
.gb--row .gb--last a { color: #303030; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 285px; }
.gb--row .gb--last a:hover { color: #B06AB3; }
.gb--row .gb--last .by { color: rgba(0,0,0,.4); }
.gb--row .gb--last .by b { color: #AA0000; font-weight: 600; }
.gb--empty { background: #fff; padding: 16px 20px; color: rgba(0,0,0,.4); font-size: 13px; }

/* ---- Guide article (viewtopic-style post panel) ---- */
.gb--article {
    background: #fff;
    border-radius: 5px;
    padding: 30px 35px;
    color: #333333;
}
.gb--article img { max-width: 100%; height: auto; }

/* content links: make them stand out from body text (forum-style) */
.gb--article a {
    color: #4568dc;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(69,104,220,.45);
    text-underline-offset: 2px;
}
.gb--article a:hover { color: #B06AB3; text-decoration-color: #B06AB3; }

.gb--article h1, .gb--article h2, .gb--article h3, .gb--article h4 { margin-top: 1.4em; color: #303030; }

/* section headings: gradient underline (matches the board header gradient) */
.gb--article h2 {
    padding-bottom: 9px;
    border-bottom: 3px solid #4568dc;
    border-image: linear-gradient(to right, #4568dc 0%, #b06ab3 60%, rgba(176,106,179,0) 100%) 1;
}

.gb--article pre { overflow-x: auto; background: #2d2d2d; color: #eee; padding: 14px 18px; border-radius: 4px; }
.gb--article code { word-break: break-word; }
/* inline code pills (forum-style); reset inside <pre> code panels */
.gb--article code {
    background: #eef1f8;
    border: 1px solid #dde2f0;
    border-radius: 4px;
    padding: 1px 7px;
    color: #5145a7;
    font-size: 92%;
}
.gb--article pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* tables: gradient header + zebra rows (forum-style) */
.gb--article table { width: 100%; margin: 15px 0; border-collapse: collapse; }
.gb--article table td, .gb--article table th { border: 1px solid #dfe3ef; padding: 8px 12px; }
.gb--article table th {
    background: #4568dc;
    background: linear-gradient(to right, #4568dc 0%, #b06ab3 100%);
    color: #fff;
    font-weight: 600;
    border-color: rgba(255,255,255,.25);
    border-top-color: #4568dc;
    text-align: left;
}
.gb--article table tbody tr:nth-child(even) { background: #f6f8fe; }
.gb--article table tbody tr:hover { background: #eef2fc; }

/* ---- Forum-style step bars: each top-level list item is a blue contrasted panel ---- */
.gb--article ol > li,
.gb--article ul > li {
    background: #f0f5fc;
    border-left: 3px solid #4568dc;
    border-radius: 0 4px 4px 0;
    padding: 8px 14px;
    margin: 7px 0;
    list-style-position: inside;
}
.gb--article ol, .gb--article ul { padding-left: 6px; }
/* nested lists + special containers stay plain (TOC, callouts, share bars) */
.gb--article li li,
.gb--article .gb--toc li,
.gb--article .gb--callout li {
    background: transparent;
    border-left: 0;
    border-radius: 0;
    padding: 2px 0;
    margin: 3px 0;
    list-style-position: outside;
}
.gb--article li ul, .gb--article li ol { margin: 6px 0 2px; padding-left: 26px; }
.gb--article .gb--toc ul, .gb--article .gb--callout ul,
.gb--article .gb--toc ol, .gb--article .gb--callout ol { padding-left: 20px; }

.gb--article blockquote { border-left: 4px solid #B06AB3; padding-left: 15px; color: #666; }
.gb--article-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(0,0,0,.4); font-size: 12.5px; margin-bottom: 16px; }
.gb--article-meta .gb--meta-left { flex: 1 1 auto; min-width: 200px; }
.gb--article-meta .label { margin-right: 8px; }
.gb--article-meta .gb--views { margin-left: 14px; white-space: nowrap; }
.gb--article-meta .gb--views .fa { margin-right: 4px; }

/* ---- Top-right guide actions (copy / share / save) ---- */
.gb--topactions { display: flex; gap: 8px; flex-wrap: wrap; }
.gb--topactions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.gb--topactions button:hover { border-color: #B06AB3; color: #B06AB3; transform: translateY(-1px); }
.gb--topactions button.copied { background: #1a9e57; border-color: #1a9e57; color: #fff; }

/* save/bookmark buttons (top + share bar): gold when saved */
.gb--savebtn.saved { background: #fff7e0 !important; border-color: #e6a817 !important; color: #9a6d00 !important; }

/* X (formerly Twitter) logo glyph in the share bar */
.gb--x-logo { font-weight: 700; font-style: normal; font-size: 15px; line-height: 1; }

/* ---- Two-column layout: article + sidebar ---- */
.gb--layout { display: flex; gap: 24px; align-items: flex-start; }
.gb--main { flex: 1 1 auto; min-width: 0; }
.gb--side { flex: 0 0 300px; width: 300px; position: sticky; top: 80px; order: -1; } /* order:-1 = sidebar on the left */
@media (max-width: 991px) {
    .gb--layout { display: block; }
    .gb--side { width: auto; position: static; margin-top: 24px; }
}

/* ---- Sidebar boxes ---- */
.gb--sidebox { background: #fff; border-radius: 5px; overflow: hidden; margin-bottom: 18px; }
.gb--sidebox-h {
    background: #4568dc;
    background: linear-gradient(to right, #4568dc 0%, #b06ab3 100%);
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 14px;
}
.gb--sidebox-h .fa { margin-right: 7px; }
.gb--sidelist { list-style: none; margin: 0; padding: 6px 0; }
.gb--sidelist li { display: flex; align-items: baseline; gap: 9px; padding: 8px 14px; border-bottom: 1px solid #f2f2f6; font-size: 13px; color: #555; }
.gb--sidelist li:last-child { border-bottom: 0; }
.gb--sidelist li > .fa { flex: none; width: 15px; text-align: center; color: #4568dc; font-size: 12px; }
.gb--sidelist a { color: #4568dc; text-decoration: none; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.gb--sidelist a:hover { color: #B06AB3; }
.gb--sidelist a small { display: block; font-weight: 400; color: #aaa; font-size: 11px; margin-top: 1px; }

/* ---- Similar guides section ---- */
.gb--similar { margin-top: 28px; }
.gb--similar .gb--board { margin-bottom: 0; }
.gb--similar .gb--row { min-height: 56px; padding: 10px 15px; }
.gb--back { margin-top: 28px; }

/* ---- Share bar (guide pages) ---- */
.gb--share { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 22px 0 0; }
.gb--share .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(0,0,0,.4); margin-right: 4px; font-weight: 700; }
.gb--share a, .gb--share button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid #ddd; background: #fff; color: #444; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .15s; }
.gb--share a:hover, .gb--share button:hover { transform: translateY(-2px); border-color: #B06AB3; color: #B06AB3; box-shadow: 0 5px 14px rgba(176,106,179,.18); }
.gb--share .fb:hover { border-color: #1877f2; color: #1877f2; }
.gb--share .tw:hover { border-color: #111; color: #111; }
.gb--share .copied { background: #1a9e57 !important; border-color: #1a9e57 !important; color: #fff !important; }

/* ---- Admin toolbar (only rendered for a logged-in admin session) ---- */
.gb--adminbar { background: #23262d; color: #ccc; font-size: 13px; }
.gb--adminbar .container { display: flex; align-items: center; gap: 22px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.gb--adminbar-label { color: #b06ab3; font-weight: 600; }
.gb--adminbar a { color: #ccc; text-decoration: none; }
.gb--adminbar a:hover { color: #fff; }
.gb--adminbar .gb--adminbar-new { color: #7bd47e; }
.gb--adminbar .gb--adminbar-out { margin-left: auto; color: #e08f8f; }
.gb--adminbar .fa { margin-right: 5px; }

/* ============================================================
   Guide content components (unified theme)
   Accordion, callouts (note/tip/warning/danger), code boxes.
   Inserted by the guides-admin editor buttons; legacy phpBB
   markup is converted to these by guides_normalize_legacy().
   ============================================================ */

/* ---- Accordion / expand (native <details>) ---- */
.gb--accordion {
    margin: 1.2em 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.gb--accordion summary {
    cursor: pointer;
    padding: 11px 16px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    background: #4568dc;
    background: linear-gradient(to right, #4568dc 0%, #b06ab3 100%);
    list-style: none;
    user-select: none;
}
.gb--accordion summary::-webkit-details-marker { display: none; }
.gb--accordion summary::before {
    font-family: FontAwesome;
    content: "\f0da";
    display: inline-block;
    width: 14px;
    margin-right: 8px;
    text-align: center;
}
.gb--accordion[open] summary::before { content: "\f0d7"; }
.gb--accordion summary:hover { opacity: .92; }
.gb--accordion .gb--accordion-body { padding: 14px 18px; }
.gb--accordion .gb--accordion-body > :first-child { margin-top: 0; }
.gb--accordion .gb--accordion-body > :last-child { margin-bottom: 0; }

/* ---- Accordion toolbar (guide pages with many sections): search + expand/collapse ---- */
.gb--acc-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.gb--acc-toolbar .search-wrap { position: relative; flex: 1 1 240px; }
.gb--acc-toolbar .search-wrap .fa-search { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #aaa; pointer-events: none; }
.gb--acc-toolbar input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 13.5px;
    background: #fff;
}
.gb--acc-toolbar input:focus { outline: none; border-color: #B06AB3; box-shadow: 0 0 0 3px rgba(176,106,179,.15); }
.gb--acc-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.gb--acc-toolbar button:hover { border-color: #B06AB3; color: #B06AB3; }
.gb--acc-toolbar .count { font-size: 12.5px; color: rgba(0,0,0,.45); white-space: nowrap; }
.gb--acc-noresults { background: #fff; border-radius: 5px; margin-top: 12px; padding: 25px; text-align: center; color: #999; }
.gb--acc-noresults .fa { margin-right: 6px; }
/* anchor offset so deep-linked targets aren't hidden under the sticky header */
.gb--article [id], .gb--article a[name], .gb--article details.gb--accordion { scroll-margin-top: 90px; }

/* ---- In-page navigation box (guide overview / table of contents) ---- */
.gb--toc { margin: 1.2em 0; padding: 14px 18px; border: 1px solid #ddd; border-radius: 6px; background: #f9f9fb; }
.gb--toc-title { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: #4568dc; margin-bottom: 8px; }
.gb--toc-title::before { font-family: FontAwesome; content: "\f0ca"; margin-right: 8px; }
.gb--toc ul { margin: 0; padding-left: 20px; }
.gb--toc li { margin: 3px 0; }
.gb--toc a { color: #4568dc; text-decoration: none; }
.gb--toc a:hover { color: #B06AB3; text-decoration: underline; }

/* ---- Callout boxes: note / tip / warning / danger ---- */
.gb--callout {
    margin: 1.2em 0;
    padding: 12px 18px 13px;
    border: 1px solid #ddd;
    border-left-width: 4px;
    border-radius: 6px;
    background: #fff;
}
.gb--callout-title {
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 6px;
}
.gb--callout-title::before {
    font-family: FontAwesome;
    margin-right: 8px;
}
.gb--callout-body > :first-child { margin-top: 0; }
.gb--callout-body > :last-child { margin-bottom: 0; }

.gb--callout-note { border-color: #c3cef2; border-left-color: #4568dc; background: #f6f8fe; }
.gb--callout-note .gb--callout-title { color: #4568dc; }
.gb--callout-note .gb--callout-title::before { content: "\f05a"; } /* fa-info-circle */

.gb--callout-tip { border-color: #bfe3c4; border-left-color: #388e3c; background: #f4faf4; }
.gb--callout-tip .gb--callout-title { color: #2e7d32; }
.gb--callout-tip .gb--callout-title::before { content: "\f0eb"; } /* fa-lightbulb-o */

.gb--callout-warning { border-color: #f2dfa9; border-left-color: #e6a817; background: #fdf9ec; }
.gb--callout-warning .gb--callout-title { color: #9a6d00; }
.gb--callout-warning .gb--callout-title::before { content: "\f071"; } /* fa-exclamation-triangle */

.gb--callout-danger { border-color: #f0bcbc; border-left-color: #d32f2f; background: #fdf3f3; }
.gb--callout-danger .gb--callout-title { color: #c62828; }
.gb--callout-danger .gb--callout-title::before { content: "\f06a"; } /* fa-exclamation-circle */

/* ---- Code boxes (.codebox from the forum + plain <pre>) ---- */
.gb--article .codebox { margin: 1.2em 0; }
.gb--article .codebox pre { margin: 0; }
.gb--article pre { position: relative; padding-top: 36px; }
.gb--article pre::before {
    content: "CODE";
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 5px 14px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.gb--copycode {
    position: absolute;
    top: 3px; right: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #ddd;
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 3px;
    cursor: pointer;
}
.gb--copycode:hover { background: rgba(255,255,255,.12); color: #fff; }
.gb--copycode.copied { background: #1a9e57; border-color: #1a9e57; color: #fff; }

/* ---- Image viewer: guide images open in the shared zoomable modal
        (js/cs-image-modal.js — same viewer as the Tools library) ---- */
.gb--article img { cursor: zoom-in; }

/* ---- Video embeds: responsive YouTube (16:9) & TikTok (vertical) ---- */
.gb--embed { position: relative; width: 100%; max-width: 760px; margin: 18px auto; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; background: #000; }
.gb--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gb--embed.gb--embed-tiktok { max-width: 325px; padding-bottom: 0; height: 578px; background: transparent; }
.gb--article .gb--embed { box-shadow: 0 2px 10px rgba(0,0,0,.15); }
/* stray spacing <br> straight after an embed (forum exports) */
.gb--article .gb--embed + br { display: none; }
/* legacy s9e ratio spans that slip through un-normalized: collapse their reserved space */
.gb--article span[style*="padding-bottom:56.25%"] { padding-bottom: 0 !important; }

/* mobile-only guide list inside category rows (replaces the hidden last-post column) */
.gb--mobile-guides { display: none; list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed #ECF0F1; }
.gb--mobile-guides li { margin: 0 0 5px; }
.gb--mobile-guides a { font-size: 12.5px; color: #4568dc; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb--mobile-guides a:hover { color: #B06AB3; }
.gb--mobile-guides a .fa { margin-right: 6px; color: #B06AB3; }
.gb--mobile-guides .more a { color: rgba(0,0,0,.45); font-style: italic; }

/* ---- Responsive (Milk hides last-post column on small screens) ---- */
@media (max-width: 768px) {
    .gb--row .gb--last, .gb--board-header .gb--col.last { display: none; }
    .gb--mobile-guides { display: block; }
}
@media (max-width: 480px) {
    .gb--hero .gb--hero-inner { padding: 55px 15px 45px; }
    .gb--hero h1 { font-size: 24px; }
    .gb--row .gb--num, .gb--board-header .gb--col.num { display: none; }
    .gb--article, .gb--sheet { padding: 20px; }
}