/* ============================================================
   IJRCSIT AUTHOR SUBMISSION CENTER
   PREMIUM / COMPACT / UX-FIRST
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap');


:root {
    --ijsub-dark: #102b38;
    --ijsub-primary: #1e4356;
    --ijsub-blue: #4f8eae;
    --ijsub-accent: #68a4c4;

    --ijsub-light: #eaf4f9;
    --ijsub-soft: #f5fafc;
    --ijsub-pale: #f8fbfc;

    --ijsub-border: #d4e3ea;

    --ijsub-text: #263746;
    --ijsub-muted: #637582;

    --ijsub-white: #ffffff;

    --ijsub-container: 1180px;
}


.ijsub-page,
.ijsub-page *,
.ijsub-page *::before,
.ijsub-page *::after {
    box-sizing: border-box;
}


.ijsub-page {
    margin: 0;
    padding: 0;

    color: var(--ijsub-text);
    background: #ffffff;

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

    font-size: 15px;
    line-height: 1.55;

    overflow-x: hidden;
}


.ijsub-page h1,
.ijsub-page h2,
.ijsub-page h3,
.ijsub-page p,
.ijsub-page span,
.ijsub-page strong,
.ijsub-page small,
.ijsub-page label,
.ijsub-page input,
.ijsub-page textarea,
.ijsub-page select,
.ijsub-page button {
    font-family: "Roboto", Arial, sans-serif;
}


.ijsub-container {
    width: min(
        calc(100% - 38px),
        var(--ijsub-container)
    );

    margin: 0 auto;
}


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

.ijsub-hero {
    position: relative;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            #102b38 0%,
            #1e4356 58%,
            #315f74 100%
        );

    overflow: hidden;
}


.ijsub-hero::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -130px;
    top: -220px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 50%;
}


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

    position: absolute;

    width: 620px;
    height: 620px;

    right: -280px;
    bottom: -430px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}


.ijsub-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        300px;

    align-items: center;

    gap: 45px;

    min-height: 285px;

    padding: 38px 0 34px;
}


.ijsub-eyebrow {
    display: inline-flex;

    align-items: center;

    margin-bottom: 10px;

    color: #bce3f2;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .13em;
}


.ijsub-eyebrow::before {
    content: "";

    width: 22px;
    height: 2px;

    margin-right: 8px;

    background: var(--ijsub-accent);
}


.ijsub-hero h1 {
    max-width: 760px;

    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(35px, 4vw, 49px);

    line-height: 1.02;

    letter-spacing: -.025em;

    font-weight: 700;
}


.ijsub-hero h1 span {
    color: #a9d9eb;
}


.ijsub-hero p {
    max-width: 650px;

    margin: 0;

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

    font-size: 15px;

    line-height: 1.6;
}


.ijsub-hero-meta {
    display: flex;

    align-items: center;

    gap: 0;

    margin-top: 23px;
}


.ijsub-hero-meta span {
    display: flex;

    align-items: center;

    gap: 7px;

    padding-right: 17px;
    margin-right: 17px;

    border-right: 1px solid rgba(255,255,255,.20);

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

    font-size: 10px;

    font-weight: 600;
}


.ijsub-hero-meta span:last-child {
    padding-right: 0;
    margin-right: 0;

    border-right: 0;
}


.ijsub-hero-meta b {
    color: #bce3f2;

    font-size: 10px;
}


.ijsub-hero-side {
    position: relative;

    z-index: 3;
}


.ijsub-status-card {
    padding: 22px;

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

    border: 1px solid rgba(255,255,255,.20);

    backdrop-filter: blur(8px);
}


.ijsub-status-card small {
    display: block;

    margin-bottom: 8px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .11em;
}


.ijsub-status-card strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 25px;

    font-weight: 700;
}


.ijsub-status-card span {
    color: rgba(255,255,255,.70);

    font-size: 10px;
}


.ijsub-status-line {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 11px;

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

    font-size: 9px;

    font-weight: 600;
}


.ijsub-status-line span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #7cc6df;

    box-shadow: 0 0 0 4px rgba(124,198,223,.10);
}


/* ============================================================
   SECTIONS
   ============================================================ */

.ijsub-guidelines,
.ijsub-submit-section {
    padding: 43px 0;
}


.ijsub-submit-section {
    background: var(--ijsub-pale);

    border-top: 1px solid var(--ijsub-border);
}


.ijsub-section-head {
    display: grid;

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

    align-items: end;

    gap: 35px;

    margin-bottom: 24px;
}


.ijsub-kicker {
    display: block;

    margin-bottom: 6px;

    color: var(--ijsub-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .12em;
}


.ijsub-section-head h2 {
    margin: 0;

    color: var(--ijsub-primary);

    font-size: clamp(28px, 3vw, 36px);

    line-height: 1.08;

    letter-spacing: -.018em;
}


.ijsub-section-head > p {
    margin: 0;

    color: var(--ijsub-muted);

    font-size: 13px;

    line-height: 1.6;
}


/* ============================================================
   GUIDELINES
   ============================================================ */

.ijsub-guideline-layout {
    display: grid;

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

    gap: 18px;
}


.ijsub-guideline-main {
    padding: 23px;

    background: #ffffff;

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


.ijsub-lead {
    max-width: 820px;

    margin: 0 0 20px;

    color: var(--ijsub-text);

    font-size: 14px;

    line-height: 1.65;
}


.ijsub-check-grid {
    display: grid;

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

    border-top: 1px solid var(--ijsub-border);
    border-left: 1px solid var(--ijsub-border);
}


.ijsub-check-grid > div {
    min-height: 112px;

    padding: 16px;

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


.ijsub-check-grid span {
    display: block;

    margin-bottom: 6px;

    color: var(--ijsub-blue);

    font-size: 9px;

    font-weight: 800;
}


.ijsub-check-grid strong {
    display: block;

    margin-bottom: 4px;

    color: var(--ijsub-primary);

    font-size: 14px;
}


.ijsub-check-grid p {
    margin: 0;

    color: var(--ijsub-muted);

    font-size: 11px;

    line-height: 1.5;
}


.ijsub-format-box {
    padding: 21px;

    color: #ffffff;

    background: var(--ijsub-primary);
}


.ijsub-format-box > small {
    display: block;

    padding-bottom: 12px;

    color: #9ed2e6;

    border-bottom: 1px solid rgba(255,255,255,.16);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .1em;
}


.ijsub-structure {
    display: grid;

    grid-template-columns: 27px 1fr;

    margin-top: 5px;
}


.ijsub-structure span,
.ijsub-structure b {
    padding: 7px 0;

    border-bottom: 1px solid rgba(255,255,255,.09);
}


.ijsub-structure span {
    color: #8fc7dc;

    font-size: 9px;

    font-weight: 800;
}


.ijsub-structure b {
    color: rgba(255,255,255,.88);

    font-size: 11px;

    font-weight: 600;
}


/* ============================================================
   FORM
   ============================================================ */

.ijsub-form {
    background: #ffffff;

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


.ijsub-form-section {
    padding: 25px;

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


.ijsub-form-heading {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.ijsub-form-heading > span {
    display: flex;

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

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    color: #ffffff;

    background: var(--ijsub-primary);

    font-size: 10px;

    font-weight: 800;
}


.ijsub-form-heading small {
    display: block;

    margin-bottom: 2px;

    color: var(--ijsub-blue);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .11em;
}


.ijsub-form-heading h3 {
    margin: 0;

    color: var(--ijsub-primary);

    font-size: 19px;

    line-height: 1.2;
}


.ijsub-fields {
    display: grid;

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

    gap: 15px;
}


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


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


.ijsub-field label {
    display: flex;

    justify-content: space-between;

    margin-bottom: 6px;

    color: var(--ijsub-primary);

    font-size: 14px;

    font-weight: 700;
}


.ijsub-field label em {
    color: #c65353;

    font-style: normal;
}


.ijsub-field label span {
    color: var(--ijsub-muted);

    font-size: 9px;

    font-weight: 500;
}


.ijsub-field input,
.ijsub-field select,
.ijsub-field textarea {
    width: 100%;

    color: var(--ijsub-text);

    background: #ffffff;

    border: 1px solid #ccdce4;

    border-radius: 0;

    outline: 0;

    font-size: 13px;

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


.ijsub-field input,
.ijsub-field select {
    height: 43px;

    padding: 0 12px;
}


.ijsub-field textarea {
    min-height: 125px;

    padding: 11px 12px;

    resize: vertical;

    line-height: 1.6;
}


.ijsub-field input::placeholder,
.ijsub-field textarea::placeholder {
    color: #9aabb4;
}


.ijsub-field input:focus,
.ijsub-field select:focus,
.ijsub-field textarea:focus {
    border-color: var(--ijsub-blue);

    box-shadow:
        0 0 0 3px rgba(79,142,174,.08);
}


/* ============================================================
   DROPZONE
   ============================================================ */

.ijsub-dropzone {
    position: relative;

    display: flex;

    flex-direction: column;

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

    min-height: 190px;

    padding: 25px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8fbfc,
            #edf6fa
        );

    border: 1px dashed #a9c5d2;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease;
}


.ijsub-dropzone:hover,
.ijsub-dropzone.dragging {
    border-color: var(--ijsub-blue);

    background: #eef8fc;
}


.ijsub-dropzone input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.ijsub-upload-icon {
    display: flex;

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

    width: 40px;
    height: 40px;

    margin-bottom: 10px;

    color: #ffffff;

    background: var(--ijsub-primary);

    font-size: 20px;

    font-weight: 400;
}


.ijsub-dropzone strong {
    margin-bottom: 3px;

    color: var(--ijsub-primary);

    font-size: 15px;
}


.ijsub-dropzone > span {
    color: var(--ijsub-muted);

    font-size: 11px;
}


.ijsub-dropzone u {
    color: var(--ijsub-blue);

    font-weight: 700;
}


.ijsub-dropzone > small {
    margin-top: 8px;

    color: #8999a3;

    font-size: 9px;
}


.ijsub-file-info {
    display: none;

    align-items: center;

    gap: 9px;

    margin-top: 13px;

    padding: 8px 12px;

    color: var(--ijsub-primary);

    background: #ffffff;

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

    font-size: 11px;

    font-weight: 600;
}


.ijsub-file-info.visible {
    display: flex;
}


/* ============================================================
   DECLARATION
   ============================================================ */

.ijsub-declaration {
    background: #fbfdfe;
}


.ijsub-check {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 10px;

    color: var(--ijsub-muted);

    font-size: 11px;

    line-height: 1.5;

    cursor: pointer;
}


.ijsub-check:last-child {
    margin-bottom: 0;
}


.ijsub-check input {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    margin: 1px 0 0;

    accent-color: var(--ijsub-primary);
}


/* ============================================================
   SUBMIT BAR
   ============================================================ */

.ijsub-submit-bar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 19px 25px;

    background: var(--ijsub-primary);
}


.ijsub-submit-bar small {
    display: block;

    margin-bottom: 2px;

    color: #8fc7dc;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;
}


.ijsub-submit-bar strong {
    color: #ffffff;

    font-size: 13px;

    font-weight: 500;
}


.ijsub-submit-button,
.ijsub-button {
    display: inline-flex;

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

    gap: 30px;

    min-width: 190px;

    min-height: 43px;

    padding: 0 14px 0 17px;

    color: #ffffff;

    background: var(--ijsub-blue);

    border: 1px solid var(--ijsub-blue);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}


.ijsub-submit-button:hover,
.ijsub-button:hover {
    background: var(--ijsub-accent);

    border-color: var(--ijsub-accent);

    transform: translateY(-1px);
}


.ijsub-submit-button b,
.ijsub-button span {
    font-size: 17px;

    font-weight: 400;
}


/* ============================================================
   ERROR
   ============================================================ */

.ijsub-error {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    padding: 11px 14px;

    color: #8a3d3d;

    background: #fff5f5;

    border: 1px solid #efd0d0;

    font-size: 12px;
}


.ijsub-error span {
    display: flex;

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

    width: 19px;
    height: 19px;

    color: #ffffff;

    background: #c45b5b;

    border-radius: 50%;

    font-size: 10px;

    font-weight: 800;
}


/* ============================================================
   SUCCESS
   ============================================================ */

.ijsub-success {
    max-width: 700px;

    margin: 0 auto;

    padding: 50px 35px;

    text-align: center;

    background: #ffffff;

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


.ijsub-success-icon {
    display: flex;

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

    width: 54px;
    height: 54px;

    margin: 0 auto 18px;

    color: #ffffff;

    background: var(--ijsub-primary);

    font-size: 23px;
}


.ijsub-success h2 {
    margin: 0 0 10px;

    color: var(--ijsub-primary);

    font-size: 28px;

    line-height: 1.15;
}


.ijsub-success p {
    max-width: 560px;

    margin: 0 auto 23px;

    color: var(--ijsub-muted);

    font-size: 13px;

    line-height: 1.65;
}


.ijsub-reference {
    margin: 0 auto 22px;

    padding: 15px;

    background: var(--ijsub-light);

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


.ijsub-reference small {
    display: block;

    margin-bottom: 4px;

    color: var(--ijsub-muted);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;
}


.ijsub-reference strong {
    color: var(--ijsub-primary);

    font-size: 18px;

    letter-spacing: .04em;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 850px) {

    .ijsub-hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ijsub-hero-side {
        max-width: 350px;
    }

    .ijsub-section-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ijsub-guideline-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .ijsub-container {
        width: calc(100% - 26px);
    }

    .ijsub-guidelines,
    .ijsub-submit-section {
        padding: 35px 0;
    }

    .ijsub-hero-grid {
        min-height: 0;

        padding: 30px 0;
    }

    .ijsub-hero h1 {
        font-size: 35px;
    }

    .ijsub-hero-meta {
        flex-wrap: wrap;
        row-gap: 9px;
    }

    .ijsub-check-grid {
        grid-template-columns: 1fr;
    }

    .ijsub-fields {
        grid-template-columns: 1fr;
    }

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

    .ijsub-form-section {
        padding: 19px 15px;
    }

    .ijsub-submit-bar {
        align-items: flex-start;

        flex-direction: column;

        padding: 17px 15px;
    }

    .ijsub-submit-button {
        width: 100%;
    }

    .ijsub-success {
        padding: 38px 20px;
    }

}


@media (max-width: 420px) {

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

    .ijsub-section-head h2 {
        font-size: 28px;
    }

    .ijsub-hero-meta span {
        padding-right: 10px;
        margin-right: 10px;
    }

}