/* =========================================================
   ISLAMIC QALAM
   ARABIC TASHKEEL TOOL
   ========================================================= */


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

.tashkeel-page {
    width: 100%;

    flex: 1;

    margin-top: 0;

    padding:
        82px
        0
        5rem;

    overflow: hidden;

    background:
        var(--home-bg);

    text-align: left;
}


.tashkeel-page section {
    margin-top: 0;
}


.tashkeel-page-inner {
    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin-inline:
        auto;
}



/* =========================================================
   COMPACT PAGE HEADING
   ========================================================= */

.tashkeel-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 2rem;

    padding:
        2.25rem
        0
        1.35rem;
}


.tashkeel-heading-copy {
    min-width: 0;
}


.tashkeel-kicker {
    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    margin:
        0
        0
        0.35rem;

    color:
        var(--home-brown-dark);

    font-size:
        0.73rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.tashkeel-kicker i {
    color:
        #b58232;
}


.tashkeel-heading h1 {
    margin: 0;

    color:
        var(--home-green);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        600;

    line-height:
        1.05;

    letter-spacing:
        -0.025em;
}


.tashkeel-heading-description {
    max-width:
        660px;

    margin-top:
        0.55rem;

    color:
        var(--home-muted);

    font-size:
        0.95rem;

    line-height:
        1.6;
}



/* =========================================================
   ACCOUNT STATE
   ========================================================= */

.tool-account-state {
    display: inline-flex;

    flex-shrink: 0;

    align-items: center;

    gap: 0.48rem;

    min-height:
        37px;

    padding:
        0.5rem
        0.8rem;

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

    border-radius:
        999px;

    color:
        var(--home-muted);

    background:
        rgba(
            255,
            255,
            255,
            0.45
        );

    font-size:
        0.75rem;

    font-weight:
        700;
}


.tool-account-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #a0a69e;
}


.tool-account-state.is-ready {
    color:
        var(--home-green);
}


.tool-account-state.is-ready
.tool-account-dot {
    background:
        #34865c;
}


.tool-account-state.is-premium {
    border-color:
        rgba(
            183,
            132,
            49,
            0.25
        );

    color:
        #71501e;

    background:
        rgba(
            223,
            183,
            101,
            0.12
        );
}


.tool-account-state.is-premium
.tool-account-dot {
    background:
        #c18d34;
}


.tool-account-state.is-error {
    color:
        #8c3535;
}


.tool-account-state.is-error
.tool-account-dot {
    background:
        #b52121;
}



/* =========================================================
   ACCESS NOTICE
   ========================================================= */

.tashkeel-access-notice {
    display: grid;

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

    gap:
        1rem;

    align-items: center;

    margin-bottom:
        1rem;

    padding:
        1rem
        1.1rem;

    border:
        1px solid
        rgba(
            183,
            132,
            49,
            0.25
        );

    border-radius:
        14px;

    background:
        rgba(
            223,
            183,
            101,
            0.1
        );
}


.tashkeel-access-notice[hidden] {
    display: none;
}


.tashkeel-access-icon {
    display: grid;

    width:
        42px;

    height:
        42px;

    place-items: center;

    border-radius:
        11px;

    color:
        var(--home-brown-dark);

    background:
        rgba(
            140,
            98,
            57,
            0.1
        );
}


.tashkeel-access-copy strong {
    display: block;

    color:
        var(--home-green);

    font-size:
        0.92rem;
}


.tashkeel-access-copy p {
    margin-top:
        0.2rem;

    color:
        var(--home-muted);

    font-size:
        0.8rem;

    line-height:
        1.45;
}


.tashkeel-access-link {
    display: inline-flex;

    min-height:
        38px;

    align-items: center;

    justify-content: center;

    padding:
        0
        0.95rem;

    border-radius:
        8px;

    color:
        #ffffff;

    background:
        var(--home-green);

    font-size:
        0.76rem;

    font-weight:
        800;

    white-space:
        nowrap;
}


.tashkeel-access-link:hover {
    color:
        #ffffff;

    background:
        var(--home-green-light);
}



/* =========================================================
   TOOL CONTAINER
   ========================================================= */

.tashkeel-tool {
    padding:
        1rem;

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

    border-radius:
        var(--home-radius);

    background:
        var(--home-surface);

    box-shadow:
        var(--home-shadow);
}



/* =========================================================
   EDITORS
   ========================================================= */

.tashkeel-editors {
    display: grid;

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

    gap:
        1rem;
}


.tashkeel-editor {
    display: flex;

    min-width: 0;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(
            13,
            59,
            38,
            0.14
        );

    border-radius:
        16px;

    background:
        #ffffff;

    transition:
        border-color
        0.2s ease,
        box-shadow
        0.2s ease;
}


.tashkeel-editor:focus-within {
    border-color:
        rgba(
            140,
            98,
            57,
            0.5
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            140,
            98,
            57,
            0.07
        );
}


.tashkeel-result-editor {
    background:
        #fffdf9;
}



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

.tashkeel-editor-header {
    display: flex;

    min-height:
        62px;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding:
        0.75rem
        0.9rem;

    border-bottom:
        1px solid
        rgba(
            13,
            59,
            38,
            0.09
        );

    background:
        rgba(
            242,
            234,
            220,
            0.42
        );
}


.tashkeel-editor-heading {
    display: flex;

    min-width: 0;

    align-items: center;

    gap:
        0.65rem;
}


.tashkeel-editor-icon {
    display: grid;

    width:
        35px;

    height:
        35px;

    flex-shrink: 0;

    place-items: center;

    border-radius:
        9px;

    color:
        var(--home-brown-dark);

    background:
        rgba(
            140,
            98,
            57,
            0.09
        );
}


.tashkeel-editor-heading strong {
    display: block;

    color:
        var(--home-green);

    font-size:
        0.86rem;
}


.tashkeel-editor-heading div > span {
    display: block;

    margin-top:
        0.08rem;

    overflow: hidden;

    color:
        var(--home-muted);

    font-size:
        0.7rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.tashkeel-counter {
    flex-shrink: 0;

    color:
        var(--home-muted);

    font-size:
        0.7rem;

    font-weight:
        600;
}



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

.tashkeel-textarea {
    display: block;

    width:
        100%;

    min-height:
        410px;

    padding:
        1.35rem;

    resize:
        vertical;

    border:
        0;

    outline:
        0;

    color:
        var(--home-text);

    background:
        #ffffff;

    font-family:
        "Uthman",
        "Amiri",
        serif;

    font-size:
        28px;

    font-weight:
        400;

    line-height:
        2;

    direction:
        rtl;

    text-align:
        right;
}


.tashkeel-output {
    background:
        #fffdf9;
}


.tashkeel-textarea::placeholder {
    color:
        rgba(
            104,
            112,
            103,
            0.5
        );
}


.tashkeel-textarea:disabled {
    cursor:
        not-allowed;

    opacity:
        0.7;
}



/* =========================================================
   EDITOR FOOTER
   ========================================================= */

.tashkeel-editor-footer {
    display: flex;

    min-height:
        51px;

    align-items: center;

    justify-content: space-between;

    gap:
        0.7rem;

    padding:
        0.6rem
        0.7rem;

    border-top:
        1px solid
        rgba(
            13,
            59,
            38,
            0.09
        );

    background:
        rgba(
            250,
            244,
            232,
            0.48
        );
}



/* =========================================================
   SECONDARY BUTTONS
   ========================================================= */

.tashkeel-secondary-button {
    display: inline-flex;

    min-height:
        35px;

    align-items: center;

    justify-content: center;

    gap:
        0.4rem;

    padding:
        0
        0.8rem;

    border:
        1px solid
        rgba(
            13,
            59,
            38,
            0.14
        );

    border-radius:
        8px;

    color:
        var(--home-green);

    background:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.73rem;

    font-weight:
        700;

    cursor:
        pointer;

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


.tashkeel-secondary-button:hover:not(:disabled) {
    border-color:
        rgba(
            140,
            98,
            57,
            0.38
        );

    background:
        var(--home-surface-soft);

    transform:
        translateY(-1px);
}


.tashkeel-secondary-button:disabled {
    opacity:
        0.42;

    cursor:
        not-allowed;
}



/* =========================================================
   ACTION ROW
   ========================================================= */

.tashkeel-action-row {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    gap:
        1rem;

    align-items: center;

    margin-top:
        1rem;
}


.tashkeel-primary-button {
    display: inline-flex;

    min-width:
        220px;

    min-height:
        50px;

    align-items: center;

    justify-content: center;

    gap:
        0.62rem;

    padding:
        0
        1.5rem;

    border:
        1px solid
        var(--home-green);

    border-radius:
        11px;

    color:
        #ffffff;

    background:
        var(--home-green);

    font-family:
        inherit;

    font-size:
        0.88rem;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0
        8px
        20px
        rgba(
            13,
            59,
            38,
            0.13
        );

    transition:
        background-color
        0.2s ease,
        box-shadow
        0.2s ease,
        transform
        0.2s ease;
}


.tashkeel-primary-button:hover:not(:disabled) {
    background:
        var(--home-green-light);

    box-shadow:
        0
        12px
        26px
        rgba(
            13,
            59,
            38,
            0.19
        );

    transform:
        translateY(-2px);
}


.tashkeel-primary-button:disabled {
    opacity:
        0.48;

    cursor:
        not-allowed;

    box-shadow:
        none;

    transform:
        none;
}



/* =========================================================
   STATUS
   ========================================================= */

.tashkeel-status {
    display: inline-flex;

    justify-self:
        start;

    align-items: center;

    gap:
        0.45rem;

    color:
        var(--home-muted);

    font-size:
        0.75rem;

    font-weight:
        700;
}


.tashkeel-status-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #9ba09a;
}


.tashkeel-status.is-processing
.tashkeel-status-dot {
    background:
        #bf8730;
}


.tashkeel-status.is-success {
    color:
        var(--home-green);
}


.tashkeel-status.is-success
.tashkeel-status-dot {
    background:
        #3a8b61;
}


.tashkeel-status.is-error {
    color:
        #953b3b;
}


.tashkeel-status.is-error
.tashkeel-status-dot {
    background:
        #b52121;
}


.tashkeel-shortcut {
    justify-self:
        end;

    color:
        var(--home-muted);

    font-size:
        0.68rem;

    font-weight:
        600;
}



/* =========================================================
   BUTTON SPINNER
   ========================================================= */

.tashkeel-button-spinner {
    width:
        16px;

    height:
        16px;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.38
        );

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        tashkeel-spin
        0.8s
        linear
        infinite;
}


.tashkeel-button-spinner[hidden] {
    display: none;
}


@keyframes tashkeel-spin {

    to {
        transform:
            rotate(360deg);
    }

}



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

.tashkeel-message {
    margin-top:
        0.9rem;

    padding:
        0.8rem
        0.95rem;

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

    border-radius:
        9px;

    color:
        var(--home-muted);

    background:
        var(--home-surface-soft);

    font-size:
        0.8rem;

    line-height:
        1.5;

    text-align:
        center;
}


.tashkeel-message[hidden] {
    display: none;
}


.tashkeel-message.is-error {
    border-color:
        rgba(
            181,
            33,
            33,
            0.18
        );

    color:
        #8d3030;

    background:
        rgba(
            181,
            33,
            33,
            0.055
        );
}


.tashkeel-message.is-success {
    border-color:
        rgba(
            13,
            59,
            38,
            0.15
        );

    color:
        var(--home-green);

    background:
        rgba(
            13,
            59,
            38,
            0.045
        );
}



/* =========================================================
   TOOL NOTES
   ========================================================= */

.tashkeel-notes {
    display: grid;

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

    gap:
        0.8rem;

    padding-top:
        1rem;
}


.tashkeel-note {
    display: flex;

    align-items: flex-start;

    gap:
        0.65rem;

    padding:
        0.8rem;

    color:
        var(--home-muted);

    font-size:
        0.73rem;

    line-height:
        1.45;
}


.tashkeel-note > i {
    margin-top:
        0.13rem;

    color:
        var(--home-brown);
}


.tashkeel-note strong {
    display: block;

    margin-bottom:
        0.12rem;

    color:
        var(--home-green);

    font-size:
        0.75rem;
}


.tashkeel-note p {
    margin: 0;
}



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

@media only screen and (max-width: 900px) {

    .tashkeel-editors {
        grid-template-columns:
            1fr;
    }


    .tashkeel-textarea {
        min-height:
            330px;
    }


    .tashkeel-notes {
        grid-template-columns:
            1fr;
    }

}



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

@media only screen and (max-width: 768px) {

    .tashkeel-page {
        padding-top:
            72px;
    }


    .tashkeel-page-inner {
        width:
            min(
                100% - 24px,
                1180px
            );
    }


    .tashkeel-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.8rem;

        padding:
            1.6rem
            0
            1rem;
    }


    .tashkeel-heading h1 {
        font-size:
            2rem;
    }


    .tashkeel-tool {
        padding:
            0.7rem;

        border-radius:
            15px;
    }


    .tashkeel-editor {
        border-radius:
            12px;
    }


    .tashkeel-editor-heading
    div > span {
        display: none;
    }


    .tashkeel-textarea {
        min-height:
            290px;

        padding:
            1rem;

        font-size:
            25px;
    }


    .tashkeel-action-row {
        grid-template-columns:
            1fr;
    }


    .tashkeel-status,
    .tashkeel-shortcut {
        justify-self:
            center;
    }


    .tashkeel-primary-button {
        width:
            100%;

        grid-row:
            1;
    }


    .tashkeel-access-notice {
        grid-template-columns:
            auto
            1fr;
    }


    .tashkeel-access-link {
        grid-column:
            1 / -1;

        width:
            100%;
    }

}



/* =========================================================
   SMALL PHONES
   ========================================================= */

@media only screen and (max-width: 480px) {

    .tashkeel-editor-header {
        gap:
            0.5rem;

        padding:
            0.65rem
            0.7rem;
    }


    .tashkeel-editor-icon {
        width:
            31px;

        height:
            31px;
    }


    .tashkeel-counter {
        font-size:
            0.64rem;
    }


    .tashkeel-editor-footer {
        padding:
            0.55rem;
    }


    .tashkeel-secondary-button {
        padding:
            0
            0.65rem;
    }

}