/* =========================================================
   REGISTRATION PAGES — ULTRA-COMPACT MOBILE / TABLET (v2)
   A) Register form page            (.registration-card)
   B) Registration guidelines page  (.registration-page)

   Replaces the earlier registration-mobile.css (same file name, same usage):
       @section Styles {
           <link rel="stylesheet" href="~/css/registration-mobile.css" asp-append-version="true" />
       }
   Every selector is prefixed with .registration-card / .registration-page so
   it beats the views' inline <style>. Desktop (above 991px) is unchanged.
========================================================= */


/* ---------- TABLET + PHONE (up to 991px) ---------- */
@media (max-width: 991.98px) {

    .registration-card .border-top > .col-md-4 {
        width: 100%;
        max-width: 420px;
    }

        .registration-card .border-top > .col-md-4:last-child {
            max-width: none;
            display: flex;
            gap: 8px;
        }

    .registration-card #btnSubmit {
        flex: 1 1 auto;
    }

    .registration-card #btnReset {
        flex: 0 0 auto;
        margin-left: 0 !important;
    }
}


/* =========================================================
   A) REGISTER FORM PAGE — PHONE
========================================================= */
@media (max-width: 767.98px) {

    .registration-card {
        border-radius: 12px;
    }

        .registration-card .registration-header {
            padding: 10px 12px;
        }

            .registration-card .registration-header h3 {
                font-size: 1.05rem;
                line-height: 1.25;
                margin-bottom: 2px;
            }

            .registration-card .registration-header p {
                font-size: .76rem;
                line-height: 1.3;
                margin-bottom: 0;
            }

        .registration-card .card-body {
            padding: 10px;
        }

        /* section titles */
        .registration-card .section-heading {
            margin-top: .6rem;
            margin-bottom: .45rem;
            padding-bottom: 4px;
            font-size: .95rem;
        }

            .registration-card .section-heading p {
                font-size: .72rem;
                font-weight: 400;
                margin-bottom: 0;
            }

        /* fields: tight rows and gutters */
        .registration-card .row {
            --bs-gutter-x: .5rem;
            --bs-gutter-y: 0;
        }

            .registration-card .row > .mb-3 {
                margin-bottom: .4rem !important;
            }

        .registration-card .form-label {
            margin-bottom: .15rem;
            font-size: .8rem;
            font-weight: 600;
            line-height: 1.2;
        }

        /* Inputs stay 16px so iOS does not zoom the page on focus; only padding is cut */
        .registration-card .form-control,
        .registration-card .form-select {
            min-height: 36px;
            padding: .3rem .55rem;
            font-size: 16px;
            border-radius: 8px;
        }

        .registration-card textarea.form-control {
            min-height: 64px;
        }

        .registration-card .form-text,
        .registration-card .invalid-feedback,
        .registration-card .text-danger.field-validation-error {
            font-size: .7rem;
            margin-top: .1rem;
        }

        .registration-card small.text-danger {
            display: block;
            margin-bottom: .4rem !important;
            font-size: .72rem;
            line-height: 1.3;
        }

        /* participation type: first full width, then 2 side by side */
        .registration-card .participation-options {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
        }

            .registration-card .participation-options .participation-option:first-child {
                grid-column: 1 / -1;
            }

            .registration-card .participation-options .form-check-label {
                min-height: 36px;
                padding: 6px 8px 6px 30px;
                font-size: .78rem;
                line-height: 1.25;
            }

            .registration-card .participation-options .form-check-input {
                top: 10px;
                left: 9px;
            }

        /* uploads */
        .registration-card .enterprise-upload-zone {
            padding: 8px 6px;
        }

            .registration-card .enterprise-upload-zone p,
            .registration-card .enterprise-upload-zone small {
                font-size: .72rem;
                margin-bottom: 2px;
            }

        .registration-card #photoViewCard .btn,
        .registration-card #abstractViewCard .btn {
            padding: 5px 10px !important;
        }
        /* still tappable */

        .registration-card #photoFileNameDisplay,
        .registration-card #abstractFileNameDisplay {
            display: inline-block;
            max-width: 120px;
            overflow: hidden;
            vertical-align: bottom;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .76rem;
        }

        /* captcha / declaration / buttons */
        .registration-card .border-top {
            padding-top: .5rem !important;
        }

        .registration-card .form-check.my-3 {
            margin-top: .4rem !important;
            margin-bottom: .5rem !important;
        }

        .registration-card .form-check-label.text-danger {
            font-size: .76rem;
            line-height: 1.3;
        }

        .registration-card #btnSubmit,
        .registration-card #btnReset {
            padding: .5rem .9rem;
            font-size: .92rem;
            min-height: 42px;
        }
}


/* =========================================================
   B) REGISTRATION GUIDELINES PAGE — PHONE
========================================================= */
@media (max-width: 767.98px) {

    .registration-page {
        padding: 8px 0 14px;
    }

        /* hero */
        .registration-page .hero-card {
            border-radius: 12px;
        }

            .registration-page .hero-card .card-body {
                padding: 12px 12px !important;
            }

            .registration-page .hero-card h1 {
                margin-bottom: 4px;
                font-size: clamp(1.15rem, 5.8vw, 1.5rem);
                line-height: 1.2;
            }

            .registration-page .hero-card .lead {
                margin-bottom: 6px;
                font-size: .82rem;
                line-height: 1.35;
            }

                .registration-page .hero-card .lead span {
                    font-size: .72rem !important;
                }

        .registration-page .hero-badge {
            padding: 4px 10px;
            font-size: .64rem;
        }

        /* guideline card */
        .registration-page .section-header {
            padding: 8px 12px;
        }

            .registration-page .section-header h3 {
                font-size: .86rem;
                line-height: 1.25;
                margin-bottom: 0;
            }

        .registration-page .section-card {
            margin-bottom: 10px;
        }

            .registration-page .section-card .card-body {
                padding: 10px 12px !important;
            }

        .registration-page .registration-list {
            padding-left: 16px;
            margin-bottom: 0;
        }

            .registration-page .registration-list li {
                margin-bottom: 6px;
                font-size: .82rem;
                line-height: 1.4;
            }

        /* fee table */
        .registration-page .fees-table th,
        .registration-page .fees-table td {
            padding: 5px 7px;
            font-size: .76rem;
            line-height: 1.3;
        }

        /* agree + proceed */
        .registration-page .register-footer {
            margin-top: 8px;
            padding: 10px;
            border-radius: 12px;
        }

            .registration-page .register-footer .form-check {
                display: block !important;
                margin-bottom: 8px !important;
            }

            .registration-page .register-footer .form-check-label {
                font-size: .8rem;
                line-height: 1.35;
            }

        .registration-page .btn-register {
            width: 100%;
            padding: 10px 14px;
            font-size: .9rem;
        }
}


/* ---------- Very small phones ---------- */
@media (max-width: 360px) {
    .registration-card .participation-options {
        grid-template-columns: 1fr;
    }

        .registration-card .participation-options .participation-option:first-child {
            grid-column: auto;
        }

    .registration-page .fees-table th,
    .registration-page .fees-table td {
        font-size: .72rem;
        padding: 4px 5px;
    }
}