/* ==========================================================
   GNSC 2026 — REGISTRATION PAGE
   Royal Blue / Ocean Competition Design
========================================================== */

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


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --royal: #4169E1;
    --royal-dark: #2348B8;
    --royal-light: #6F8FFF;

    --navy: #071426;
    --navy-2: #0B1D38;
    --navy-3: #102A50;

    --white: #FFFFFF;
    --text: #15233A;
    --muted: #68758A;

    --border: #DCE4F2;
    --soft-blue: #F2F6FF;

    --success: #16A36A;
}


/* ==========================================================
   RESET
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.regpage {

    margin: 0;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(65,105,225,.08),
            transparent 30%
        ),
        #F5F8FD;

    color: var(--text);

    font-family:
        'Barlow',
        Arial,
        sans-serif;

    line-height: 1.5;

    overflow-x: hidden;
}

.regpage a {
    color: inherit;
    text-decoration: none;
}

.regpage button,
.regpage input,
.regpage select {
    font-family: inherit;
}

.regpage .wrap {

    width: min(
        calc(100% - 40px),
        1180px
    );

    margin: 0 auto;
}


/* ==========================================================
   NAVIGATION
   GNSC NAVIGATION BRAND HIDDEN
========================================================== */

.plank-nav {

    position: sticky;

    top: 0;

    z-index: 100;

    background:
        linear-gradient(
            135deg,
            #071426,
            #0B1D38
        );

    border-bottom:
        3px solid var(--royal);

    box-shadow:
        0 8px 30px rgba(0,0,0,.18);
}

.nav-inner {

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: flex-end;
}


/* Hide old GNSC navigation logo */

.plank-brand {
    display: none !important;
}


/* Navigation links */

.nav-links {

    display: flex;

    align-items: center;

    gap: 26px;
}

.nav-links > a {

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

    font-weight: 700;

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.nav-links > a:hover {
    color: white;
}


/* Admin button */

.admin-link {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

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

    border-radius: 8px;

    opacity: .65;
}

.admin-link:hover {

    opacity: 1;

    border-color:
        var(--royal-light);
}


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

.registration-hero {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #071426 0%,
            #0B1D38 48%,
            #163A8C 100%
        );

    color: white;

    padding:
        75px 0
        82px;
}

.registration-hero::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -180px;
    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(65,105,225,.4),
            transparent 65%
        );
}

.registration-hero::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--royal),
            transparent
        );
}

.hero-inner {

    position: relative;

    z-index: 2;
}

.hero-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #AFC0FF;

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-weight: 700;

    font-size: 13px;

    letter-spacing: .2em;

    text-transform: uppercase;

    margin-bottom: 14px;
}

.hero-kicker::before {

    content: "";

    width: 8px;
    height: 8px;

    background:
        var(--royal-light);

    border-radius: 50%;

    box-shadow:
        0 0 15px var(--royal);
}

.registration-hero h1 {

    margin: 0;

    max-width: 850px;

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-size:
        clamp(
            54px,
            9vw,
            105px
        );

    font-weight: 900;

    line-height: .82;

    letter-spacing: -.025em;
}

.registration-hero h1 span {

    display: block;

    color:
        var(--royal-light);
}

.registration-hero p {

    max-width: 650px;

    margin:
        25px 0 0;

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

    font-size: 17px;

    line-height: 1.7;
}


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

.form-wrap {

    padding:
        55px 0
        90px;
}


/* ==========================================================
   MAIN REGISTRATION CARD
========================================================== */

.registration-card {

    width: min(
        100%,
        850px
    );

    margin: 0 auto;

    background:
        white;

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

    border-radius:
        16px;

    overflow:
        hidden;

    box-shadow:
        0 25px 80px
        rgba(7,20,38,.1);
}


/* ==========================================================
   CARD HEADER
========================================================== */

.card-header {

    padding:
        34px 38px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        25px;

    background:
        linear-gradient(
            135deg,
            #F8FAFF,
            #EEF3FF
        );

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

.section-kicker {

    color:
        var(--royal);

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-weight:
        800;

    font-size:
        12px;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    margin-bottom:
        5px;
}

.card-header h2 {

    margin: 0;

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-size:
        34px;

    font-weight:
        900;

    text-transform:
        uppercase;

    color:
        var(--navy);
}

.card-header p {

    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        14px;
}


/* ==========================================================
   SISA LOGO
   CIRCULAR + ZOOMED
========================================================== */

/* ==========================================================
   SISA LOGO — CIRCLE / FULL COVER
========================================================== */

.event-badge {
    flex-shrink: 0;

    width: 72px;
    height: 72px;

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

    border-radius: 50%;

    background: transparent;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(65,105,225,.18);

    padding: 0;
}

.event-badge img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


/* ==========================================================
   CARD BODY
========================================================== */

.card-body {

    padding:
        38px;
}


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

.error-box {

    margin-bottom:
        30px;

    padding:
        18px 20px;

    border:
        1px solid #E6A34A;

    border-left:
        5px solid #E6A34A;

    background:
        #FFF9EE;

    border-radius:
        8px;

    color:
        #704B13;
}

.error-title {

    font-weight:
        800;

    text-transform:
        uppercase;

    font-size:
        13px;

    letter-spacing:
        .06em;
}

.error-box ul {

    margin:
        8px 0 0;

    padding-left:
        20px;
}


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

.form-section {

    padding-bottom:
        38px;

    margin-bottom:
        38px;

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

.form-section:last-of-type {

    border-bottom:
        0;

    margin-bottom:
        0;
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.section-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        25px;
}

.section-number {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        var(--soft-blue);

    color:
        var(--royal);

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-weight:
        900;

    font-size:
        17px;
}

.section-heading h3 {

    margin:
        0;

    color:
        var(--navy);

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-size:
        24px;

    font-weight:
        900;

    text-transform:
        uppercase;
}

.section-heading p {

    margin:
        2px 0 0;

    color:
        var(--muted);

    font-size:
        13px;
}


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

.form-grid {

    display:
        grid;

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

    gap:
        20px;
}

.form-group {

    min-width:
        0;
}

.form-group.full {

    grid-column:
        1 / -1;
}


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

.form-group label,
.upload-group > label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #263A58;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .07em;
}

.form-group label span,
.upload-group label span {

    color:
        var(--royal);
}


/* ==========================================================
   INPUTS
========================================================== */

.form-group input,
.form-group select {

    width:
        100%;

    height:
        48px;

    padding:
        0 14px;

    border:
        1.5px solid #A9BAD9;

    border-radius:
        8px;

    background:
        #F6F8FC;

    color:
        var(--text);

    font-size:
        15px;

    outline:
        none;

    box-shadow:
        inset 0 1px 2px
        rgba(21,35,58,.05);

    transition:
        .2s ease;
}

.form-group input:hover,
.form-group select:hover {

    border-color:
        #7E93C4;
}

.form-group input:focus,
.form-group select:focus {

    border-color:
        var(--royal);

    background:
        white;

    box-shadow:
        0 0 0 4px
        rgba(65,105,225,.1);
}

.field-hint {

    margin:
        7px 0 0;

    color:
        #7B8799;

    font-size:
        12px;
}


/* ==========================================================
   EVENT LIST
========================================================== */

.event-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}

.event-card {

    border:
        1px solid #D9E2F0;

    border-radius:
        12px;

    background:
        #FBFCFF;

    overflow:
        hidden;

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

.event-card:has(.event-toggle:checked) {

    border-color:
        var(--royal);

    box-shadow:
        0 8px 30px
        rgba(65,105,225,.1);
}


/* ==========================================================
   EVENT MAIN ROW
========================================================== */

.event-main {

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        15px 18px;
}

.event-select {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    cursor:
        pointer;

    min-width:
        0;
}

.event-select input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


/* ==========================================================
   CUSTOM CHECKBOX
========================================================== */

.custom-check {

    width:
        23px;

    height:
        23px;

    flex-shrink:
        0;

    border:
        2px solid #B9C7DD;

    border-radius:
        6px;

    background:
        white;

    position:
        relative;

    transition:
        .18s ease;
}

.event-select input:checked
+ .custom-check {

    border-color:
        var(--royal);

    background:
        var(--royal);
}

.event-select input:checked
+ .custom-check::after {

    content:
        "";

    position:
        absolute;

    width:
        6px;

    height:
        11px;

    left:
        7px;

    top:
        3px;

    border:
        solid white;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg);
}


/* ==========================================================
   EVENT NAME
========================================================== */

.event-name {

    color:
        var(--navy);

    font-weight:
        700;

    font-size:
        15px;

    line-height:
        1.35;
}


/* ==========================================================
   EVENT FEE
========================================================== */

.event-fee {

    flex-shrink:
        0;

    padding:
        5px 9px;

    border-radius:
        5px;

    background:
        var(--soft-blue);

    color:
        var(--royal);

    font-size:
        12px;

    font-weight:
        800;
}


/* ==========================================================
   SHORTBOARD CATEGORY
========================================================== */

.event-options {

    display:
        none;

    padding:
        18px;

    border-top:
        1px dashed #D6E0EF;

    background:
        #F7F9FF;
}

.event-options.show {

    display:
        block;
}

.options-title {

    margin-bottom:
        12px;

    color:
        var(--royal);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}

.category-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        10px;
}

.category-option {

    cursor:
        pointer;
}

.category-option input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}

.category-box {

    min-height:
        72px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        12px;

    border:
        1px solid #D5DFEE;

    border-radius:
        8px;

    background:
        white;

    transition:
        .18s ease;
}

.category-box strong {

    color:
        var(--navy);

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-size:
        17px;

    text-transform:
        uppercase;
}

.category-box small {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        11px;
}

.category-option:hover .category-box {

    border-color:
        var(--royal-light);
}

.category-option input:checked
+ .category-box {

    border-color:
        var(--royal);

    background:
        #EEF3FF;

    box-shadow:
        inset 0 0 0 1px
        var(--royal);
}

.category-option input:checked
+ .category-box strong {

    color:
        var(--royal);
}


/* ==========================================================
   LONGBOARD
========================================================== */

.longboard-notice {

    display:
        none;

    align-items:
        center;

    gap:
        12px;

    margin:
        0 18px 18px;

    padding:
        13px 15px;

    border-radius:
        8px;

    background:
        #EEF3FF;

    border:
        1px solid #D5E0F5;
}

.event-toggle:checked
~ .longboard-notice {

    display:
        flex;
}

.board-icon {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        var(--royal);
}

.longboard-notice strong {

    display:
        block;

    color:
        var(--royal);

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-size:
        16px;
}

.longboard-notice small {

    display:
        block;

    color:
        var(--muted);

    font-size:
        11px;
}


/* ==========================================================
   SELECTION NOTE
========================================================== */

.selection-note {

    margin-top:
        15px;

    padding:
        14px 16px;

    border-radius:
        8px;

    background:
        #F5F8FF;

    color:
        #617087;

    font-size:
        12px;

    line-height:
        1.6;
}

.selection-note strong {

    color:
        var(--royal);
}

.selection-note span {

    color:
        #7C8797;
}


/* ==========================================================
   DOCUMENT UPLOAD
========================================================== */

.upload-group {

    margin-bottom:
        25px;
}

.upload-box {

    position:
        relative;

    min-height:
        125px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px dashed #A9BAD9;

    border-radius:
        10px;

    background:
        #F6F8FC;

    transition:
        .2s ease;

    overflow:
        hidden;
}

.upload-box:hover {

    border-color:
        var(--royal);

    background:
        #F5F8FF;
}

.upload-box input {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    opacity:
        0;

    cursor:
        pointer;
}

.upload-content {

    text-align:
        center;

    pointer-events:
        none;

    padding:
        15px;
}

.upload-icon {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 7px;

    border-radius:
        9px;

    background:
        #EAF0FF;

    color:
        var(--royal);

    font-size:
        20px;

    font-weight:
        800;
}

.upload-content strong {

    display:
        block;

    color:
        #30415B;

    font-size:
        14px;
}

.upload-content small {

    display:
        block;

    margin-top:
        3px;

    color:
        #8A96A8;

    font-size:
        11px;
}


/* ==========================================================
   WAIVER DOWNLOAD
========================================================== */

.waiver-download {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        45px;

    margin-bottom:
        10px;

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

    border-radius:
        8px;

    background:
        white;

    color:
        var(--royal);

    font-size:
        13px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;

    transition:
        .18s ease;
}

.waiver-download:hover {

    background:
        var(--royal);

    color:
        white;
}


/* ==========================================================
   AGREEMENT
========================================================== */

.agreement {

    padding:
        18px;

    margin-top:
        10px;

    border:
        1px solid #DDE5F1;

    border-radius:
        10px;

    background:
        #F8FAFD;
}

.agreement-check {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    cursor:
        pointer;

    color:
        #59677B;

    font-size:
        13px;

    line-height:
        1.6;
}

.agreement-check input {

    position:
        absolute;

    opacity:
        0;
}

.agreement-check .custom-check {

    margin-top:
        1px;
}

.agreement-check input:checked
+ .custom-check {

    background:
        var(--royal);

    border-color:
        var(--royal);
}

.agreement-check input:checked
+ .custom-check::after {

    content:
        "";

    position:
        absolute;

    width:
        6px;

    height:
        11px;

    left:
        7px;

    top:
        3px;

    border:
        solid white;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg);
}

.agreement-check b {

    color:
        var(--royal);
}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.btn-submit {

    width:
        100%;

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    margin-top:
        22px;

    border:
        0;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            var(--royal),
            var(--royal-dark)
        );

    color:
        white;

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-size:
        21px;

    font-weight:
        900;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    box-shadow:
        0 10px 30px
        rgba(65,105,225,.25);

    transition:
        .2s ease;
}

.btn-submit b {

    font-size:
        25px;

    transition:
        .2s ease;
}

.btn-submit:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(65,105,225,.35);
}

.btn-submit:hover b {

    transform:
        translateX(5px);
}

.secure-note {

    text-align:
        center;

    margin:
        13px 0 0;

    color:
        #8995A7;

    font-size:
        11px;
}


/* ==========================================================
   FOOTER
========================================================== */

/* ==========================================================
   FOOTER
========================================================== */

.plank-footer {

    padding: 48px 0 42px;

    background: var(--navy);

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

}


/* ==========================================================
   FOOTER INNER
========================================================== */

.footer-inner {

    max-width: 850px;

    margin: 0 auto;

}


/* ==========================================================
   ORGANIZED BY
========================================================== */

.footer-organized {

    padding-bottom: 30px;

}


.organized-title {

    margin-bottom: 17px;

    color: #5F8CFF;

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;

}


/* ==========================================================
   ORGANIZER LOGOS
========================================================== */

.organized-logos {

    display: flex;

    align-items: center;

    gap: 12px;

    height: 58px;

    padding: 10px 14px;

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

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

    border-radius: 12px;

    box-shadow: 0 2px 10px rgba(0,0,0,.3);

}


/* Province seal */

.organized-logos .province-logo {

    width: 58px;

    height: 58px;

    display: block;

    object-fit: contain;

    border-radius: 50%;

}


/* SISA — keep genuinely transparent, no white/circular treatment */

.organized-logos .sisa-logo {

    width: 58px;

    height: 58px;

    display: block;

    object-fit: contain;

    border-radius: 0;

    background: transparent;

    border: 0;

    box-shadow: none;

}


/* ==========================================================
   ORGANIZER NAME
========================================================== */

.organized-name {

    margin-top: 10px;

    color: #AEB9CC;

    font-family:
        'Barlow',
        sans-serif;

    font-size: 15px;

    font-weight: 400;

}


/* ==========================================================
   FOOTER DIVIDER
========================================================== */

.footer-divider {

    width: 100%;

    height: 1px;

    margin: 0 0 30px;

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

}


.footer-divider-bottom {

    margin:

        30px 0 15px;

}


/* ==========================================================
   EVENT BRAND
========================================================== */

.footer-brand {

    color: white;

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-weight: 900;

    font-size: 30px;

    letter-spacing: .045em;

    line-height: 1.1;

}


.footer-sub {

    margin-top: 7px;

    color: #5F8CFF;

    font-family:
        'Barlow Condensed',
        sans-serif;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .16em;

}


/* ==========================================================
   COPYRIGHT
========================================================== */

.footer-copy {

    margin-top: 0;

    padding-top: 0;

    border-top: 0;

    color: #A5B0C1;

    font-size: 12px;

}


/* ==========================================================
   MOBILE FOOTER
========================================================== */

@media (max-width: 560px) {

    .plank-footer {

        padding:
            38px 0
            30px;

    }


    .footer-organized {

        padding-bottom:
            24px;

    }


    .organized-title {

        font-size:
            12px;

        margin-bottom:
            14px;

    }


    .organized-logos {

        height:
            52px;

        gap:
            10px;

    }


    .organized-logos .province-logo,
    .organized-logos .sisa-logo {

        width:
            52px;

        height:
            52px;

    }


    .organized-name {

        margin-top:
            9px;

        font-size:
            13px;

    }


    .footer-divider {

        margin-bottom:
            24px;

    }


    .footer-divider-bottom {

        margin:
            24px 0
            13px;

    }


    .footer-brand {

        font-size:
            22px;

        line-height:
            1.15;

    }


    .footer-sub {

        margin-top:
            6px;

        font-size:
            11px;

    }


    .footer-copy {

        font-size:
            10px;

    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .plank-footer {

        padding:
            32px 0
            27px;

    }


    .organized-logos {

        height:
            48px;

        gap:
            9px;

    }


    .organized-logos .province-logo,
    .organized-logos .sisa-logo {

        width:
            48px;

        height:
            48px;

    }


    .organized-name {

        font-size:
            12px;

    }


    .footer-brand {

        font-size:
            20px;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 760px) {

    .registration-hero {

        padding:
            60px 0
            65px;
    }

    .card-header {

        padding:
            28px;
    }

    .card-body {

        padding:
            28px;
    }

    .form-grid {

        grid-template-columns:
            1fr;
    }

    .form-group.full {

        grid-column:
            auto;
    }

    .category-grid {

        grid-template-columns:
            1fr;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 560px) {

    .regpage .wrap {

        width:
            min(
                calc(100% - 24px),
                1180px
            );
    }


    /* Navigation */

    .nav-inner {

        min-height:
            64px;

        justify-content:
            flex-end;
    }


    .nav-links {

        gap:
            12px;
    }


    .nav-links > a:first-child {

        display:
            none;
    }


    /* Hero */

    .registration-hero {

        padding:
            48px 0
            55px;
    }

    .registration-hero h1 {

        font-size:
            clamp(
                48px,
                15vw,
                72px
            );
    }

    .registration-hero p {

        font-size:
            14px;
    }


    /* Form */

    .form-wrap {

        padding:
            25px 0
            55px;
    }

    .registration-card {

        border-radius:
            12px;
    }


    /* Card header */

    .card-header {

        padding:
            23px 20px;
    }

    .card-header h2 {

        font-size:
            28px;
    }

    .card-header p {

        font-size:
            12px;
    }


    /* ======================================================
       MOBILE SISA LOGO
    ====================================================== */

    .event-badge {

        width:
            58px;

        height:
            58px;

        border-width:
            2px;

        flex-shrink:
            0;
    }

    .event-badge img {

        width:
            130%;

        height:
            130%;

        max-width:
            none;

        object-fit:
            cover;
    }


    /* Card body */

    .card-body {

        padding:
            22px 20px;
    }


    /* Section heading */

    .section-heading {

        align-items:
            flex-start;
    }

    .section-heading h3 {

        font-size:
            21px;
    }

    .section-number {

        width:
            35px;

        height:
            35px;

        font-size:
            15px;
    }


    /* Events */

    .event-main {

        align-items:
            flex-start;

        padding:
            15px;
    }

    .event-name {

        font-size:
            14px;
    }

    .event-fee {

        font-size:
            10px;
    }


    /* Categories */

    .category-box {

        min-height:
            62px;
    }


    /* Submit */

    .btn-submit {

        min-height:
            55px;

        font-size:
            19px;
    }
}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .brand-name {

        font-size:
            16px;
    }

    .brand-name small {

        font-size:
            8px;
    }

    .card-header {

        align-items:
            center;
    }


    /* Keep SISA visible */

    .event-badge {

        display:
            flex;

        width:
            54px;

        height:
            54px;
    }

    .event-badge img {

        width:
            135%;

        height:
            135%;
    }


    .registration-hero h1 {

        font-size:
            46px;
    }

    .event-main {

        gap:
            8px;
    }

    .event-fee {

        display:
            none;
    }
}