/* =========================================================
   Monolabo Reviews - フロントエンドスタイル
   ========================================================= */

/* ----- 共通：星（テーマ上書き対策で !important）----- */
.mlr-stars                { display: inline-flex !important; gap: 3px; }
.mlr-stars .mlr-star--filled,
span.mlr-star--filled     { color: #f5a623 !important; font-size: 16px; }
.mlr-stars .mlr-star--empty,
span.mlr-star--empty      { color: #ccc !important;    font-size: 16px; }

/* =========================================================
   テーマリセット：レビューページのみサイドバー・スライダー非表示
   ========================================================= */
body.monolabo-review-page #secondary,
body.monolabo-review-page .sidebar,
body.monolabo-review-page .widget-area,
body.monolabo-review-page aside.sidebar,
body.monolabo-review-page .side-area,
body.monolabo-review-page #sidebar { display: none !important; }

body.monolabo-review-page #primary,
body.monolabo-review-page #content,
body.monolabo-review-page .content-area,
body.monolabo-review-page main,
body.monolabo-review-page .site-main,
body.monolabo-review-page #main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

body.monolabo-review-page #promotionV2,
body.monolabo-review-page .promoBanaNew,
body.monolabo-review-page .promoCont,
body.monolabo-review-page .promo5point,
body.monolabo-review-page .main-visual,
body.monolabo-review-page .main-slider,
body.monolabo-review-page .home-slider,
body.monolabo-review-page .hero-section,
body.monolabo-review-page .slide-wrap,
body.monolabo-review-page .top-slide,
body.monolabo-review-page .frontpage-slider,
body.monolabo-review-page .visual-slider,
body.monolabo-review-page .slider-area,
body.monolabo-review-page .mv-area,
body.monolabo-review-page #mv,
body.monolabo-review-page .top-mv,
body.monolabo-review-page .keyvisual,
body.monolabo-review-page .key-visual,
body.monolabo-review-page .slick-slider,
body.monolabo-review-page .swiper,
body.monolabo-review-page .swiper-container,
body.monolabo-review-page [class*="campaign"],
body.monolabo-review-page [class*="Campaign"],
body.monolabo-review-page [class*="banner-slide"],
body.monolabo-review-page [class*="top-banner"] { display: none !important; }

/* =========================================================
   一覧ページ全体ラッパー
   ========================================================= */
.mlr-list-page {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 48px 24px 80px !important;
    box-sizing: border-box !important;
    font-family: 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', Meiryo, sans-serif !important;
    float: none !important;
}

/* =========================================================
   ページヘッダー（タイトル＋総合スコア）
   ========================================================= */
.mlr-list-page__hero {
    text-align: center;
    padding: 40px 24px;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

.mlr-list-page__title {
    font-size: 22px;
    font-weight: bold;
    color: #222;
    margin: 0 0 20px;
    letter-spacing: .04em;
}

.mlr-list-page__score-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 999px;
    padding: 10px 24px;
}

.mlr-list-page__score-num {
    font-size: 28px;
    font-weight: bold;
    color: #f5a623;
    line-height: 1;
}

.mlr-list-page__score-stars .mlr-star--filled,
.mlr-list-page__score-stars .mlr-star--empty {
    font-size: 20px;
}

.mlr-list-page__score-count {
    font-size: 13px;
    color: #999;
    border-left: 1px solid #ddd;
    padding-left: 10px;
    line-height: 1.4;
}

.mlr-list-page__empty {
    text-align: center;
    color: #aaa;
    padding: 60px 0;
    font-size: 15px;
}

/* =========================================================
   カテゴリタブ
   ========================================================= */
.mlr-list-page__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 36px;
}

.mlr-list-page__tab {
    display: inline-block;
    padding: 8px 18px;
    border: 1.5px solid #ddd;
    border-radius: 999px;
    text-decoration: none;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    transition: all .18s ease;
    white-space: nowrap;
    background: #fff;
}

.mlr-list-page__tab:hover:not(.is-active) {
    border-color: #999;
    color: #222;
    background: #f9f9f9;
}

.mlr-list-page__tab.is-active {
    background: #e8317b;
    color: #fff !important;
    border-color: #e8317b;
}

/* =========================================================
   レビューカード一覧（テーマ上書き対策で !important）
   ========================================================= */
.mlr-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
}

.mlr-list__item {
    background: #fff !important;
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    padding: 24px 28px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.04) !important;
    transition: box-shadow .18s;
    margin: 0 !important;
}

.mlr-list__item:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.08) !important;
}

/* 商品名 */
.mlr-list__product {
    font-size: 18px !important;
    color: #333 !important;
    margin: 0 0 12px !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
}

/* カードヘッダー（星・ニックネーム・日付） */
.mlr-list__header {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    margin-bottom: 14px !important;
    flex-wrap: wrap;
}

.mlr-list__header .mlr-stars .mlr-star--filled,
.mlr-list__header .mlr-stars .mlr-star--empty {
    font-size: 18px !important;
}

.mlr-list__nickname {
    font-weight: bold !important;
    font-size: 14px !important;
    color: #333 !important;
}

.mlr-list__date {
    color: #bbb !important;
    font-size: 12px !important;
    margin-left: auto !important;
}

/* コメント本文 */
.mlr-list__comment {
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: #333 !important;
    margin: 0 0 12px !important;
}

/* 店舗返信 */
.mlr-list__reply {
    background: #f8f8f8 !important;
    border-left: 3px solid #444 !important;
    padding: 14px 18px !important;
    border-radius: 0 8px 8px 0 !important;
    margin-top: 16px !important;
}

.mlr-list__reply-label {
    font-size: 12px !important;
    font-weight: bold !important;
    color: #555 !important;
    margin: 0 0 6px !important;
    letter-spacing: .03em;
}

.mlr-list__reply-body {
    font-size: 14px;
    color: #444;
    margin: 0;
    line-height: 1.75;
}

/* =========================================================
   ページネーション
   ========================================================= */
.mlr-list-page__pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 48px;
    flex-wrap: wrap;
}

.mlr-list-page__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    transition: all .15s;
    background: #fff;
}

.mlr-list-page__page:hover:not(.is-current) {
    border-color: #999;
    color: #222;
}

.mlr-list-page__page.is-current {
    background: #e8317b;
    color: #fff !important;
    border-color: #e8317b;
    font-weight: bold;
}

/* =========================================================
   プレビュー（商品ページ用ショートコード）
   ========================================================= */
.mlr-preview {
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 24px 0;
    background: #fafafa;
}

/* タイトル・スコアブロック */
.mlr-preview__hero {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
}

.mlr-preview__title {
    font-size: 18px !important;
    font-weight: bold !important;
    margin: 0 0 10px !important;
    color: #222 !important;
}

.mlr-preview__score-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mlr-preview__score-num {
    font-size: 28px;
    font-weight: bold;
    color: #f5a623;
}

.mlr-preview__count { color: #999; font-size: 13px; }

/* レビューリスト（プレビューは .mlr-list / .mlr-list__item を共用） */
.mlr-preview .mlr-list {
    margin-top: 20px !important;
}

/* 続きをみるボタン */
.mlr-preview__footer {
    text-align: right;
    margin-top: 18px;
}

.mlr-preview__more-btn,
a.mlr-preview__more-btn,
.mlr-preview .mlr-preview__more-btn {
    display: inline-block;
    background: #e8317b;
    color: #fff !important;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none !important;
    padding: 10px 20px;
    border-radius: 24px;
    transition: background .2s;
}

.mlr-preview__more-btn:hover,
a.mlr-preview__more-btn:hover { background: #c9245f; color: #fff !important; }
.mlr-preview__empty          { color: #aaa; font-size: 14px; }

/* =========================================================
   投稿フォームページ
   ========================================================= */
.mlr-form-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    box-sizing: border-box;
}

.mlr-form-page__title { font-size: 22px; font-weight: bold; margin-bottom: 8px; color: #222; }
.mlr-form-page__desc  { color: #777; margin-bottom: 28px; line-height: 1.7; font-size: 14px; }

.mlr-form-page__success {
    background: #f0faf0;
    border: 1px solid #7ecb7e;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
    color: #2e6b2e;
}

.mlr-form-page__invalid {
    text-align: center;
    padding: 60px 24px;
    color: #aaa;
    font-size: 15px;
}

.mlr-form {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.mlr-form__group   { margin-bottom: 22px; }
.mlr-form__label   { display: block; font-weight: bold; margin-bottom: 8px; font-size: 14px; color: #333; }
.mlr-form__required { color: #d63638; font-size: 11px; margin-left: 4px; }
.mlr-form__optional { color: #aaa;    font-size: 11px; margin-left: 4px; }

.mlr-form__stars      { display: flex; gap: 8px; cursor: pointer; margin-bottom: 4px; }
.mlr-form__star       { font-size: 36px; color: #ddd !important; transition: color .12s;
                         cursor: pointer !important; pointer-events: auto !important;
                         user-select: none !important; -webkit-user-select: none !important;
                         display: inline-block !important; line-height: 1 !important; }
.mlr-form__star.active,
.mlr-form__star:hover { color: #f5a623 !important; }

.mlr-form__textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid #ddd; border-radius: 6px;
    font-size: 14px; line-height: 1.7;
    resize: vertical; box-sizing: border-box;
    transition: border-color .15s;
}

.mlr-form__textarea:focus {
    outline: none;
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.mlr-form__input {
    width: 100%; padding: 12px 14px;
    border: 1px solid #ddd; border-radius: 6px;
    font-size: 14px; box-sizing: border-box;
    transition: border-color .15s;
}

.mlr-form__input:focus {
    outline: none;
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.mlr-form__hint {
    font-size: 12px; color: #aaa; margin: 6px 0 0;
}

.mlr-form__error {
    background: #fff5f5; border: 1px solid #fcc;
    border-radius: 6px; padding: 12px 16px;
    color: #c00; font-size: 14px; margin-bottom: 16px;
}

.mlr-form__submit {
    display: block; width: 100%;
    background: #e8317b; color: #fff;
    border: none; border-radius: 24px;
    padding: 15px; font-size: 16px; font-weight: bold;
    cursor: pointer; transition: background .2s;
    letter-spacing: .04em;
}

.mlr-form__submit:hover    { background: #c9245f; }
.mlr-form__submit:disabled { background: #bbb; cursor: not-allowed; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 600px) {
    .mlr-list-page  { padding: 28px 16px 60px; }
    .mlr-form-page  { padding: 28px 16px 60px; }
    .mlr-list-page__hero { padding: 28px 16px; }
    .mlr-list__item { padding: 18px 16px; }
    .mlr-list-page__title { font-size: 18px; }
    .mlr-list-page__score-num { font-size: 22px; }
    .mlr-list-page__tabs { justify-content: flex-start; }
    .mlr-list-page__tab  { font-size: 12px; padding: 6px 14px; }
}