/*
 * app.css — styles owned by this application.
 *
 * Part 1 is the inline <style> block lifted verbatim from ssstik.net v1's
 * header.php (language switcher, mobile menu, static pages, 404). It was never
 * part of v1's style.css, so copying the stylesheets alone would have dropped it.
 *
 * Part 2 (appended below) restyles the download-result markup. That markup is
 * returned by the remote API and written to the response verbatim by
 * WebsiteController::fetch(), so its class names are fixed and cannot be renamed
 * here — only restyled.
 *
 * Load order: style.css, then style-rtl.css (Arabic only), then this file.
 */

/* ── Part 1: lifted from v1 header.php ─────────────────────────────────── */

.nav-links ul li {
    list-style: none;
    display: inline-block;
    margin-right: 20px;
}

.pll-parent-menu-item {
    position: relative;
}

.pll-parent-menu-item .sub-menu {
    display: none;
    position: absolute;
    left: -150px;
    top: 100%;
    background: #fff;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    min-width: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    flex-wrap: wrap;
    width: 300px;
}

.pll-parent-menu-item .sub-menu li {
    padding: 5px 15px;
    white-space: nowrap;
    text-align: left;
    margin: 0;
    width: 50%;
}

.pll-parent-menu-item .sub-menu li:hover {
    background-color: #f7f7f7;
}

.pll-parent-menu-item>a {
    cursor: pointer;
}

.pll-parent-menu-item:hover .sub-menu {
    display: flex;
}

.mobile-menu-container {
    display: flex;
    flex-direction: column;
}

.mobile-menu-container .nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.mobile-menu-container .nav-links a {
    color: #444;
    text-decoration: none;
    font-size: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: block;
    width: 100%;
}

.mobile-menu-container .dropdown {
    width: 100%;
}

.mobile-menu-container .language-dropdown {
    margin-top: 15px;
}

.mobile-menu-container .dropdown-content {
    position: relative;
    display: none;
    width: 100%;
    box-shadow: none;
    margin-top: 10px;
    padding-left: 15px;
}

.mobile-menu-container .dropdown.active .dropdown-content {
    display: block;
}

.mobile-menu-container .footer-links {
    margin-top: 20px;
    display: block;
    width: 100%;
}

.image-placeholder img {
    height: 200px;
}

.hero h2 {
    font-size: 20px;
}

@media (max-width: 768px) {
    .mobile-menu-container .pll-parent-menu-item .sub-menu {
        display: flex;
        left: 0;
        width: 360px;
        position: relative;
    }

    .nav-links {
        align-items: unset;
    }

    .nav-links ul li {
        display: block;
    }

    .hero h2 {
        font-size: 18px;
    }

    .info-section h3 {
        font-size: 20px;
    }
}

ul li {
    margin-left: 30px;
}

.paste-btn .fas {
    font-size: 20px;
    color: #9c27b0;
}

.clear-btn .fas {
    font-size: 20px;
    color: #9c27b0;
}

footer a {
    color: #10e0fa;
}

.social-icons a {
    padding: 10px;
    margin-right: 10px;
}

.footer-col h4 {
    margin-left: 30px;
}

.footer-col ul li {
    display: inline-block;
}

.sponsore a {
    color: #333;
}

.page-header {
    background: linear-gradient(135deg, #4158D0, #C850C0);
    padding: 50px 0 40px;
    text-align: center;
}

.page-header h1 {
    color: #fff;
    font-size: 2rem;
    margin: 0;
}

.page-content-section {
    padding: 50px 0;
}

.page-content {
    max-width: 860px;
    margin: 0 auto;
    line-height: 1.8;
}

.page-content h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.page-content h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.page-content p {
    margin-bottom: 1rem;
}

.page-content ul {
    margin: 0.5rem 0 1rem 1.5rem;
}

.page-content ul li {
    margin-bottom: 0.4rem;
}

.error-page {
    padding: 80px 0;
}

.error-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.error-icon {
    font-size: 4rem;
    color: #C850C0;
    margin-bottom: 16px;
}

.error-content h1 {
    font-size: 6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #4158D0, #C850C0, #FFCC70);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin: 0 0 8px;
}

.error-content h2 {
    font-size: 1.8rem;
    color: #333;
    margin: 0 0 20px;
}

.error-content p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 12px;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 32px 0 40px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #4158D0, #C850C0);
    color: #fff;
    padding: 13px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: opacity .2s;
}

.btn-primary:hover { opacity: .85; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #C850C0;
    padding: 13px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid #C850C0;
    transition: background .2s, color .2s;
}

.btn-secondary:hover { background: #C850C0; color: #fff; }

.error-suggestions {
    background: #f9f9fb;
    border-radius: 12px;
    padding: 24px 28px;
    text-align: left;
}

.error-suggestions h3 {
    font-size: 1rem;
    color: #444;
    margin: 0 0 12px;
}

.error-suggestions ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.error-suggestions ul li {
    color: #666;
    margin-bottom: 6px;
}

.error-suggestions ul li a {
    color: #4158D0;
    text-decoration: none;
    font-weight: 600;
}

.error-suggestions ul li a:hover { text-decoration: underline; }

/* ── Part 2: download-result markup ────────────────────────────────────────
 *
 * The result card is rendered by the remote API and written to the response
 * verbatim (WebsiteController::fetch), so these class names are fixed — they
 * can be restyled but never renamed. Recoloured here from the old
 * #5940f1 / #cc01fe scheme to v1's #4158D0 → #C850C0.
 *
 * The utility classes below (.clear, .ac, .mb*, .txt_* …) also arrive in the
 * API's HTML. They used to live in the old inline reset block; v1's style.css
 * has no equivalent, so they are kept here or the result layout breaks.
 */

/* Utilities relied on by API-returned markup */
.clear { clear: both; line-height: 0; margin: 0; padding: 0; }
.hwa { height: auto !important; width: auto !important; }
.full { width: 100% !important; }
.fl { float: left !important; }
.fr { float: right !important; }
.db { display: block !important; }
.dib { display: inline-block !important; }
.hide { display: none !important; }
.show { display: block !important; }
.vam { vertical-align: middle; }
.ac { text-align: center !important; }
.aj { text-align: justify !important; }
.rtl { direction: rtl !important; }
.ltr { direction: ltr !important; }
.fs17 { font-size: 17px; }
.u-l { float: left; }
.u-r { float: right; }
.u-bl { display: inline-block; }

.mb0 { margin-bottom: 0 !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb50 { margin-bottom: 50px !important; }
.mt0 { margin-top: 0 !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.pt0 { padding-top: 0 !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pb0 { padding-bottom: 0 !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pad10 { padding: 10px; }
.pad15 { padding: 15px; }

.txt_red { color: #c14d44 !important; }
.txt_green { color: #063f4f !important; }
.txt_suc { color: #0ba50b !important; }
.txt_err { color: #c14d44 !important; }
.txt_blue { color: #084888 !important; }
.txt_gray { color: #646f78 !important; }
.txt_white { color: #fff !important; }
.txt_black { color: #000 !important; }
.txt_orange { color: #f29423 !important; }

.round { border-radius: 10%; }

.shad_box {
    width: 100%;
    padding: 10px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
    background: #fff;
    margin-bottom: 20px;
}

.blue_bg { background: #f1f5fd; float: left; width: 100%; padding: 15px 0; }

.d-flex { display: flex; }
.flex-1 { flex: 1; }
.align-items-center { align-items: center; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.mb-3 { margin-bottom: 0.75rem; }

/* Form validation, driven by the inline htmx glue in footer.php */
.hf_urli_error {
    outline: 2px solid #ff4d6a !important;
    outline-offset: -2px;
}

.hf_validation_msg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    background: #1e1e2e;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    padding: 7px 12px 7px 10px;
    border-radius: 6px;
    white-space: normal;
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    animation: hfMsgIn 0.15s ease;
}

.hf_validation_msg::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: #1e1e2e;
    transform: rotate(45deg);
    border-radius: 2px;
}

.hf_validation_msg svg { flex-shrink: 0; }

@keyframes hfMsgIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.download-btn:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

/* Result card — layout
 *
 * The card is one white panel: thumbnail | caption + author | buttons.
 *
 * The thumbnail is not an <img> in the API's markup — it arrives as a
 * background-image that the API injects onto `#mainpicture .result_overlay` in
 * a trailing <style> block. It is rendered here through ::before with
 * `background-image: inherit`, which is the only way to reach a URL we never
 * see. The container itself gets `background-size: 0 0` so it paints nothing;
 * background-size is not inherited, so ::before is free to set its own.
 */
.result,
.download-box {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/*
`.download-box` is the API's other result shape (.vidh_wrap + .video-links). It
is the flex row itself, not a wrapper around one, so it is both card and row —
unlike `.result`, which wraps `.result_overlay`.
*/
.download-box,
.result_overlay {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
}

.result_overlay {
    background-size: 0 0;
    background-repeat: no-repeat;
}

.result_overlay::before {
    content: "";
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: 8px;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-color: #eef0f4;
}

.vidh_wrap {
    flex: 0 0 42%;
    min-width: 0;
}

/* Caption + author block. No panel of its own — it sits inside the card. */
.video-header,
#avatarAndTextUsual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1 1 300px;
    min-width: 0;
    max-width: 42%;
    padding: 0;
    background: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
`display: contents` dissolves the API's inner grid cell so the caption and the
author name become siblings of the avatar, which is what lets the caption sit
on its own row above them. Reordering is otherwise impossible: the two are
wrapped together in one div, and the avatar is in another.
*/
#avatarAndTextUsual .pure-u-18-24.pd-lr { display: contents; }
#avatarAndTextUsual .pure-u-6-24 { width: auto; order: 2; }

.video-header .avatar,
.result_author {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
    min-width: 40px;
    flex-shrink: 0;
    display: block;
}

.video-header .info { overflow: hidden; flex: 1; }
.pd-lr { padding: 0 0 0 4px; flex: 1; min-width: 0; }

/* Author name — sits beside the avatar */
.video-header .video-title,
#avatarAndTextUsual h2 {
    order: 3;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 20px;
    color: #222;
    margin: 0;
    font-weight: 700;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Caption — full-width row above the author */
.video-header .info span,
.maintext {
    order: 1;
    flex: 0 0 100%;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0 0 5px;
}

/* Result card — download buttons */
.video-links,
.result_overlay_buttons {
    flex: 1 1 250px;
    max-width: 45%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Empty on every platform but iOS, where JS moves the app link into it */
#dl1:empty { display: none; }

.vid_dbtn,
.pure-button.pure-button-primary,
.pure-button.pure-button-primary.is-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #2962ff !important;
    color: #fff !important;
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    padding: 14px 16px;
    border: none !important;
    height: fit-content;
    text-align: center;
    border-radius: 4px !important;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.vid_dbtn:hover,
.pure-button.pure-button-primary:hover {
    background: #1557b0 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(21, 87, 176, 0.3) !important;
    text-decoration: none;
}

/* The audio button is green, as on v1. `.music` is set by the API. */
.pure-button.pure-button-primary.music { background: #28a745 !important; }
.pure-button.pure-button-primary.music:hover {
    background: #1e7e34 !important;
    box-shadow: 0 4px 10px rgba(30, 126, 52, 0.3) !important;
}

.pure-button.pure-button-primary.music::before {
    content: "\f025";           /* fa-headphones */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}

.vid_obtn,
.vid_obtn:hover {
    background: #16161d !important;
    color: #ffffff !important;
}

.vid_err {
    color: #c14d44 !important;
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
}

/* Pure.css grid shims used by the API markup */
.pure-g { letter-spacing: normal; }
[class*="pure-u"] { display: inline-block; vertical-align: top; }
.pure-u-1 { width: 100%; }
.pure-u-sm-1-2 { width: calc(50% - 8px); }
.pure-u-6-24 { width: 25%; }
.pure-u-18-24 { width: 75%; }

/* Trending stats row */
.trending-actions {
    display: flex;
    width: 100%;
    margin-top: 4px;
    gap: 8px;
}

.trending-actions .d-flex {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 13px;
    line-height: 18px;
}

.trending-actions svg { stroke: #888; flex-shrink: 0; }

/* Error panel */
.panel {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.panel.critical {
    border: 1.5px solid #fbc4c4;
    background: #fff8f8;
}

.panel-body { padding: 32px 28px 24px; }

.b-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 16px;
}

.b-box.warning {
    background: linear-gradient(135deg, #ff4d6a 0%, #c14d44 100%);
    box-shadow: 0 6px 20px rgba(193, 77, 68, 0.28);
}

.svg-icon { display: block; }
.svg-icon--big { width: 26px; height: 26px; }

.panel.critical b {
    display: block;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.panel.critical p {
    font-size: 14px;
    line-height: 22px;
    color: #555;
    margin-bottom: 12px;
}

.panel.critical .err-code {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #c14d44;
    background: #fdecea;
    border-radius: 4px;
    padding: 3px 8px;
    margin-bottom: 16px;
}

.panel.critical hr {
    border: none;
    border-top: 1px solid #fbc4c4;
    margin: 16px 0;
}

/* Photo / slideshow results
 *
 * The carousel already shows every image full size, so the thumbnail tile would
 * only repeat the first slide. Drop it, keep the poster as the card background,
 * and centre the block instead.
 */
.result:has(.splide) .result_overlay::before { display: none; }

.result:has(.splide) .result_overlay {
    justify-content: center;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    padding: 20px;
}

.result:has(.splide) #avatarAndTextUsual,
.result:has(.splide) .result_overlay_buttons {
    max-width: 100%;
    margin: 0 auto;
}

.result .splide {
    margin: 20px auto 0;
    max-width: 420px;
}

.result .splide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* The result card sits inside .container; keep it clear of the form card */
#result_box { margin-top: 25px; }

@media (max-width: 760px) {
    .result,
    .download-box { padding: 20px; }

    .result_overlay { flex-direction: column; align-items: stretch; }

    .result_overlay::before {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }

    .vidh_wrap,
    .video-links,
    .video-header,
    #avatarAndTextUsual,
    .result_overlay_buttons {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .pure-u-sm-1-2 { width: 100%; }
}

/* ── Part 3: static information pages ──────────────────────────────────────
 *
 * contact / privacy-policy / terms-of-service are hardcoded templates that
 * markup themselves with .cnt_box and .bread_crumb. Those classes used to be
 * styled by the inline block in head.php; they are restyled here to match
 * v1's .page-content aesthetic instead.
 */

.content.main__content__container {
    padding: 40px 0 10px;
}

.bread_crumb {
    max-width: 860px;
    margin: 0 auto 18px;
}

.bread_crumb a {
    display: inline-block;
    color: #666;
    font-size: 14px;
    text-decoration: none;
}

.bread_crumb a.active,
.bread_crumb a:hover {
    color: #4158D0;
}

.bread_crumb a:after {
    content: "»";
    margin: 0 10px;
    color: #bbb;
}

.bread_crumb a:last-child:after {
    content: "";
    margin: 0;
}

.cnt_box {
    max-width: 860px;
    margin: 0 auto 40px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 32px 34px;
    line-height: 1.8;
}

.cnt_box h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #4158D0, #C850C0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.cnt_box h2 {
    font-size: 1.4rem;
    margin: 2rem 0 0.75rem;
    color: #333;
}

.cnt_box h3 {
    font-size: 1.15rem;
    margin: 1.75rem 0 0.5rem;
    color: #333;
}

.cnt_box p {
    margin-bottom: 1rem;
}

.cnt_box ul,
.cnt_box ol {
    margin: 0.5rem 0 1rem 1.5rem;
    padding-left: 20px;
    text-align: left;
}

.cnt_box ul { list-style: disc; }
.cnt_box ol { list-style: decimal; }
.cnt_box li { margin-bottom: 0.4rem; }

.cnt_box a {
    color: #4158D0;
    text-decoration: underline;
}

.cnt_box i { font-style: italic; }
.cnt_box u { text-decoration: underline; }

/* ── Part 4: 404 page ──────────────────────────────────────────────────────
 *
 * Lifted from v1's inline <style> on the 404 template. The gradient-clipped
 * "404" needs the -webkit- prefixes: background-clip: text is still prefixed
 * in Safari, and text-fill-color has no standard equivalent.
 */

.error-page {
    padding: 60px 0;
    text-align: center;
}

.error-content {
    max-width: 700px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.error-icon {
    font-size: 60px;
    color: #f44336;
    margin-bottom: 20px;
}

.error-page h1 {
    font-size: 96px;
    color: #4158D0;
    margin: 0;
    line-height: 1;
    background: linear-gradient(90deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-page h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #333;
}

.error-page p {
    color: #666;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
}

.error-actions {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.error-actions a {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.error-actions a i {
    margin-right: 8px;
}

.error-actions .btn-primary {
    background: linear-gradient(90deg, #4158D0 0%, #C850C0 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(65, 88, 208, 0.3);
}

.error-actions .btn-primary:hover {
    box-shadow: 0 6px 15px rgba(65, 88, 208, 0.4);
    transform: translateY(-2px);
    text-decoration: none;
    color: #fff;
}

.error-actions .btn-secondary {
    background-color: #f5f5f5;
    color: #444;
    border: 1px solid #ddd;
}

.error-actions .btn-secondary:hover {
    background-color: #eee;
    text-decoration: none;
    color: #444;
}

.error-suggestions {
    text-align: left;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.error-suggestions h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #444;
}

.error-suggestions ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.error-suggestions li {
    color: #666;
    margin-bottom: 10px;
}

.error-suggestions a {
    color: #4158D0;
    text-decoration: none;
    font-weight: 600;
}

.error-suggestions a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .error-page {
        padding: 40px 0;
    }

    .error-content {
        padding: 30px;
    }

    .error-page h1 {
        font-size: 72px;
    }

    .error-page h2 {
        font-size: 24px;
    }
}