p.mentioned-person img {
    object-fit: cover;
}

span.comment-form-attachment__file-size-notice {
    max-width: 60% !Important;
}

p.mentioned-person {
    color: white !important;
}

.mentioned-person img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    filter: grayscale(1) !important;
    border: 1px solid white;
}

p.mentioned-person {
    text-align: left;
    margin-bottom: 15px;
    position: relative;
}

/* Wrap the content inside the comment in an additional div for blurring */
.blurred-comment {
    position: relative;
    overflow: hidden; /* Ensure content stays within boundaries */
}

.blurred-comment .comment-body {
    filter: blur(5px);
    pointer-events: none;
}

.blurred-comment::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://ostajam.eu/wp-content/uploads/2024/08/Vas-komentar-preglejuje-avtor-javne-galerije.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 2;
    pointer-events: none;
    background-size: 300px;
}

span.select2.select2-container.select2-container--default {
    width: 100% !important;
}

.select2-results__options li {
    font-size: 1.75em;
    font-family: 'Didact Gothic';
}

/* Custom styling for the Select2 container */
.select2-container--default .select2-selection--single {
    border-radius: 25px !important;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #3f2646 !important;
background-color: #231628 !important;
    color: white !important;
    box-shadow: 2px 2px 2px #00000061;
    height: auto !important; /* Adjust height if necessary */
}

/* Styling for the placeholder text */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: white !important;
}

/* Styling for the selected option text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: white !important;
    padding-left: 10px;
}

/* Styling for the dropdown */
.select2-container--default .select2-dropdown {
    border-radius: 25px !important;
    border: 1px solid #3f2646 !important;
    background-color: #231628;
    color: white !important;
    box-shadow: 2px 2px 2px #00000061;
}

/* Styling individual dropdown options */
.select2-container--default .select2-results__option {
    background-color: #231628;
    color: white !important;
    padding: 10px;
}

/* Styling selected option in dropdown */
.select2-container--default .select2-results__option--selected {
    background-color: #3f2646 !important;
    color: white !important;
}

/* Styling hover effect on options */
.select2-container--default .select2-results__option--highlighted {
    background-color: #3f2646 !important;
    color: white !important;
}

/* Custom styling for the dropdown arrow */
.select2-container--default .select2-selection__arrow b {
    border-color: white transparent transparent transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 60px !important;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 75px !important;
}


.comment em {
    margin-top: 40px;
    display: none !Important;
}

.comment-form-mention select {
    width: 100%; /* Adjust width if necessary */
    padding: 5px; /* Adjust padding for better appearance */
}

.comment-form-mention option {
    display: flex;
    align-items: center;
}

.comment-form-mention img {
    margin-right: 5px; /* Space between image and text */
}

select#mention {
    border-radius: 25px !important;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #3f2646 !important;
    background-color: #231628;
    color: white !important;
    box-shadow: 2px 2px 2px #00000061;
}

.comment-form-attachment__file-size-notice, 
.comment-form-attachment__file-types-notice, 
.comment-form-attachment__autoembed-links-notice {
    display: block;
    margin-top: 0px !important;
    font-size: 12px;
    color: white !important;
    line-height: 1.5;
}

p.comment-form-attachment label, span.comment-form-attachment__file-size-notice {
color: white !important;
    font-family: 'Didact Gothic' !important;
    font-weight: 500 !important;
}

span.comment-form-attachment__file-size-notice {
    color: rgba(255, 255, 255, 0.8) !important;
}

.comment-form-attachment {
display: flex;
    margin: 0px;
    margin-top: 10px;
    margin-bottom: 25px !important;
    padding: 15px;
    padding-top: 10px;
    border: 1px solid #E97CA0;
    background-color: #E97CA01A;
    border-radius: 10px !important;
    background-size: 50px !important;
    background-origin: content-box;
    background-image: url(https://ostajam.eu/wp-content/uploads/2025/01/nalozi-spomine-1.png);
    background-repeat: no-repeat;
    background-position: right 0px;
    background-position-y: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    position: relative;
    align-items: flex-start;
}

/* Label Styling */
.comment-form-attachment__label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
    color: white; /* Match label color with the overall design */
}

/* Input Styling */
.comment-form-attachment__input {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.comment-form-attachment__input::file-selector-button {
    display: none; /* Hides the default button (only works in supported browsers) */
}

/* Custom Drop Area Styling */
.comment-form-attachment__drop-area {
    border: 2px dashed #0073aa;
    background-color: transparent; /* Make background transparent to show the background image */
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: white; /* Ensure text is visible */
}

.comment-form-attachment__drop-area:hover {
    background-color: rgba(48, 48, 97, 0.5); /* Slight hover effect without obscuring background */
}

/* Inner Text Styling */
.comment-form-attachment__drop-area-inner {
    font-size: 14px;
    color: white; /* Match inner text color with the overall design */
}

/* Notices Styling */
.comment-form-attachment__file-size-notice,
.comment-form-attachment__file-types-notice,
.comment-form-attachment__autoembed-links-notice {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: white !important;
    line-height: 1.5;
}

/* Additional Styling for a Better Look */
.comment-form-attachment__drop-area::before {
    content: 'Izberite ali povlecite datoteke sem';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: white;
    pointer-events: none;
    z-index: 1;
}

/* Ensure input remains on top for clicking */
.comment-form-attachment__input {
    z-index: 3;
}

.comment-form-attachment__input:focus + .comment-form-attachment__drop-area,
.comment-form-attachment__input:hover + .comment-form-attachment__drop-area {
    background-color: rgba(0, 83, 119, 0.5); /* Adjust the hover effect */
    color: white;
}

.comment-form-attachment__input:focus,
.comment-form-attachment__input:hover {
    outline: none;
    box-shadow: 0 0 5px #0073aa;
}

.comment-form-attachment__input:focus + .comment-form-attachment__drop-area::before,
.comment-form-attachment__input:hover + .comment-form-attachment__drop-area::before {
    color: white;
}





/* Preview Container */
.comment-form-attachment__preview {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Individual File Preview */
.comment-form-attachment__preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-form-attachment__preview-item img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}













span.comment-form-attachment__file-types-notice, span.comment-form-attachment__autoembed-links-notice {
    display: none !important;
}

a.comment-edit-link {
    display: none !important;
}

form#commentform {
    padding: 10px;
    /* backdrop-filter: blur(5px); */
    /* background-color: #c04771 !important; */
    margin-bottom: 15px !important;
    border-radius: 25px !important;
    /* box-shadow: 2px 5px 8px #00000047; */
    font-family: 'Didact Gothic';
}

p.comment-form-cookies-consent {
    display: none;
}

label.comment-form-attachment__label{
  visibility: hidden;
}
label.comment-form-attachment__label:after {
    content: 'Dodajte spomine';
    visibility: visible;
    display: block;
    position: absolute;
    padding: 0px;
    top: 15PX;
}

p.comment-notes {
    display: flex;
    flex-direction: column;
}

h2#reply-title {
    text-align: center;
}

.wp-video {
    max-width: 250px !important;
    height: auto;
    margin-bottom: 25px;
}

.dco-attachment-gallery {
    display: flex;
    flex-wrap: nowrap !important;
    margin: -5px -5px 6px;
}

.comment {
margin-bottom: 15px !important;
    border-radius: 25px !important;
    padding-left: 25px !important;
    border-radius: 25px;
    margin-top: 15px;
    background-color: #E97CA01A !important;
    border: solid;
    border-width: 1px;
    border-color: #E97CA080 !important;
}

.comment {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


#comments .comment .comment-body, #comments .pingback .comment-body {
    border-block-end: 0px !important;
}

#comments .comment-list {
    font-size: 1em !important;
    font-family: "Didact Gothic", Sans-serif;
}

a#loadMore {
    background-color: #c04771;
    width: 100%;
    font-size: 1.25em;
    font-family: "Didact Gothic", Sans-serif;
    margin-top: 5px;
    margin-bottom: 25px;
    color: white ! Important;
    border-radius: 25px;
    border: 1px solid;
}

.comment-body p {
    font-size: 1.25em !important;
    font-family: "Didact Gothic", Sans-serif;
}

        /* Style for the introduction section */
        .comments-introduction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #E97CA01A;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #fff;
    margin-top: 15px;
    border: 1px solid #E97CA0;
        }

.comments-text {
    padding: 10px;
}

        .comments-introduction .comments-title {
            margin: 0 0 10px 0;
        }

h3.title-comments {
    display: none !important;
}

a#cancel-comment-reply-link {
color: white;
    background-color: #c04771;
    padding: 10px;
    border-radius: 25px;
    margin: 0px;
    margin-top: -5px;
    border: solid;
    border-width: 1px;
    float: left;
}
    
    .comment iframe {
    max-width: 100% !important;
    height: 300px !important;
}
    
    .comment-form-comment textarea, .comment-form-author input, .comment-form-email input, .comment-form-url input {
    border-radius: 8px !important;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #E97CA080 !important;
    background-color: #E97CA01A;
    color: white !important;
}
    
    .logged-in-as a, .logged-in-as .required-field-message {
    display: none !important;
}
   
   .dco-image-attachment img {
    border-radius: 25px;
    margin-bottom: 15px;
}
    
section#comments {
    padding: 10px !important;
    color: white !important;
    text-shadow: none !important;
    border-radius: 25px;
    margin: 0px;
    margin-bottom: 15px;
}

.comments-text p {
    color: rgba(255, 255, 255, 0.8) !important;
}

#comments .comment .comment-body {
    padding: 30px 0;
    border: 0px;
}

.comments-area {
    background-color: transparent;
    color: #333; /* Adjust the color as needed */
    font-size: 16px; /* Adjust the font size as needed */
}

.comment-list .comment {
    padding: 10px;
}

.comment-author {
        color: #ffffff;
    margin-bottom: -20px;
}

@media only screen 
and (max-device-width: 1000px)
{ .comment-meta a {
        display: flex;
    justify-content: space-between;
    margin-block-end: .9rem;
    margin-left: 50px;
    color: #cfcfcf !important;
    font-size: 0.85em !important;
} }

@media only screen 
and (min-device-width: 1001px)
{ .comment-meta a {
display: flex;
    justify-content: space-between;
    margin-block-end: .9rem;
    margin-top: 25px;
    margin-left: 25px;
}
.comment-author.vcard {
    margin-left: 25px;
}
    
}

.comment-body {
    background-color: transparent;
}

.comment-content {
    background-color: transparent;
}

.comment-reply-link {
    position: absolute;
    right: 5px;
    bottom: -25px;
    border-radius: 50%;
    background-color: #C04771;
    color: white !important;
    font-family: 'Didact Gothic';
    border: solid 1px;
    border-color: #E587A7;
    font-weight: 500;
    padding: 0px;
    /* letter-spacing: 0.6px; */
    margin-top: 30px;
    margin-bottom: 30px;
    text-decoration: none;
    font-size: 0px;
}

.comment-reply-link::before {
    content: "\f4ad";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 27px;
margin: 2px;
    text-shadow: 1px 2px 2px #00000099;
}

.comment-reply-link:hover {
    background-color: darken(#1F8982, 10%); /* Slightly darker on hover */
}

/* Style the form elements as needed */
.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #1F8982;
}

.comment-form-comment label {
    font-weight: 500 !important;
}

.comment-form input[type="submit"] {
background-color: #E97CA0;
    color: #fff;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 1.2em !important;
    border: 0;
}

.comment-form input[type="submit"]:hover {
    background-color: darken(#1F8982, 10%);
}

/* Responsive styles as needed */
@media (max-width: 768px) {
    .comments-area {
        font-size: 14px;
    }
}

/* ===== Ostajam modern comments layer ===== */
body:not(.wp-admin) #comments,
body:not(.wp-admin) .comments-area {
    width: 100% !important;
    max-width: 680px !important;
    margin: 18px auto 0 !important;
    padding: 0 14px 24px !important;
    color: #fff !important;
    font-family: "Didact Gothic", Arial, sans-serif !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
}

body:not(.wp-admin) #comments *,
body:not(.wp-admin) .comments-area * {
    box-sizing: border-box !important;
    max-width: 100%;
}

body:not(.wp-admin) #commentform,
body:not(.wp-admin) #commentform > *,
body:not(.wp-admin) #commentform .comment-form-mention *,
body:not(.wp-admin) #commentform .comment-form-attachment * {
    max-width: 100% !important;
}

body:not(.wp-admin) body > .select2-container,
body:not(.wp-admin) .select2-container--open {
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body:not(.wp-admin) > .select2-container,
body:not(.wp-admin) > .select2-container--open {
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body:not(.wp-admin) .comments-introduction {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: center !important;
    margin: 18px 0 14px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,126,170,.22), transparent 40%),
        linear-gradient(180deg, rgba(72,45,82,.74), rgba(40,27,47,.78)) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}

body:not(.wp-admin) .comments-introduction::before {
    content: "\f4ad";
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #f4d98c 0%, #ff9fb6 100%) !important;
    color: #2b1d31 !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
}

body:not(.wp-admin) .comments-text {
    padding: 0 !important;
}

body:not(.wp-admin) .comments-introduction .comments-title {
    margin: 0 0 4px !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

body:not(.wp-admin) .comments-text p {
    margin: 0 !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body:not(.wp-admin) #reply-title {
    margin: 18px 0 12px !important;
    color: #fff !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    font-weight: 900 !important;
}

body:not(.wp-admin) form#commentform {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(244,217,140,.12), transparent 35%),
        linear-gradient(180deg, rgba(72,45,82,.62), rgba(40,27,47,.72)) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.22) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body:not(.wp-admin) #commentform .logged-in-as {
    display: block !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

body:not(.wp-admin) #commentform .logged-in-as a {
    color: #f4d98c !important;
    text-decoration: none !important;
}

body:not(.wp-admin) form#commentform p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body:not(.wp-admin) form#commentform label,
body:not(.wp-admin) .comment-form-attachment__label,
body:not(.wp-admin) p.comment-form-attachment label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #f4d98c !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    visibility: visible !important;
    position: static !important;
}

body:not(.wp-admin) label.comment-form-attachment__label::after {
    content: none !important;
}

body:not(.wp-admin) .comment-form-comment textarea,
body:not(.wp-admin) .comment-form-author input,
body:not(.wp-admin) .comment-form-email input,
body:not(.wp-admin) .comment-form-url input,
body:not(.wp-admin) select#mention,
body:not(.wp-admin) .select2-container--default .select2-selection--single {
    width: 100% !important;
    min-height: 54px !important;
    padding: 14px 15px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,126,170,.36) !important;
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: "Didact Gothic", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
}

body:not(.wp-admin) .select2,
body:not(.wp-admin) .select2-container,
body:not(.wp-admin) .select2-container--default,
body:not(.wp-admin) .comment-form-mention,
body:not(.wp-admin) .comment-form-comment,
body:not(.wp-admin) .comment-form-author,
body:not(.wp-admin) .comment-form-email,
body:not(.wp-admin) .comment-form-attachment,
body:not(.wp-admin) .form-submit {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body:not(.wp-admin) #commentform .select2[style],
body:not(.wp-admin) #commentform .select2-container[style] {
    width: 100% !important;
    max-width: 100% !important;
}

body:not(.wp-admin) .comment-form-comment textarea {
    min-height: 132px !important;
    resize: vertical !important;
}

body:not(.wp-admin) .comment-form-comment textarea::placeholder,
body:not(.wp-admin) .comment-form-author input::placeholder,
body:not(.wp-admin) .comment-form-email input::placeholder {
    color: rgba(255,255,255,.48) !important;
}

body:not(.wp-admin) .comment-form-comment textarea:focus,
body:not(.wp-admin) .comment-form-author input:focus,
body:not(.wp-admin) .comment-form-email input:focus,
body:not(.wp-admin) select#mention:focus {
    border-color: rgba(244,217,140,.75) !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: 0 0 0 3px rgba(244,217,140,.10) !important;
}

body:not(.wp-admin) .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    padding: 8px 44px 8px 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

body:not(.wp-admin) .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

body:not(.wp-admin) .select2-container--default .select2-selection--single .select2-selection__rendered > span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body:not(.wp-admin) .select2-container--default .select2-selection--single .select2-selection__rendered img {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin-right: 0 !important;
}

body:not(.wp-admin) .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    width: 42px !important;
}

body:not(.wp-admin) .select2-dropdown {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,126,170,.35) !important;
    background: #2b1d31 !important;
}

body:not(.wp-admin) .select2-results__option {
    color: #fff !important;
    background: #2b1d31 !important;
    font-family: "Didact Gothic", Arial, sans-serif !important;
    font-size: 16px !important;
}

body:not(.wp-admin) .comment-form-attachment {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 106px !important;
    margin: 2px 0 15px !important;
    padding: 15px 16px !important;
    border-radius: 20px !important;
    border: 1px dashed rgba(244,217,140,.56) !important;
    background:
        linear-gradient(135deg, rgba(244,217,140,.10), rgba(255,126,170,.10)),
        rgba(255,255,255,.05) !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body:not(.wp-admin) .comment-form-attachment::before {
    content: "\f03e";
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #f4d98c 0%, #ff9fb6 100%) !important;
    color: #2b1d31 !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 17px !important;
}

body:not(.wp-admin) .comment-form-attachment__drop-area {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body:not(.wp-admin) .comment-form-attachment__drop-area::before {
    content: "Dodajte fotografijo ali posnetek" !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    max-width: calc(100% - 58px) !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-align: left !important;
}

body:not(.wp-admin) .comment-form-attachment__drop-area-inner {
    color: rgba(255,255,255,.70) !important;
    font-size: 13px !important;
    text-align: left !important;
}

body:not(.wp-admin) .comment-form-attachment__file-size-notice {
    max-width: calc(100% - 58px) !important;
    color: rgba(255,255,255,.66) !important;
    font-size: 12px !important;
}

body:not(.wp-admin) .comment-form-attachment__preview {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

body:not(.wp-admin) .comment-form-attachment__preview-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.08) !important;
}

body:not(.wp-admin) .comment-form-attachment__preview-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body:not(.wp-admin) .comment-form input[type="submit"],
body:not(.wp-admin) form#commentform .submit,
body:not(.wp-admin) form#commentform input#submit {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin: 4px 0 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f4d98c 0%, #ff9fb6 100%) !important;
    color: #1f1724 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    font-family: "Didact Gothic", Arial, sans-serif !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.22) !important;
}

body:not(.wp-admin) form#commentform input#submit:disabled,
body:not(.wp-admin) form#commentform .submit:disabled,
body:not(.wp-admin) .comment-form input[type="submit"]:disabled {
    cursor: not-allowed !important;
    opacity: .48 !important;
    filter: grayscale(.28) !important;
    box-shadow: none !important;
    transform: none !important;
}

body:not(.wp-admin) form#commentform.qrgrob-comment-form-incomplete input#submit,
body:not(.wp-admin) form#commentform.qrgrob-comment-form-incomplete .submit {
    background: linear-gradient(135deg, rgba(244,217,140,.65), rgba(255,159,182,.65)) !important;
}

body:not(.wp-admin) .comment-list,
body:not(.wp-admin) #comments .comment-list {
    display: grid !important;
    gap: 12px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body:not(.wp-admin) .comment-list .comment,
body:not(.wp-admin) #comments .comment {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,126,170,.13), transparent 35%),
        rgba(255,255,255,.06) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
}

body:not(.wp-admin) #comments .comment .comment-body,
body:not(.wp-admin) #comments .pingback .comment-body,
body:not(.wp-admin) .comment-body {
    position: relative !important;
    padding: 16px !important;
    background: transparent !important;
    border: 0 !important;
}

body:not(.wp-admin) .comment-author.vcard,
body:not(.wp-admin) .comment-author {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;
    margin: 0 0 8px !important;
    color: #fff !important;
}

body:not(.wp-admin) .comment-author .avatar,
body:not(.wp-admin) .qrgrob-guest-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(244,217,140,.60) !important;
    background: #2b1d31 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.20) !important;
}

body:not(.wp-admin) .comment-author cite,
body:not(.wp-admin) .comment-author .fn {
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

body:not(.wp-admin) .comment-author .says {
    display: block !important;
    margin-top: 2px !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body:not(.wp-admin) .comment-meta.commentmetadata {
    margin: 0 0 12px 55px !important;
}

body:not(.wp-admin) .comment-meta a {
    display: inline-flex !important;
    margin: 0 !important;
    color: rgba(255,255,255,.56) !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

body:not(.wp-admin) p.mentioned-person {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    margin: 0 0 10px 55px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(244,217,140,.12) !important;
    color: #f4d98c !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body:not(.wp-admin) p.mentioned-person:empty {
    display: none !important;
}

body:not(.wp-admin) .comment-body > p:not(.mentioned-person),
body:not(.wp-admin) .comment-body .comment-content,
body:not(.wp-admin) .comment-body p {
    color: rgba(255,255,255,.86) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

body:not(.wp-admin) .dco-attachment-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
}

body:not(.wp-admin) .dco-image-attachment img,
body:not(.wp-admin) .comment iframe,
body:not(.wp-admin) .wp-video {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

body:not(.wp-admin) .comment-reply-link {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 12px 0 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.08) !important;
    color: #f4d98c !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body:not(.wp-admin) .comment-reply-link::before {
    font-size: 18px !important;
    margin: 0 !important;
    text-shadow: none !important;
}

body:not(.wp-admin) a#loadMore {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

body:not(.wp-admin) a#cancel-comment-reply-link {
    display: none !important;
    float: none !important;
    margin: 0 0 10px !important;
    padding: 9px 13px !important;
    width: fit-content !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

body:not(.wp-admin) .comment-reply-title small,
body:not(.wp-admin) #reply-title small {
    display: block !important;
}

body:not(.wp-admin) .comment-reply-title small a#cancel-comment-reply-link,
body:not(.wp-admin) #reply-title small a#cancel-comment-reply-link {
    display: none !important;
}

body:not(.wp-admin) .comment-list #respond a#cancel-comment-reply-link,
body:not(.wp-admin) .comment-list #reply-title small a#cancel-comment-reply-link,
body:not(.wp-admin) body.comment-reply-active a#cancel-comment-reply-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hard mobile overflow guard for the custom WordPress comment form. */
body:not(.wp-admin) {
    overflow-x: hidden !important;
}

body:not(.wp-admin) #comments,
body:not(.wp-admin) .comments-area,
body:not(.wp-admin) #respond,
body:not(.wp-admin) #commentform {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

body:not(.wp-admin) #commentform {
    contain: paint !important;
}

body:not(.wp-admin) #commentform *,
body:not(.wp-admin) #commentform *::before,
body:not(.wp-admin) #commentform *::after {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body:not(.wp-admin) #commentform > p,
body:not(.wp-admin) #commentform .comment-form-comment,
body:not(.wp-admin) #commentform .comment-form-mention,
body:not(.wp-admin) #commentform .comment-form-attachment,
body:not(.wp-admin) #commentform .form-submit {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

body:not(.wp-admin) #commentform input[type="hidden"],
body:not(.wp-admin) #commentform .select2-hidden-accessible {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body:not(.wp-admin) #commentform .select2,
body:not(.wp-admin) #commentform .select2-container,
body:not(.wp-admin) #commentform .selection,
body:not(.wp-admin) #commentform .select2-selection,
body:not(.wp-admin) #commentform .select2-selection__rendered,
body:not(.wp-admin) #commentform .select2-selection__rendered > span {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

body:not(.wp-admin) #commentform .select2-selection__rendered {
    padding-right: 42px !important;
    white-space: normal !important;
}

body:not(.wp-admin) #commentform .select2-selection__rendered > span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: ellipsis !important;
}

body:not(.wp-admin) #commentform .select2-selection__rendered img {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    margin-right: 0 !important;
}

body:not(.wp-admin) #commentform .comment-form-attachment__input {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
}

body:not(.wp-admin) #commentform .comment-form-attachment__drop-area,
body:not(.wp-admin) #commentform .comment-form-attachment__preview,
body:not(.wp-admin) #commentform .comment-form-attachment__preview-item {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

@media (max-width: 480px) {
    body:not(.wp-admin) #comments,
    body:not(.wp-admin) .comments-area {
        padding-inline: 10px !important;
    }

    body:not(.wp-admin) .comments-introduction,
    body:not(.wp-admin) form#commentform,
    body:not(.wp-admin) .comment-list .comment {
        border-radius: 20px !important;
    }

    body:not(.wp-admin) .comment-meta.commentmetadata,
    body:not(.wp-admin) p.mentioned-person {
        margin-left: 0 !important;
    }

    body:not(.wp-admin) .dco-attachment-gallery {
        grid-template-columns: 1fr !important;
    }
}