/* ==========================================================
   STUST Website Update Suggestions - Applied Modern Theme
   Final direction: off-white / navy / muted blue / gold accent
   Scope: #form1 / .modern-suggestion-page
   ========================================================== */

:root {
    --stust-navy-900: #0f2f55;
    --stust-navy-800: #173f6a;
    --stust-navy-700: #245487;
    --stust-blue-500: #4f82bf;
    --stust-blue-300: #9fc0e6;
    --stust-blue-100: #eaf2fb;
    --stust-blue-050: #f4f8fc;
    --stust-gold: #cd9f6f;
    --stust-gold-soft: #cd9f6f; /*#f5e6c5*/
    ;
    --surface: #ffffff;
    --page-bg: #f3f6fa;
    --text: #16314f;
    --text-2: #6a747e; /*#5b7392;*/
    --text-3: #8ca0ba;
    --border: #c9d7e8;
    --border-focus: #3c70ae;
    --error: #c94747;
    --success: #33825c;
    --card-shadow: 0 24px 64px rgba(25, 55, 94, 0.10);
    --control-shadow: 0 0 0 4px rgba(36, 84, 135, 0.10);
    --radius-card: 28px;
    --radius-control: 13px;
    --radius-notice: 12px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
    background: radial-gradient(circle at 11% 56%, rgba(83, 132, 194, .18) 0 10.5rem, transparent 10.7rem), radial-gradient(circle at 96% 78%, rgba(28, 68, 118, .20) 0 14rem, transparent 14.2rem), linear-gradient(132deg, rgba(255,255,255,.72), rgba(228,237,248,.42) 48%, rgba(255,255,255,.72)), var(--page-bg);
}

    body::before,
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }

    body::before {
        background: linear-gradient(138deg, transparent 0 16%, rgba(36,84,135,.035) 16% 29%, transparent 29% 49%, rgba(36,84,135,.028) 49% 65%, transparent 65%), linear-gradient(40deg, transparent 0 72%, rgba(79,130,191,.045) 72% 82%, transparent 82%);
    }

    body::after {
        background: radial-gradient(circle at 96% 5%, rgba(20,56,101,.88) 0 7.2rem, transparent 7.35rem), radial-gradient(circle at -1% 92%, rgba(24,63,111,.82) 0 10rem, transparent 10.2rem);
        opacity: .95;
    }

/* Keep ASP.NET hidden fields / postback mechanics untouched. */
#form1 {
    position: relative;
    z-index: 1;
}

.aspNetHidden {
    display: none;
}

.modern-suggestion-page {
    position: relative;
    width: min(100%, 1680px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 46px 34px 58px;
}

    /* Decorative dots */
    .modern-suggestion-page::before,
    .modern-suggestion-page::after {
        content: "";
        position: absolute;
        width: 116px;
        height: 94px;
        background-image: radial-gradient(rgba(36,84,135,.22) 1.6px, transparent 1.7px);
        background-size: 19px 19px;
        pointer-events: none;
    }

    .modern-suggestion-page::before {
        left: 46px;
        top: 90px;
    }

    .modern-suggestion-page::after {
        right: 48px;
        bottom: 106px;
    }

/* Side copy is decorative only and disappears before tablet widths. */
.suggestion-side {
    position: absolute;
    top: 105px;
    width: 250px;
    color: var(--text-2);
    z-index: 1;
}

.suggestion-side--left {
    left: 44px;
}

.suggestion-side--right {
    right: 38px;
    top: 216px;
}

.suggestion-side .hero-copy {
    margin: 0;
    font-size: clamp(2.8rem, 4.25vw, 4.9rem);
    line-height: .95;
    font-weight: 750;
    letter-spacing: -.045em;
    color: rgba(39,83,137,.58);
}

    .suggestion-side .hero-copy .accent {
        color: var(--stust-gold);
    }

.suggestion-side .side-rule {
    width: 46px;
    height: 3px;
    margin: 19px 0 20px;
    border-radius: 999px;
    background: var(--stust-gold);
}

.suggestion-side p {
    margin: 0;
}

.suggestion-side .side-zh {
    font-size: 1.12rem;
    line-height: 1.68;
    font-weight: 700;
    color: var(--stust-navy-800);
}

.suggestion-side .side-en {
    margin-top: 10px;
    font-size: .98rem;
    line-height: 1.55;
    color: #5b7392;
    /*color: var(--text-2);*/
}

.suggestion-side .quote-mark {
    font: 700 5.7rem/1 Georgia, serif;
    color: rgb(205 159 111);
    /*color: rgba(215,166,78,.92); */
    margin-bottom: 3px;
}

.suggestion-side .stust-disc {
    margin-top: 156px;
    width: 250px;
    height: 250px;
    margin-left: auto;
    padding: 56px 48px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #234f82, #0f315b 78%);
    box-shadow: 0 24px 55px rgba(15,47,85,.12);
    position: relative;
    overflow: hidden;
}

    .suggestion-side .stust-disc::after {
        content: "";
        position: absolute;
        inset: 14px;
        border: 1.5px solid rgba(215,166,78,.82);
        border-radius: 50%;
    }

    .suggestion-side .stust-disc strong,
    .suggestion-side .stust-disc span {
        position: relative;
        z-index: 1;
        display: block;
    }

    .suggestion-side .stust-disc strong {
        font-size: 1.7rem;
        letter-spacing: .2em;
        margin-bottom: 22px;
        color: #cd9f6f; /*margin-bottom: 22px;*/
    }

    .suggestion-side .stust-disc span {
        font-size: .9rem;
        line-height: 1.8;
        letter-spacing: .24em;
    }

/* Main card */
.suggestion-card {
    position: relative;
    z-index: 2;
    width: min(900px, calc(100% - 560px));
    min-width: 700px;
    margin: 0 auto;
    padding: 42px 50px 44px;
    background: rgba(255,255,255,.965);
    border: 1px solid rgba(195,210,228,.68);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(7px);
}

.suggestion-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 22px;
    /*margin-bottom: 18px;*/
}

    .suggestion-title-row h1 {
        margin: 0;
        color: var(--stust-navy-900);
        font-size: clamp(2rem, 36px, 2.85rem);
        /*font-size: clamp(2rem, 3vw, 2.85rem);*/
        line-height: 1.12;
        font-weight: 700;
        /*font-weight: 800;*/
        letter-spacing: -.035em;
    }

.suggestion-title-divider {
    width: 2px;
    height: 42px;
    flex: 0 0 2px;
    background: var(--stust-gold);
    border-radius: 999px;
}

.suggestion-title-en {
    color: var(--stust-navy-900);
    font-size: clamp(1.25rem, 22px, 1.65rem);
    /*font-size: clamp(1.25rem, 1.8vw, 1.65rem);*/
    line-height: 1.5;
    /*  line-height: 1.2;*/
    font-weight: 300;
    /*font-weight: 650;*/
}

.suggestion-intro {
    margin-bottom: 26px;
    padding: 18px 18px 18px 22px;
    border: 1px solid #c6daef;
    border-radius: var(--radius-notice);
    background: linear-gradient(180deg, #f1f7fe, #eaf3fd)
}

    .suggestion-intro p {
        margin: 0;
    }

    .suggestion-intro .intro-zh {
        color: var(--stust-navy-800);
        font-size: 1rem;
        line-height: 1.75;
        font-weight: 400;
        /*font-weight: 650;*/
    }

    .suggestion-intro .intro-en {
        margin-top: 5px;
        color: var(--text-2);
        font-size: .95rem;
        /*font-size: .95rem;*/
        line-height: 1.58;
        font-weight: 400;
    }

.suggestion-field {
    margin: 0 0 19px;
}

.suggestion-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 10px;
    color: var(--stust-navy-900);
    cursor: pointer;
}

.field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: linear-gradient(180deg, #eff6ff, #dceafa);
    color: var(--stust-navy-800);
}

    .field-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

.suggestion-label .label-zh {
    font-size: 1rem;
    font-weight: 600; /*font-size: 1rem; font-weight: 750;*/
}

.suggestion-label .label-rule {
    width: 42px;
    height: 1px;
    background: rgba(36,84,135,.45);
}

.suggestion-label .label-en {
    color: var(--text-2);
    font-size: .96rem;
    font-weight: 400; /*font-weight: 500;*/
}

.required-mark {
    color: var(--error);
    margin-left: 4px;
}

/* Exact original control IDs. !important is intentional: old page uses inline width/height. */
#TextBox1,
#TextBox3,
#DropDownList1,
#TextBox5 {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-control) !important;
    background: #fff;
    color: var(--text);
    font: 400 1rem/1.4 inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#TextBox1,
#TextBox3,
#DropDownList1 {
    height: 52px !important;
    padding: 0 16px !important;
}

#TextBox5 {
    height: auto !important;
    min-height: 132px !important;
    padding: 15px 16px !important;
    line-height: 1.65 !important;
    resize: vertical;
}

    #TextBox1::placeholder,
    #TextBox3::placeholder,
    #TextBox5::placeholder {
        color: var(--text-3);
        opacity: 1;
    }

    #TextBox1:hover,
    #TextBox3:hover,
    #DropDownList1:hover,
    #TextBox5:hover {
        border-color: #aebfd3 !important;
    }

    #TextBox1:focus,
    #TextBox3:focus,
    #DropDownList1:focus,
    #TextBox5:focus,
    #TextBox1:focus-visible,
    #TextBox3:focus-visible,
    #DropDownList1:focus-visible,
    #TextBox5:focus-visible {
        border-color: var(--border-focus) !important;
        box-shadow: var(--control-shadow);
    }

#DropDownList1 {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 48px !important;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, var(--stust-navy-800) 50%), linear-gradient(135deg, var(--stust-navy-800) 50%, transparent 50%);
    background-position: calc(100% - 23px) calc(50% - 3px), calc(100% - 17px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.student-notice {
    display: grid;
    grid-template-columns: 1fr 112px;
    align-items: center;
    gap: 18px;
    margin: -2px 0 20px;
    padding: 18px 18px 18px 22px;
    border: 1px solid #c6daef;
    border-radius: var(--radius-notice);
    background: radial-gradient(circle at 92% 50%, rgba(79,130,191,.10) 0 56px, transparent 57px), linear-gradient(180deg, #f1f7fe, #eaf3fd);
}

    .student-notice p {
        margin: 0;
    }

    .student-notice .notice-zh {
        color: var(--stust-navy-900);
        font-size: .98rem;
        line-height: 1.65;
        font-weight: 500;
        /*font-weight: 700;*/
    }

    .student-notice .notice-en {
        margin-top: 5px;
        color: var(--text-2);
        font-size: .91rem;
        line-height: 1.5;
    }

    .student-notice a {
        color: #1454b3;
        font-weight: 600; /*font-weight: 800;*/
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.notice-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(180deg, #265995, #123a69);
    color: #fff;
    font: 800 2.8rem/1 Arial, sans-serif;
    box-shadow: 0 10px 24px rgba(17,57,104,.16);
}

.captcha-actions {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 20px;
    align-items: end;
    margin-top: 3px;
}

.captcha-shell {
    min-width: 0;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* Remove old inline 0.85 scale so the native widget remains legible. */
.g-recaptcha {
    transform: none !important;
    -webkit-transform: none !important;
    transform-origin: 0 0 !important;
}

.form-actions {
    display: grid;
    grid-template-columns: 150px minmax(220px, 1fr);
    gap: 14px;
    align-items: center;
}

#Button1,
#Button3 {
    appearance: none;
    -webkit-appearance: none;
    height: 52px;
    margin: 0 !important;
    padding: 0 20px;
    border-radius: 14px;
    font-family: inherit;
    font-size: .98rem;
    font-weight: 750;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

#Button3 {
    color: var(--stust-navy-800);
    background: #fff;
    border: 1px solid #b9c9dc;
    box-shadow: 0 5px 14px rgba(17,57,104,.05);
}

    #Button3:hover {
        border-color: var(--stust-navy-700);
        background: #f8fbff;
    }

#Button1 {
    color: #fff;
    background: linear-gradient(135deg, #22578f, #0f315a);
    border: 1px solid transparent;
    box-shadow: 0 9px 22px rgba(15,49,90,.18);
}

    #Button1:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 25px rgba(15,49,90,.23);
    }

    #Button1:active,
    #Button3:active {
        transform: translateY(0);
    }

    #Button1:focus-visible,
    #Button3:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(36,84,135,.14);
    }

/* jQuery Validate. Keep real labels visible; only error labels use these classes. */
label.error,
.field-error {
    display: block;
    margin: 7px 0 0 !important;
    padding: 8px 11px;
    color: var(--error) !important;
    background: rgba(201,71,71,.055) !important;
    border: 1px solid rgba(201,71,71,.16);
    border-radius: 9px;
    font-size: .88rem;
    line-height: 1.4;
    background-image: none !important;
}

label.valid {
    display: none !important;
    background-image: none !important;
}

input.error,
select.error,
textarea.error {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 4px rgba(201,71,71,.07);
}

/* Old saved layout classes are neutralized only inside this page. */
#form1 .body,
#form1 .wrap,
#form1 .banner,
#form1 .title,
#form1 .content,
#form1 .footer {
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}

#BannerImage {
    display: none !important;
}

/* Accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}



/* ==========================================================
   jQuery Validate 錯誤提示與驗證樣式修正
   ========================================================== */

/* 1. 當輸入框驗證失敗時，外框變紅並加上淡紅色微光 */
input.error,
select.error,
textarea.error {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px rgba(201, 71, 71, 0.15) !important;
}

/* 2. 錯誤提示訊息標籤 (label.error) */
label.error,
.field-error {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 8px 0 0 0 !important;
    padding: 8px 12px !important;
    color: #c94747 !important;
    background-color: #fdf2f2 !important;
    border: 1px solid rgba(201, 71, 71, 0.25) !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    font-weight: 500;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

    /* 3. 使用純 CSS 畫出前方的 ⚠️ 警告圖示，不依賴外部圖片 */
    label.error::before {
        content: "⚠️";
        font-size: 0.9rem;
        flex-shrink: 0;
    }

/* 4. 隱藏成功的 label */
label.valid {
    display: none !important;
}

@media (max-width: 1360px) {
    .suggestion-side {
        display: none;
    }

    .suggestion-card {
        width: min(900px, 100%);
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .modern-suggestion-page {
        padding: 26px 20px 40px;
    }

    .suggestion-card {
        padding: 34px 30px 36px;
    }

    .captcha-actions {
        grid-template-columns: 1fr;
    }

    .form-actions {
        grid-template-columns: 1fr 1.5fr;
    }
}

@media (max-width: 680px) {
    .modern-suggestion-page {
        padding: 14px 12px 28px;
    }

    .suggestion-card {
        padding: 26px 18px 26px;
        border-radius: 22px;
    }

    .suggestion-title-row {
        gap: 10px 14px;
    }

        .suggestion-title-row h1 {
            font-size: 2rem;
            width: 100%;
        }

    .suggestion-title-divider {
        width: 42px;
        height: 2px;
        flex: 0 0 42px;
    }

    .suggestion-title-en {
        font-size: 1.2rem;
    }

    .suggestion-label {
        gap: 9px;
    }

    .field-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .suggestion-label .label-rule {
        width: 26px;
    }

    .student-notice {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .notice-icon-wrap {
        justify-content: flex-start;
    }

    .notice-icon {
        width: 62px;
        height: 62px;
        font-size: 2.25rem;
    }

    .form-actions {
        grid-template-columns: 1fr;
    }

    #Button1,
    #Button3 {
        width: 100%;
    }

    .captcha-shell {
        overflow-x: auto;
    }
}

@media (max-width: 430px) {
    .suggestion-card {
        padding: 22px 15px;
    }

    .suggestion-intro .intro-zh {
        font-size: .96rem;
    }

    .suggestion-intro .intro-en {
        font-size: .9rem;
    }

    .suggestion-label .label-rule {
        display: none;
    }

    .suggestion-label .label-en {
        width: calc(100% - 46px);
        margin-left: 46px;
        margin-top: -6px;
    }

    #TextBox1,
    #TextBox3,
    #DropDownList1 {
        height: 50px !important;
        font-size: 16px;
    }

    #TextBox5 {
        min-height: 120px !important;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}