/* --- Глобальные стили и сброс --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100%; font-family: 'Arial', sans-serif; background-color: #fdfaf6; color: #4b3832; line-height: 1.6; }
main { flex-grow: 1; padding: 20px; }
h1, h2, h3, h4 { color: #6f4e37; margin-bottom: 15px; text-align: center; }
a { color: #8d6e63; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Стили Header --- */
header { background-color: #ece0d1; padding: 10px 20px; border-bottom: 1px solid #d7c0ae; text-align: center; }
header nav { text-align: left; margin-bottom: 10px; padding-left: 20px; }
#logo { display: block; margin: 0 auto; max-width: 180px; height: auto; margin-bottom: 5px; }
.page-subtitle { text-align: center; font-size: 1.1em; color: #6f4e37; margin-top: 0; }

/* --- Стили Footer --- */
footer { background-color: #ece0d1; padding: 15px 20px; border-top: 1px solid #d7c0ae; text-align: center; margin-top: auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; }
.footer-social-icons { display: flex; gap: 15px; order: 1; }
.footer-social-icons a img { width: 24px; height: 24px; vertical-align: middle; }
footer p { margin: 0; order: 2; }
.footer-controls { display: flex; gap: 10px; order: 3; }
.footer-button { display: inline-block; background-color: #a1887f; color: #fff; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; text-align: center; font-size: 0.9rem; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; text-decoration: none; }
.footer-button:hover { background-color: #8d6e63; color: #fff; text-decoration: none; }
.admin-button--discreet { background-color: #e0e0e0; color: #757575; padding: 6px 12px; font-size: 0.8rem; border: 1px solid #ccc; font-weight: normal; }
.admin-button--discreet:hover { background-color: #d5d5d5; color: #555; border-color: #bbb; }

/* --- Стили для главной страницы (Две вертикальные рамки) --- */
.card-container { display: flex; justify-content: center; align-items: stretch; gap: 30px; padding: 20px 0; min-height: calc(100vh - 160px); }
.card.card--vertical { flex: 0 1 380px; max-width: 43%; min-height: 66vh; border: 2px solid #d7c0ae; border-radius: 10px; background-color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); overflow: hidden; display: flex; position: relative; background-size: cover; background-position: center; }
.card--tools { background-image: url('../assets/img/card-bg-tools.jpg'); }
.card--coffee { background-image: url('../assets/img/card-bg-coffee.jpg'); }
.card__content { padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.15); border-radius: 8px; }
.card__button { display: inline-block; background-color: rgba(141, 110, 99, 0.85); color: #fff; padding: 14px 28px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 8px; cursor: pointer; text-align: center; font-size: 1.1rem; font-weight: bold; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); max-width: 80%; }
.card__button:hover { background-color: rgba(111, 78, 55, 0.9); color: #fff; text-decoration: none; transform: scale(1.03); }

/* --- Стили для Модальных окон (Общие) --- */
.modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);display: none; justify-content: center;align-items: center;z-index: 1000;}
.modal-content {background-color: #fff;padding: 30px;border-radius: 8px;max-width: 600px;width: 90%;max-height: 90vh;overflow-y: auto;position: relative;box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.modal-close-button {position: absolute;top: 10px;right: 15px;background: none;border: none;font-size: 1.8rem;color: #aaa;cursor: pointer;line-height: 1;}
.modal-close-button:hover {color: #333;}

/* --- Стили для формы админки --- */
#admin-form div {margin-bottom: 15px;}
#admin-form label {display: block;margin-bottom: 5px;font-weight: bold;color: #6f4e37;}
#admin-form input[type="text"],#admin-form input[type="url"],#admin-form input[type="number"],#admin-form textarea,#admin-form select {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;font-size: 1rem;}
#admin-form textarea {min-height: 80px;resize: vertical;}
#pricing-section .price-row {display: flex;gap: 10px;margin-bottom: 10px;align-items: center;}
#pricing-section .price-row input {flex-grow: 1;}
#pricing-section .remove-price-row {padding: 5px 10px;background-color: #e0e0e0;color: #333;font-size: 0.9rem;min-width: 30px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;} /* Добавил transition */
#pricing-section .remove-price-row:hover {background-color: #bdbdbd;}
#admin-product-list {margin-top: 20px; display: flex; flex-direction: column; gap: 10px;}
.admin-product-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 5px; border-bottom: 1px solid #eee; transition: background-color 0.2s ease;}
.admin-product-item:last-child { border-bottom: none; }
.admin-product-item:hover { background-color: #f9f9f9; }
.admin-product-item span { flex-grow: 1; margin-right: 15px; font-size: 0.95rem; }
.admin-product-actions { display: flex; gap: 8px; }
.admin-product-actions button { padding: 5px 10px; font-size: 0.8rem; }
#admin-form button[type="submit"], #admin-form button[type="button"], #show-add-form-button, #add-price-row { display: inline-block; background-color: #8d6e63; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; text-align: center; font-size: 0.9rem; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; text-decoration: none; margin-right: 10px; margin-top: 10px;}
#admin-form button[type="submit"]:hover, #admin-form button[type="button"]:hover, #show-add-form-button:hover, #add-price-row:hover { background-color: #6f4e37; color: #fff; text-decoration: none; }
#cancel-edit-button { background-color: #aaa; }
#cancel-edit-button:hover { background-color: #888; }

/* --- Стили для Чат-бота --- */
.chatbot-toggle-button {position: fixed;bottom: 20px;right: 20px;z-index: 999;padding: 10px 15px;border-radius: 50%;width: 50px; height: 50px;font-size: 1.5rem; background-color: #a1887f; color: #fff; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.2); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;}
.chatbot-toggle-button:hover { background-color: #8d6e63; }
#chatbot-container {position: fixed;bottom: 80px;right: 20px;width: 320px;max-height: 450px;background-color: #fff;border-radius: 8px;box-shadow: 0 5px 15px rgba(0,0,0,0.2);display: none; flex-direction: column;z-index: 998;}
.chatbot-header {background-color: #ece0d1;padding: 10px 15px;border-bottom: 1px solid #d7c0ae;display: flex;justify-content: space-between;align-items: center;font-weight: bold;color: #6f4e37;border-radius: 8px 8px 0 0;}
#chatbot-close-button {background: none;border: none;font-size: 1.4rem;color: #aaa;cursor: pointer;}
#chatbot-close-button:hover {color: #333;}
#chatbot-messages {flex-grow: 1;padding: 15px; padding-bottom: 5px; overflow-y: auto;}
.chatbot-input-area {display: flex;border-top: 1px solid #eee;padding: 10px;}
#chatbot-input {flex-grow: 1;border: 1px solid #ccc;border-radius: 4px 0 0 4px;padding: 10px;border-right: none;}
#chatbot-send-button {border-radius: 0 4px 4px 0;padding: 10px 15px; background-color: #8d6e63; color: #fff; border: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;}
#chatbot-send-button:hover { background-color: #6f4e37; }

/* === Стили для страницы Кофе (Каталог - КОМПАКТНЫЕ КАРТОЧКИ) === */
.catalog-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; padding: 0 15px; }
.coffee-card { background-color: #fff; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s ease; border: 1px solid #eee; }
.coffee-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.coffee-card__image { width: 100%; height: 130px; object-fit: cover; display: block; background-color: #f8f8f8; }
.coffee-card__content-wrapper { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.coffee-card__title { font-size: 1rem; margin-bottom: 4px; text-align: left; color: #4b3832; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.6em; }
.description-button { background-color: transparent; color: #8d6e63; border: 1px solid #d7c0ae; padding: 4px 8px; font-size: 0.8rem; border-radius: 4px; cursor: pointer; text-align: center; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; margin-top: auto; align-self: flex-start; }
.description-button:hover { background-color: #ece0d1; color: #6f4e37; text-decoration: none; border-color: #c8ada0; }
.coffee-card__pricing { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coffee-card__pricing label { font-size: 0.85rem; }
.coffee-card__select { padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; flex-grow: 1; min-width: 80px; font-size: 0.85rem; }
.coffee-card__price { font-weight: bold; color: #6f4e37; font-size: 0.9rem; white-space: nowrap; }
.coffee-card__order-btn { display: block; width: 100%; background-color: #8d6e63; color: #fff; padding: 8px 10px; border: none; border-radius: 5px; cursor: pointer; text-align: center; font-size: 0.9rem; font-weight: bold; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; text-decoration: none; margin-top: 10px; }
.coffee-card__order-btn:hover { background-color: #6f4e37; color: #fff; text-decoration: none; }

/* === Стили для Модального окна Деталей Товара (Компактные) === */
.product-details-content { max-width: 650px;}
.details-modal-image { display: block; max-width: 50%; height: auto; margin: 0 auto 15px auto; border-radius: 5px; }
.details-modal-title { margin-bottom: 20px; font-size: 1.3rem; }
.details-modal-section { margin-bottom: 15px; }
.details-modal-section h4 { margin-bottom: 6px; font-size: 0.95rem; color: #8d6e63; text-align: left; }
.details-modal-section p { font-size: 0.9rem; line-height: 1.5; text-align: left; }
.profile-tags { gap: 6px; display: flex; flex-wrap: wrap;}
.profile-tag { padding: 2px 6px; font-size: 0.8rem; background-color: #ece0d1; color: #6f4e37; border-radius: 4px; white-space: nowrap; }

/* === Стили для Селектора Профиля Кофе (Админка) === */
.profile-selector-container { border: 1px solid #eee; padding: 15px; border-radius: 5px; margin-top: 5px; }
.profile-attribute { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
.profile-label { min-width: 100px; text-align: right; font-size: 0.9rem; color: #6f4e37; }
.rating-scale { display: flex; align-items: center; }
.rating-icon { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #e0e0e0; border: 1px solid #ccc; margin-right: 5px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; opacity: 0.5; }
.rating-scale:hover .rating-icon { opacity: 0.7; }
.rating-icon:hover { opacity: 1; border-color: #a0a0a0; }
.rating-icon.selected { background-color: #8d6e63; border-color: #6f4e37; opacity: 1; }

/* === Стили для Отображения Профиля (Модалка Деталей) === */
.profile-display-container h4 { margin-bottom: 15px; }
.profile-display { display: flex; flex-direction: column; gap: 8px; }
.profile-attribute-display { display: flex; align-items: center; gap: 10px; }
.rating-scale-display .rating-icon { cursor: default; margin-right: 4px; width: 16px; height: 16px; display: inline-block; border-radius: 50%; background-color: #e0e0e0; border: 1px solid #ccc; opacity: 0.5; transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;}
.rating-scale-display .rating-icon.selected { background-color: #6f4e37; border-color: #5d4037; opacity: 1; }
.rating-scale-display:hover .rating-icon, .rating-scale-display .rating-icon:hover { opacity: 0.5; }
.rating-scale-display .rating-icon.selected:hover { opacity: 1; }

/* === Стили для сообщений чат-бота === */
.message { padding: 8px 12px; border-radius: 15px; margin-bottom: 10px; max-width: 80%; line-height: 1.4; font-size: 0.9rem; word-wrap: break-word; opacity: 0; transform: translateY(10px); animation: fadeInMessage 0.3s ease forwards; }
.message.user { background-color: #8d6e63; color: #fff; border-radius: 15px 15px 5px 15px; margin-left: auto; text-align: right; }
.message.bot { background-color: #ece0d1; color: #4b3832; border-radius: 15px 15px 15px 5px; margin-right: auto; text-align: left; }
@keyframes fadeInMessage { to { opacity: 1; transform: translateY(0); } }
.message p { margin: 0; } /* Убираем отступ параграфа внутри сообщения */
.message-buttons { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.suggestion-button { background-color: #fff; border: 1px solid #a1887f; color: #a1887f; padding: 4px 10px; font-size: 0.85rem; border-radius: 15px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; }
.suggestion-button:hover { background-color: #a1887f; color: #fff; }

/* === Общие Эффекты и Адаптивность === */
button, a.card__button, a.layout-bar__button { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; }
button:active, a.card__button:active, a.layout-bar__button:active { transform: scale(0.97); } /* Легкое нажатие */

@media (max-width: 768px) {
    /* Главная страница: карточки друг под другом */
    .card-container { flex-direction: column; align-items: center; min-height: auto; padding: 15px; gap: 20px; }
    .card.card--vertical { flex-basis: auto; width: 95%; max-width: 450px; min-height: 50vh; height: auto; }
    /* Каталог: колонки */
    .catalog-container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; padding: 0 10px; }
    .coffee-card__image { height: 110px; }
     .coffee-card__content-wrapper { padding: 8px; gap: 6px; }
     .coffee-card__title { font-size: 0.9rem; min-height: 2.6em;}
     .description-button, .coffee-card__pricing label, .coffee-card__select, .coffee-card__price, .coffee-card__order-btn { font-size: 0.8rem; }
     .coffee-card__order-btn, .description-button, .coffee-card__select { padding: 6px 8px; }
    /* Модальные окна */
    .modal-content { padding: 20px; width: 95%; max-height: 85vh; }
    .details-modal-image { max-width: 80%; }
    /* Чат-бот */
    #chatbot-container { width: calc(100% - 20px); max-width: 350px; right: 10px; bottom: 70px; }
    .chatbot-toggle-button { bottom: 10px; right: 10px; width: 45px; height: 45px; }
    /* Футер */
    footer { flex-direction: column; gap: 10px; }
    .footer-social-icons, footer p, .footer-controls { order: 0; }
}