/* =========================================================
   AL-QANTAARA — RESULT PAGE
   CLEAN FINAL CSS — PART 1 OF 3
   ========================================================= */

:root {
    --alq-blue: #315bea;
    --alq-dark: #142a5c;
    --alq-text: #374151;
    --alq-muted: #6b7280;
    --alq-bg: #f1f2ff;
    --alq-card: #ffffff;
    --alq-border: #e5e7eb;
    --alq-green: #16a34a;
    --alq-red: #dc2626;
}

/* =========================================================
   PAGE
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--alq-bg);
}

#score-message,
#strengths-list,
#weakness-list,
#recommendation-text,
#summary-text,
#recommended-videos {
    box-sizing: border-box;
}

/* =========================================================
   SCORE
   ========================================================= */

#overall-score-bar {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(30, 50, 90, 0.08);
}

#overall-score-bar .elementor-progress-wrapper {
    height: 22px;
    background: #e5e7eb;
    border-radius: 0;
    overflow: hidden;
}

#overall-score-bar .elementor-progress-bar {
    height: 22px;
    min-width: 0;
    background: #4169e1 !important;
    border-radius: 0 !important;
    transition: width 0.5s ease;
}

#overall-score-bar .elementor-progress-percentage {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    padding-right: 10px;
}

/* =========================================================
   SCORE MESSAGE
   ========================================================= */

#score-message {
    text-align: center;
    color: var(--alq-muted);
    font-size: 15px;
    line-height: 1.6;
}

#score-message p {
    margin: 8px 0;
}

#score-message strong {
    color: var(--alq-dark);
    font-weight: 700;
}

/* =========================================================
   STRENGTHS / WEAKNESSES
   ========================================================= */

#strengths-list,
#weakness-list {
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(30, 50, 90, 0.08);
}

#strengths-list .elementor-icon-list-items,
#weakness-list .elementor-icon-list-items {
    margin: 0;
    padding: 0;
}

#strengths-list .elementor-icon-list-item,
#weakness-list .elementor-icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #e1e4ea;
    color: var(--alq-text);
    font-size: 14px;
    line-height: 1.5;
}

#strengths-list .elementor-icon-list-item:last-child,
#weakness-list .elementor-icon-list-item:last-child {
    border-bottom: none;
}

#strengths-list .elementor-icon-list-icon {
    color: var(--alq-green) !important;
    font-weight: 700;
    flex-shrink: 0;
}

#weakness-list .elementor-icon-list-icon {
    color: #c96b73 !important;
    font-weight: 700;
    flex-shrink: 0;
}

#strengths-list .elementor-icon-list-text,
#weakness-list .elementor-icon-list-text {
    color: var(--alq-text);
}

/* =========================================================
   RECOMMENDATION / SUMMARY
   ========================================================= */

#recommendation-text,
#summary-text {
    color: var(--alq-text);
    font-size: 15px;
    line-height: 1.7;
}

#recommendation-text p,
#summary-text p {
    margin-bottom: 10px;
}

/* =========================================================
   RECOMMENDED VIDEOS — MAIN BOX
   ========================================================= */

#recommended-videos {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e4e7ef;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(30, 50, 90, 0.08);
    padding: 28px;
}

/* =========================================================
   AL-QANTAARA — RECOMMENDED VIDEOS
   CLEAN FINAL CSS — PART 2 OF 3
   ========================================================= */

/* =========================================================
   VIDEO ROW
   ========================================================= */

#recommended-videos > div {
    position: relative;

    display: grid !important;

    grid-template-columns: 52px minmax(0, 1fr) 180px !important;

    align-items: center;

    column-gap: 18px;
    row-gap: 4px;

    min-height: 90px;

    padding: 18px 10px !important;
    margin: 0 !important;

    background: transparent !important;

    border: none !important;
    border-bottom: 1px solid #dfe3ea !important;

    border-radius: 0 !important;

    box-sizing: border-box;
}

#recommended-videos > div:last-child {
    border-bottom: none !important;
}

/* =========================================================
   YOUTUBE ICON
   ========================================================= */

/*
   The old CSS used ▶️ / blue play icons.
   They are completely removed here.
*/

#recommended-videos > div::before {
    content: none !important;
    display: none !important;
}


/*
   YouTube icon wrapper
*/

#recommended-videos .alq-youtube-icon {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 44px;
    height: 44px;

    display: flex !important;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    box-sizing: border-box;
}


/*
   Actual YouTube SVG
*/

#recommended-videos .alq-youtube-icon svg {
    width: 44px !important;
    height: 44px !important;

    display: block !important;

    overflow: visible;
}


/*
   YouTube red rounded rectangle
*/

#recommended-videos .alq-youtube-icon .youtube-bg {
    fill: #FF0000 !important;
}


/*
   YouTube white play triangle
*/

#recommended-videos .alq-youtube-icon .youtube-play {
    fill: #FFFFFF !important;
}


/* =========================================================
   VIDEO TITLE
   ========================================================= */

#recommended-videos h3 {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;

    margin: 0 0 5px 0 !important;

    padding: 0 !important;

    color: #111827 !important;

    font-size: 18px !important;

    font-weight: 600 !important;

    line-height: 1.35 !important;

    white-space: normal !important;

    overflow-wrap: break-word;
}


/*
   Remove any Elementor/generated pseudo-icons
*/

#recommended-videos h3::before,
#recommended-videos h3::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   CHANNEL NAME
   ========================================================= */

#recommended-videos p {
    grid-column: 2;
    grid-row: 2;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    color: #6b7280 !important;

    font-size: 13px !important;

    line-height: 1.4 !important;
}


/* =========================================================
   WATCH ON YOUTUBE BUTTON
   ========================================================= */

#recommended-videos a {
    grid-column: 3;
    grid-row: 1 / 3;

    width: 180px !important;

    min-width: 180px !important;

    max-width: 180px !important;

    height: 46px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-sizing: border-box !important;

    padding: 0 14px !important;

    background: #ffffff !important;

    color: #315bea !important;

    border: 2px solid #315bea !important;

    border-radius: 3px !important;

    text-decoration: none !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/*
   Remove Elementor arrow / icon
*/

#recommended-videos a::before,
#recommended-videos a::after {
    content: none !important;

    display: none !important;
}


/*
   Button hover
*/

#recommended-videos a:hover {
    background: #315bea !important;

    color: #ffffff !important;

    transform: translateY(-1px);
}


/* =========================================================
   ELEMENTOR SUPPORT
   ========================================================= */

.elementor-element[id="overall-score-bar"],
.elementor-element[id="strengths-list"],
.elementor-element[id="weakness-list"],
.elementor-element[id="recommended-videos"] {
    box-sizing: border-box;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    #recommended-videos {
        padding: 22px !important;
    }

    #recommended-videos > div {
        grid-template-columns: 48px minmax(0, 1fr) 175px !important;

        column-gap: 16px;

        padding: 18px 5px !important;
    }

    #recommended-videos .alq-youtube-icon {
        width: 42px;
        height: 42px;
    }

    #recommended-videos .alq-youtube-icon svg {
        width: 42px !important;
        height: 42px !important;
    }

    #recommended-videos h3 {
        font-size: 18px !important;
    }

    #recommended-videos p {
        font-size: 13px !important;
    }

    #recommended-videos a {
        width: 175px !important;

        min-width: 175px !important;

        max-width: 175px !important;
    }
}
/* =========================================================
   AL-QANTAARA — RESULT PAGE
   CLEAN FINAL CSS — PART 3 OF 3
   RESPONSIVE / MOBILE
   ========================================================= */


/* =========================================================
   MOBILE — 767px AND BELOW
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       Recommended Videos Box
       ----------------------------------------------------- */

    #recommended-videos {
        width: 100% !important;

        padding: 18px !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       Video Row
       ----------------------------------------------------- */

    #recommended-videos > div {

        display: grid !important;

        grid-template-columns: 42px minmax(0, 1fr) !important;

        grid-template-rows: auto auto auto !important;

        column-gap: 12px !important;

        row-gap: 5px !important;

        min-height: 0 !important;

        padding: 16px 5px !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       YouTube Icon
       ----------------------------------------------------- */

    #recommended-videos .alq-youtube-icon {

        grid-column: 1 !important;

        grid-row: 1 / 3 !important;

        width: 40px !important;

        height: 40px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;
    }


    #recommended-videos .alq-youtube-icon svg {

        width: 40px !important;

        height: 40px !important;

        display: block !important;
    }


    /* -----------------------------------------------------
       Video Title
       ----------------------------------------------------- */

    #recommended-videos h3 {

        grid-column: 2 !important;

        grid-row: 1 !important;

        font-size: 16px !important;

        line-height: 1.4 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* -----------------------------------------------------
       Channel
       ----------------------------------------------------- */

    #recommended-videos p {

        grid-column: 2 !important;

        grid-row: 2 !important;

        font-size: 12px !important;

        line-height: 1.4 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* -----------------------------------------------------
       Watch Button
       ----------------------------------------------------- */

    #recommended-videos a {

        grid-column: 1 / 3 !important;

        grid-row: 3 !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        height: 44px !important;

        margin-top: 10px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       Score Message
       ----------------------------------------------------- */

    #score-message {

        font-size: 14px !important;

        line-height: 1.5 !important;
    }


    /* -----------------------------------------------------
       Recommendation / Summary
       ----------------------------------------------------- */

    #recommendation-text,
    #summary-text {

        font-size: 14px !important;

        line-height: 1.6 !important;
    }


    /* -----------------------------------------------------
       Strengths / Weaknesses
       ----------------------------------------------------- */

    #strengths-list .elementor-icon-list-item,
    #weakness-list .elementor-icon-list-item {

        font-size: 13px !important;

        padding: 8px 0 !important;
    }
}


/* =========================================================
   TABLET — 768px TO 1024px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    #score-message {

        font-size: 14px !important;
    }


    #recommendation-text,
    #summary-text {

        font-size: 14px !important;
    }


    #strengths-list .elementor-icon-list-item,
    #weakness-list .elementor-icon-list-item {

        font-size: 14px !important;
    }
}


/* =========================================================
   SMALL PHONES — 480px AND BELOW
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       Recommended Videos
       ----------------------------------------------------- */

    #recommended-videos {

        padding: 15px !important;

        border-radius: 10px !important;
    }


    /* -----------------------------------------------------
       Video Row
       ----------------------------------------------------- */

    #recommended-videos > div {

        grid-template-columns: 40px minmax(0, 1fr) !important;

        column-gap: 10px !important;

        padding: 15px 0 !important;
    }


    /* -----------------------------------------------------
       YouTube Icon
       ----------------------------------------------------- */

    #recommended-videos .alq-youtube-icon {

        width: 38px !important;

        height: 38px !important;
    }


    #recommended-videos .alq-youtube-icon svg {

        width: 38px !important;

        height: 38px !important;
    }


    /* -----------------------------------------------------
       Video Title
       ----------------------------------------------------- */

    #recommended-videos h3 {

        font-size: 15px !important;

        line-height: 1.4 !important;
    }


    /* -----------------------------------------------------
       Channel
       ----------------------------------------------------- */

    #recommended-videos p {

        font-size: 12px !important;
    }


    /* -----------------------------------------------------
       Watch Button
       ----------------------------------------------------- */

    #recommended-videos a {

        height: 43px !important;

        font-size: 13px !important;
    }


    /* -----------------------------------------------------
       Score
       ----------------------------------------------------- */

    #overall-score-bar .elementor-progress-wrapper,
    #overall-score-bar .elementor-progress-bar {

        height: 20px !important;
    }


    #overall-score-bar .elementor-progress-percentage {

        font-size: 12px !important;

        line-height: 20px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES — 360px AND BELOW
   ========================================================= */

@media (max-width: 360px) {

    #recommended-videos {

        padding: 12px !important;

        border-radius: 8px !important;
    }


    #recommended-videos > div {

        grid-template-columns: 36px minmax(0, 1fr) !important;

        column-gap: 9px !important;

        padding: 14px 0 !important;
    }


    #recommended-videos .alq-youtube-icon {

        width: 34px !important;

        height: 34px !important;
    }


    #recommended-videos .alq-youtube-icon svg {

        width: 34px !important;

        height: 34px !important;
    }


    #recommended-videos h3 {

        font-size: 14px !important;

        line-height: 1.4 !important;
    }


    #recommended-videos p {

        font-size: 11px !important;
    }


    #recommended-videos a {

        height: 42px !important;

        font-size: 12px !important;
    }


    #overall-score-bar .elementor-progress-wrapper,
    #overall-score-bar .elementor-progress-bar {

        height: 19px !important;
    }


    #overall-score-bar .elementor-progress-percentage {

        font-size: 11px !important;

        line-height: 19px !important;
    }
}


/* =========================================================
   MOBILE RESULT HEADER
   ========================================================= */

@media (max-width: 767px) {

    .result-hero {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        padding: 35px 20px 25px !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 18px !important;
    }


    .result-hero h1,
    .result-hero h2,
    .result-hero .elementor-heading-title {

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 42px !important;

        line-height: 1.05 !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    .result-hero p {

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 18px !important;

        line-height: 1.5 !important;
    }


    .result-hero .download-report-btn {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        min-height: 52px !important;

        padding: 12px 18px !important;

        font-size: 16px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

        position: static !important;
    }


    .result-hero .download-report-btn
    .elementor-button-text {

        white-space: nowrap !important;
    }


    .result-hero .download-report-btn
    .elementor-button-icon {

        flex-shrink: 0 !important;
    }
}


/* =========================================================
   SMALL RESULT HEADER
   ========================================================= */

@media (max-width: 480px) {

    .result-hero {

        padding: 30px 18px 22px !important;

        gap: 16px !important;
    }


    .result-hero h1,
    .result-hero h2,
    .result-hero .elementor-heading-title {

        font-size: 38px !important;

        line-height: 1.05 !important;
    }


    .result-hero p {

        font-size: 17px !important;

        line-height: 1.45 !important;
    }


    .result-hero .download-report-btn {

        min-height: 50px !important;

        font-size: 15px !important;

        padding: 10px 15px !important;
    }
}


/* =========================================================
   VERY SMALL RESULT HEADER
   ========================================================= */

@media (max-width: 360px) {

    .result-hero {

        padding-left: 15px !important;

        padding-right: 15px !important;
    }


    .result-hero h1,
    .result-hero h2,
    .result-hero .elementor-heading-title {

        font-size: 34px !important;
    }


    .result-hero p {

        font-size: 16px !important;
    }


    .result-hero .download-report-btn {

        font-size: 14px !important;
    }
}


/* =========================================================
   MOBILE RESULT PAGE WIDTH FIX
   ========================================================= */

@media (max-width: 767px) {

    .result-page,
    .result-page > .elementor-container,
    .result-page .elementor-container {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .result-page .elementor-widget,
    .result-page .elementor-widget-container {

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .result-page .result-card,
    .result-page .score-card,
    .result-page .strength-card,
    .result-page .improvement-card {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .result-page .elementor-container {

        padding-left: 18px !important;

        padding-right: 18px !important;
    }
}


/* =========================================================
   END OF CLEAN RESULT CSS
   ========================================================= */