/* =========================================================
   JUSOOR V2 — Participate
   Responsive / Cross-browser
   ========================================================= */

.pt-page {
    padding: 22px 0 64px;
    background: #f4f7f9;
    color: #173149;
}

.pt-page,
.pt-page * {
    box-sizing: border-box;
}


/* =========================================================
   Breadcrumb
   ========================================================= */

.pt-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 14px;

    color: #81909a;

    font-size: 12px;
    line-height: 1.6;
}

.pt-breadcrumb a {
    color: #286b94;
    text-decoration: none;
}

.pt-breadcrumb a:hover {
    text-decoration: underline;
}

.pt-breadcrumb strong {
    color: #173149;
}


/* =========================================================
   Shared
   ========================================================= */

.pt-eyebrow {
    margin: 0 0 7px;

    color: #c49a3b;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}


/* =========================================================
   Hero
   ========================================================= */

.pt-hero {
    position: relative;

    overflow: hidden;

    padding: 36px;

    border-radius: 18px;
    border-bottom: 3px solid #cda94f;

    background:
        linear-gradient(
            135deg,
            #073654 0%,
            #052a43 52%,
            #031b2b 100%
        );

    color: #fff;

    box-shadow:
        0 14px 32px rgba(10,42,63,.08);
}

.pt-hero::after {
    content: "";

    position: absolute;
    top: -125px;
    left: -100px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background: rgba(255,255,255,.025);

    pointer-events: none;
}

.pt-hero > div {
    position: relative;
    z-index: 1;
}

.pt-hero h1 {
    margin: 0;

    color: #fff;

    font-size: 34px;
    font-weight: 800;
    line-height: 1.35;
}

.pt-hero p:not(.pt-eyebrow) {
    max-width: 820px;

    margin: 11px 0 0;

    color: rgba(255,255,255,.82);

    font-size: 13px;
    line-height: 2;
}


/* =========================================================
   Participation options
   ========================================================= */

.pt-options {
    display: grid;

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

    gap: 12px;

    margin-top: 16px;
}

.pt-options article {
    min-width: 0;

    padding: 20px;

    background: #fff;

    border: 1px solid #dfe7ec;
    border-radius: 13px;

    box-shadow:
        0 5px 16px rgba(15,49,72,.035);
}

.pt-option-number {
    color: #c19a42;

    font-size: 11px;
    font-weight: 800;
}

.pt-options h2 {
    margin: 9px 0 0;

    color: #173149;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
}

.pt-options p {
    margin: 7px 0 0;

    color: #71838e;

    font-size: 11px;
    line-height: 1.9;
}

.pt-option-link {
    display: inline-flex;
    align-items: center;

    margin-top: 11px;

    color: #96701d;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.6;

    text-decoration: none;
}

.pt-option-link:hover {
    text-decoration: underline;
}


/* =========================================================
   Active surveys
   ========================================================= */

.pt-surveys {
    margin-top: 38px;
}

.pt-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;
}

.pt-section-heading h2 {
    margin: 0;

    color: #173149;

    font-size: 23px;
    font-weight: 800;
    line-height: 1.5;
}

.pt-section-heading > div > p:not(.pt-eyebrow) {
    margin: 7px 0 0;

    color: #748691;

    font-size: 11px;
    line-height: 1.9;
}

.pt-surveys-count {
    flex: 0 0 auto;

    padding: 7px 10px;

    background: #fff;

    border: 1px solid #d9e1e6;
    border-radius: 8px;

    color: #6b7d88;

    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.pt-survey-grid {
    display: grid;

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

    gap: 13px;
}

.pt-survey-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 245px;

    padding: 18px;

    background: #fff;

    border: 1px solid #dfe7ec;
    border-radius: 13px;

    box-shadow:
        0 6px 18px rgba(15,49,72,.035);
}

.pt-survey-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 12px;
}

.pt-survey-status {
    display: inline-flex;
    align-items: center;

    padding: 5px 8px;

    background: rgba(47,155,99,.07);

    border: 1px solid rgba(47,155,99,.20);
    border-radius: 7px;

    color: #2f8156;

    font-size: 9px;
    font-weight: 800;
}

.pt-survey-governorate {
    color: #8a6818;

    font-size: 9px;
    font-weight: 800;
}

.pt-survey-card h3 {
    margin: 0;

    color: #173149;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

.pt-survey-description {
    display: -webkit-box;

    overflow: hidden;

    margin: 8px 0 0;

    color: #72838e;

    font-size: 10.5px;
    line-height: 1.9;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.pt-survey-meta {
    display: grid;

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

    gap: 8px;

    margin-top: auto;
    padding-top: 16px;
}

.pt-survey-meta span {
    min-width: 0;

    padding: 8px 9px;

    background: #f7f9fa;

    border: 1px solid #e8edef;
    border-radius: 8px;
}

.pt-survey-meta small {
    display: block;

    color: #8b99a2;

    font-size: 8px;
}

.pt-survey-meta strong {
    display: block;

    margin-top: 3px;

    color: #173149;

    font-size: 9px;
    font-weight: 800;

    overflow-wrap: anywhere;
}

.pt-survey-actions {
    margin-top: 12px;
}

.pt-survey-actions a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 42px;

    padding: 0 14px;

    border-radius: 8px;

    background: #173149;
    color: #fff;

    font-size: 10px;
    font-weight: 800;

    text-align: center;
    text-decoration: none;

    transition:
        background-color .15s ease,
        transform .15s ease;
}

.pt-survey-actions a:hover {
    background: #0e2b40;
}


/* =========================================================
   Alerts
   ========================================================= */

.pt-alert {
    margin-top: 20px;

    padding: 16px 18px;

    border-radius: 11px;
}

.pt-alert strong {
    display: block;

    font-size: 12px;
}

.pt-alert p {
    margin: 5px 0 0;

    font-size: 10.5px;
    line-height: 1.8;
}

.pt-alert ul {
    margin: 8px 0 0;
    padding-right: 18px;

    font-size: 10.5px;
    line-height: 1.9;
}

.pt-alert--success {
    background: rgba(47,155,99,.08);

    border: 1px solid rgba(47,155,99,.22);

    color: #267d52;
}

.pt-alert--error {
    background: rgba(200,77,85,.07);

    border: 1px solid rgba(200,77,85,.20);

    color: #a63c45;
}


/* =========================================================
   Form section
   ========================================================= */

.pt-form-section {
    margin-top: 42px;
}

.pt-form-intro {
    max-width: 820px;

    margin-bottom: 18px;
}

.pt-form-intro h2 {
    margin: 0;

    color: #173149;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.5;
}

.pt-form-intro > p:not(.pt-eyebrow) {
    margin: 9px 0 0;

    color: #6e818d;

    font-size: 11.5px;
    line-height: 2;
}


/* =========================================================
   Form
   ========================================================= */

.pt-form {
    width: 100%;

    padding: 24px;

    background: #fff;

    border: 1px solid #dfe7ec;
    border-radius: 14px;

    box-shadow:
        0 7px 20px rgba(15,49,72,.035);
}

.pt-grid {
    display: grid;

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

    gap: 14px;
}

.pt-field {
    min-width: 0;
}

.pt-field--full {
    grid-column: 1 / -1;
}

.pt-field label {
    display: block;

    margin-bottom: 7px;

    color: #5f7481;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
}

.pt-field label span {
    color: #b34e57;
}

.pt-field input,
.pt-field select,
.pt-field textarea {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;

    background: #f8fafb;

    border: 1px solid #dce5ea;
    border-radius: 8px;

    color: #173149;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.6;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.pt-field input,
.pt-field select {
    min-height: 44px;

    padding: 0 12px;
}

.pt-field textarea {
    min-height: 160px;

    padding: 11px 12px;

    resize: vertical;

    line-height: 1.9;
}

.pt-field select {
    cursor: pointer;
}

.pt-field select:disabled {
    cursor: not-allowed;

    background: #f1f4f6;
    color: #98a5ad;
}

.pt-field input::placeholder,
.pt-field textarea::placeholder {
    color: #9aa7af;
    opacity: 1;
}

.pt-field input:focus,
.pt-field select:focus,
.pt-field textarea:focus {
    border-color: #b99a56;

    box-shadow:
        0 0 0 3px rgba(185,154,86,.10);

    background: #fff;
}


/* Keyboard accessibility */

.pt-field input:focus-visible,
.pt-field select:focus-visible,
.pt-field textarea:focus-visible,
.pt-submit button:focus-visible,
.pt-survey-actions a:focus-visible,
.pt-option-link:focus-visible {
    outline: 2px solid #c29a3d;
    outline-offset: 2px;
}


/* =========================================================
   Contact
   ========================================================= */

.pt-contact {
    margin-top: 24px;
    padding-top: 21px;

    border-top: 1px solid #edf1f3;
}

.pt-contact__head {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 9px;
}

.pt-contact__head h3 {
    margin: 0;

    color: #173149;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}

.pt-contact__head span {
    padding: 4px 7px;

    background: #eef2f4;

    border-radius: 6px;

    color: #798a94;

    font-size: 9px;
}

.pt-contact > p {
    margin: 6px 0 15px;

    color: #7a8b95;

    font-size: 10.5px;
    line-height: 1.8;
}


/* =========================================================
   Privacy
   ========================================================= */

.pt-privacy {
    margin-top: 21px;

    padding: 14px 15px;

    background: #f7f9fa;

    border: 1px solid #e8edef;
    border-radius: 9px;
}

.pt-privacy strong {
    display: block;

    color: #173149;

    font-size: 10.5px;
    font-weight: 800;
}

.pt-privacy p {
    margin: 5px 0 0;

    color: #758791;

    font-size: 10px;
    line-height: 1.9;
}


/* =========================================================
   Submit
   ========================================================= */

.pt-submit {
    display: flex;
    justify-content: flex-end;

    margin-top: 20px;
}

.pt-submit button {
    min-width: 190px;
    min-height: 46px;

    padding: 0 24px;

    border: 0;
    border-radius: 8px;

    background: #173149;
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background-color .15s ease,
        transform .15s ease;
}

.pt-submit button:hover {
    background: #0e2b40;
}

.pt-submit button:active,
.pt-survey-actions a:active {
    transform: translateY(1px);
}


/* =========================================================
   Honeypot
   ========================================================= */

.pt-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}


/* =========================================================
   Large screens
   ========================================================= */

@media (min-width: 1600px) {

    .pt-hero {
        padding: 40px;
    }

    .pt-form {
        padding: 26px;
    }

    .pt-options article {
        padding: 22px;
    }
}


/* =========================================================
   Laptop / small desktop
   ========================================================= */

@media (max-width: 1100px) {

    .pt-survey-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   Tablet landscape
   ========================================================= */

@media (max-width: 950px) {

    .pt-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pt-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pt-field--full {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   Tablet portrait / large phone
   ========================================================= */

@media (max-width: 760px) {

    .pt-page {
        padding-top: 16px;
        padding-bottom: 48px;
    }

    .pt-hero {
        padding: 26px 22px;

        border-radius: 14px;
    }

    .pt-hero h1 {
        font-size: 28px;
    }

    .pt-hero p:not(.pt-eyebrow) {
        font-size: 12px;
    }

    .pt-options,
    .pt-survey-grid {
        grid-template-columns: 1fr;
    }

    .pt-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

    .pt-grid {
        grid-template-columns: 1fr;
    }

    .pt-field--full {
        grid-column: auto;
    }

    .pt-form-section {
        margin-top: 34px;
    }

    .pt-form {
        padding: 18px;
    }

    .pt-form-intro h2,
    .pt-section-heading h2 {
        font-size: 21px;
    }

    .pt-field input,
    .pt-field select {
        min-height: 46px;

        font-size: 13px;
    }

    .pt-field textarea {
        font-size: 13px;
    }

    .pt-submit {
        display: block;
    }

    .pt-submit button {
        width: 100%;
        min-height: 48px;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 520px) {

    .pt-breadcrumb {
        font-size: 11px;
    }

    .pt-hero {
        padding: 23px 18px;
    }

    .pt-hero h1 {
        font-size: 26px;
    }

    .pt-options article,
    .pt-survey-card {
        padding: 16px;
    }

    .pt-options h2 {
        font-size: 15px;
    }

    .pt-form {
        padding: 16px;
    }

    .pt-survey-meta {
        grid-template-columns: 1fr;
    }

    .pt-form-intro h2,
    .pt-section-heading h2 {
        font-size: 20px;
    }

    .pt-contact__head {
        align-items: flex-start;
    }
}


/* =========================================================
   Very small mobile
   ========================================================= */

@media (max-width: 360px) {

    .pt-hero {
        padding: 20px 15px;
    }

    .pt-form {
        padding: 14px;
    }

    .pt-options article,
    .pt-survey-card {
        padding: 14px;
    }

    .pt-field input,
    .pt-field select,
    .pt-field textarea {
        font-size: 12px;
    }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pt-submit button,
    .pt-survey-actions a,
    .pt-field input,
    .pt-field select,
    .pt-field textarea {
        transition: none;
    }
}


/* =========================================================
   Readability enhancement
   ========================================================= */

/* النصوص الوصفية العامة */

.pt-hero p:not(.pt-eyebrow) {
    font-size: 15px;
    color: rgba(255,255,255,.90);
}

.pt-options p {
    font-size: 13px;
    color: #536b79;
}

.pt-form-intro > p:not(.pt-eyebrow),
.pt-section-heading > div > p:not(.pt-eyebrow) {
    font-size: 13px;
    color: #526a78;
}


/* عناوين الحقول */

.pt-field label {
    font-size: 12.5px;
    color: #425d6d;
}


/* الحقول نفسها */

.pt-field input,
.pt-field select,
.pt-field textarea {
    font-size: 13.5px;
    color: #173149;
}


/* Placeholder */

.pt-field input::placeholder,
.pt-field textarea::placeholder {
    color: #71838e;
    opacity: 1;
}


/* بيانات التواصل */

.pt-contact__head h3 {
    font-size: 16px;
}

.pt-contact__head span {
    font-size: 10.5px;
    color: #5f727e;
}

.pt-contact > p {
    font-size: 12px;
    color: #566e7b;
}


/* الخصوصية */

.pt-privacy strong {
    font-size: 12px;
    color: #173149;
}

.pt-privacy p {
    font-size: 11.5px;
    color: #566e7b;
}


/* الاستبيانات */

.pt-survey-description {
    font-size: 12px;
    color: #536b79;
}

.pt-survey-status,
.pt-survey-governorate {
    font-size: 10.5px;
}

.pt-survey-meta small {
    font-size: 10px;
    color: #637784;
}

.pt-survey-meta strong {
    font-size: 11px;
}


/* زر الإرسال */

.pt-submit button {
    min-width: 200px;
    min-height: 48px;
    font-size: 13px;
}


/* الأجهزة المتوسطة والجوال */

@media (max-width: 760px) {

    .pt-hero p:not(.pt-eyebrow) {
        font-size: 14px;
    }

    .pt-options p {
        font-size: 13px;
    }

    .pt-form-intro > p:not(.pt-eyebrow),
    .pt-section-heading > div > p:not(.pt-eyebrow) {
        font-size: 13px;
    }

    .pt-field label {
        font-size: 13px;
    }

    .pt-field input,
    .pt-field select,
    .pt-field textarea {
        font-size: 16px;
    }

    .pt-contact > p,
    .pt-privacy p {
        font-size: 12px;
    }
}