/* lov.am — мобильная версия по макетам mobile/*.
   Вид первых iOS: серо-голубой фон с градиентом, скруглённые белые группы,
   градиентный синий тулбар с тенью текста, зелёная градиентная кнопка.
   Всё, что старый браузер не поймёт (градиент, радиус, тень), деградирует
   в плоский цвет — базовые background и border заданы отдельно. */
* { -webkit-text-size-adjust: none; }
body { margin: 0; padding: 0; background: #C7CCD4;
       background-image: linear-gradient(#D5D9E0, #BFC5CE);
       background-repeat: no-repeat; background-attachment: fixed;
       color: #000000;
       font: 14px/1.35 -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
a { color: #1B3E8B; text-decoration: none; }

/* верхний тулбар */
.bar { background: #3C5A82; background-image: linear-gradient(#5A7CA8, #2E4A70);
       border-bottom: 1px solid #1D3050; height: 30px; padding: 6px 0 7px 0;
       position: relative; text-align: center; }
.bar-t { font-weight: bold; font-size: 16px; color: #FFFFFF; line-height: 30px;
         text-shadow: 0 -1px 0 #1D3050; }
.bar-back, .bar-r {
    position: absolute; top: 8px; display: inline-block; padding: 5px 9px;
    font: bold 11px -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #FFFFFF; text-decoration: none;
    background: #2F4C74; background-image: linear-gradient(#6A8CB8, #2A4468);
    border: 1px solid #1D3050; border-radius: 5px;
    text-shadow: 0 -1px 0 #16283F; }
.bar-back { left: 8px; }
.bar-r    { right: 8px; }

.page { max-width: 480px; margin: 0 auto; padding: 14px 10px 62px 10px; }

/* заголовок группы: капителью, со светлой тенью, как в макетах */
.gtitle { font-weight: bold; font-size: 12px; color: #4A5A72;
         text-shadow: 0 1px 0 #FFFFFF;
          text-shadow: 0 1px 0 #FFFFFF; text-transform: uppercase;
          letter-spacing: .03em; margin: 0 0 6px 12px; }

/* белая группа со скруглением */
.group { background: #FFFFFF; border: 1px solid #B5B5B5; border-radius: 10px;
         overflow: hidden; margin: 0 0 14px 0; }
.row { display: block; padding: 11px 12px; min-height: 22px; font-size: 15px;
       color: #000000; border-bottom: 1px solid #DCDCDC; position: relative; }
.row:last-child { border-bottom: 0; }
.row-chev:after { content: "\203A"; position: absolute; right: 12px; top: 11px;
                  color: #9AA0AC; font-size: 17px; }
.row-sub { font-size: 12px; color: #8A93A8; }
.row-new { background: #F2F7FF; }
.badge { background: #C0392B; color: #FFFFFF; font-size: 11px; font-weight: bold;
         padding: 1px 6px; margin-left: 6px; border-radius: 8px; }
.ava { float: left; margin-right: 10px; border-radius: 4px; }
.clr { clear: both; }

/* кнопки */
.btn { display: block; text-align: center; padding: 11px 0; font-weight: bold;
       font-size: 15px; color: #FFFFFF; background: #2E7D32;
       background-image: linear-gradient(#69B36D, #256E29);
       border: 1px solid #1C5220; border-radius: 8px; margin: 10px 0;
       text-shadow: 0 -1px 0 #17441A; }
.btn-grey { color: #1B3E8B; background: #E8EAED;
            background-image: linear-gradient(#FBFBFC, #DFE3E8);
            border-color: #A9B0B8; text-shadow: 0 1px 0 #FFFFFF; }

/* поля: внутри белой группы рамок нет, поле занимает строку */
.inp { width: 96%; border: 0; font-size: 15px;
       font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
       padding: 0; background: transparent; }
.inp-box { width: 100%; font-size: 16px; padding: 8px; border: 1px solid #B5B5B5;
           border-radius: 8px; }
.fld { padding: 8px 10px; border-bottom: 1px solid #DCDCDC; }
.fld label { display: block; color: #8A93A8; font-size: 12px; padding-bottom: 3px; }

.err { background: #FBEDED; border: 1px solid #D89A9A; border-radius: 10px;
       padding: 10px 12px; margin-bottom: 10px; font-size: 13px;
       color: #C22A3A; line-height: 1.5; }
.ok { background: #EDF7ED; border: 1px solid #A6D0A6; border-radius: 10px;
      padding: 10px 12px; margin-bottom: 10px; font-size: 13px; color: #2E7D32; }
.hint { color: #8A93A8; font-size: 12px; padding: 6px 2px; }

/* нижняя панель */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; background: #3C5A82;
          background-image: linear-gradient(#5A7CA8, #2E4A70);
          border-top: 1px solid #1D3050; overflow: hidden; }
.tab { display: block; float: left; width: 20%; text-align: center; padding: 7px 0 8px 0;
       font-size: 11px; color: #C8D6E8; text-shadow: 0 -1px 0 #1D3050; }
.tab-on { color: #FFFFFF; font-weight: bold; background: rgba(0, 0, 0, .28); }

.mfoot { text-align: center; padding: 10px 10px 70px 10px; font-size: 12px; color: #4A5A72; }
.mcopy { padding-top: 6px; color: #6A737C; }

/* карточка и переписка */
.card { background: #FFFFFF; border: 1px solid #B5B5B5; border-radius: 10px;
        margin-bottom: 12px; padding: 10px; }
.bubble-me, .bubble-you { max-width: 78%; padding: 8px 10px; margin: 6px 0;
        border: 1px solid #A9B0B8; border-radius: 12px; font-size: 14px; }
.bubble-me { background: #4A83C4; background-image: linear-gradient(#6E9ED6, #3A6FAF);
             color: #FFFFFF; border-color: #2E5A8E; margin-left: 20%; }
.bubble-you { background: #FFFFFF; }
.btime { font-size: 11px; color: #8A93A8; }

/* логотип на входе */
.mlogo { text-align: center; padding: 6px 0 16px 0; }
.mslogan { font-size: 12px; color: #3E4C60; }

/* Языки справа налево: dir="rtl" переворачивает текст сам, здесь — потоки. */
.rtl .ava { float: right; margin-right: 0; margin-left: 10px; }
.rtl .row { padding: 11px 12px 11px 30px; text-align: right; }
.rtl .row-chev:after { right: auto; left: 12px; content: "\2039"; }
.rtl .bar-back { left: auto; right: 8px; }
.rtl .bar-r { right: auto; left: 8px; }
.rtl .bubble-me { margin-left: 0; margin-right: 20%; }

/* Рекламное место в мобильной версии — макет mobile/foto: по центру,
   с небольшим отступом сверху и заметным снизу. */
.promo-m     { text-align: center; padding: 2px 0 14px 0; }
.promo-m img { border: 0; }

/* Подпись под группой — макеты mobile/gosti и mobile/index: серый текст
   с полями по краям группы, а не вплотную к экрану. */
.gnote { color: #4A5A72; margin: 0 12px 12px 12px; line-height: 1.5; }

/* Текстовый вариант мобильного баннера, когда картинки нет. */
.promo-mt { display: inline-block; padding: 8px 10px; border: 1px solid #A9B0B8;
           background: #FFFFFF; color: #1B5FAA; }

/* Кнопка выхода — красная, как в макете mobile/nastroyki. */
.btn-red { background: #C0392B; border-color: #9B2D22; }

/* Небольшой отступ сверху внутри карточки. */
.mpt8 { padding-top: 8px; }

/* Номер места в мобильном списке «Лидеров» — как в макете mobile/lidery. */
.lnum { display: inline-block; width: 22px; color: #6A737C; font-weight: bold; }

/* Поля ввода мобильной версии.
   В таблице стилей были правила только для наших классов, а списки,
   многострочные поля и кнопки отправки оставались системными — на
   телефоне они выглядели как чужие. Приводим к виду полей из макетов. */
.group select,
.group textarea,
.group input[type="text"],
.group input[type="password"],
.group input[type="email"] {
    width: 100%; font-size: 16px; padding: 7px 8px; box-sizing: border-box;
    font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #000000; background: #FFFFFF;
    border: 1px solid #B5B5B5; border-radius: 8px;
}
.group textarea { min-height: 90px; }

input[type="submit"], input[type="button"], button {
    display: inline-block; padding: 10px 16px; font-size: 15px; font-weight: bold;
    font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #FFFFFF; background: #2F4C74;
    background-image: linear-gradient(#6A8CB8, #2A4468);
    border: 1px solid #1D3050; border-radius: 5px;
    text-shadow: 0 -1px 0 #16283F;
}

/* Логотип на входе стоит на светлой подложке — как в макете mobile/index. */
.mlogo { text-align: center; padding: 18px 0 10px 0; }