/* Movie Reviews Plugin — หน้าเว็บเต็มความกว้างเหมือนหน้าอื่นของเว็บ (ไม่ใช่คอลัมน์แคบแบบแอปมือถือ) */

.mr-app {
  --mr-bg: #ffffff;
  --mr-bg-elevated: #f7f9f9;
  --mr-card-bg: #ffffff;
  --mr-border: #e5e9ea;
  --mr-text: #0f1419;
  --mr-text-muted: #536471;
  --mr-accent: var(--primary-blue, #2563eb);
  --mr-accent-hover: var(--primary-blue-hover, #1d4ed8);
  --mr-star: #f59e0b;
  --mr-like: var(--primary-blue, #2563eb);
  --mr-danger: #dc3545;
  --mr-radius: 14px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  color: var(--mr-text);
}

.mr-app a { color: var(--mr-accent); text-decoration: none; }
.mr-app a:hover { text-decoration: underline; }
.mr-app * { box-sizing: border-box; }

/* ── Brand hero (masthead) — full-bleed, โลโก้แก้ไขได้ที่ cms/mr_settings.php ── */
.mr-hero {
  margin: 0 calc(50% - 50vw) 0;
  width: 100vw;
  background: linear-gradient(135deg, #0f172a 0%, var(--mr-accent) 140%);
  text-align: center;
  padding: 2.4rem 1rem 2rem;
}
.mr-hero-brand { display: inline-block; }
.mr-hero-brand:hover { text-decoration: none; }
.mr-hero-wordmark {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 3px;
}
.mr-hero-wordmark .bi { color: var(--mr-star); margin-right: .3rem; }
.mr-hero-logo-wrap {
  display: inline-flex;
  border-radius: 12px;
  padding: .5rem 1.1rem;
}
.mr-hero-logo { max-height: 112px; max-width: 300px; display: block; object-fit: contain; }
.mr-hero-tagline { color: rgba(255, 255, 255, .8); font-size: .88rem; margin: .7rem 0 0; }

.mr-tabs {
  display: flex;
  border-bottom: 1px solid var(--mr-border);
  overflow-x: auto;
}
.mr-tab {
  padding: .8rem 1.4rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--mr-text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.mr-tab.is-active { color: var(--mr-text); border-bottom-color: var(--mr-accent); }
.mr-tab:hover { background: var(--mr-bg-elevated); }

.mr-nav-links {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: .9rem 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--mr-border);
}
.mr-nav-links a {
  font-size: .85rem;
  font-weight: 600;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  color: var(--mr-text-muted);
  text-decoration: none;
}
.mr-nav-links a:hover { color: var(--mr-text); text-decoration: none; }
.mr-nav-links a.is-active { color: var(--mr-text); border-bottom-color: var(--mr-accent); }

/* ── Two-column page layout (main + sidebar) ── */
.mr-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
.mr-layout-sidebar { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 992px) {
  .mr-layout { grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); }
  .mr-layout-sidebar { position: sticky; top: 1rem; }
}

.mr-side-card {
  background: var(--mr-card-bg);
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  padding: 1rem;
}
.mr-side-title { font-size: .92rem; font-weight: 800; margin: 0 0 .8rem; }
.mr-side-list { display: flex; flex-direction: column; gap: .7rem; }
.mr-side-item { display: flex; align-items: center; gap: .6rem; color: var(--mr-text); }
.mr-side-item img { width: 42px; aspect-ratio: 7/10; object-fit: cover; border-radius: 6px; border: 1px solid var(--mr-border); flex: 0 0 auto; }
.mr-side-item .mr-side-item-title { font-size: .82rem; font-weight: 700; line-height: 1.3; }
.mr-side-item .mr-side-item-sub { font-size: .74rem; color: var(--mr-star); font-weight: 700; }
.mr-side-empty { font-size: .8rem; color: var(--mr-text-muted); }

/* ── Sections ── */
.mr-section-title {
  font-size: 1.2rem;
  font-weight: 800;
  padding: 0 0 .9rem;
  margin: 1.6rem 0;
  border-bottom: 3px solid var(--mr-accent);
  display: inline-block;
}

/* ── Review card (กล่องแยกแต่ละใบ ไม่ใช่แถวชิดขอบแบบแอป) ── */
.mr-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  background: var(--mr-card-bg);
  margin-bottom: .8rem;
  transition: box-shadow .15s, transform .15s;
}
.mr-card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.mr-card-head { display: flex; align-items: flex-start; gap: .6rem; }
.mr-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mr-accent), #7c3aed);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  flex: 0 0 auto;
}
.mr-card-meta { flex: 1 1 auto; min-width: 0; }
.mr-card-name { font-size: .94rem; font-weight: 700; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.mr-card-name a { color: var(--mr-text); }
.mr-badge-verified { color: var(--mr-accent); font-size: .85rem; }
.mr-tab-lock { margin-left: .3rem; font-size: .75rem; color: var(--mr-text-muted); }
.mr-time { font-weight: 400; color: var(--mr-text-muted); font-size: .8rem; }

.mr-stars { display: inline-flex; align-items: center; gap: 1px; margin-top: .2rem; }
.mr-stars .bi { font-size: .74rem; color: var(--mr-star); }
.mr-stars .bi-star { color: var(--mr-border); }
.mr-stars-num { font-size: .78rem; color: var(--mr-text-muted); margin-left: .3rem; font-weight: 700; }

.mr-card-movie {
  display: flex; align-items: center; gap: .5rem;
  margin: .6rem 0;
  padding: .4rem;
  border: 1px solid var(--mr-border);
  border-radius: 10px;
  color: var(--mr-text);
}
.mr-card-movie img { width: 34px; height: 48px; object-fit: cover; border-radius: 4px; }
.mr-card-movie span { font-size: .85rem; font-weight: 700; }

.mr-card-body { font-size: .93rem; line-height: 1.55; margin-top: .4rem; white-space: pre-line; }
.mr-card-body-empty { color: var(--mr-text-muted); font-style: italic; }

.mr-card-actions { margin-top: .6rem; }
.mr-like-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: none; cursor: pointer;
  color: var(--mr-text-muted);
  font-size: .82rem; font-weight: 600;
  padding: .3rem .5rem; border-radius: 999px;
}
.mr-like-btn:hover { background: color-mix(in srgb, var(--mr-like) 12%, transparent); color: var(--mr-like); }
.mr-like-btn.is-liked { color: var(--mr-like); }

/* ── Movie grid — ยืดหยุ่นเต็มความกว้าง จำนวนคอลัมน์ปรับตามพื้นที่จริง ── */
.mr-movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.mr-movie-poster { text-decoration: none; color: var(--mr-text); display: block; }
.mr-poster-frame { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--mr-border); background: var(--mr-bg-elevated); }
.mr-movie-poster .mr-poster-img {
  width: 100%; aspect-ratio: 7 / 10;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}
.mr-movie-poster:hover .mr-poster-img { transform: scale(1.05); }
.mr-poster-badge {
  position: absolute; top: .4rem; left: .4rem;
  background: rgba(0, 0, 0, .75); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: .18rem .45rem; border-radius: 6px;
  display: flex; align-items: center; gap: .2rem;
}
.mr-poster-badge .bi { color: var(--mr-star); }
.mr-movie-poster .mr-poster-title { font-size: .82rem; font-weight: 700; margin-top: .4rem; line-height: 1.3; }
.mr-movie-poster .mr-poster-rating { font-size: .76rem; color: var(--mr-text-muted); }

/* ── Movie detail backdrop (เต็มจอ ใช้โปสเตอร์เบลอเป็นฉากหลัง สไตล์เว็บรีวิวหนังมืออาชีพ) ── */
.mr-backdrop {
  position: relative;
  overflow: hidden;
  margin: 0 calc(50% - 50vw) 1.5rem;
  width: 100vw;
  color: #fff;
}
.mr-backdrop-bg {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center 20%;
  filter: blur(24px) brightness(.5) saturate(1.15);
  transform: scale(1.15);
}
.mr-backdrop-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .6) 55%, var(--mr-bg) 100%);
}
.mr-backdrop-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 3rem 1rem 1.6rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
}
.mr-backdrop-poster {
  width: 130px;
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  border: 3px solid rgba(255, 255, 255, .15);
  flex: 0 0 auto;
}
.mr-backdrop-info h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 .35rem; }
.mr-backdrop-info .mr-movie-sub { font-size: .88rem; color: rgba(255, 255, 255, .78); margin-bottom: .5rem; }
.mr-movie-synopsis { font-size: .9rem; line-height: 1.6; margin-top: .8rem; max-width: 65ch; color: var(--mr-text); }
.mr-avg-rating { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: 1.3rem; color: var(--mr-star); }
.mr-avg-rating small { font-weight: 500; color: rgba(255, 255, 255, .7); font-size: .8rem; }
@media (min-width: 768px) {
  .mr-backdrop-poster { width: 190px; }
  .mr-backdrop-inner { padding: 4.5rem 1rem 2rem; }
}
@media (max-width: 576px) {
  .mr-backdrop-inner { flex-direction: column; align-items: center; text-align: center; }
}

/* ── Share (การ์ดในไซด์บาร์) ── */
.mr-share-label { font-size: .82rem; color: var(--mr-text-muted); font-weight: 600; display: block; margin-bottom: .7rem; }
.mr-share-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.mr-share-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mr-bg-elevated);
  color: var(--mr-text);
  border: 1px solid var(--mr-border);
  cursor: pointer;
  font-size: .95rem;
}
.mr-share-btn:hover { background: var(--mr-accent); color: #fff; text-decoration: none; border-color: var(--mr-accent); }
.mr-copy-link-btn.is-copied { background: #198754; color: #fff; border-color: #198754; }

.mr-fact-row { display: flex; justify-content: space-between; font-size: .84rem; padding: .35rem 0; border-bottom: 1px solid var(--mr-border); }
.mr-fact-row:last-child { border-bottom: none; }
.mr-fact-row span:first-child { color: var(--mr-text-muted); }
.mr-fact-row span:last-child { font-weight: 600; text-align: right; }

/* ── Star input (write review) ── */
.mr-star-input { display: inline-flex; gap: 2px; cursor: pointer; user-select: none; }
.mr-star-input .mr-star-slot { position: relative; width: 24px; height: 24px; font-size: 1.2rem; color: var(--mr-border); }
.mr-star-input .mr-star-slot .bi { position: absolute; inset: 0; }
.mr-star-input .mr-star-slot.is-full,
.mr-star-input .mr-star-slot.is-half { color: var(--mr-star); }

/* ── Forms ── */
.mr-page-narrow { max-width: 640px; margin: 0 auto; }

.mr-form-box {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  background: var(--mr-card-bg);
  margin-bottom: 1.2rem;
  max-width: 640px;
}
.mr-form-box label { font-size: .84rem; font-weight: 700; display: block; margin-bottom: .35rem; }
.mr-form-box textarea, .mr-form-box input[type=text], .mr-form-box input[type=url], .mr-form-box input[type=number], .mr-form-box select {
  width: 100%;
  background: var(--mr-bg);
  color: var(--mr-text);
  border: 1px solid var(--mr-border);
  border-radius: 10px;
  padding: .6rem .75rem;
  font-size: .92rem;
  margin-bottom: .9rem;
}
.mr-form-box textarea { min-height: 100px; resize: vertical; }

.mr-input-group { display: flex; }
.mr-input-group .mr-input-prefix {
  display: flex;
  align-items: center;
  padding: .6rem .7rem;
  background: var(--mr-bg-elevated);
  border: 1px solid var(--mr-border);
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: var(--mr-text-muted);
  font-weight: 700;
  font-size: .92rem;
  user-select: none;
  flex: 0 0 auto;
}
.mr-input-group input[type=text] {
  border-radius: 0 10px 10px 0 !important;
  margin-bottom: 0 !important;
}
.mr-username-status.is-checking { color: var(--mr-text-muted); }
.mr-username-status.is-ok { color: #198754; }
.mr-username-status.is-taken, .mr-username-status.is-invalid { color: var(--mr-danger); }

.mr-avatar-picker { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.mr-avatar-picker input[type=text] { margin-bottom: 0; }
.mr-color-swatches { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.mr-color-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.mr-color-swatch.is-selected { border-color: var(--mr-text); box-shadow: 0 0 0 2px var(--mr-bg), 0 0 0 4px var(--mr-text); }

.mr-checkbox-row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; margin-bottom: .3rem; cursor: pointer; }
.mr-checkbox-row input[type=checkbox] { width: auto; margin: 0; }
.mr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--mr-accent); color: #fff;
  border: none; border-radius: 999px;
  padding: .6rem 1.4rem;
  font-weight: 700; font-size: .9rem;
  cursor: pointer;
}
.mr-btn:hover { background: var(--mr-accent-hover); color: #ffffff; }
.mr-btn:disabled { opacity: .55; cursor: not-allowed; }
.mr-btn-outline { background: transparent; color: var(--mr-text); border: 1px solid var(--mr-border); }
.mr-btn-block { width: 100%; }

.mr-hint { font-size: .78rem; color: var(--mr-text-muted); margin-top: 0rem; margin-bottom: .9rem; }
.mr-alert { padding: .65rem .85rem; border-radius: 10px; font-size: .87rem; margin-bottom: .9rem; }
.mr-alert-error { background: color-mix(in srgb, var(--mr-danger) 12%, transparent); color: var(--mr-danger); }
.mr-alert-success { background: color-mix(in srgb, #198754 12%, transparent); color: #198754; }

.mr-empty { text-align: center; padding: 3rem 1rem; color: var(--mr-text-muted); font-size: .9rem; border: 1px dashed var(--mr-border); border-radius: var(--mr-radius); }
.mr-load-more { display: block; margin: 1.2rem auto 0; }
.mr-loading-spinner { text-align: center; padding: 1.2rem; color: var(--mr-text-muted); font-size: .85rem; }

.mr-login-gate {
  padding: 1.4rem; text-align: center;
  border: 1px dashed var(--mr-border); border-radius: var(--mr-radius);
  font-size: .9rem; color: var(--mr-text-muted);
  max-width: 640px;
}

.mr-profile-header { padding: 1.5rem 0; border-bottom: 1px solid var(--mr-border); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.mr-profile-header .mr-avatar { width: 76px; height: 76px; font-size: 1.9rem; }
.mr-profile-header h1 { font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: .4rem; }

@media (max-width: 576px) {
  .mr-app { padding: 0 .8rem 2.5rem; }
  .mr-movie-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .6rem; }
  .mr-profile-header { flex-direction: column; text-align: center; }
  .mr-hero { padding: 2rem 1rem 1.6rem; }
}