/* ==========================================================================
   Submissions page (resources/views/forauthors/Submissions.blade.php)
   Shares the same design language as about.css (.about-page / .team-page):
   brand-scoped hero/section cards, step-numbered sub-headings, check lists.
   ========================================================================== */

.submissions-page {
    --brand: #EA6222;
    --brand-dark: #b8480f;
    --brand-soft: #FDEEE4;
    color: #444;
}

.submissions-page p {
    line-height: 1.9;
    text-align: justify;
}

/* Hero */
.submissions-page .hero-card {
    background: linear-gradient(135deg, #FFF6F0 0%, #FDEEE4 100%);
    border: 1px solid rgba(234, 98, 34, .15);
    border-radius: 16px;
    box-shadow: none;
}

.submissions-page .hero-card .card-body {
    padding: 1.75rem 2rem;
}

.submissions-page .hero-card h1 {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0;
}

.submissions-page .hero-card hr {
    border-color: #EA6222;
    border-width: 3px;
    opacity: .5;
    margin: 0.75rem 0 1.25rem;
}

.submissions-page .hero-card p:last-child {
    margin-bottom: 0;
}

/* Login / register reminder banner */
.submissions-page .auth-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #fff4ec, #ffe8d9);
    border: 1px solid rgba(234, 98, 34, .25);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    margin-top: 1.25rem;
}

.submissions-page .auth-banner>i {
    font-size: 1.6rem;
    color: var(--brand);
    flex: 0 0 auto;
}

.submissions-page .auth-text {
    flex: 1 1 220px;
    font-size: .92rem;
    color: #5a3a24;
}

.submissions-page .auth-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

/* Section cards */
.submissions-page .section-card {
    border: 1px solid rgba(2, 10, 20, .06);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(2, 10, 20, .05);
    margin-bottom: 1.5rem;
}

.submissions-page .section-card .card-body {
    padding: 1.85rem;
}

.submissions-page .section-heading {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.1rem;
}

.submissions-page .section-heading .icon-badge {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.submissions-page .section-heading h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2c2c2c;
    margin: 0;
}

.submissions-page .sub-heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 1.6rem 0 .85rem;
    font-size: 1rem;
}

.submissions-page .sub-heading:first-of-type {
    margin-top: .25rem;
}

.submissions-page .sub-heading .step-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Check list */
.submissions-page ul.check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.submissions-page ul.check-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    margin-bottom: .7rem;
    line-height: 1.85;
}

.submissions-page ul.check-list li:last-child {
    margin-bottom: 0;
}

.submissions-page ul.check-list li i {
    color: var(--brand);
    margin-top: .3rem;
    flex: 0 0 auto;
}

/* Numbered rule list (APA author-citation rules) — same brand-circle look
   as .step-num, generated from list order instead of typed manually */
.submissions-page ol.rule-list {
    list-style: none;
    counter-reset: rule;
    padding-left: 0;
    margin-bottom: 0;
}

.submissions-page ol.rule-list li {
    counter-increment: rule;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-bottom: .85rem;
    line-height: 1.85;
}

.submissions-page ol.rule-list li:last-child {
    margin-bottom: 0;
}

.submissions-page ol.rule-list li::before {
    content: counter(rule);
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: .15rem;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reference format cards (APA examples) */
.submissions-page .ref-card {
    border-left: 3px solid var(--brand-soft);
    background: #fbfbfb;
    border-radius: 0 10px 10px 0;
    padding: .95rem 1.15rem;
    margin-bottom: 1rem;
}

.submissions-page .ref-card:last-child {
    margin-bottom: 0;
}

.submissions-page .ref-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    color: #2c2c2c;
    font-size: .95rem;
    margin-bottom: .6rem;
}

.submissions-page .ref-title .ref-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submissions-page .ref-row {
    font-size: .9rem;
    line-height: 1.75;
    margin-bottom: .35rem;
}

.submissions-page .ref-row:last-child {
    margin-bottom: 0;
}

.submissions-page .ref-row .ref-label {
    font-weight: 700;
    color: var(--brand-dark);
    margin-right: .3rem;
}

/* CRediT author-statement roles grid */
.submissions-page .credit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}

.submissions-page .credit-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    background: #fbfbfb;
    border: 1px solid rgba(2, 10, 20, .06);
    border-radius: 10px;
    padding: .6rem .9rem;
    font-size: .85rem;
}

.submissions-page .credit-en {
    font-weight: 700;
    color: var(--brand-dark);
}

.submissions-page .credit-th {
    color: #555;
}

/* Document / template chip */
.submissions-page .doc-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #fff7f2;
    border: 1px dashed rgba(234, 98, 34, .4);
    color: var(--brand-dark);
    font-size: .88rem;
    padding: .55rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s ease;
}

.submissions-page .doc-chip:hover {
    background: #ffe8d9;
    color: var(--brand-dark);
}

/* Compact variant when the chip sits inline inside a sentence (e.g. the
   check-list item) — the standalone .doc-chip's padding is sized for
   sitting on its own line, which makes it visibly taller than the text
   it's inline with; this shrinks it back down to match the line height */
.submissions-page .check-list .doc-chip {
    padding: .1rem .6rem;
    font-size: .85rem;
    line-height: 1.85;
    vertical-align: middle;
}

/* Note box */
.submissions-page .note-box {
    display: flex;
    gap: .75rem;
    background: #f6f7f9;
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.submissions-page .note-box i {
    color: var(--brand);
    font-size: 1.15rem;
    flex: 0 0 auto;
    margin-top: .2rem;
}

.submissions-page .note-box p {
    font-size: .9rem;
    color: #555;
    margin-bottom: 0;
    text-align: left;
}

/* Buttons */
.submissions-page .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--brand);
    color: #fff;
    padding: .65rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.submissions-page .btn-submit:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
}

.submissions-page .btn-outline-submit {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 1.5px solid var(--brand);
    color: var(--brand-dark);
    background: #fff;
    padding: .6rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.submissions-page .btn-outline-submit:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 576px) {

    .submissions-page .hero-card .card-body,
    .submissions-page .section-card .card-body {
        padding: 1.4rem;
    }

    .submissions-page .auth-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .submissions-page .credit-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Author guidelines page (resources/views/forauthors/AuthorGuidelines.blade.php)
   Same component set as .submissions-page (hero/section cards, step-numbered
   sub-headings, rule-list, ref-card, credit-grid) kept as its own scope so
   each forauthors/* page section stays self-contained and independently
   editable/removable.
   ========================================================================== */

.guidelines-page {
    --brand: #EA6222;
    --brand-dark: #b8480f;
    --brand-soft: #FDEEE4;
    color: #444;
}

.guidelines-page p {
    line-height: 1.9;
    text-align: justify;
}

/* Hero */
.guidelines-page .hero-card {
    background: linear-gradient(135deg, #FFF6F0 0%, #FDEEE4 100%);
    border: 1px solid rgba(234, 98, 34, .15);
    border-radius: 16px;
    box-shadow: none;
}

.guidelines-page .hero-card .card-body {
    padding: 1.75rem 2rem;
}

.guidelines-page .hero-card h1 {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0;
}

.guidelines-page .hero-card hr {
    border-color: #EA6222;
    border-width: 3px;
    opacity: .5;
    margin: 0.75rem 0 1.25rem;
}

.guidelines-page .hero-card p:last-child {
    margin-bottom: 0;
}

/* Section cards */
.guidelines-page .section-card {
    border: 1px solid rgba(2, 10, 20, .06);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(2, 10, 20, .05);
    margin-bottom: 1.5rem;
}

.guidelines-page .section-card .card-body {
    padding: 1.85rem;
}

.guidelines-page .section-heading {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.1rem;
}

.guidelines-page .section-heading .icon-badge {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.guidelines-page .section-heading h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2c2c2c;
    margin: 0;
}

.guidelines-page .sub-heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 1.6rem 0 .85rem;
    font-size: 1rem;
}

.guidelines-page .sub-heading:first-of-type {
    margin-top: .25rem;
}

.guidelines-page .sub-heading .step-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Check list */
.guidelines-page ul.check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.guidelines-page ul.check-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    margin-bottom: .7rem;
    line-height: 1.85;
}

.guidelines-page ul.check-list li:last-child {
    margin-bottom: 0;
}

.guidelines-page ul.check-list li i {
    color: var(--brand);
    margin-top: .3rem;
    flex: 0 0 auto;
}

/* Numbered rule list (APA author-citation rules) */
.guidelines-page ol.rule-list {
    list-style: none;
    counter-reset: rule;
    padding-left: 0;
    margin-bottom: 0;
}

.guidelines-page ol.rule-list li {
    counter-increment: rule;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-bottom: .85rem;
    line-height: 1.85;
}

.guidelines-page ol.rule-list li:last-child {
    margin-bottom: 0;
}

.guidelines-page ol.rule-list li::before {
    content: counter(rule);
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: .15rem;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reference format cards (APA examples) */
.guidelines-page .ref-card {
    border-left: 3px solid var(--brand-soft);
    background: #fbfbfb;
    border-radius: 0 10px 10px 0;
    padding: .95rem 1.15rem;
    margin-bottom: 1rem;
}

.guidelines-page .ref-card:last-child {
    margin-bottom: 0;
}

.guidelines-page .ref-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    color: #2c2c2c;
    font-size: .95rem;
    margin-bottom: .6rem;
}

.guidelines-page .ref-title .ref-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guidelines-page .ref-row {
    font-size: .9rem;
    line-height: 1.75;
    margin-bottom: .35rem;
}

.guidelines-page .ref-row:last-child {
    margin-bottom: 0;
}

.guidelines-page .ref-row .ref-label {
    font-weight: 700;
    color: var(--brand-dark);
    margin-right: .3rem;
}

/* CRediT author-statement roles grid */
.guidelines-page .credit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}

.guidelines-page .credit-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    background: #fbfbfb;
    border: 1px solid rgba(2, 10, 20, .06);
    border-radius: 10px;
    padding: .6rem .9rem;
    font-size: .85rem;
}

.guidelines-page .credit-en {
    font-weight: 700;
    color: var(--brand-dark);
}

.guidelines-page .credit-th {
    color: #555;
}

/* Buttons */
.guidelines-page .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--brand);
    color: #fff;
    padding: .65rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.guidelines-page .btn-submit:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 576px) {

    .guidelines-page .hero-card .card-body,
    .guidelines-page .section-card .card-body {
        padding: 1.4rem;
    }

    .guidelines-page .credit-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Peer review process page (resources/views/forauthors/Peerreviewprocess.blade.php)
   A 9-step vertical timeline (numbered markers joined by a connecting line)
   instead of the previous flat h5/hr/ul list, since this page's content is
   inherently a sequence of stages rather than independent topics.
   ========================================================================== */

.peerreview-page {
    --brand: #EA6222;
    --brand-dark: #b8480f;
    --brand-soft: #FDEEE4;
    color: #444;
}

.peerreview-page .hero-card {
    background: linear-gradient(135deg, #FFF6F0 0%, #FDEEE4 100%);
    border: 1px solid rgba(234, 98, 34, .15);
    border-radius: 16px;
    box-shadow: none;
}

.peerreview-page .hero-card .card-body {
    padding: 1.75rem 2rem;
}

.peerreview-page .hero-card h1 {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0;
}

.peerreview-page .hero-card hr {
    border-color: #EA6222;
    border-width: 3px;
    opacity: .5;
    margin: 0.75rem 0 1.25rem;
}

.peerreview-page .flow-image {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(2, 10, 20, .06);
}

.peerreview-page .flow-image img {
    display: block;
    width: 100%;
}

/* Section card wrapping the whole timeline */
.peerreview-page .section-card {
    border: 1px solid rgba(2, 10, 20, .06);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(2, 10, 20, .05);
}

.peerreview-page .section-card .card-body {
    padding: 1.85rem;
}

.peerreview-page .section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 1.75rem;
}

/* Timeline */
.peerreview-page .timeline {
    display: flex;
    flex-direction: column;
}

.peerreview-page .timeline-step {
    display: flex;
    gap: 1.1rem;
}

.peerreview-page .step-marker {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.peerreview-page .step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.peerreview-page .step-line {
    flex: 1 1 auto;
    width: 2px;
    min-height: 1.25rem;
    margin: .35rem 0;
    background: repeating-linear-gradient(to bottom, rgba(234, 98, 34, .3) 0 4px, transparent 4px 8px);
}

.peerreview-page .timeline-step:last-child .step-line {
    display: none;
}

.peerreview-page .step-content {
    flex: 1 1 auto;
    padding-bottom: 1.75rem;
}

.peerreview-page .timeline-step:last-child .step-content {
    padding-bottom: 0;
}

.peerreview-page .step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: .3rem;
    margin-bottom: .75rem;
}

.peerreview-page .step-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #2c2c2c;
    margin: 0;
}

.peerreview-page .step-duration {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .78rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 999px;
}

.peerreview-page .step-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.peerreview-page .step-list>li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    line-height: 1.85;
    margin-bottom: .5rem;
}

.peerreview-page .step-list>li:last-child {
    margin-bottom: 0;
}

.peerreview-page .step-list .icon {
    flex: 0 0 auto;
    line-height: 1.6;
}

.peerreview-page .sub-list {
    list-style: none;
    padding-left: 1.9rem;
    margin: .5rem 0 0;
}

.peerreview-page .sub-list li {
    position: relative;
    line-height: 1.8;
    margin-bottom: .4rem;
    color: #555;
    font-size: .93rem;
}

.peerreview-page .sub-list li:last-child {
    margin-bottom: 0;
}

.peerreview-page .sub-list li::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: .7rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}

/* Outcome / result callout */
.peerreview-page .outcome-box {
    margin-top: 1rem;
    background: #f6f7f9;
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    padding: .9rem 1.15rem;
}

.peerreview-page .outcome-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: var(--brand-dark);
    font-size: .9rem;
    margin-bottom: .55rem;
}

.peerreview-page .outcome-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.peerreview-page .outcome-list li {
    line-height: 1.8;
    font-size: .92rem;
    color: #444;
    margin-bottom: .4rem;
}

.peerreview-page .outcome-list li:last-child {
    margin-bottom: 0;
}

.peerreview-page .outcome-tag {
    display: inline-block;
    font-weight: 700;
    padding: .05rem .55rem;
    border-radius: 999px;
    font-size: .85rem;
}

.peerreview-page .tag-accept {
    background: #e9f7ef;
    color: #1e7e42;
}

.peerreview-page .tag-revise {
    background: #fff7e6;
    color: #a5680a;
}

.peerreview-page .tag-reject {
    background: #fdecea;
    color: #c0392b;
}

@media (max-width: 576px) {

    .peerreview-page .hero-card .card-body,
    .peerreview-page .section-card .card-body {
        padding: 1.4rem;
    }

    .peerreview-page .timeline-step {
        gap: .75rem;
    }
}