* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0; color:#111; }
.container { max-width: 980px; margin: 0 auto; padding: 16px; }
header { display:flex; align-items:center; justify-content:space-between; gap: 16px; }
h1 { margin: 0; font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
nav a { margin-right: 12px; text-decoration: none; color:#222; }
nav a.cta { font-weight: 700; }
.tagline { color: #444; margin: 8px 0 0 0; }
.hero { padding: 24px 16px; background: #f7f7f7; border-radius: 8px; margin-top: 8px; }
.button { display:inline-block; padding: 10px 16px; border: 1px solid #222; text-decoration: none; font-weight: 700; }
.steps { line-height: 1.9; }
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 12px; }
.card { border: 1px solid #ddd; padding: 12px; border-radius: 6px; }
.footer { color:#555; font-size: 0.9rem; }
.form { display:grid; gap: 12px; max-width: 680px; }
.form label { display:grid; gap:6px; }
.form input[type=text], .form input[type=email], .form textarea { padding:10px; border:1px solid #ccc; border-radius:6px; }
.form-row { margin-top: 6px; }
.status { margin-top: 8px; }
.success { color: #0a7a2f; }
.error { color: #a31919; }

/* Arabic RTL adjustments */
html[lang="ar"] {
  direction: rtl;
  text-align: right;
}
html[lang="ar"] body {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif; /* supports Arabic */
}
html[lang="ar"] nav a,
html[lang="ar"] .badge,
html[lang="ar"] .panel,
html[lang="ar"] .card,
html[lang="ar"] .form label {
  direction: rtl;
  text-align: right;
}

/* Instagram embeds */
.ig-section{ margin:48px auto; }
.ig-section h2{ margin:0 0 12px 0; }
.ig-embeds{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
/* Instagramの埋め込みは blockquote.instagram-media が生成される */
.ig-embeds .instagram-media{ margin:0 !important; width:100% !important; max-width:100% !important; border-radius:8px; }
/* iFrame化された後の余白調整 */
.ig-embeds iframe{ border-radius:8px; }

/* =========================================================
   Admin UI – shared components & utilities
   ========================================================= */

/* Layout: header/topbar + toolbars */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; border-bottom:1px solid #222;
  position:sticky; top:0; background:#111; color:#fff; z-index:10;
}
.topbar h1{ font-size:1.1rem; margin:0; font-weight:700; }
.toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.toolbar a, .toolbar button{
  white-space:nowrap; word-break:keep-all; writing-mode:horizontal-tb;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px; border:1px solid #333; border-radius:6px;
  background:#111; color:#fff; text-decoration:none; font-weight:700;
  cursor:pointer;
}
/* Force horizontal writing & prevent per-character wrap in topbar buttons (mobile) */
.topbar .toolbar a,
.topbar .toolbar button{
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex: 0 0 auto;              /* avoid shrinking to too-narrow width */
  min-width: 86px;             /* keep readable width */
  text-align: center;
}

/* Admin containers */
.admin-container{ max-width:1080px; margin:0 auto; padding:16px; }
.admin-page{ display:block; }
.admin-subbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.admin-title{ margin:0; font-size:1.4rem; font-weight:700; }

/* Simple grid helpers for admin forms */
.grid{ display:grid; gap:12px; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 880px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

/* Post editor split layout */
.admin-grid{ display:grid; grid-template-columns: 1fr 380px; gap:16px; align-items:start; }
.preview-col{ position:sticky; top:64px; }
@media (max-width: 1080px){ .admin-grid{ grid-template-columns: 1fr; } .preview-col{ position:static; } }

/* Preview pane */
.post-preview{ border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; background:#fff; }
.post-preview .hero{ width:100%; height:220px; object-fit:cover; display:block; }
.post-preview .ph{ display:grid; place-items:center; height:220px; background:linear-gradient(180deg,#f7f7f7,#eee); color:#9aa0a6; font-size:.95rem; }
.post-preview .pad{ padding:12px; }
.post-preview .meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }

/* Chips (lightweight badges) */
.chip{ display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:999px; background:#f3f4f6; color:#111; font-size:.85rem; border:1px solid #e5e7eb;
       white-space: nowrap; word-break: keep-all; writing-mode: horizontal-tb; }

/* Hero/thumb preview used in heroes.php etc */
.preview, .hero-preview{ width:200px; height:100px; object-fit:cover; border:1px solid #ccc; border-radius:6px; background:#f5f5f5; display:block; }
.preview--empty{ display:flex; align-items:center; justify-content:center; color:#999; }

/* Tables: wrapper for horizontal scroll on small screens */
.table-wrap{ overflow:auto; }

/* Code snippet (compact) */
.code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.9em; background:#0b0d10; color:#e6e6e6; padding:10px 12px; border-radius:8px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:6px;
      padding:8px 12px; border:1px solid #ccc; border-radius:6px;
      background:#fff; color:#111; text-decoration:none; cursor:pointer;
      white-space:nowrap;           /* 折り返し禁止 */
      word-break:keep-all;          /* CJKでも1文字改行を防止 */
      writing-mode:horizontal-tb;   /* 念のため横書きを明示 */
}

/* --- Admin-only primary/toolbar button base colors --- */
.admin-page .btn--primary{
  background:#111;  /* keep black base */
  border-color:#111;
  color:#fff;
}
.admin-page .btn--primary:hover{
  background:#b00020;  /* red on hover */
  border-color:#b00020;
  color:#fff;
}
/* Toolbar buttons in admin (e.g., 追加/検索) */
.admin-page .toolbar a,
.admin-page .toolbar button{
  background:#111;
  border-color:#111;
  color:#fff;
}
.admin-page .toolbar a:hover,
.admin-page .toolbar button:hover{
  opacity:1;
  background:#b00020;  /* red on hover */
  border-color:#b00020;
  color:#fff;
}

/* --- Admin-only button hover/focus adjustments (do not affect public pages) --- */
.admin-page .btn--danger:hover{
  background:#9d1222;
  color:#fff;
  border-color:#9d1222;
}
/* keep ghost readable on hover */
.admin-page .btn--ghost:hover{
  background:#f3f3f3;
  color:#111;
  border-color:#ccc;
}
/* keyboard focus visibility (admin only) */
.admin-page .btn:focus{
  outline: 2px solid #4c9aff;
  outline-offset: 2px;
}

/* Pills / Badges */
.pill{ display:inline-flex; align-items:center; gap:6px;
       padding:4px 8px; border-radius:999px; border:1px solid #ddd; font-size:.85rem; }
.pill--success{ background:#ecf8ef; color:#0a7a2f; border-color:#ccebd6; }
.pill--warn{ background:#fff6e6; color:#8a5700; border-color:#ffe4b3; }
.pill--danger{ background:#fdebed; color:#a31919; border-color:#f7c6cc; }
.badge{ display:inline-block; padding:2px 6px; border-radius:4px;
        background:#111; color:#fff; font-size:.8rem; }

/* Tables */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{
  border-bottom:1px solid #eee;
  padding:10px;
  text-align:left;
  vertical-align:top;
  white-space: pre-line; /* render \n in labels as actual line breaks */
}
/* --- Pricing table: allow i18n newlines to break --- */
.pricing table th,
.pricing table td,
.pricing-table th,
.pricing-table td,
.ref-pricing th,
.ref-pricing td{
  white-space: pre-line; /* render \n as line breaks in headers/labels */
}
/* --- Force line breaks in pricing table, even if .nowrap is applied elsewhere --- */
.ref-pricing th,
.ref-pricing td{
  white-space: pre-line !important;
}
/* If markup uses .nowrap on cells or inner spans, override here */
.ref-pricing th.nowrap,
.ref-pricing td.nowrap,
.ref-pricing th .nowrap,
.ref-pricing td .nowrap{
  white-space: pre-line !important;
}
.table th{ font-weight:700; background:#fafafa; }
.table .actions{ display:flex; align-items:center; gap:6px; }
@media (max-width: 540px){
  .table .actions{ flex-wrap: wrap; }
}

/* Forms (admin) */
.adm-form{ display:grid; gap:10px; max-width:780px; }
.adm-row{ display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:center; }
.adm-form input[type=text], .adm-form input[type=url], .adm-form input[type=number], .adm-form textarea, .adm-form select{
  padding:9px 10px; border:1px solid #ccc; border-radius:6px; width:100%;
}
.adm-form textarea{ min-height:120px; }

/* Lists / cards */
.stack{ display:grid; gap:12px; }
.hstack{ display:flex; align-items:center; gap:8px; }
.card--soft{ border:1px solid #eee; border-radius:8px; padding:12px; background:#fff; }
.muted{ color:#666; }

/* Inline code / code blocks for admin notes */
code,kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.9em; }
.code-block{ background:#0b0d10; color:#e6e6e6; padding:12px; border-radius:8px; overflow:auto; }
.code-block::-webkit-scrollbar{ height:8px; }
.code-block::-webkit-scrollbar-thumb{ background:#333; border-radius:999px; }

/* Pagination / small controls */
.pager{ display:flex; align-items:center; gap:6px; }
.pager .page{ padding:6px 10px; border:1px solid #ddd; border-radius:6px; text-decoration:none; color:#111; }
.pager .current{ background:#111; color:#fff; border-color:#111; }

/* Notices */
.notice{ border:1px dashed #bbb; background:#fafafa; padding:10px 12px; border-radius:8px; }
.notice--ok{ border-color:#ccebd6; background:#f3faf5; color:#0a7a2f; }
.notice--warn{ border-color:#ffe4b3; background:#fff8ea; color:#8a5700; }

/* Small utilities */
.nowrap{ white-space:nowrap; }
.center{ text-align:center; }
.right{ text-align:right; }
.mt-0{ margin-top:0; } .mt-4{ margin-top:4px; } .mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-0{ margin-bottom:0; } .mb-4{ margin-bottom:4px; } .mb-8{ margin-bottom:8px; } .mb-12{ margin-bottom:12px; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; }
.gap-4{ gap:4px; } .gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }

/* Additional spacing utilities */
.mt-2{ margin-top:2px; }
.mb-2{ margin-bottom:2px; }

/* Width helpers */
.w-auto{ width:auto; }
.max-w-100{ max-width:100%; }

.w-100{ width:100%; }
.hidden{ display:none !important; }

/* Responsive tweaks */
@media (max-width: 680px){
  .adm-row{ grid-template-columns: 1fr; }
  .topbar{ flex-direction:column; align-items:flex-start; }
}

/* --- form checkbox inline layout --- */
.form .agree-row{ display:block; }
.form label.checkbox{ display:block; margin:0; cursor:pointer; }
.form label.checkbox input[type=checkbox],
.form label.checkbox span{ display:inline-block; vertical-align:top; }
.form label.checkbox input[type=checkbox]{ width:auto; height:1.1rem; margin:0; margin-right:.6rem; }
.form label.checkbox span{ line-height:1.4; }
html[lang="ar"] .form label.checkbox{ text-align:right; }
html[lang="ar"] .form label.checkbox input[type=checkbox]{ margin-right:0; margin-left:.6rem; }