@import url(//fonts.googleapis.com/css?family=Ubuntu);

body {
    margin:0;
    padding:0;
    font-family:helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif; font-weight:normal;
}

a {
    text-decoration:none;
    color:#5993bb;
}

a:hover {
    color:#77b6e2;
}

a.button, input[type="submit"] {
    color:#fff;
    background:#5993bb;
    border-radius:4px;
    padding:10px 20px;
    font-size:14px;
    border:0;
}

a.button.light {
    color:#666;
    background:#ededed;
}

.text-left {
    text-align:left;
}

.text-right {
    text-align:right;
}

table {
    width:100%;
    border-spacing:0;
    border-collapse: collapse;
}

table th, table td {
    text-align:left;
    font-size:14px;
    padding:10px;
    margin:0;
}

tbody tr:nth-child(odd) {
    background:#efefef;
}

tbody tr.subtotal {
    background:#ccc;
}

thead th, tbody tr.total {
    background:#5993bb;
    color:#fff;
    font-weight:bold;
}

table.cart {
    margin-bottom:40px;
}

table.cart img {
    width:180px;
}

tbody td.num {
    text-align:right;
}

td input[type="submit"] {
    font-size:12px;
    padding:4px 10px;
}

form p label, form p input {
    float:left;
    clear:both;
}

form p label {
    font-size:14px;
    padding-bottom:4px;
}

form p input {
    width:300px;
    font-size:13px;
    margin-bottom:10px;
    padding:10px 12px;
    border:0;
    background:#efefef;
    color:#666;
    border-radius:4px;
}

ul.errorlist {
   float:left;
   color:#ff0000;
   clear:both;
   font-size:13px;
   margin:0 0 0 10px;
   padding:10px 0;
}

#header {
    padding:10px 100px;
    font-size:18px;
    overflow:auto;
}

#subheader {
    background:#ececec;
    color:#444;
    padding:15px 100px;
    overflow:auto;
}

#header .logo {
    font-family: 'Ubuntu', sans-serif;
    float: left;
    color: #333;
    font-size: 22px;
    margin-right: 50px !important;
    text-decoration: none;
}

#header .logo:hover {
    color: #5993bb;
    transition: color 0.3s ease;
}

#subheader .cart {
    float:right;
    padding-top:4px;
}
#subheader .search-form {
    float:left;
    padding-top:4px;
}

#content {
    padding:0 100px;
    overflow:hidden;
}

#sidebar {
    width:220px;
    padding:30px 20px 0 0;
    float:left;
}

#sidebar ul{
    margin:0;
    padding:0;
}

#sidebar ul li {
    margin:0;
    list-style:none;
    padding:10px 14px;
}

#sidebar ul li a {
    display:block;
}

#sidebar ul li.selected {
    background:#5993bb;
    border-radius:4px;
}

#sidebar ul li.selected a {
    color:#fff;
}

#main {
    float:left;
    width: 96%;
    margin-right:-220px;
    overflow:hidden;
}

.product-list .item {
    width:25%;
    padding:10px 20px 10px 0;
    float:left;
    text-align:center;
    line-height:1.2;
}

.product-list .item img {
    width:100%;
    margin-bottom:8px;
}

.product-detail {
    text-align:justify;
}

.product-detail .price {
    color:#333;
    font-size:28px;
    font-weight:bold;
}

.product-detail img {
    border-radius: 15px;
    border: 2px solid #3498db;
    width: 40%;
    float: left;
    margin: 0 20px 20px 0; 
    box-sizing: border-box; 
    height: auto; 
    padding: 0; 
}
.product-detail h1 {
    margin-bottom:0;
}

.product-detail h2 {
    margin-top:10px;
}

.order-form {
    float:left;
}

.order-info {
    float:right;
    width:300px;
    background:#efefef;
    padding:10px 20px;
    color:#333;
    border-bottom:4px solid #5993bb;
}

.order-info h3 {
    color:#5993bb;
}

.order-info ul li {
    margin:0;
    padding:0;
    font-size:14px;
}

.order-info p {
    font-weight:bold;
    float:right;
}

.order-info span {
    float:right;
}

.neg {
    color:#dc1616;
}

.languages {
   float:right;
   padding-top:4px;
   font-size:14px;
}

.languages ul {
    list-style:none;
    margin:0;
    padding:0;
    float:left;
}

.languages ul li {
    float:left;
    margin:0 0 0 10px;
    font-size:14px;
}

.languages p {
    float:left;
    margin:0;
}

.recommendations {
    clear:both;
}

.recommendations div {
    float:left;
}

.recommendations img {
    width:200px;
}

.recommendations p {
    clear:both;
}

.recommendations.cart {
    width:60%;
    float:left;
    overflow:auto;
}

.recommendations.cart h3 {
    margin-top:0;
}

.recommendations.cart .item {
    margin-right:10px;
}

.recommendations.cart img {
    width:120px;
}

/* braintree hosted fields */
form div.field {
    font-size:13px;
    color:#666;
    width:300px;
    height:22px;
    margin-bottom:10px;
    padding:6px 12px;
    border:0;
    background:#efefef;
    color:#666;
    border-radius:4px;
}

/* Top banner and product item cards (merged) */
.top-banner {
    position: relative; /* точка отсчета для текста баннера */
    width: 100%;
    overflow: hidden;
}
.top-banner img {
    width: 100%;
    display: block;
    height: auto;
}
.banner-text {
    opacity:0;
    animation: fadeIn 2s ease-out forwards;
    position: absolute;
    top: 45%;
    left: 6%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-align: center;
}

/* Продавцовая анимация */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Специальный стиль для карточек товара */
.product-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 10px;
    vertical-align: top; /* Чтобы карточки разной высоты не прыгали */
}
.product-img-link img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border: 2px solid #5993bb;
    border-radius: 10px;
}
.product-title {
    margin-top: 8px;
    text-decoration: none;
    color: #5993bb;
}
.product-title:hover {
    color: #ff0000;
    text-decoration: underline;
}
.product-price {
    font-weight: bold;
    display: block;
    margin-top: 4px;
}

/* Залоговая кнопка выхода, стиле логотипа */
#header .user button.logo {
    font-family: 'Ubuntu', sans-serif;
    color: #333;
    font-size: 22px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline;
    line-height: inherit;
    float: none;
    margin-left: 10px;
}

/* Service form стили */
.service-form input, .service-form textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.service-form p {
    margin-bottom: 15px;
}

/* 1. Глобальные заголовки и контейнер формы */
h1 {
    text-align: center;
    margin: 20px 0;
}

/* 2. Контейнер формы (Вход, Регистрация, Услуги) */
.login-form {
    max-width: 400px;
    margin: 40px auto;
    padding: 0 20px; /* Отступы для мобильных устройств */
}

/* 3. Центрирование текста под формой (ссылка на регистрацию) */
.login-form + p {
    text-align: center;
    width: 100%;
}

/* 4. Поля ввода: растягиваем на 100% ширины контейнера */
.login-form form p input, 
.login-form form p textarea, 
.login-form form p select {
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;

    font-size: 13px;
    margin-bottom: 15px;
    padding: 10px 12px;
    border: 0;
    background: #efefef;
    color: #666;
    border-radius: 4px;
    font-family: helvetica, sans-serif;
}

/* 5. Специальные настройки для текстового поля */
.login-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* 6. Подписи к полям (Label) строго над полями */
.login-form form p label {
    float: none !important;
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}

/* 7. Кнопка отправки (не растягиваем на всю ширину) */
.login-form input[type="submit"] {
    width: auto !important;
    padding: 10px 25px !important;
    cursor: pointer;
    background: #5993bb;
    color: #fff;
    border-radius: 4px;
}

/* 8. Скрываем подсказки Django (типа "150 characters or fewer") */
.login-form .helptext {
    display: none !important;
}

/* 9. Список ошибок (если есть) */
.login-form .errorlist {
    color: #dc1616;
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    font-size: 13px;
}

/* Подвал */
#footer {
    background-color:#2c3e50;
    color:white;
    padding:30px 0;
    margin-top:50px;
    text-align:center;
    border-top:3px solid #5993bb;
}
.footer-links {
    list-style:none;
    padding:0;
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:15px;
}
.footer-links a {
    color:#ecf0f1;
    text-decoration:none;
    margin:0 15px;
    font-weight:bold;
    transition:color 0.3s;
}
.footer-links a:hover {
    color:#5993bb;
}
#footer p {
    font-size:0.9em;
    opacity:0.8;
}