/* Miastoo Size Guide - frontend - lightweight, RTL, modal + floating */
:root {
  --msg-primary: #111827;
  --msg-accent: #f59e0b;
  --msg-border: #e5e7eb;
  --msg-bg: #ffffff;
  --msg-muted: #6b7280;
  --msg-radius: 16px;
  --msg-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* Trigger inline */
.msg-trigger-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.msg-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px dashed #111827;
  background: #fff;
  color: #111827;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .22s ease;
}
.msg-trigger-btn:hover {
  background: #111827;
  color: #fff;
  border-style: solid;
  transform: translateY(-1px);
}
.msg-trigger-sub {
  font-size: 11.5px;
  color: var(--msg-muted);
  background: #f9fafb;
  border: 1px solid var(--msg-border);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Floating button */
.msg-floating-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .2s, box-shadow .2s;
}
.msg-floating-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
@media (max-width: 640px) {
  .msg-floating-btn { bottom: 14px; left: 14px; padding: 11px 16px; font-size: 12.5px; }
}

/* Modal */
.msg-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.msg-modal.is-open { display: block; }
.msg-modal__backdrop { position: absolute; inset: 0; background: rgba(17,24,39,.55); }
@supports (backdrop-filter: blur(1px)) {
  .msg-modal__backdrop { backdrop-filter: blur(2px); }
}
.msg-modal__dialog {
  position: relative;
  max-width: 720px;
  width: calc(100% - 32px);
  margin: 40px auto;
  background: var(--msg-bg);
  border-radius: 20px;
  box-shadow: var(--msg-shadow);
  overflow: hidden;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: msgIn .18s ease-out;
  will-change: transform, opacity;
}
@keyframes msgIn { from { opacity:0; transform: translateY(8px) scale(.99);} to {opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce) {
  .msg-modal__dialog { animation:none; }
}

.msg-modal__close {
  position: absolute; top: 12px; left: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--msg-border); background:#fff; color:#111827; cursor:pointer; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.msg-modal__header { padding: 22px 22px 0; border-bottom: 1px solid var(--msg-border); }
.msg-modal__title { margin:0 0 4px; font-size: 18px; font-weight: 800; color: var(--msg-primary); }
.msg-modal__desc { margin:0 0 12px; font-size: 12.5px; color: var(--msg-muted); }
.msg-modal__tabs { display:flex; gap:6px; margin-top: 12px; flex-wrap:wrap; }
.msg-tab {
  padding: 8px 14px; border-radius: 999px; border:1px solid var(--msg-border);
  background:#fff; font-size:12.5px; font-weight:700; cursor:pointer; color: var(--msg-muted);
}
.msg-tab.is-active { background:#111827; color:#fff; border-color:#111827; }
.msg-modal__tools { display:flex; align-items:center; gap:10px; padding: 12px 0; flex-wrap:wrap; }
.msg-unit-toggle { display:inline-flex; border:1px solid var(--msg-border); border-radius:999px; overflow:hidden; }
.msg-unit { padding:6px 12px; font-size:12px; font-weight:700; border:none; background:#fff; cursor:pointer; color:var(--msg-muted); }
.msg-unit.is-active { background:#111827; color:#fff; }
.msg-hint { font-size:11px; color:var(--msg-muted); }
.msg-modal__body { padding: 16px 22px 22px; overflow:auto; }

.msg-table-wrap { overflow:auto; border:1px solid var(--msg-border); border-radius:12px; }
.msg-table { width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
.msg-table th { background:#f9fafb; text-align:center; padding:10px 8px; font-weight:800; color:#111827; border-bottom:1px solid var(--msg-border); white-space:nowrap; }
.msg-table th small { display:block; font-weight:500; color:var(--msg-muted); font-size:10px; }
.msg-table td { text-align:center; padding:10px 8px; border-bottom:1px solid #f3f4f6; color:#1f2937; }
.msg-table tbody tr:hover { background:#fffbeb; }
.msg-table tbody tr:nth-child(even) { background:#fafafa; }
.msg-table tbody tr:nth-child(even):hover { background:#fffbeb; }
.msg-note { margin-top:10px; font-size:11.5px; color:var(--msg-muted); background:#fffbeb; border:1px solid #fde68a; padding:8px 10px; border-radius:8px; }

.msg-panel { display:none; }
.msg-panel.is-active { display:block; }
.msg-print-btn { margin-inline-start:auto; background:#fff; color:#111827; border:1px solid var(--msg-border); padding:6px 10px; border-radius:999px; font-size:11px; cursor:pointer; font-weight:600; }
.msg-print-btn:hover { background:#f9fafb; }
.msg-finder { background:#fafafa; border:1px solid var(--msg-border); border-radius:12px; padding:16px; }
.msg-finder__intro { margin:0 0 12px; font-size:13px; font-weight:700; color:var(--msg-primary); }
.msg-finder__fields { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media(max-width:520px){ .msg-finder__fields{ grid-template-columns:1fr; } }
.msg-finder__field { display:flex; flex-direction:column; gap:4px; }
.msg-finder__field span { font-size:11.5px; color:var(--msg-muted); font-weight:600; }
.msg-finder__field input { padding:9px 10px; border:1px solid var(--msg-border); border-radius:8px; font-size:13px; background:#fff; }
.msg-finder__field input:focus { outline:none; border-color:var(--msg-primary); box-shadow:0 0 0 2px rgba(17,24,39,.08); }
.msg-finder__actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.msg-finder__btn { background:#111827; color:#fff; border:none; padding:10px 18px; border-radius:999px; font-size:13px; font-weight:800; cursor:pointer; }
.msg-finder__btn:hover { background:#000; }
.msg-finder__save { background:#fff; color:#111827; border:1px solid var(--msg-border); padding:9px 14px; border-radius:999px; font-size:12px; cursor:pointer; font-weight:600; }
.msg-finder__save:hover { background:#f9fafb; }
.msg-finder__hint { font-size:11px; color:var(--msg-muted); }
.msg-finder__result { margin-top:12px; }
.msg-row--suggested { background:#fef3c7 !important; outline:2px solid #f59e0b; }
/* print removed per request */
.msg-guide-img { width:100%; max-height:320px; object-fit:contain; border-radius:12px; border:1px solid var(--msg-border); }
.msg-guide-placeholder { text-align:center; padding:16px; border:1px dashed var(--msg-border); border-radius:12px; background:#fafafa; }
.msg-guide-placeholder p { margin:10px 0 0; font-size:12.5px; color:var(--msg-muted); }
.msg-guide-text { margin-top:12px; font-size:13px; line-height:1.8; color:#374151; background:#f9fafb; padding:12px; border-radius:10px; }
.msg-guide-list { margin:12px 0 0; padding-right:18px; font-size:12.5px; line-height:1.9; color:#374151; }
.msg-guide-list li { margin-bottom:2px; }

/* Tab block after summary */
.msg-tab-block { margin:24px 0; }
.msg-tab-block__title { font-size:15px; font-weight:800; margin:0 0 10px; }
.msg-table--tab { min-width: 480px; }

/* Shortcode */
.msg-shortcode-table h4 { margin:0 0 10px; }

/* Mobile bottom sheet */
@media (max-width: 640px) {
  .msg-modal__dialog { width:100%; margin:0; border-radius:18px 18px 0 0; position:absolute; bottom:0; max-height:85vh; }
  .msg-modal__header { padding:18px 16px 0; }
  .msg-modal__body { padding:14px 16px 20px; }
  .msg-table { min-width:460px; font-size:12.5px; }
}

/* RTL */
.msg-modal, .msg-trigger-wrap, .msg-tab-block { direction: rtl; text-align: right; }