/* Frontend styles for Display Quotes */

.display-quotes-wrapper {
    width: 100%;
    margin: 20px 0;
}

.display-quote-card {
    background: var(--ts-quote-bg, #ffffff);
    border: 2px solid var(--ts-quote-border, #b89f8d);
    border-radius: var(--ts-quote-radius, 12px);
    padding: var(--ts-quote-padding, 24px);
    box-sizing: border-box;
    max-width: var(--ts-quote-max-width, 100%);
    width: 100%;
    margin: 0 auto;
    text-align: var(--ts-quote-align, left);
}

.display-quote-content {
    position: relative;
    padding-left: calc(var(--ts-quote-accent-width, 3px) + 16px);
}

.display-quote-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: var(--ts-quote-accent-width, 3px);
    background: var(--ts-quote-accent, #c47c4d);
    border-radius: 2px;
}

.display-quote-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ts-quote-text, #3b2a20);
    font-family: "Georgia", "Times New Roman", serif;
}

.display-quote-text {
    font-size: var(--ts-quote-font-size, 18px);
    line-height: 1.6;
    color: var(--ts-quote-text, #3b2a20);
    font-family: "Georgia", "Times New Roman", serif;
}

.display-quote-card.is-italic .display-quote-text {
    font-style: italic;
}

.display-quote-card.is-regular .display-quote-text {
    font-style: normal;
}

.display-quote-author {
    margin-top: 14px;
    font-size: var(--ts-quote-author-size, 16px);
    color: var(--ts-quote-author, #7b5a45);
    font-family: "Georgia", "Times New Roman", serif;
}

.display-quote-card.is-italic .display-quote-author {
    font-style: italic;
}

.display-quote-card.is-regular .display-quote-author {
    font-style: normal;
}

@media (max-width: 600px) {
    .display-quote-card {
        padding: 18px;
    }

    .display-quote-title {
        font-size: 16px;
    }
}