@font-face {
    font-family: "San Francisco";
    font-weight: 400;
    src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: relative;
    z-index: 1001;
    color: rgba(255, 255, 255, 1);
}

.header__button {
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* .logoText {
    color: rgba(255, 255, 255, 1);
    font-size: 24px;
} */

.header__base__text {
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Open Sans';
    font-style: normal;
}

.header__add__text {
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: 600;
    font-family: 'Open Sans';
    font-style: normal;
}

.header__indigo__text {
    color: rgba(85, 166, 255, 1);
    font-size: 15px;
    font-weight: 600;
    font-family: 'Open Sans';
    font-style: normal;
}


.creation__header__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 16px 60px 0 20px;
}

.fullscreen-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 20, 28, 1);
    z-index: 999;
    overflow-y: auto;
    padding: 80px 20px 20px;
    display: none;
}

.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 998;
    display: none;
}
.burial-form {
    width: 100%;
    max-width: none;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    padding: 72px 20px 20px;
}

.body-creation-mode > *:not(.header):not(.fullscreen-form):not(.fullscreen-overlay) {
    visibility: hidden;
}

.creation__header__container .icon-button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 600px) {
    .fullscreen-form {
        padding: 80px 10px 10px;
    }

    .creation__header__container {
        padding: 16px 0 0 16px;
    }

    .header {
        padding: 16px 16px;
    }
}


.creation__header__container .icon-button svg {
    width: 103px;
    height: 24px;
}

/* Burials */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.submit-button {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 32px);
        max-width: 500px;
        padding: 12px;
        background: #4285f4;
        color: white;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 1000;
}

.submit-button:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

.form-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px 20px 16px
}
.form-main-container {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.row-inputs {
    display: flex;
    gap: 8px;
}

.row-inputs .form-input {
    flex: 1;
}


.form-input {
    width: 100%;
    padding: 12px;
    color: white;
    background: #283041;
    font-size: 15px;
    transition: all 0.3s ease;
}

.form-input.full {
    border-radius: 12px 12px 0 0;
}

.form-input.left-small {
    border-radius: 4px 4px 4px 12px;
    color:#ffffff80
}

.form-input.right-small {
    border-radius: 4px 12px 4px 4px;
    color:#ffffff80
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.form-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/*card*/
.burial-location-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(14, 16, 18, 1);
    padding: 24px 20px 20px;
    z-index: 1000;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.burial-location-card[style*="display: block"] {
    transform: translateY(0);
}

.location-card__content {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.location-card__title {
    margin: 0 0 16px 0;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    padding-right: 40px;
    font-weight: 500;
    font-family: 'Open Sans';
    font-style: normal;
    font-size: 16px;
}

.coordinates-input-container {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    margin: 0 0 20px 0;
}

.coordinates-input {
    width: 100%;
    border-radius: 16px;
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
    outline: none;
    padding: 0 16px 0 32px;
    background-image: url("data:image/svg+xml, %3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0205 1.66699C13.8981 1.66714 17.083 4.6989 17.083 8.4502C17.0829 10.1028 16.4575 11.6983 15.3242 12.9375L10.6846 18.0117L10.6816 18.0146C10.6706 18.0269 10.6357 18.0654 10.5986 18.0996C10.5523 18.1423 10.4489 18.2304 10.2891 18.2852C10.1035 18.3486 9.9008 18.3496 9.71484 18.2871C9.55478 18.2333 9.45091 18.145 9.4043 18.1025C9.36711 18.0686 9.33153 18.0308 9.32031 18.0186L9.31836 18.0156L4.70996 13.0283C3.55525 11.7787 2.91712 10.1634 2.91699 8.48926C2.91699 4.71643 6.12055 1.66699 10.0205 1.66699ZM10 6.98242C9.13066 6.98242 8.42578 7.66225 8.42578 8.50098C8.42599 9.33953 9.13079 10.0195 10 10.0195H10.0078C10.877 10.0195 11.5818 9.33953 11.582 8.50098C11.582 7.66225 10.8771 6.98242 10.0078 6.98242H10Z' fill='white'/%3E%3C/svg%3E");    background-repeat: no-repeat;
    background-position: left;
    background-size: 20px;
    transition: all 0.3s ease;
}

.next-btn {
    background: rgba(85, 166, 255, 1);
    border-radius: 16px;
    width: 100%;
    color: rgba(255, 255, 255, 1);
    padding: 16px;
    margin: 0 0 20px 0;
}

@media (max-width: 480px) {
    .burial-location-card {
        padding: 20px 16px 16px;
    }

    .location-card__title {
        padding-right: 36px;
        font-size: 17px;
    }
}

.info-card {
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #0E141C;
    border-radius: 12px;
    height:fit-content;
    max-height: 120px;
    max-width: 600px;
    /* backdrop-filter: blur(8px); */
    margin: 0px;
}

.info-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    display:inline-block
}

.info-card__content {
    flex: 1;
    min-width: 0;
    display:inline-block
}

.info-card__title {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
}

.info-card__subtitle {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    line-height: 1.4;
}

@media (max-width: 480px) {
    .info-card {
        gap: 12px;
        padding: 16px 8px;
        height: fit-content;
    }

    .info-card__icon {
        width: 32px;
        height: 32px;
    }

    .info-card__icon svg {
        width: 20px;
        height: 20px;
    }

    .info-card__title {
        font-size: 14px;
    }

    .info-card__subtitle {
        font-size: 13px;
    }
}

/*marker*/

.marker-button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
}

.marker-button svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s;
}

.marker-button:hover svg {
    transform: scale(1.15);
}

.marker-button span {
    display: none;
}