@import url(/public/template-8/src/general.css);

.wedding-wish {
    position: relative;
    width: 562px;
    height: auto;
    display: flex;
    padding: 72px 0;
    flex-direction: column;
    align-items: center;
    font-family: 'Alegreya';
    color: var(--primary-color);
    background-color: var(--bg-color);
}


.wedding-wish form {
    margin: 42px 0;
    padding: 0 30px;
    width: 100%;
    box-sizing: border-box;
}

.wedding-wish form .custom-input {
    margin-bottom: 32px;
}


.wedding-wish form .custom-input textarea {
    font-size: 16px;
    padding: 16px 24px;
    width: 100%;
    height: 240px;
    outline: none;
    color: #9C6162;
    border: 2px solid #9C6162;
    background-color: transparent;
    font-family: 'Alegreya';
    border-radius: 32px;
    /* transition: .3s ease; */
}

.wedding-wish form .attend-button {
    display: flex;
    justify-content: center;
}

.wedding-wish form .custom-input textarea::placeholder {
    color: #9c61629e;
}

/* Wish Chat */
.wish-card-wrapper {
    padding: 0 32px;
    box-sizing: border-box;
    width: 100%;
}

.wish-card-wrapper .content {
    height: 426px;
    border-radius: 32px;
    border: 1px solid #CF8183;
    background: linear-gradient(180deg, rgba(255, 227, 228, 0.10) 0%, rgba(185, 71, 74, 0.10) 100%);
    padding: 16px;
    overflow-y: auto;
    scrollbar-color: var(--primary-color) white;
}

.wish-card-wrapper .content .list-comment {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.wish-card-wrapper .content .list-comment .details-comment {
    display: flex;
    flex-direction: column;
}

.wish-card-wrapper .content .list-comment .details-comment p:nth-child(1) {
    font-size: 16px;
    font-weight: 500;
}

.wish-card-wrapper .content .list-comment .details-comment p:nth-child(2) {
    font-size: 12px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.427);
    margin-bottom: 12px;
}

.wish-card-wrapper .content .list-comment .details-comment p:nth-child(3) {
    font-size: 14px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.701);
}

.wedding-wish .orn-divider {
    top: -8%;
}


@media (max-width: 562px) {
    .wedding-wish {
        width: 100%;
    }
}