/**
 * QET AI Smart Page Break – Front-end Styles
 *
 * Uses CSS custom properties (set by inline styles from PHP) for theming.
 * Provides presets: modern, classic, minimalist, theme.
 *
 * @package QET_AI_Smart_Page_Break
 */

/* ----------------------------------------------------------------
   Navigation wrapper
   ---------------------------------------------------------------- */
.qet-spb-nav,
.qet-spb-sc-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    clear: both;
}

.qet-spb-align-left   { justify-content: flex-start; text-align: left; }
.qet-spb-align-center { justify-content: center; text-align: center; }
.qet-spb-align-right  { justify-content: flex-end; text-align: right; }

/* Display modes */
.qet-spb-display-block .qet-spb-buttons,
.qet-spb-display-full .qet-spb-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.qet-spb-display-full .qet-spb-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Buttons wrapper */
.qet-spb-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ----------------------------------------------------------------
   Page info
   ---------------------------------------------------------------- */
.qet-spb-page-info {
    display: inline-block;
    font-size: 14px;
    color: #666;
    padding: 4px 8px;
    margin-right: 6px;
}

/* ----------------------------------------------------------------
   Base button
   ---------------------------------------------------------------- */
.qet-spb-btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    border-style: solid;
    border-width: 2px;
    transition: all .25s ease;
    font-family: inherit;

    /* Custom properties – fallbacks for when inline vars not set */
    color: var(--qet-spb-text, #fff);
    background-color: var(--qet-spb-bg, #0073aa);
    border-color: var(--qet-spb-border, #005f8d);
    border-radius: var(--qet-spb-radius, 6px);
    font-size: var(--qet-spb-font-size, 16px);
    font-weight: var(--qet-spb-font-weight, 600);
    padding: var(--qet-spb-pad-v, 12px) var(--qet-spb-pad-h, 28px);
    box-shadow: var(--qet-spb-shadow, 0 2px 8px rgba(0,0,0,.12));
}

.qet-spb-btn:hover,
.qet-spb-btn:focus {
    color: var(--qet-spb-hover-text, #fff);
    background-color: var(--qet-spb-hover-bg, #005f8d);
    border-color: var(--qet-spb-hover-border, #004a70);
    text-decoration: none;
    outline: none;
}

/* Focus ring for accessibility */
.qet-spb-btn:focus-visible {
    outline: 3px solid rgba(0, 115, 170, .5);
    outline-offset: 2px;
}

/* Animation */
.qet-spb-animated .qet-spb-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* Final page button – slightly different accent */
.qet-spb-final {
    position: relative;
}
.qet-spb-final::after {
    content: " →";
}

/* Previous button arrow */
.qet-spb-prev::before {
    content: "";
}

/* ----------------------------------------------------------------
   Preset: Modern (default)
   ---------------------------------------------------------------- */
.qet-spb-preset-modern .qet-spb-btn {
    border-radius: var(--qet-spb-radius, 8px);
    text-transform: none;
    letter-spacing: 0;
}

/* ----------------------------------------------------------------
   Preset: Classic
   ---------------------------------------------------------------- */
.qet-spb-preset-classic .qet-spb-btn {
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: calc(var(--qet-spb-font-size, 16px) - 1px);
    box-shadow: none;
}
.qet-spb-preset-classic .qet-spb-btn:hover {
    box-shadow: none;
    transform: none;
}

/* ----------------------------------------------------------------
   Preset: Minimalist
   ---------------------------------------------------------------- */
.qet-spb-preset-minimalist .qet-spb-btn {
    background: transparent;
    color: var(--qet-spb-bg, #0073aa);
    border-color: var(--qet-spb-bg, #0073aa);
    box-shadow: none;
}
.qet-spb-preset-minimalist .qet-spb-btn:hover {
    background-color: var(--qet-spb-bg, #0073aa);
    color: var(--qet-spb-text, #fff);
}

/* ----------------------------------------------------------------
   Preset: Theme (neutral)
   ---------------------------------------------------------------- */
.qet-spb-preset-theme .qet-spb-btn {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    box-shadow: none;
    font-weight: inherit;
}
.qet-spb-preset-theme .qet-spb-btn:hover {
    opacity: .75;
    background: transparent;
    color: inherit;
    border-color: currentColor;
    transform: none;
}

/* ----------------------------------------------------------------
   Custom HTML blocks
   ---------------------------------------------------------------- */
.qet-spb-html-before,
.qet-spb-html-after,
.qet-spb-html-before-final,
.qet-spb-html-after-final {
    width: 100%;
    clear: both;
    margin: 8px 0;
}
.qet-spb-html-before {
    margin-bottom: 12px;
}
.qet-spb-html-after {
    margin-top: 12px;
}
.qet-spb-html-before-final {
    margin-bottom: 10px;
    padding-top: 4px;
}
.qet-spb-html-after-final {
    margin-top: 10px;
    padding-bottom: 4px;
}
.qet-spb-html-before img,
.qet-spb-html-after img,
.qet-spb-html-before-final img,
.qet-spb-html-after-final img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------
   Dedicated ad code blocks
   ---------------------------------------------------------------- */
.qet-spb-ad {
    width: 100%;
    clear: both;
    margin: 10px 0;
    text-align: center;
    overflow: hidden;
}
.qet-spb-ad-before-nav {
    margin-bottom: 14px;
}
.qet-spb-ad-after-nav {
    margin-top: 14px;
}
.qet-spb-ad-before-final {
    margin-bottom: 10px;
}
.qet-spb-ad-after-final {
    margin-top: 10px;
}
.qet-spb-ad ins {
    display: block;
    margin: 0 auto;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
    .qet-spb-nav,
    .qet-spb-sc-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    .qet-spb-buttons {
        flex-direction: column;
        width: 100%;
    }
    .qet-spb-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .qet-spb-page-info {
        text-align: center;
        width: 100%;
    }
}

/* ----------------------------------------------------------------
   RTL support
   ---------------------------------------------------------------- */
[dir="rtl"] .qet-spb-align-left   { justify-content: flex-end; }
[dir="rtl"] .qet-spb-align-right  { justify-content: flex-start; }
[dir="rtl"] .qet-spb-final::after { content: " ←"; }