/*
 * MC-TAGS: front office, връщане, заявка, купувач, стил
 *
 * Блокът и страницата „Връщане на продукти" в магазина.
 *
 * Нито едно правило не разчита на темата. Живите теми са две и различни
 * (panda на PS8, hummingbird на PS9), а магазинът може да смени и тях; блок,
 * стъпил върху чужди класове, се чупи в деня на смяната.
 *
 * Затова всичко тук е с представка `mc-return` и стои на СВОИ крака: свои
 * цветове, свои разстояния, своя мрежа. Цветовете са в променливи най-отгоре —
 * магазин, който иска друг акцент, мени един ред, а не тридесет.
 */

.mc-return {
    --mc-accent: #2f7d5d;
    --mc-accent-dark: #24634a;
    --mc-ink: #1f2a30;
    --mc-muted: #7a858e;
    --mc-line: #e3e6e9;
    --mc-soft: #f7f9fa;

    margin: 2rem auto;
    padding: 1.75rem;
    max-width: 60rem;
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    background: #fff;
    /* Лека сянка вместо дебела рамка: блокът трябва да се откроява от страницата,
       без да изглежда като чуждо тяло в нея. */
    box-shadow: 0 1px 2px rgba(31, 42, 48, .04), 0 8px 24px rgba(31, 42, 48, .06);
    color: var(--mc-ink);
    line-height: 1.55;
}

/* Заглавието носи цветна черта отляво — тя е единственото украшение и служи
   за котва на окото при дълга страница. */
.mc-return__title {
    margin: 0 0 .35rem;
    padding-left: .75rem;
    border-left: 4px solid var(--mc-accent);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
}

.mc-return__subtitle {
    margin: 1.75rem 0 .75rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.mc-return__lead {
    margin: 0 0 1.5rem;
    color: #46596e;
}

/* Пояснението под менюто „Защо връщате“ (решение 10с19.5). Фонът е бледочервен,
   а текстът остава тъмен, за да не прилича на съобщение за грешка (10с19.7).
   `hidden` се пази изрично: тема със свое `display` за `p` би го показала въпреки него. */
.mc-return__reason-help {
    margin: .6rem 0 0;
    padding: .7rem .9rem;
    border-left: 3px solid #e0a3a3;
    background: #fdf0f0;
    color: var(--mc-ink);
    font-size: .95rem;
    line-height: 1.5;
    white-space: pre-line;
}

.mc-return__reason-help[hidden] {
    display: none;
}

.mc-return__small {
    margin: 1.5rem 0 .75rem;
    font-size: .9rem;
    color: var(--mc-muted);
}

/* --------------------------------------------------------- съобщения */

.mc-return__note {
    margin: 0 0 1.25rem;
    padding: .85rem 1rem;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: .95rem;
}

.mc-return__note--ok {
    background: #eef8f3;
    border-color: var(--mc-accent);
    color: #1f5e44;
}

.mc-return__note--bad {
    background: #fdf3f3;
    border-color: #bf4d4d;
    color: #8f3636;
}

/* ------------------------------------------------------------ полета */

.mc-return__field {
    margin-bottom: 1.1rem;
}

.mc-return__field label {
    display: block;
    margin-bottom: .4rem;
    font-size: .92rem;
    font-weight: 600;
}

/* Значката „задължително" стои ДО името на полето, а не под него: така се чете
   заедно с него и не се пропуска. */
.mc-return__req {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #fdf3f3;
    color: #8f3636;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.mc-return__field input,
.mc-return__field select,
.mc-return__field textarea {
    width: 100%;
    max-width: 30rem;
    padding: .65rem .8rem;
    border: 1px solid #c8d3dd;
    border-radius: 8px;
    background: #fff;
    font-size: 1rem;
    color: var(--mc-ink);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.mc-return__field input:focus,
.mc-return__field select:focus,
.mc-return__field textarea:focus,
.mc-return__qty:focus {
    outline: none;
    border-color: var(--mc-accent);
    /* Пръстенът е за клавиатурата: без него полето на фокус не личи и човек,
       който не ползва мишка, не знае къде пише. */
    box-shadow: 0 0 0 3px rgba(47, 125, 93, .18);
}

.mc-return__field textarea {
    min-height: 8rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

/* ------------------------------------------------------------ бутонът */

.mc-return__submit {
    display: inline-block;
    margin-top: .5rem;
    padding: .75rem 1.6rem;
    border: 0;
    border-radius: 8px;
    background: var(--mc-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .05s;
}

.mc-return__submit:hover {
    background: var(--mc-accent-dark);
}

.mc-return__submit:active {
    transform: translateY(1px);
}

/* ------------------------------------------------------------ редовете */

.mc-return__lines {
    width: 100%;
    margin: 0 0 1.5rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--mc-line);
    border-radius: 10px;
    overflow: hidden;
}

.mc-return__lines thead th {
    padding: .7rem .9rem;
    background: var(--mc-soft);
    border-bottom: 1px solid var(--mc-line);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mc-muted);
    text-align: left;
}

.mc-return__lines td {
    padding: .8rem .9rem;
    border-bottom: 1px solid #f0f2f4;
    vertical-align: middle;
}

.mc-return__lines tbody tr:last-child td {
    border-bottom: 0;
}

.mc-return__num {
    text-align: center;
    white-space: nowrap;
}

/* Ред, от който няма какво да се върне, НЕ се крие — показва се блед, с
   причината. Скритият ред кара купувача да търси продукт, който е поръчал, и
   да не го намери. */
.mc-return__line--off {
    color: #9aa4ac;
    background: #fcfcfd;
}

.mc-return__ref,
.mc-return__why {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--mc-muted);
}

/* Полето за снимки (решение 10с19.8). Бутонът за избор е на браузъра — не се
   рисува наново, за да работи еднакво на телефон и на компютър. */
.mc-return__photos {
    display: block;
    max-width: 100%;
    margin: .2rem 0 .1rem;
    font-size: .9rem;
}

.mc-return__why--bad {
    color: #8f3636;
}

.mc-return__why[hidden] {
    display: none;
}

/* Полето за снимки под отговора и броят под отговора на клиента (10с19.13). */
.mc-thread__attach {
    margin: .75rem 0 .5rem;
}

.mc-thread__photos {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: #46596e;
}

.mc-return__qty {
    width: 4.5rem;
    padding: .45rem .5rem;
    border: 1px solid #c8d3dd;
    border-radius: 6px;
    text-align: center;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}

/* ------------------------------------------------------------ писмата */

.mc-return__letter {
    padding: .9rem 1.1rem;
    margin-bottom: .7rem;
    background: var(--mc-soft);
    border: 1px solid var(--mc-line);
    border-left: 3px solid var(--mc-accent);
    border-radius: 8px;
}

.mc-return__letter-head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    margin-bottom: .45rem;
    font-size: .92rem;
}

.mc-return__letter-head span {
    color: var(--mc-muted);
    font-size: .82rem;
}

.mc-return__letter-body {
    font-size: .92rem;
    color: #46596e;
    /* Новите редове идват от стила, не от `nl2br` (одит MC-81, Р1). */
    white-space: pre-line;
}

/* ------------------------------------------------------- тесен екран */

@media (max-width: 40rem) {
    .mc-return {
        margin: 1rem 0;
        padding: 1.1rem;
        border-radius: 8px;
    }

    /* Таблицата се скролва сама, вместо да разпъне страницата: имената на
       продукти са дълги, а телефонът е тесен. */
    .mc-return__lines {
        display: block;
        overflow-x: auto;
    }

    .mc-return__submit {
        width: 100%;
    }
}

/* --------------------------------------- връзката в долния край на сайта */

.mc-guest-link {
    padding: .4rem 0;
}

.mc-guest-link a {
    color: inherit;
    text-decoration: underline;
}

/* ------------------------- двете полета, от които трябва ПОНЕ ЕДНО */

/* Общата рамка е самото правило, изразено с подредба: две полета в една кутия
   се четат като „едно от тези", преди изречението да е прочетено. */
.mc-return__either {
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.1rem .4rem;
    border: 1px dashed #c8d3dd;
    border-radius: 10px;
    background: #fcfdfd;
}

.mc-return__either-title {
    margin: 0 0 .9rem;
    font-size: .9rem;
    color: #46596e;
}

@media (min-width: 48rem) {
    /* На широк екран двете стоят едно до друго: така се вижда, че са РАВНИ
       възможности, а не последователни стъпки. */
    .mc-return__either {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.25rem;
    }

    .mc-return__either-title {
        grid-column: 1 / -1;
    }

    .mc-return__either .mc-return__field input {
        max-width: none;
    }
}

/* ------------------------------------------- страницата „твоят разговор" */

/*
 * Същите цветове и същата чужда-тема-независимост като горе, но СВОИ
 * променливи: горните живеят на `.mc-return` и не стигат дотук.
 *
 * Двете страни на разговора се различават по мястото и по цвета на чертата —
 * нашите писма отляво, отговорите на клиента отдясно. Това е единственото,
 * което клиентът трябва да прочете от вида, без да чете надписа.
 */

.mc-thread {
    --mc-accent: #2f7d5d;
    --mc-ink: #1f2a30;
    --mc-muted: #7a858e;
    --mc-line: #e3e6e9;
    --mc-soft: #f7f9fa;

    margin: 2rem auto;
    padding: 1.75rem;
    max-width: 48rem;
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 42, 48, .04), 0 8px 24px rgba(31, 42, 48, .06);
    color: var(--mc-ink);
    line-height: 1.55;
}

/* В профила разговорът живее вътре в картата на връщането, не като отделна
   страница. Класът запазва общите цветове и променливи, но не рисува втора
   голяма карта около вече съществуващата. */
.mc-thread--embedded {
    margin: 1rem 0 0;
    padding: 1.25rem;
    max-width: none;
    box-shadow: none;
}

.mc-thread__title {
    margin: 0 0 .75rem;
    padding-left: .75rem;
    border-left: 4px solid var(--mc-accent);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
}

.mc-thread__note {
    margin: .75rem 0;
    color: #46596e;
}

.mc-thread__flash {
    margin: 0 0 1.25rem;
    padding: .7rem .9rem;
    border-radius: 8px;
    border: 1px solid #e6c9c9;
    background: #fdf3f3;
    color: #7d2f2f;
}

.mc-thread__flash--good {
    border-color: #c9e6d8;
    background: #f2fbf7;
    color: #24634a;
}

.mc-thread__list {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.mc-thread__item {
    margin-bottom: .7rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--mc-line);
    border-radius: 8px;
    background: var(--mc-soft);
}

/* Нашите писма: чертата отляво, както е при писмата в заявката. */
.mc-thread__item--shop {
    border-left: 3px solid var(--mc-accent);
}

/* Неговите: изместени надясно и с друг цвят, за да си личи чий е редът дори
   при бърз поглед по дълъг разговор. */
.mc-thread__item--mine {
    margin-left: 2rem;
    border-right: 3px solid #4a6fa5;
    background: #fff;
}

.mc-thread__who {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    margin: 0 0 .45rem;
    font-size: .92rem;
    font-weight: 700;
}

.mc-thread__when {
    color: var(--mc-muted);
    font-size: .82rem;
    font-weight: 400;
}

.mc-thread__subject {
    margin: 0 0 .35rem;
    font-size: .92rem;
    color: var(--mc-muted);
}

.mc-thread__body {
    margin: 0;
    font-size: .95rem;
    color: #46596e;
    /* Дълга дума без интервали (сглобен адрес, номер) не бива да разпъва
       кутията встрани — тя се пренася. */
    overflow-wrap: anywhere;
    /* Новите редове идват от СТИЛА, не от `nl2br`: `nl2br` иска изходът да
       мине без екраниране, за да се види `<br>` — а точно това връщаше суровия
       HTML на страницата (одит MC-81, Р1). */
    white-space: pre-line;
}

.mc-thread__form {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mc-line);
}

.mc-thread__label {
    display: block;
    margin-bottom: .4rem;
    font-weight: 700;
}

.mc-thread__input {
    display: block;
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--mc-line);
    border-radius: 8px;
    font: inherit;
    line-height: 1.5;
    /* Височината се влачи от клиента; ширината — не, иначе излиза от кутията. */
    resize: vertical;
}

.mc-thread__input:focus {
    outline: 2px solid var(--mc-accent);
    outline-offset: 1px;
}

.mc-thread__send {
    margin-top: .8rem;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 8px;
    background: var(--mc-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.mc-thread__send:hover {
    background: #24634a;
}

@media (max-width: 40rem) {
    .mc-thread {
        margin: 1rem 0;
        padding: 1.1rem;
        border-radius: 8px;
    }

    /* На телефон изместването надясно яде ширина, а тя е малко: чертата
       отдясно стига, за да се различи чий е редът. */
    .mc-thread__item--mine {
        margin-left: 0;
    }

    .mc-thread__send {
        width: 100%;
    }
}