* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    background: #f5f3ef;
    color: #282828;
}


.page {
    width: 100%;
    min-height: 100vh;

    padding:
            32px
            16px;
}


.card {
    width: 100%;
    max-width: 680px;

    margin:
            0
            auto;

    padding: 36px;

    background: white;

    border-radius: 16px;

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


.header {
    margin-bottom: 36px;
}


.eyebrow {
    margin:
            0
            0
            8px;

    font-size: 0.8rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.12em;

    color: #777;
}


h1 {
    margin:
            0
            0
            12px;

    font-size:
            2.1rem;

    font-weight:
            600;
}


.intro {
    margin: 0;

    line-height:
            1.6;

    color:
            #666;
}


.form-section {
    margin-bottom:
            30px;
}


/* =========================================================
   ANONYMOUS OPTION
   ========================================================= */

.anonymous-option {
    margin-bottom: 18px;
}

.anonymous-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    font-weight: bold;

    cursor: pointer;
}

.anonymous-label input {
    width: 18px;
    height: 18px;

    margin: 0;

    cursor: pointer;
}

.identity-section[hidden] {
    display: none;
}


label {
    display:
            block;

    margin-bottom:
            8px;

    font-size:
            1rem;

    font-weight:
            600;
}


.field-status {
    margin-left: 4px;
    color: #888;
    font-size: 0.82rem;
    font-weight: 400;
}


.helper {
    margin:
            4px
            0
            0;

    font-size:
            0.9rem;

    font-weight:
            normal;

    color:
            #777;
}


input[type="text"],
textarea {
    width:
            100%;

    padding:
            14px;

    border:
            1px
            solid
            #d4d1cc;

    border-radius:
            10px;

    font:
            inherit;

    background:
            #fff;
}


input[type="text"]:focus,
textarea:focus {
    outline:
            2px
            solid
            #999;

    outline-offset:
            1px;
}


textarea {
    resize:
            vertical;

    min-height:
            130px;
}


.section-heading {
    display:
            flex;

    justify-content:
            space-between;

    align-items:
            flex-start;

    gap:
            20px;

    margin-bottom:
            14px;
}


.photo-count {
    white-space:
            nowrap;

    font-size:
            0.9rem;

    color:
            #777;
}


/* =========================================================
   PERSONAL PHOTO
   ========================================================= */

.photo-picker {
    position:
            relative;

    display:
            flex;

    width:
            150px;

    aspect-ratio:
            1 / 1;

    height:
            auto;

    flex-direction:
            column;

    justify-content:
            center;

    align-items:
            center;

    gap:
            8px;

    overflow:
            hidden;

    border:
            2px
            dashed
            #cac6bf;

    border-radius:
            12px;

    cursor:
            pointer;

    font-size:
            0.9rem;

    font-weight:
            normal;

    color:
            #666;

    background:
            #faf9f7;
}


.photo-picker:hover {
    border-color:
            #aaa69f;

    background:
            #f4f2ee;
}


.personal-photo-preview {
    display:
            none;

    width:
            100%;

    height:
            100%;

    object-fit:
            cover;
}


#personalPhotoPlaceholder {
    width:
            100%;

    height:
            100%;

    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;

    justify-content:
            center;

    gap:
            8px;
}


.plus {
    font-size:
            2rem;

    line-height:
            1;

    font-weight:
            300;
}


.personal-photo-button {
    margin-top:
            14px;
}


/* =========================================================
   MEMORIAL PHOTO GRID
   ========================================================= */

.photo-grid {
    display:
            grid;

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

    gap:
            10px;

    margin-bottom:
            14px;
}


.photo-slot {
    position:
            relative;

    aspect-ratio:
            1;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    overflow:
            hidden;

    border:
            2px
            dashed
            #d3d0ca;

    border-radius:
            9px;

    background:
            #faf9f7;

    font-size:
            1.5rem;

    color:
            #aaa;
}


.photo-slot:not(.has-photo) {
    cursor:
            pointer;
}


.photo-slot:not(.has-photo):hover {
    border-color:
            #aaa69f;

    background:
            #f4f2ee;
}


.photo-slot img {
    display:
            block;

    width:
            100%;

    height:
            100%;

    object-fit:
            cover;
}


.photo-slot.has-photo {
    border-style:
            solid;

    border-color:
            #d3d0ca;
}


/* =========================================================
   REMOVE PHOTO BUTTON
   ========================================================= */

.remove-photo {
    position:
            absolute;

    top:
            7px;

    right:
            7px;

    z-index:
            3;

    width:
            32px;

    height:
            32px;

    padding:
            0;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    border:
            1px
            solid
            rgba(255, 255, 255, 0.75);

    border-radius:
            50%;

    background:
            rgba(25, 25, 25, 0.78);

    color:
            #fff;

    box-shadow:
            0
            2px
            8px
            rgba(0, 0, 0, 0.25);

    font:
            inherit;

    font-size:
            21px;

    font-weight:
            400;

    line-height:
            1;

    cursor:
            pointer;

    -webkit-tap-highlight-color:
            transparent;
}


.remove-photo:hover {
    background:
            rgba(15, 15, 15, 0.92);
}


.remove-photo:focus-visible {
    outline:
            2px
            solid
            #fff;

    outline-offset:
            2px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.photo-picker input,
.secondary-button input {
    display:
            none;
}


.secondary-button {
    display:
            inline-flex;

    align-items:
            center;

    justify-content:
            center;

    min-height:
            44px;

    margin-bottom:
            0;

    padding:
            0
            18px;

    border:
            1px
            solid
            #bbb7b0;

    border-radius:
            9px;

    background:
            white;

    cursor:
            pointer;

    font-size:
            0.95rem;

    font-weight:
            600;
}


.secondary-button:hover {
    background:
            #f5f3ef;
}


.submit-button {
    width:
            100%;

    min-height:
            52px;

    border:
            0;

    border-radius:
            10px;

    background:
            #292929;

    color:
            white;

    font:
            inherit;

    font-weight:
            600;

    cursor:
            pointer;
}


.submit-button:hover {
    background:
            #1e1e1e;
}


.submit-button:disabled {
    cursor:
            default;

    opacity:
            0.6;
}


/* =========================================================
   UPLOAD MODAL
   ========================================================= */

.upload-modal {
    position:
            fixed;

    inset:
            0;

    z-index:
            1000;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    padding:
            20px;

    background:
            rgba(0, 0, 0, 0.55);
}


.upload-modal[hidden] {
    display:
            none;
}


.upload-modal-card {
    width:
            100%;

    max-width:
            420px;

    padding:
            32px;

    border-radius:
            16px;

    background:
            white;

    box-shadow:
            0
            20px
            60px
            rgba(0, 0, 0, 0.25);

    text-align:
            center;
}


.upload-modal-card h2 {
    margin:
            0
            0
            10px;
}


#uploadStatus {
    margin:
            0
            0
            22px;

    color:
            #666;
}


.progress-track {
    width:
            100%;

    height:
            14px;

    overflow:
            hidden;

    border-radius:
            999px;

    background:
            #e7e4df;
}


.progress-bar {
    width:
            0%;

    height:
            100%;

    border-radius:
            inherit;

    background:
            #292929;

    transition:
            width
            0.2s
            ease;
}


#uploadPercent {
    margin:
            10px
            0
            0;

    font-size:
            0.9rem;

    color:
            #666;
}

.modal-button {
    width:
            100%;

    min-height:
            48px;

    margin-top:
            20px;

    border:
            none;

    border-radius:
            10px;

    background:
            #292929;

    color:
            white;

    font:
            inherit;

    font-weight:
            600;

    cursor:
            pointer;
}


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

@media (
max-width:
        600px
) {

    .page {
        padding:
                16px
                12px;
    }


    .card {
        padding:
                24px
                18px;

        border-radius:
                12px;
    }


    h1 {
        font-size:
                1.8rem;
    }


    .photo-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:
                10px;
    }


    .photo-picker {
        width:
                calc((100% - 10px) / 2);

        height:
                auto;

        aspect-ratio:
                1 / 1;

        margin-left:
                auto;

        margin-right:
                auto;
    }


    .personal-photo-button {
        width:
                calc((100% - 10px) / 2);

        margin-left:
                auto;

        margin-right:
                auto;
    }
}