/**
 * Edu Submission Form — Frontend Styles
 * @version 2.5.10
 */

#edu-submit-wrap {
    --edu-accent:       #007cba;
    --edu-journal-acc:  #5856d6;
    --edu-border:       #d8dde6;
    --edu-bg:           #f5f5f7;
    --edu-white:        #ffffff;
    --edu-text:         #1d1d1f;
    --edu-muted:        #6e6e73;
    --edu-warn:         #ff6b35;
    --edu-success:      #34c759;
    --edu-error-bg:     #fff0f0;
    --edu-success-bg:   #f0fdf4;
    --edu-radius:       12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--edu-text);
}

/* ── Progress bar ── */
.edu-progress-bar {
    background: var(--edu-white);
    border-bottom: 1px solid var(--edu-border);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0 -20px;
}
.edu-progress-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
}
.edu-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.edu-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--edu-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    color: var(--edu-muted);
    flex-shrink: 0;
    transition: all .2s;
}
.edu-step.edu-active .edu-step-num {
    border-color: var(--edu-accent);
    background: var(--edu-accent);
    color: #fff;
}
.edu-step.edu-done .edu-step-num {
    border-color: var(--edu-success);
    background: var(--edu-success);
    color: #fff;
}
.edu-step-label { font-size: 13px; color: var(--edu-muted); font-weight: 500; }
.edu-step.edu-active .edu-step-label { color: var(--edu-text); font-weight: 600; }
.edu-step-line { flex: 1; height: 2px; background: var(--edu-border); margin: 0 10px; }
.edu-step-line.edu-done { background: var(--edu-success); }

/* ── Page layout ── */
.edu-form-page { display: none; }
.edu-form-page.edu-page-active { display: block; }
.edu-form-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 36px 32px 80px;
}
.edu-page-title { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.edu-page-subtitle { font-size: 15px; color: var(--edu-muted); margin-bottom: 32px; }

/* ── Fields ── */
.edu-field-group { margin-bottom: 22px; }
.edu-field-group label {
    display: block;
    font-size: 13px; font-weight: 600;
    margin-bottom: 6px;
    color: var(--edu-text);
}
.edu-req { color: #ff3b30; }
.edu-opt { color: var(--edu-muted); font-weight: 400; }

.edu-field-group input[type="text"],
.edu-field-group input[type="email"],
.edu-field-group input[type="number"],
.edu-field-group select,
.edu-field-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--edu-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    color: var(--edu-text);
    background: var(--edu-white);
    box-sizing: border-box;
    transition: border-color .2s;
    outline: none;
}
.edu-field-group input:focus,
.edu-field-group select:focus,
.edu-field-group textarea:focus { border-color: var(--edu-accent); }
.edu-field-group textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

.edu-field-row   { display: grid; grid-template-columns: 1fr 1fr;     gap: 18px; margin-bottom: 22px; }
.edu-field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.edu-field-row .edu-field-group,
.edu-field-row-3 .edu-field-group { margin-bottom: 0; }

/* ── Word counter ── */
.edu-word-count-wrap { position: relative; }
.edu-word-counter {
    position: absolute;
    bottom: 10px; right: 12px;
    font-size: 11px; color: var(--edu-muted);
    pointer-events: none;
    background: var(--edu-white);
    padding: 1px 4px;
}
.edu-word-counter.edu-warn { color: var(--edu-warn); }
.edu-word-counter.edu-over { color: #ff3b30; font-weight: 700; }
.edu-limit-bar-wrap { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.edu-limit-bar-track {
    flex: 1; height: 4px; background: var(--edu-border); border-radius: 2px; overflow: hidden;
}
.edu-limit-bar-fill {
    height: 100%; background: var(--edu-accent); border-radius: 2px; transition: width .2s, background .2s;
}
.edu-limit-bar-fill.warn { background: var(--edu-warn); }
.edu-limit-bar-fill.over { background: #ff3b30; }
.edu-limit-bar-label { font-size: 11px; color: var(--edu-muted); white-space: nowrap; }
.edu-limit-bar-label.over { color: #ff3b30; }

/* ── Degree picker ── */
.edu-degree-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
.edu-degree-opt {
    border: 2px solid var(--edu-border);
    border-radius: var(--edu-radius);
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    background: var(--edu-white);
    user-select: none;
}
.edu-degree-opt:hover { border-color: #aaa; }
.edu-degree-opt.edu-selected { border-color: var(--edu-accent); background: #f0f7ff; }
.edu-degree-opt.edu-journal-sel.edu-selected { border-color: var(--edu-journal-acc); background: #f5f4ff; }
.edu-degree-icon { font-size: 24px; margin-bottom: 5px; }
.edu-degree-name { font-size: 13px; font-weight: 700; }
.edu-degree-desc { font-size: 11px; color: var(--edu-muted); margin-top: 2px; }

/* ── Journal fields ── */
.edu-journal-fields {
    display: none;
    background: #f5f4ff;
    border: 1.5px solid #c5c4f5;
    border-radius: var(--edu-radius);
    padding: 22px;
    margin-bottom: 24px;
}
.edu-journal-fields.edu-visible { display: block; }
.edu-journal-fields-title {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--edu-journal-acc);
    margin-bottom: 14px;
}

/* ── Reviewers ── */
.edu-reviewer-list { margin-bottom: 8px; }
.edu-reviewer-item {
    display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.edu-reviewer-item input { flex: 1; }
.edu-btn-remove-small {
    width: 28px; height: 28px;
    border: none; background: #fff0f0; color: #ff3b30;
    border-radius: 50%; cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.edu-btn-add-small {
    font-size: 13px; color: var(--edu-accent);
    background: none; border: none; cursor: pointer;
    font-weight: 600; padding: 4px 0;
}

/* ── Section cards ── */
.edu-sections-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.edu-sections-info { font-size: 13px; color: var(--edu-muted); }

.edu-section-card {
    background: var(--edu-white);
    border: 1.5px solid var(--edu-border);
    border-radius: var(--edu-radius);
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .2s;
}
.edu-section-card:focus-within { border-color: #b0c4de; }

.edu-section-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: #f8f8fa;
    border-bottom: 1px solid var(--edu-border);
    cursor: pointer;
    user-select: none;
}
.edu-part-badge {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: #fff; background: var(--edu-muted);
    padding: 3px 8px; border-radius: 20px; flex-shrink: 0;
}
.edu-section-card.edu-required .edu-part-badge { background: var(--edu-accent); }
.edu-section-title-input {
    flex: 1; border: none; background: transparent;
    font-size: 14px; font-weight: 600; outline: none;
    color: var(--edu-text);
}
.edu-section-type-select {
    font-size: 12px; border: 1px solid var(--edu-border);
    border-radius: 8px; padding: 4px 8px;
    background: var(--edu-white); outline: none; cursor: pointer;
}
.edu-section-collapse-btn {
    width: 22px; height: 22px; border: none; background: none;
    font-size: 16px; color: var(--edu-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform .2s;
}
.edu-section-collapse-btn.edu-collapsed { transform: rotate(-90deg); }
.edu-section-remove-btn {
    width: 24px; height: 24px; border: none; background: none;
    color: #ff3b30; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.edu-section-body { padding: 16px; }
.edu-section-body.edu-hidden { display: none; }

.edu-type-panel { display: none; }
.edu-type-panel.edu-active { display: block; }

.edu-section-textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid var(--edu-border); border-radius: 10px;
    font-family: inherit; font-size: 15px; line-height: 1.7;
    resize: vertical; min-height: 120px; outline: none;
    transition: border-color .2s;
}
.edu-section-textarea:focus { border-color: var(--edu-accent); }

/* bullets */
.edu-bullets-list { margin-bottom: 8px; }
.edu-bullet-item {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.edu-bullet-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--edu-accent); flex-shrink: 0;
}
.edu-bullet-item input {
    flex: 1; padding: 8px 12px;
    border: 1.5px solid var(--edu-border); border-radius: 8px;
    font-family: inherit; font-size: 14px; outline: none;
}
.edu-bullet-item input:focus { border-color: var(--edu-accent); }
.edu-bullet-word-count { font-size: 11px; color: var(--edu-muted); white-space: nowrap; }

/* gallery */
.edu-gallery-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px;
}
.edu-gallery-photo-card {
    border: 1.5px solid var(--edu-border); border-radius: 10px; overflow: hidden;
}
.edu-gallery-photo-body { padding: 10px; }
.edu-gallery-photo-title {
    width: 100%; box-sizing: border-box; margin-bottom: 6px;
    border: 1px solid var(--edu-border); border-radius: 6px;
    padding: 6px 10px; font-size: 13px; font-family: inherit;
}
.edu-gallery-photo-caption {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--edu-border); border-radius: 6px;
    padding: 6px 10px; font-size: 12px; font-family: inherit; resize: none;
}
.edu-gallery-photo-remove {
    font-size: 12px; color: #ff3b30; background: none;
    border: none; cursor: pointer; padding: 4px 0; margin-top: 4px;
}
.edu-gallery-photo-url {
    width: 100%; box-sizing: border-box; margin-bottom: 6px;
    border: 1px solid var(--edu-border); border-radius: 6px;
    padding: 6px 10px; font-size: 12px; font-family: inherit; color: #666;
}

/* Add-section btn */
.edu-add-section-btn {
    width: 100%; padding: 14px;
    border: 2px dashed var(--edu-border); border-radius: var(--edu-radius);
    background: none; cursor: pointer;
    font-size: 14px; color: var(--edu-muted); font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .2s; margin-top: 4px;
}
.edu-add-section-btn:hover { border-color: var(--edu-accent); color: var(--edu-accent); }

/* ── Preview ── */
.edu-preview-notice {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff8e6; border: 1.5px solid #ffe082;
    border-radius: var(--edu-radius); padding: 14px 18px;
    font-size: 14px; margin-bottom: 24px;
}
.edu-preview-notice a { color: var(--edu-accent); }
.edu-preview-frame {
    border: 1.5px solid var(--edu-border); border-radius: 16px;
    overflow: hidden; margin-bottom: 28px;
}
.edu-preview-hero {
    padding: 48px 48px 36px;
    background: linear-gradient(135deg, #0d1b2a 0%, #1b2a3b 100%);
    color: #fff;
}
.edu-preview-type-label {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(255,255,255,.6); margin-bottom: 14px;
}
.edu-preview-title { font-size: 28px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
.edu-preview-subtitle { font-size: 15px; color: rgba(255,255,255,.7); margin-bottom: 24px; }
.edu-preview-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.edu-preview-meta-item { }
.edu-preview-meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); }
.edu-preview-meta-value { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); }
.edu-preview-body { padding: 40px 48px; }
.edu-preview-abstract-label {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--edu-muted); margin-bottom: 10px;
}
.edu-preview-abstract-text {
    font-family: Georgia, serif; font-size: 15px; line-height: 1.8; color: #333;
    margin-bottom: 36px;
}
.edu-preview-toc {
    border: 1px solid var(--edu-border); border-radius: var(--edu-radius);
    padding: 22px 26px; margin-bottom: 40px;
}
.edu-preview-toc-title {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: 12px; color: var(--edu-muted);
}
.edu-preview-toc ol { padding-left: 18px; margin: 0; }
.edu-preview-toc li { font-size: 14px; padding: 3px 0; color: var(--edu-accent); }
.edu-preview-section { margin-bottom: 40px; }
.edu-preview-section-heading {
    font-size: 22px; font-weight: 700;
    padding-bottom: 10px; border-bottom: 2px solid var(--edu-border);
    margin-bottom: 16px;
}
.edu-preview-section-text {
    font-family: Georgia, serif; font-size: 15px; line-height: 1.85;
    color: #2a2a2e; white-space: pre-wrap;
}
.edu-preview-bullets { list-style: none; padding: 0; }
.edu-preview-bullets li {
    font-family: Georgia, serif; font-size: 14px; line-height: 1.7;
    padding: 5px 0 5px 20px; position: relative; color: #2a2a2e;
}
.edu-preview-bullets li::before {
    content: ''; position: absolute; left: 0; top: 13px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--edu-accent);
}

/* ── Form nav ── */
.edu-form-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 32px; padding-top: 24px;
    border-top: 1px solid var(--edu-border);
}
.edu-step-hint { font-size: 13px; color: var(--edu-muted); }
.edu-submit-side { display: flex; gap: 12px; align-items: center; }
.edu-submit-hint { font-size: 13px; color: var(--edu-muted); }

.edu-btn-next, .edu-btn-submit {
    background: var(--edu-accent); color: #fff;
    border: none; border-radius: 10px;
    padding: 11px 24px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: opacity .2s;
}
.edu-btn-next:hover, .edu-btn-submit:hover { opacity: .88; }
.edu-btn-submit { background: #1a7f2e; }
.edu-btn-submit:disabled { opacity: .5; cursor: not-allowed; }
.edu-btn-back {
    background: none; border: 1.5px solid var(--edu-border);
    border-radius: 10px; padding: 10px 20px;
    font-size: 15px; font-weight: 600; color: var(--edu-muted);
    cursor: pointer; transition: border-color .2s;
}
.edu-btn-back:hover { border-color: #aaa; color: var(--edu-text); }

/* ── Messages ── */
.edu-error-msg {
    background: var(--edu-error-bg); border: 1.5px solid #ffc9c9;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
    font-size: 14px; color: #c0392b;
}
.edu-success-msg {
    background: var(--edu-success-bg); border: 1.5px solid #a8d5b5;
    border-radius: 10px; padding: 20px 24px;
    font-size: 16px; font-weight: 600; color: #1a7f2e; text-align: center;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .edu-progress-bar { margin: 0 -12px; }
    .edu-form-wrap { padding: 24px 16px 60px; }
    .edu-field-row, .edu-field-row-3 { grid-template-columns: 1fr; }
    .edu-degree-picker { grid-template-columns: repeat(2, 1fr); }
    .edu-gallery-grid { grid-template-columns: 1fr; }
    .edu-form-nav { flex-direction: column; gap: 12px; align-items: flex-start; }
    .edu-preview-hero, .edu-preview-body { padding: 24px 20px; }
    .edu-preview-title { font-size: 22px; }
    .edu-submit-side { flex-direction: column; align-items: flex-start; }
}