/*
 * Glory Docs frontend styles.
 *
 * Designed to match glorylaser.com's industrial aesthetic:
 *   - Brand red: #e62129
 *   - Clean rows with generous whitespace, like the product cards
 *   - Bold dark titles, light-grey descriptions
 *   - Red "Download →" text CTAs in lists, solid red button when standalone
 *
 * Inherits the theme's font family — never overrides it.
 * Everything is namespaced .glory-docs-*; the host theme wins on font and
 * color cascade where we don't explicitly override.
 */

:root {
    --glory-docs-red: #e62129;
    --glory-docs-red-dark: #c91920;
    --glory-docs-red-darker: #a8141a;
    --glory-docs-text: #1a1a1a;
    --glory-docs-text-muted: #6b6b6b;
    --glory-docs-text-light: #8b8b8b;
    --glory-docs-border: #e8e8e8;
    --glory-docs-border-light: #f0f0f0;
    --glory-docs-bg-soft: #fafafa;
    --glory-docs-bg-hover: #f7f7f7;
}

/* ============================================================
 * STANDALONE BUTTON  ([glory_docs_button id="N"])
 * ============================================================ */

.glory-docs-button-wrap {
    display: inline-block;
    margin: 12px 0;
}

.glory-docs-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--glory-docs-red);
    color: #fff;
    border: none;
    border-radius: 2px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow: 0 1px 2px rgba(230, 33, 41, 0.15);
}
.glory-docs-button:hover,
.glory-docs-button:focus {
    background: var(--glory-docs-red-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 33, 41, 0.25);
    outline: none;
}
.glory-docs-button:active {
    transform: translateY(0);
    background: var(--glory-docs-red-darker);
}
.glory-docs-button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.glory-docs-button.is-pending {
    background: #555;
    box-shadow: none;
}
.glory-docs-button.is-pending:hover {
    background: #333;
}
.glory-docs-button::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M9 0l5 5-5 5V6H0V4h9V0z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M9 0l5 5-5 5V6H0V4h9V0z'/></svg>") no-repeat center / contain;
    transition: transform 0.18s ease;
}
.glory-docs-button:hover::after {
    transform: translateX(3px);
}

/* ============================================================
 * DOCUMENT LIST ([glory_docs_list])
 * Each row: title + description on the left, "Download →" CTA on the right.
 * Modeled on the product-card aesthetic but as a flat row.
 * ============================================================ */

.glory-docs-list {
    margin: 32px 0;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

/* Single-row variant ([glory_docs_button] in default row mode):
 * tighter vertical margin so multiple shortcodes stack cleanly on a product
 * page, and stacked single-rows don't double up borders. */
.glory-docs-list-single {
    margin: 12px 0;
}
/* Heading for [glory_docs_product_docs title="..."] — used inside a product
 * page, so it should be visually consistent with the product's own H tags but
 * still visibly belong to our block. */
/* Section wrapper for [glory_docs_product_docs] — uses theme's `.content` class
 * to inherit theme container width if rendered top-level, plus our own
 * .glory-docs-section namespace for our own styling rules. */
.glory-docs-section {
    margin: 40px auto;
    box-sizing: border-box;
}
/* When sitting inside another .content (e.g. inside post content), reset
 * any enforced max-width / centering so we just inherit parent width. The
 * theme's `.content .content { padding: 0 }` rule already handles padding. */
.content .glory-docs-section {
    max-width: none;
    margin: 40px auto;
}

/* H2 "Downloads" heading.
 * Font family and font size are intentionally NOT set — we let the host theme
 * style h2 typography to keep visual consistency with the rest of the site.
 * We only set spacing, color of the accent, and the red underline accent. */
.glory-docs-section .glory-docs-list-product .glory-docs-product-docs-heading,
.glory-docs-list-product .glory-docs-product-docs-heading {
    display: block !important;
    margin: 0 0 20px !important;
    padding: 0 0 12px !important;
    line-height: 1.2 !important;
    color: var(--glory-docs-text) !important;
    text-transform: none !important;
    text-align: left !important;
    border-bottom: 2px solid var(--glory-docs-border) !important;
    border-top: none !important;
    background: transparent !important;
    position: relative;
}
.glory-docs-section .glory-docs-list-product .glory-docs-product-docs-heading::after,
.glory-docs-list-product .glory-docs-product-docs-heading::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -2px !important;
    width: 56px !important;
    height: 2px !important;
    background-image: none !important;
    background-color: var(--glory-docs-red) !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    transform: none !important;
}

.glory-docs-list-product {
    margin: 0;
}

/* Per-category h3 (used both in [glory_docs_list] grouping and in
 * [glory_docs_product_docs] when the product spans multiple categories).
 * Font family and font size are intentionally NOT set — let the host theme
 * style h3 typography. We only override spacing, color and the red accent. */
.glory-docs-list h3.glory-docs-category,
.glory-docs-list .head,
.glory-docs-section h3.glory-docs-category,
.glory-docs-section .head,
h3.glory-docs-category {
    display: block !important;
    margin: 32px 0 16px !important;
    padding: 0 0 12px !important;
    line-height: 1.3 !important;
    color: var(--glory-docs-text) !important;
    text-transform: none !important;
    text-align: left !important;
    border-bottom: 2px solid var(--glory-docs-border) !important;
    background: transparent !important;
    position: relative;
}
.glory-docs-list h3.glory-docs-category::after,
.glory-docs-list .head::after,
.glory-docs-section h3.glory-docs-category::after,
.glory-docs-section .head::after,
h3.glory-docs-category::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -2px !important;
    width: 40px !important;
    height: 2px !important;
    background-image: none !important;
    background-color: var(--glory-docs-red) !important;
    transform: none !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.glory-docs-list > h3.glory-docs-category:first-child,
.glory-docs-list > .head:first-child,
.glory-docs-section h3.glory-docs-category:first-of-type,
.glory-docs-section .head:first-of-type {
    margin-top: 0 !important;
}

/* SPECIFICITY NOTES — important for theme compatibility:
 * Many WordPress themes style `ul`, `li`, `p`, `h4` inside post content with
 * selectors like `.post_main .postdetail ul li` (specificity 0,2,2) that
 * inject padding-left, font-size, bullet `::before` images, etc. To win the
 * cascade we use 3-class selectors `.glory-docs-list .glory-docs-items
 * .glory-docs-item` (specificity 0,3,0 / 0,3,1 with pseudos / 0,4,1 with the
 * h4) and `!important` on a few critical resets (padding, margin, list-style,
 * ::before content). This is intentional — without it, themes inject bullet
 * points and shift our rows visually narrow.
 */

/* The UL — reset margins/padding the theme may have added to ul in post content. */
.glory-docs-list .glory-docs-items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* Keep top border for single-row output from [glory_docs_button] (style=row). */
.glory-docs-list.glory-docs-list-single .glory-docs-items {
    border-top: 1px solid var(--glory-docs-border);
}

/* The LI — full reset against theme post-content styling.
 * Specificity 0,3,0 beats theme's 0,2,2 (.post_main .postdetail ul li). */
.glory-docs-list .glory-docs-items .glory-docs-item {
    display: flex !important;
    align-items: center;
    gap: 24px;
    padding: 24px 28px !important;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid var(--glory-docs-border);
    list-style: none !important;
    /* Reset text inheritance — themes set huge font-size/weight on post-content LI */
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--glory-docs-text);
    text-align: left;
    text-transform: none;
    text-indent: 0;
    position: relative;
    transition: background-color 0.15s ease, padding-left 0.15s ease;
}
.glory-docs-list .glory-docs-items .glory-docs-item:hover {
    background: var(--glory-docs-bg-hover);
    padding-left: 32px !important;
}
/* Remove the trailing divider on the last row of each list. Each
 * `<ul class="glory-docs-items">` is a separate list (one per category in
 * grouped/accordion layouts, one per [glory_docs_button] in row mode), so
 * `:last-child` correctly targets the bottom row of every list. */
.glory-docs-list .glory-docs-items .glory-docs-item:last-child {
    border-bottom: none;
}

/* The ::before — themes often inject a red bullet image here. We override to
 * be our animated red bar that appears on hover. Specificity 0,3,1 beats
 * theme's 0,2,3 (.post_main .postdetail ul li::before). */
.glory-docs-list .glory-docs-items .glory-docs-item::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    height: auto !important;
    background-image: none !important;
    background-color: var(--glory-docs-red) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.glory-docs-list .glory-docs-items .glory-docs-item:hover::before {
    transform: scaleY(1);
}

.glory-docs-item-info {
    flex: 1;
    min-width: 0;
}

/* Title — reset h4 styling from theme. Specificity 0,4,1 beats
 * almost any theme rule. */
.glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-item-title {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--glory-docs-text) !important;
    letter-spacing: -0.005em;
    text-transform: none !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
}

/* Description — reset p styling from theme. */
.glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-item-desc {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--glory-docs-text-muted) !important;
    letter-spacing: 0;
    text-transform: none !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
}

.glory-docs-item-action {
    flex-shrink: 0;
}

/* Solid red download button inside list rows. */
.glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-button {
    background: var(--glory-docs-red) !important;
    color: #fff !important;
    padding: 13px 26px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 1px 2px rgba(230, 33, 41, 0.15);
    border: none !important;
    margin: 0 !important;
}
.glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-button:hover {
    background: var(--glory-docs-red-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 33, 41, 0.25);
}
.glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-button:hover::after {
    transform: translateX(3px);
}

/* ============================================================
 * ACCORDION LAYOUT  ([glory_docs_list layout="accordion"])
 * ============================================================ */

.glory-docs-layout-accordion .glory-docs-accordion-item {
    background: #fff;
    border: 1px solid var(--glory-docs-border);
    margin-bottom: 8px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.glory-docs-layout-accordion .glory-docs-accordion-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border-color: #d8d8d8;
}
.glory-docs-layout-accordion .glory-docs-accordion-item[open] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-color: #d0d0d0;
}

.glory-docs-layout-accordion .glory-docs-category-summary {
    cursor: pointer;
    padding: 18px 24px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    color: var(--glory-docs-text);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.15s ease;
}
.glory-docs-layout-accordion .glory-docs-category-summary::-webkit-details-marker { display: none; }
.glory-docs-layout-accordion .glory-docs-category-summary:hover {
    background: var(--glory-docs-bg-soft);
}
.glory-docs-layout-accordion .glory-docs-category-summary::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: var(--glory-docs-red);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 0l6 5-6 5z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 0l6 5-6 5z'/></svg>") no-repeat center / contain;
    transition: transform 0.18s ease;
}
.glory-docs-layout-accordion .glory-docs-accordion-item[open] .glory-docs-category-summary::before {
    transform: rotate(90deg);
}
.glory-docs-layout-accordion .glory-docs-accordion-item[open] .glory-docs-category-summary {
    border-bottom: 1px solid var(--glory-docs-border);
}
.glory-docs-layout-accordion .glory-docs-items {
    border-top: none;
    padding: 0 8px;
}
.glory-docs-layout-accordion .glory-docs-item:last-child {
    border-bottom: none;
}

.glory-docs-category-count {
    color: var(--glory-docs-text-light);
    font-weight: 400;
    font-size: 13px;
}

/* ============================================================
 * CATEGORY LIST  ([glory_docs_categories])
 * ============================================================ */

.glory-docs-category-list {
    list-style: none;
    margin: 24px 0;
    padding: 0;
    border-top: 1px solid var(--glory-docs-border);
}
.glory-docs-category-list-item {
    padding: 14px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--glory-docs-border);
    color: var(--glory-docs-text);
    font-weight: 500;
    transition: padding-left 0.15s ease;
}
.glory-docs-category-list-item:hover {
    padding-left: 8px;
}
.glory-docs-category-name {
    font-size: 15px;
}

/* Empty state */
.glory-docs-empty {
    padding: 24px;
    text-align: center;
    color: var(--glory-docs-text-light);
    font-style: italic;
    background: var(--glory-docs-bg-soft);
    border-radius: 4px;
}

/* ============================================================
 * MODAL
 * ============================================================ */

.glory-docs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: gloryDocsFadeIn 0.18s ease;
}
@keyframes gloryDocsFadeIn { from { opacity: 0; } to { opacity: 1; } }

.glory-docs-modal {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    max-width: 540px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    z-index: 99999;
    animation: gloryDocsSlideUp 0.22s ease;
    font-family: inherit;
}
@keyframes gloryDocsSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.glory-docs-modal-header {
    padding: 36px 40px 24px;
    border-bottom: 1px solid var(--glory-docs-border);
    position: relative;
}
.glory-docs-modal-title {
    margin: 0 0 6px;
    padding: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--glory-docs-text);
    letter-spacing: -0.01em;
}
.glory-docs-modal-subtitle {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--glory-docs-text-light);
}

.glory-docs-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--glory-docs-text-muted);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.glory-docs-modal-close:hover {
    background: var(--glory-docs-bg-hover);
    color: var(--glory-docs-text);
}

.glory-docs-modal-body {
    padding: 28px 40px 8px;
}
.glory-docs-modal-footer {
    padding: 20px 40px 32px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

/* Form fields */
.glory-docs-field {
    margin-bottom: 18px;
}
.glory-docs-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--glory-docs-text);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.glory-docs-field input[type=text],
.glory-docs-field input[type=email],
.glory-docs-field textarea,
.glory-docs-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--glory-docs-text);
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.glory-docs-field input:focus,
.glory-docs-field textarea:focus,
.glory-docs-field select:focus {
    border-color: var(--glory-docs-red);
    outline: none;
    box-shadow: 0 0 0 3px rgba(230, 33, 41, 0.12);
}
.glory-docs-field textarea {
    min-height: 84px;
    resize: vertical;
    line-height: 1.5;
}
.glory-docs-field-hp { display: none !important; }

/* GDPR consent row.
 *
 * The Sytech theme applies `appearance: none` globally to
 * `input[type="checkbox"]` (assets/css/global.css), which strips the native
 * checkbox rendering and leaves our consent box invisible. We therefore draw
 * a fully custom checkbox here — square border + animated red checkmark when
 * checked — so the control is visible regardless of theme overrides.
 *
 * Layout: the <label> is the flex container so the checkbox + text align
 * cleanly even though they live inside the label element. */
.glory-docs-consent {
    margin-top: 4px;
    margin-bottom: 4px;
}
.glory-docs-consent label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--glory-docs-text-muted);
    letter-spacing: 0;
    text-transform: none;
}

.glory-docs-consent input[type="checkbox"] {
    /* Reset all theme-injected styles, then draw our own box. */
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    flex-shrink: 0;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1.5px solid #c4c4c4 !important;
    border-radius: 3px !important;
    cursor: pointer;
    position: relative;
    display: inline-block !important;
    vertical-align: top;
    box-sizing: border-box !important;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.glory-docs-consent input[type="checkbox"]:hover {
    border-color: var(--glory-docs-red) !important;
}
.glory-docs-consent input[type="checkbox"]:focus,
.glory-docs-consent input[type="checkbox"]:focus-visible {
    outline: none !important;
    border-color: var(--glory-docs-red) !important;
    box-shadow: 0 0 0 3px rgba(230, 33, 41, 0.18);
}
.glory-docs-consent input[type="checkbox"]:checked {
    background-color: var(--glory-docs-red) !important;
    border-color: var(--glory-docs-red) !important;
}
/* Animated tick — drawn as the bottom-right corner of a rotated rectangle. */
.glory-docs-consent input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.15s ease;
}
.glory-docs-consent input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
}

/* Secondary button (Cancel) */
.glory-docs-btn-secondary {
    background: #fff;
    color: var(--glory-docs-text);
    border: 1px solid #d4d4d4;
    padding: 13px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.glory-docs-btn-secondary:hover {
    background: var(--glory-docs-bg-hover);
    border-color: #b0b0b0;
}

/* Modal submit button — solid red, no arrow (different intent than download) */
.glory-docs-modal-footer .glory-docs-button {
    padding: 13px 28px;
}
.glory-docs-modal-footer .glory-docs-button::after {
    display: none;
}

/* "I already have access" link — subtle, below the form */
.glory-docs-have-access {
    margin: 8px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--glory-docs-border);
    font-size: 13px;
    text-align: center;
}
.glory-docs-have-access a {
    color: var(--glory-docs-text-muted);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.glory-docs-have-access a:hover {
    color: var(--glory-docs-red);
}

/* Inline messages (success / error / info) */
.glory-docs-message {
    padding: 14px 18px;
    border-radius: 3px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid;
}
.glory-docs-message.is-success {
    background: #f0f9f0;
    color: #1b5e20;
    border-left-color: #2e7d32;
}
.glory-docs-message.is-error {
    background: #fdf2f2;
    color: #b71c1c;
    border-left-color: var(--glory-docs-red);
}
.glory-docs-message.is-info {
    background: #f5f5f5;
    color: #424242;
    border-left-color: #757575;
}

/* ============================================================
 * INFO MODAL — Used for "Request already submitted" and similar
 * standalone messages that need more weight than a toast.
 * ============================================================ */

.glory-docs-modal-info .glory-docs-info-text {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--glory-docs-text) !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
}

/* Title accent strip — different colors for success vs error vs info,
 * picked up from the `.is-{kind}` class on the modal root. */
.glory-docs-modal-info .glory-docs-modal-header {
    border-bottom-color: transparent;
    padding-bottom: 18px;
}
.glory-docs-modal-info .glory-docs-modal-header::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--glory-docs-red);
}
.glory-docs-modal-info.is-success .glory-docs-modal-header::before { background: #2e7d32; }
.glory-docs-modal-info.is-error   .glory-docs-modal-header::before { background: var(--glory-docs-red); }
.glory-docs-modal-info.is-info    .glory-docs-modal-header::before { background: #757575; }

/* ============================================================
 * REAUTH MODAL — "I already have access" sign-in prompt
 * ============================================================ */

.glory-docs-modal-reauth .glory-docs-modal-subtitle {
    margin-top: 8px;
    color: var(--glory-docs-text-muted);
    line-height: 1.5;
}

/* ============================================================
 * TOAST NOTIFICATIONS — Top-right slide-in popups
 *
 * Triggered by:
 *   - URL ?glory_docs_notice=verified|verify_failed|signed_in|signin_failed
 *     (after returning from an email link)
 *   - Reauth submission success ("Check your inbox")
 *
 * Designed to feel premium: red-accent stripe, soft shadow, smooth slide,
 * countdown progress bar, hover-to-pause.
 * ============================================================ */

.glory-docs-toast-stack {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 100000; /* above the modal backdrop too */
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: calc(100vw - 48px);
    width: 380px;
    pointer-events: none; /* let clicks pass through the stack except on toasts */
}

.glory-docs-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    font-family: inherit;
    color: var(--glory-docs-text);
    animation: gloryDocsToastIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: top right;
}
.glory-docs-toast.is-leaving {
    animation: gloryDocsToastOut 0.22s ease forwards;
}
@keyframes gloryDocsToastIn {
    from { opacity: 0; transform: translateX(40px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes gloryDocsToastOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(40px) scale(0.96); }
}

/* Left accent stripe — color depends on kind. */
.glory-docs-toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--glory-docs-red);
}
.glory-docs-toast.is-success::before { background: #2e7d32; }
.glory-docs-toast.is-error::before   { background: var(--glory-docs-red); }
.glory-docs-toast.is-info::before    { background: #757575; }

/* Circular icon */
.glory-docs-toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: #fff;
    background: var(--glory-docs-red);
    -webkit-mask-position: center;
            mask-position: center;
}
.glory-docs-toast.is-success .glory-docs-toast-icon { background: #2e7d32; }
.glory-docs-toast.is-error   .glory-docs-toast-icon { background: var(--glory-docs-red); }
.glory-docs-toast.is-info    .glory-docs-toast-icon { background: #757575; }

.glory-docs-toast-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    background: #fff;
}
.glory-docs-toast.is-success .glory-docs-toast-icon::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11.5L3 8l1.4-1.4 2.1 2.1 5.1-5.1L13 5z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11.5L3 8l1.4-1.4 2.1 2.1 5.1-5.1L13 5z'/></svg>") no-repeat center / contain;
}
.glory-docs-toast.is-error .glory-docs-toast-icon::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11.4 4.6l-2.8 2.8 2.8 2.8-1.0 1.0-2.8-2.8-2.8 2.8-1.0-1.0 2.8-2.8-2.8-2.8 1.0-1.0 2.8 2.8 2.8-2.8z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11.4 4.6l-2.8 2.8 2.8 2.8-1.0 1.0-2.8-2.8-2.8 2.8-1.0-1.0 2.8-2.8-2.8-2.8 1.0-1.0 2.8 2.8 2.8-2.8z'/></svg>") no-repeat center / contain;
}
.glory-docs-toast.is-info .glory-docs-toast-icon::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a1 1 0 110 2 1 1 0 010-2zM7 7.5h2v5H7v-5z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a1 1 0 110 2 1 1 0 010-2zM7 7.5h2v5H7v-5z'/></svg>") no-repeat center / contain;
}

.glory-docs-toast-content {
    flex: 1;
    min-width: 0;
    padding-right: 6px;
}
.glory-docs-toast-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--glory-docs-text);
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.glory-docs-toast-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--glory-docs-text-muted);
    word-wrap: break-word;
}

.glory-docs-toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--glory-docs-text-light);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -2px -4px 0 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.glory-docs-toast-close:hover {
    background: var(--glory-docs-bg-hover);
    color: var(--glory-docs-text);
}

/* Auto-dismiss countdown bar */
.glory-docs-toast-progress {
    position: absolute;
    left: 4px;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--glory-docs-red);
    opacity: 0.55;
    transform-origin: left center;
    animation: gloryDocsToastProgress 7s linear forwards;
}
.glory-docs-toast.is-success .glory-docs-toast-progress { background: #2e7d32; }
.glory-docs-toast.is-error   .glory-docs-toast-progress { background: var(--glory-docs-red); }
.glory-docs-toast.is-info    .glory-docs-toast-progress { background: #757575; }
.glory-docs-toast.is-paused .glory-docs-toast-progress {
    animation-play-state: paused;
}
@keyframes gloryDocsToastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Mobile: pin toasts to top edges, slightly smaller text. */
@media (max-width: 600px) {
    .glory-docs-toast-stack {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
    .glory-docs-toast {
        padding: 14px 14px;
        gap: 12px;
    }
    .glory-docs-toast-title { font-size: 14px; }
    .glory-docs-toast-body  { font-size: 13px; }
}

/* ============================================================
 * SYTECH THEME — single-column page layout (.post_main without sidebar)
 *
 * Theme caps .post_main .postdetail at max-width: 99.2rem. When .postdetail is
 * the only flex child, widen Glory Docs roots to full width.
 * Skip layouts with .left + .postdetail (blog posts).
 * ============================================================ */

/* Lift the theme cap on .postdetail itself so "space-between" doesn't leave
 * a large empty right-side area in single-column templates that render our
 * shortcodes directly in post content. */
.post_main .flex > .postdetail.glory-docs-postdetail-fullwidth {
    max-width: none !important;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

/* JS fallback marker on the direct Gutenberg wrapper inside .postdetail. */
.post_main .flex > .postdetail > .content.glory-docs-postcontent-fullwidth {
    max-width: none !important;
    width: min(160rem, 100vw);
    margin-left: 0 !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.post_main .flex > .postdetail:only-child:has(.glory-docs-list),
.post_main .flex > .postdetail:only-child:has(.glory-docs-section),
.post_main .flex > .postdetail:only-child:has(.glory-docs-button-wrap),
.post_main .flex > .postdetail:only-child:has(.glory-docs-category-list),
.post_main .flex > .postdetail:only-child:has(.glory-docs-empty),
.post_main .flex:not(:has(> .left)) > .postdetail:has(.glory-docs-list),
.post_main .flex:not(:has(> .left)) > .postdetail:has(.glory-docs-section),
.post_main .flex:not(:has(> .left)) > .postdetail:has(.glory-docs-button-wrap),
.post_main .flex:not(:has(> .left)) > .postdetail:has(.glory-docs-category-list),
.post_main .flex:not(:has(> .left)) > .postdetail:has(.glory-docs-empty) {
    max-width: none !important;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

.post_main .flex > .postdetail:only-child .glory-docs-list,
.post_main .flex > .postdetail:only-child .glory-docs-section,
.post_main .flex > .postdetail:only-child .glory-docs-empty,
.post_main .flex:not(:has(> .left)) > .postdetail .glory-docs-list,
.post_main .flex:not(:has(> .left)) > .postdetail .glory-docs-section,
.post_main .flex:not(:has(> .left)) > .postdetail .glory-docs-empty {
    width: min(160rem, 100vw);
    max-width: none !important;
    box-sizing: border-box;
}

/*
 * Gutenberg often wraps shortcodes in <div class="content">. The Sytech theme
 * global .content rule (max-width, margin: 0 auto) then stacks with .postdetail and
 * can leave download rows visibly narrower than surrounding footer blocks.
 * Reset that wrapper when it contains Glory Docs output (same single-column guard).
 */
.post_main .flex > .postdetail:only-child > .content:has(.glory-docs-list),
.post_main .flex > .postdetail:only-child > .content:has(.glory-docs-section),
.post_main .flex > .postdetail:only-child > .content:has(.glory-docs-button-wrap),
.post_main .flex > .postdetail:only-child > .content:has(.glory-docs-category-list),
.post_main .flex > .postdetail:only-child > .content:has(.glory-docs-empty),
.post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-list),
.post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-section),
.post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-button-wrap),
.post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-category-list),
.post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-empty) {
    max-width: none !important;
    width: min(160rem, 100vw);
    margin-left: 0 !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Fallback when :has() is unsupported: direct-child .content path used by block editor */
.post_main .flex > .postdetail:only-child > .content .glory-docs-list,
.post_main .flex > .postdetail:only-child > .content .glory-docs-section,
.post_main .flex > .postdetail:only-child > .content .glory-docs-empty,
.post_main .flex:not(:has(> .left)) > .postdetail > .content .glory-docs-list,
.post_main .flex:not(:has(> .left)) > .postdetail > .content .glory-docs-section,
.post_main .flex:not(:has(> .left)) > .postdetail > .content .glory-docs-empty {
    width: min(160rem, 100vw);
    max-width: none !important;
    box-sizing: border-box;
}

/* ============================================================
 * RESPONSIVE
 *
 * Three tiers:
 *   ≤ 768px — tablet: tighten spacing, neutralize the Sytech width overrides
 *             so they can't trigger horizontal scroll inside narrow mobile
 *             containers (100vw includes the scrollbar on some browsers).
 *   ≤ 600px — mobile: stack each row, full-width centered CTAs, tighter
 *             headings, smaller accordion summary, neutralize the desktop
 *             "slide right on hover" effect that gets stuck on touch.
 *   ≤ 400px — small phones: edge-to-edge modal, stacked footer buttons.
 * ============================================================ */

/* --- Tablet ------------------------------------------------------ */
@media (max-width: 768px) {
    .glory-docs-list { margin: 24px 0; }
    .glory-docs-section { margin: 28px auto; }
    .content .glory-docs-section { margin: 28px auto; }

    /* Sytech single-column overrides resolve to `width: min(160rem, 100vw)`,
     * which equals 100vw on small viewports and overflows containers that
     * have side padding. Cap to 100% from tablet down. */
    .post_main .flex > .postdetail:only-child .glory-docs-list,
    .post_main .flex > .postdetail:only-child .glory-docs-section,
    .post_main .flex > .postdetail:only-child .glory-docs-empty,
    .post_main .flex:not(:has(> .left)) > .postdetail .glory-docs-list,
    .post_main .flex:not(:has(> .left)) > .postdetail .glory-docs-section,
    .post_main .flex:not(:has(> .left)) > .postdetail .glory-docs-empty,
    .post_main .flex > .postdetail:only-child > .content:has(.glory-docs-list),
    .post_main .flex > .postdetail:only-child > .content:has(.glory-docs-section),
    .post_main .flex > .postdetail:only-child > .content:has(.glory-docs-button-wrap),
    .post_main .flex > .postdetail:only-child > .content:has(.glory-docs-category-list),
    .post_main .flex > .postdetail:only-child > .content:has(.glory-docs-empty),
    .post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-list),
    .post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-section),
    .post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-button-wrap),
    .post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-category-list),
    .post_main .flex:not(:has(> .left)) > .postdetail > .content:has(.glory-docs-empty),
    .post_main .flex > .postdetail:only-child > .content .glory-docs-list,
    .post_main .flex > .postdetail:only-child > .content .glory-docs-section,
    .post_main .flex > .postdetail:only-child > .content .glory-docs-empty,
    .post_main .flex:not(:has(> .left)) > .postdetail > .content .glory-docs-list,
    .post_main .flex:not(:has(> .left)) > .postdetail > .content .glory-docs-section,
    .post_main .flex:not(:has(> .left)) > .postdetail > .content .glory-docs-empty {
        width: 100% !important;
    }
    .post_main .flex > .postdetail > .content.glory-docs-postcontent-fullwidth {
        width: 100%;
    }

    /* List rows: still horizontal at this tier, just more compact. */
    .glory-docs-list .glory-docs-items .glory-docs-item {
        gap: 18px;
        padding: 20px 20px !important;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item:hover {
        padding-left: 24px !important;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-item-title {
        font-size: 17px !important;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-button {
        padding: 12px 22px !important;
    }

    /* Headings: tighter spacing. Font-size still inherits from the theme. */
    .glory-docs-section .glory-docs-list-product .glory-docs-product-docs-heading,
    .glory-docs-list-product .glory-docs-product-docs-heading {
        margin: 0 0 16px !important;
        padding: 0 0 10px !important;
    }
    .glory-docs-list h3.glory-docs-category,
    .glory-docs-list .head,
    .glory-docs-section h3.glory-docs-category,
    .glory-docs-section .head,
    h3.glory-docs-category {
        margin: 24px 0 12px !important;
        padding: 0 0 10px !important;
    }

    .glory-docs-layout-accordion .glory-docs-category-summary {
        padding: 14px 18px;
        font-size: 15px;
    }
}

/* --- Mobile ------------------------------------------------------ */
@media (max-width: 600px) {
    .glory-docs-list { margin: 20px 0; }
    .glory-docs-list-single { margin: 10px 0; }
    .glory-docs-section { margin: 24px auto; }
    .content .glory-docs-section { margin: 24px auto; }

    /* Stack each document row: title + description block, then the CTA below. */
    .glory-docs-list .glory-docs-items .glory-docs-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
        padding: 16px 14px !important;
    }
    /* Kill the desktop hover shift — on touch it stays sticky after tap. */
    .glory-docs-list .glory-docs-items .glory-docs-item:hover {
        padding-left: 14px !important;
        background: #fff;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-item-title {
        font-size: 16px !important;
        margin: 0 0 6px !important;
        line-height: 1.35 !important;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-item-desc {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    /* Full-width centered download CTA (was left-aligned, leaving an awkward
     * trailing gap on the right side of the button). */
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-item-action {
        width: 100%;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-button {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 18px !important;
        font-size: 12px !important;
    }

    /* Trim the heading underline accent so it stays proportional. */
    .glory-docs-section .glory-docs-list-product .glory-docs-product-docs-heading::after,
    .glory-docs-list-product .glory-docs-product-docs-heading::after {
        width: 40px !important;
    }
    .glory-docs-list h3.glory-docs-category::after,
    .glory-docs-list .head::after,
    .glory-docs-section h3.glory-docs-category::after,
    .glory-docs-section .head::after,
    h3.glory-docs-category::after {
        width: 28px !important;
    }
    .glory-docs-list h3.glory-docs-category,
    .glory-docs-list .head,
    .glory-docs-section h3.glory-docs-category,
    .glory-docs-section .head,
    h3.glory-docs-category {
        margin: 20px 0 10px !important;
    }

    /* Accordion */
    .glory-docs-layout-accordion .glory-docs-accordion-item { margin-bottom: 6px; }
    .glory-docs-layout-accordion .glory-docs-category-summary {
        padding: 13px 14px;
        font-size: 14px;
        gap: 10px;
    }
    .glory-docs-layout-accordion .glory-docs-category-summary::before {
        width: 8px;
        height: 8px;
    }
    .glory-docs-layout-accordion .glory-docs-items { padding: 0 4px; }
    .glory-docs-category-count { font-size: 12px; }

    /* [glory_docs_categories] — tighter rows, no hover shift. */
    .glory-docs-category-list { margin: 18px 0; }
    .glory-docs-category-list-item {
        padding: 12px 4px;
        font-size: 14px;
    }
    .glory-docs-category-list-item:hover { padding-left: 4px; }
    .glory-docs-category-name { font-size: 14px; }

    /* Modal */
    .glory-docs-modal-backdrop { padding: 16px; }
    .glory-docs-modal-header { padding: 24px 24px 18px; }
    .glory-docs-modal-body { padding: 20px 24px 4px; }
    .glory-docs-modal-footer {
        padding: 16px 24px 24px;
        flex-wrap: wrap;
    }
    .glory-docs-modal-footer .glory-docs-button,
    .glory-docs-btn-secondary {
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
    }
    .glory-docs-modal-title { font-size: 19px; }
    .glory-docs-modal-subtitle { font-size: 13px; }
    .glory-docs-field { margin-bottom: 14px; }
    .glory-docs-field input[type=text],
    .glory-docs-field input[type=email],
    .glory-docs-field textarea,
    .glory-docs-field select {
        font-size: 16px; /* iOS: inputs < 16px trigger zoom on focus */
    }
}

/* --- Small phones ----------------------------------------------- */
@media (max-width: 400px) {
    .glory-docs-list .glory-docs-items .glory-docs-item {
        padding: 14px 12px !important;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-item-title {
        font-size: 15px !important;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-button {
        padding: 11px 14px !important;
        font-size: 11.5px !important;
    }
    .glory-docs-modal-backdrop { padding: 10px; }
    .glory-docs-modal-header { padding: 20px 18px 14px; }
    .glory-docs-modal-body { padding: 16px 18px 4px; }
    .glory-docs-modal-footer {
        padding: 14px 18px 20px;
        flex-direction: column-reverse;
    }
    .glory-docs-modal-footer .glory-docs-button,
    .glory-docs-btn-secondary {
        width: 100%;
    }
}

/* Disable the "slide right + bar accent" hover behavior on devices without
 * a fine pointer (touch laptops, tablets in landscape). Without this,
 * tapping a row leaves it shifted/highlighted until another element is
 * tapped. Scoped above the mobile breakpoint so we don't fight the mobile
 * rules that already neutralize the hover. */
@media (hover: none) and (min-width: 601px) {
    .glory-docs-list .glory-docs-items .glory-docs-item:hover {
        background: #fff;
        padding-left: 28px !important;
    }
    .glory-docs-list .glory-docs-items .glory-docs-item:hover::before {
        transform: scaleY(0);
    }
    .glory-docs-list .glory-docs-items .glory-docs-item .glory-docs-button:hover {
        transform: none;
    }
    .glory-docs-category-list-item:hover { padding-left: 4px; }
}