/* =========================================================
   ALAQ
   KUWAITI ABAYA SIZE GUIDE
========================================================= */


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

.size-guide-page {
    width: 100%;

    background:
        var(--alaq-white);
}


/* =========================================================
   HERO
========================================================= */

.size-guide-hero {
    padding:
        95px
        32px
        80px;

    background:
        linear-gradient(
            145deg,
            #063f3c,
            #032d2b
        );

    color:
        var(--alaq-white);
}


.size-guide-hero-inner {
    width: 100%;

    max-width: 1400px;

    margin:
        0
        auto;
}


.size-guide-eyebrow {
    display: block;

    margin-bottom: 14px;

    color:
        rgba(
            244,
            240,
            231,
            0.65
        );

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.size-guide-hero h1 {
    max-width: 850px;

    margin:
        0
        0
        20px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -2.5px;
}


.size-guide-hero p {
    max-width: 720px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   CONTENT
========================================================= */

.size-guide-content {
    width: 100%;

    max-width: 1200px;

    margin:
        0
        auto;

    padding:
        75px
        32px
        110px;
}


/* =========================================================
   INTRO
========================================================= */

.size-guide-intro-grid {
    margin-bottom: 55px;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        170px;

    gap: 50px;

    align-items: center;
}


.size-guide-intro-main {
    max-width: 700px;
}


.size-guide-small-label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--alaq-green-soft);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.size-guide-intro-main h2 {
    margin:
        0
        0
        15px;

    color:
        var(--alaq-deep);

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    font-weight: 500;

    letter-spacing: -1.4px;
}


.size-guide-intro-main p {
    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 11px;

    line-height: 1.95;
}


.size-guide-monogram {
    width: 150px;

    height: 150px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--alaq-ivory);

    color:
        rgba(
            11,
            74,
            71,
            0.14
        );

    font-family:
        Georgia,
        serif;

    font-size: 86px;
}


/* =========================================================
   GUIDE CARD
========================================================= */

.size-guide-card {
    margin-bottom: 28px;

    overflow: hidden;

    border:
        1px solid
        var(--alaq-border);

    background:
        linear-gradient(
            145deg,
            rgba(
                244,
                240,
                231,
                0.68
            ),
            rgba(
                255,
                253,
                248,
                1
            )
        );
}


.size-guide-card-header {
    min-height: 115px;

    padding:
        25px
        28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border-bottom:
        1px solid
        var(--alaq-border);
}


.size-guide-card-header h2 {
    margin: 0;

    color:
        var(--alaq-deep);

    font-size: 24px;

    font-weight: 500;

    letter-spacing: -0.7px;
}


.size-guide-card-mark {
    color:
        rgba(
            11,
            74,
            71,
            0.38
        );

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================================
   TABLE
========================================================= */

.size-guide-table-wrapper {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling:
        touch;
}


.full-size-guide-table {
    width: 100%;

    min-width: 620px;

    border-collapse: collapse;

    table-layout: fixed;
}


.full-size-guide-table th {
    height: 58px;

    padding:
        0
        20px;

    background:
        rgba(
            11,
            74,
            71,
            0.045
        );

    border-bottom:
        1px solid
        var(--alaq-border);

    color:
        var(--alaq-muted);

    font-size: 9px;

    font-weight: 700;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


.full-size-guide-table td {
    height: 95px;

    padding:
        15px
        20px;

    border-bottom:
        1px solid
        var(--alaq-border);

    color:
        var(--alaq-deep);

    font-size: 13px;

    font-weight: 500;

    text-align: center;
}


.full-size-guide-table
tbody
tr:last-child
td {
    border-bottom: 0;
}


/* =========================================================
   SIZE CIRCLE
========================================================= */

.guide-size-circle {
    width: 54px;

    height: 54px;

    margin:
        0
        auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #021d1b !important;

    color:
        var(--alaq-white);

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   IMPORTANT NOTE
========================================================= */

.size-guide-important {
    margin-bottom: 65px;

    padding:
        23px
        25px;

    display: grid;

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

    gap: 17px;

    align-items: flex-start;

    background:
        #0a4944 !important;

    color:
        var(--alaq-white);
}


.size-guide-important-icon {
    width: 38px;

    height: 38px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.30
        );

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;

    font-weight: 600;
}


.size-guide-important strong {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 600;
}


.size-guide-important p {
    max-width: 850px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size: 10px;

    line-height: 1.9;
}


/* =========================================================
   STEPS
========================================================= */

.size-guide-steps {
    margin-bottom: 70px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    border:
        1px solid
        var(--alaq-border);
}


.size-guide-step {
    min-height: 210px;

    padding:
        27px;

    border-inline-end:
        1px solid
        var(--alaq-border);
}


.size-guide-step:last-child {
    border-inline-end: 0;
}


.size-guide-step > span {
    display: block;

    margin-bottom: 40px;

    color:
        var(--alaq-green-soft);

    font-size: 9px;

    font-weight: 700;
}


.size-guide-step h3 {
    margin:
        0
        0
        8px;

    color:
        var(--alaq-deep);

    font-size: 17px;

    font-weight: 500;
}


.size-guide-step p {
    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 9px;

    line-height: 1.75;
}


/* =========================================================
   CONTACT
========================================================= */

.size-guide-contact {
    padding:
        55px;

    background:
        linear-gradient(
            145deg,
            #f2ece2,
            #faf7f2
        );

    text-align: center;
}


.size-guide-contact h2 {
    margin:
        0
        0
        12px;

    color:
        var(--alaq-deep);

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    font-weight: 500;

    letter-spacing: -1.2px;
}


.size-guide-contact p {
    max-width: 620px;

    margin:
        0
        auto
        25px;

    color:
        var(--alaq-muted);

    font-size: 10px;

    line-height: 1.9;
}


.size-guide-contact-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;
}


.size-guide-primary-button,
.size-guide-secondary-button {
    min-width: 180px;

    min-height: 50px;

    padding:
        0
        22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 700;
}


.size-guide-primary-button {
    background:
       #0a4944 !important;

    color:
        var(--alaq-white);
}


.size-guide-secondary-button {
    border:
        1px solid
        var(--alaq-green);

    color:
        var(--alaq-green);
}


/* =========================================================
   ARABIC
========================================================= */

html[dir="rtl"]
.size-guide-page,
html[dir="rtl"]
.size-guide-page * {
    font-family:
        "Cairo",
        Arial,
        sans-serif;
}


html[dir="rtl"]
.size-guide-hero h1,
html[dir="rtl"]
.size-guide-intro-main h2,
html[dir="rtl"]
.size-guide-card-header h2,
html[dir="rtl"]
.size-guide-contact h2 {
    letter-spacing: 0;
}


html[dir="rtl"]
.size-guide-eyebrow,
html[dir="rtl"]
.size-guide-small-label,
html[dir="rtl"]
.size-guide-card-mark {
    letter-spacing: 0;
}


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

@media (
    max-width: 850px
) {

    .size-guide-hero {
        padding:
            75px
            24px
            65px;
    }


    .size-guide-content {
        padding:
            60px
            24px
            90px;
    }


    .size-guide-intro-grid {
        grid-template-columns:
            1fr;
    }


    .size-guide-monogram {
        display: none;
    }


    .size-guide-steps {
        grid-template-columns:
            1fr;
    }


    .size-guide-step {
        min-height: auto;

        border-inline-end: 0;

        border-bottom:
            1px solid
            var(--alaq-border);
    }


    .size-guide-step:last-child {
        border-bottom: 0;
    }


    .size-guide-step > span {
        margin-bottom: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 600px
) {

    .size-guide-hero {
        padding:
            60px
            17px
            50px;
    }


    .size-guide-hero h1 {
        font-size:
            clamp(
                36px,
                10vw,
                47px
            );

        letter-spacing: -1.5px;
    }


    .size-guide-hero p {
        font-size: 10px;
    }


    .size-guide-content {
        padding:
            45px
            17px
            75px;
    }


    .size-guide-intro-grid {
        margin-bottom: 38px;
    }


    .size-guide-intro-main h2 {
        font-size: 27px;
    }


    .size-guide-card-header {
        min-height: auto;

        padding:
            20px;

        align-items: flex-start;

        flex-direction: column;
    }


    .size-guide-card-header h2 {
        font-size: 20px;
    }


    .full-size-guide-table {
        min-width: 520px;
    }


    .full-size-guide-table th {
        height: 52px;

        padding:
            0
            10px;

        font-size: 8px;
    }


    .full-size-guide-table td {
        height: 82px;

        padding:
            12px
            10px;

        font-size: 11px;
    }


    .guide-size-circle {
        width: 48px;

        height: 48px;
    }


    .size-guide-important {
        margin-bottom: 45px;

        padding:
            19px;

        grid-template-columns:
            34px
            1fr;

        gap: 12px;
    }


    .size-guide-important-icon {
        width: 32px;

        height: 32px;
    }


    .size-guide-contact {
        padding:
            42px
            18px;
    }


    .size-guide-contact-actions {
        flex-direction: column;
    }


    .size-guide-primary-button,
    .size-guide-secondary-button {
        width: 100%;
    }

}

/* =========================================================
   ALAQ SIZE GUIDE
   SIMPLE + CLEAN
========================================================= */


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

.size-guide-page {
    width: 100%;

    background: #fffdf8;
}


/* =========================================================
   HERO
========================================================= */

.size-guide-hero {
    padding:
        58px
        20px
        45px;

    background:
       #0a4944 !important;

    color: #ffffff;
}


.size-guide-hero-inner {
    width: 100%;

    max-width: 900px;

    margin:
        0
        auto;
}


.size-guide-eyebrow {
    display: block;

    margin-bottom: 8px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.size-guide-hero h1 {
    margin:
        0
        0
        10px;

    color: #ffffff;

    font-size:
        clamp(
            34px,
            5vw,
            50px
        );

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -1.4px;
}


.size-guide-hero p {
    max-width: 560px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 10px;

    line-height: 1.7;
}


/* =========================================================
   CONTENT
========================================================= */

.size-guide-content {
    width: 100%;

    max-width: 850px;

    margin:
        0
        auto;

    padding:
        45px
        20px
        70px;
}


/* =========================================================
   HEADING
========================================================= */

.size-guide-heading {
    margin-bottom: 18px;
}


.size-guide-small-label {
    display: block;

    margin-bottom: 5px;

    color:
        var(--alaq-green-soft);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.size-guide-heading h2 {
    margin: 0;

    color:
        var(--alaq-deep);

    font-size: 26px;

    font-weight: 500;

    letter-spacing: -0.6px;
}


/* =========================================================
   TABLE
========================================================= */

.size-guide-table-card {
    width: 100%;

    margin-bottom: 18px;

    border:
        1px solid
        var(--alaq-border);

    background: #ffffff;
}


.size-guide-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}


.size-guide-table th,
.size-guide-table td {
    padding:
        13px
        10px;

    text-align: center;

    border-bottom:
        1px solid
        var(--alaq-border);
}


.size-guide-table th {
    background:
        #f5f2eb;

    color:
        var(--alaq-muted);

    font-size: 9px;

    font-weight: 700;
}


.size-guide-table td {
    color:
        var(--alaq-deep);

    font-size: 12px;

    font-weight: 500;
}


.size-guide-table
tbody
tr:last-child
td {
    border-bottom: 0;
}


/* =========================================================
   SIZE NUMBER
========================================================= */

.size-number {
    display: inline;

    width: auto;

    height: auto;

    margin: 0;

    border-radius: 0;

    background: transparent;

    color:
        var(--alaq-green);

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   HIDE OLD MOBILE CARDS
========================================================= */

.mobile-size-cards {
    display: none !important;
}


/* =========================================================
   NOTE
========================================================= */

.size-guide-note {
    margin-top: 0;

    padding:
        14px
        16px;

    display: flex;

    gap: 10px;

    align-items: flex-start;

    border:
        1px solid
        rgba(
            7,
            63,
            59,
            0.16
        );

    background:
        #f7f4ee;

    color:
        var(--alaq-deep);
}


.size-guide-note-icon {
    flex-shrink: 0;

    color:
        var(--alaq-green);

    font-size: 12px;

    font-weight: 700;
}


.size-guide-note strong {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;

    font-weight: 600;
}


.size-guide-note p {
    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 9px;

    line-height: 1.6;
}


/* =========================================================
   ACTIONS
========================================================= */

.size-guide-actions {
    margin-top: 20px;

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.size-guide-primary-button,
.size-guide-secondary-button {
    min-height: 46px;

    padding:
        0
        18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 700;
}


.size-guide-primary-button {
    border:
        1px solid
        var(--alaq-green);

    background:
        #021d1b !important;

    color: #ffffff;
}


.size-guide-secondary-button {
    border:
        1px solid
        var(--alaq-green);

    background:
        transparent;

    color:
        var(--alaq-green);
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"]
.size-guide-page,
html[dir="rtl"]
.size-guide-page * {
    font-family:
        "Cairo",
        Arial,
        sans-serif;
}


html[dir="rtl"]
.size-guide-hero h1,
html[dir="rtl"]
.size-guide-heading h2 {
    letter-spacing: 0;
}


html[dir="rtl"]
.size-guide-eyebrow,
html[dir="rtl"]
.size-guide-small-label {
    letter-spacing: 0;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 600px
) {

    .size-guide-hero {
        padding:
            42px
            14px
            34px;
    }


    .size-guide-hero h1 {
        font-size: 31px;
    }


    .size-guide-hero p {
        font-size: 9px;
    }


    .size-guide-content {
        padding:
            32px
            12px
            55px;
    }


    .size-guide-heading {
        margin-bottom: 14px;
    }


    .size-guide-heading h2 {
        font-size: 22px;
    }


    /*
     * Keep the SAME table on mobile.
     * No scrolling.
     */

    .size-guide-table-card {
        overflow: visible;
    }


    .size-guide-table {
        width: 100%;

        min-width: 0;

        table-layout: fixed;
    }


    .size-guide-table th,
    .size-guide-table td {
        padding:
            10px
            4px;

        white-space: normal;
    }


    .size-guide-table th {
        font-size: 8px;
    }


    .size-guide-table td {
        font-size: 10px;
    }


    .size-number {
        font-size: 11px;
    }


    .size-guide-note {
        padding:
            12px;

        gap: 8px;
    }


    .size-guide-note strong {
        font-size: 9px;
    }


    .size-guide-note p {
        font-size: 8px;
    }


    .size-guide-actions {
        flex-direction: column;
    }


    .size-guide-primary-button,
    .size-guide-secondary-button {
        width: 100%;
    }

}

/* =========================================================
   FINAL SIZE GUIDE TABLE FIX
   FIT SCREEN + NO MOBILE SCROLL
========================================================= */


/* =========================================================
   TABLE CONTAINER
========================================================= */

.size-guide-table-card,
.size-guide-table-wrapper {
    width: 100% !important;

    max-width: 100% !important;

    overflow: hidden !important;

    border:
        1px solid
        #d9dfdc !important;

    background:
        #ffffff !important;
}


/* =========================================================
   TABLE
========================================================= */

.size-guide-table,
.full-size-guide-table {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    border-collapse: collapse !important;

    table-layout: fixed !important;

    background: #ffffff !important;
}


/* =========================================================
   COLUMNS
========================================================= */

/*
 * Size column slightly smaller.
 * Height + weight get more room.
 */

.size-guide-table th:first-child,
.size-guide-table td:first-child,
.full-size-guide-table th:first-child,
.full-size-guide-table td:first-child {
    width: 20% !important;
}


.size-guide-table th:nth-child(2),
.size-guide-table td:nth-child(2),
.full-size-guide-table th:nth-child(2),
.full-size-guide-table td:nth-child(2) {
    width: 40% !important;
}


.size-guide-table th:nth-child(3),
.size-guide-table td:nth-child(3),
.full-size-guide-table th:nth-child(3),
.full-size-guide-table td:nth-child(3) {
    width: 40% !important;
}


/* =========================================================
   HEADER
========================================================= */

.size-guide-table th,
.full-size-guide-table th {
    height: auto !important;

    padding:
        14px
        8px !important;

    background:
        #f3f1ea !important;

    border-bottom:
        1px solid
        #d9dfdc !important;

    color:
        #5f716d !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1.35 !important;

    text-align:
        center !important;

    text-transform:
        none !important;

    letter-spacing:
        0.2px !important;

    white-space:
        normal !important;

    overflow-wrap:
        break-word !important;
}


/* =========================================================
   CELLS
========================================================= */

.size-guide-table td,
.full-size-guide-table td {
    height: auto !important;

    padding:
        16px
        8px !important;

    border-bottom:
        1px solid
        #e2e6e3 !important;

    color:
        #073f3b !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.4 !important;

    text-align:
        center !important;

    white-space:
        normal !important;

    overflow-wrap:
        anywhere !important;
}


/* =========================================================
   ALTERNATING ROWS
   easier on the eyes
========================================================= */

.size-guide-table tbody tr:nth-child(even),
.full-size-guide-table tbody tr:nth-child(even) {
    background:
        #faf9f5 !important;
}


.size-guide-table tbody tr:nth-child(odd),
.full-size-guide-table tbody tr:nth-child(odd) {
    background:
        #ffffff !important;
}


.size-guide-table tbody tr:last-child td,
.full-size-guide-table tbody tr:last-child td {
    border-bottom:
        0 !important;
}


/* =========================================================
   SIZE NUMBER
========================================================= */

.size-number,
.guide-size-circle {
    width: auto !important;

    height: auto !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    display: inline !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    color:
        #07524d !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}


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

@media (max-width: 800px) {

    .size-guide-content {
        width: 100% !important;

        max-width: 100% !important;

        padding:
            38px
            16px
            60px !important;
    }


    .size-guide-table th,
    .full-size-guide-table th {
        padding:
            12px
            6px !important;

        font-size:
            9px !important;
    }


    .size-guide-table td,
    .full-size-guide-table td {
        padding:
            14px
            6px !important;

        font-size:
            12px !important;
    }


    .size-number,
    .guide-size-circle {
        font-size:
            14px !important;
    }

}


/* =========================================================
   MOBILE / IPHONE
========================================================= */

@media (max-width: 600px) {

    /*
     * Give table maximum available width.
     */

    .size-guide-content {
        width: 100% !important;

        max-width: 100% !important;

        padding:
            32px
            10px
            55px !important;
    }


    .size-guide-table-card,
    .size-guide-table-wrapper {
        width: 100% !important;

        max-width: 100% !important;

        margin:
            0
            auto
            16px !important;

        overflow:
            hidden !important;
    }


    .size-guide-table,
    .full-size-guide-table {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        table-layout:
            fixed !important;
    }


    /*
     * Smaller font,
     * but still readable.
     */

    .size-guide-table th,
    .full-size-guide-table th {
        height:
            auto !important;

        padding:
            10px
            3px !important;

        font-size:
            8px !important;

        font-weight:
            700 !important;

        line-height:
            1.25 !important;
    }


    .size-guide-table td,
    .full-size-guide-table td {
        height:
            auto !important;

        padding:
            13px
            3px !important;

        font-size:
            10px !important;

        font-weight:
            500 !important;

        line-height:
            1.3 !important;
    }


    .size-number,
    .guide-size-circle {
        font-size:
            12px !important;
    }

}


/* =========================================================
   SMALL IPHONE
========================================================= */

@media (max-width: 390px) {

    .size-guide-content {
        padding-left:
            7px !important;

        padding-right:
            7px !important;
    }


    .size-guide-table th,
    .full-size-guide-table th {
        padding:
            9px
            2px !important;

        font-size:
            7.5px !important;

        letter-spacing:
            0 !important;
    }


    .size-guide-table td,
    .full-size-guide-table td {
        padding:
            12px
            2px !important;

        font-size:
            9px !important;
    }


    .size-number,
    .guide-size-circle {
        font-size:
            11px !important;
    }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 340px) {

    .size-guide-table th,
    .full-size-guide-table th {
        font-size:
            7px !important;
    }


    .size-guide-table td,
    .full-size-guide-table td {
        font-size:
            8.5px !important;
    }

}


/* =========================================================
   ARABIC TABLE
========================================================= */

html[dir="rtl"]
.size-guide-table,

html[dir="rtl"]
.full-size-guide-table {
    direction: rtl;
}


html[dir="rtl"]
.size-guide-table th,

html[dir="rtl"]
.size-guide-table td,

html[dir="rtl"]
.full-size-guide-table th,

html[dir="rtl"]
.full-size-guide-table td {
    font-family:
        "Cairo",
        Arial,
        sans-serif !important;

    letter-spacing:
        0 !important;
}