/* Tourism Guidelines Suite v3.0.2 */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:#e6e7ef;
  --text:#111827;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --danger:#dc2626;
  --radius:16px;
  --shadow: 0 10px 24px rgba(17,24,39,.06);
}
*{ box-sizing:border-box; }

.tgs-app{ max-width:1280px; margin: 22px auto; padding: 0 14px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; overflow-x:hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.tgs-topbar{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;
  background:linear-gradient(180deg,#ffffff 0%, #fbfbff 100%);
  border:1px solid var(--border); border-radius: var(--radius);
  padding:16px; box-shadow: var(--shadow);
}
.tgs-badge{ display:inline-flex; padding:6px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted); background:#fff; }
.tgs-title{ margin:8px 0 0 0; font-weight:900; letter-spacing:-.02em; color:var(--text); }
.tgs-title{ word-break: break-word; }
.tgs-sub{ margin-top:8px; color:var(--muted); }

.tgs-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Inline (always visible) template settings */
.tgs-inline-settings{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:12px 14px; margin:12px 0 0 0; border:1px solid var(--border); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow); }
.tgs-inline-group{ min-width:130px; flex: 1 1 150px; }
.tgs-inline-group label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.tgs-inline-settings .tgs-input2{ width:100%; }
.tgs-orient{ display:flex; gap:8px; }
.tgs-chip{
  padding:8px 12px; border:1px solid var(--border); border-radius:999px;
  background:#fff; color:var(--text); font-weight:900; font-size:13px; cursor:pointer;
}
.tgs-chip.active{ background: var(--text); color:#fff; border-color: var(--text); }

.tgs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--border); background:#fff;
  color:var(--text); font-weight:900; cursor:pointer; text-decoration:none;
}
.tgs-btn.primary{ background: var(--primary); border-color: var(--primary); color:#fff; }
.tgs-btn.primary:hover{ background: var(--primary2); border-color: var(--primary2); }
.tgs-btn.danger{ border-color:#fecaca; color: var(--danger); background:#fff; }
.tgs-btn.sm{ padding:8px 10px; font-size:12px; }

.tgs-input{
  border:1px solid var(--border); border-radius:999px;
  padding:12px 14px; background:#fff; color:var(--text);
  width: 100%;
}

.tgs-columns{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:14px;
  align-items:start;
}
.tgs-col{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding:14px; box-shadow: var(--shadow);
}
.tgs-col-canvas{ min-height: 600px; }
.tgs-row{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.tgs-h3{ margin:0; font-weight:900; color:var(--text); }
.tgs-mini{ display:flex; gap:8px; }

.tgs-grid{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:12px; }
.tgs-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding:12px; box-shadow: var(--shadow);
}
.tgs-card[draggable="true"]{ cursor: grab; }
.tgs-card-top{ display:flex; align-items:center; gap:10px; }
.tgs-card-title{ font-weight:900; color:var(--text); flex:1; }
.tgs-pill{
  padding:6px 10px; border-radius:999px;
  background:#f3f4f6; color:#111; font-weight:900; font-size:12px; border:1px solid var(--border);
}
.tgs-card-preview{
  margin-top:10px; border:1px dashed var(--border); border-radius:12px; padding:10px; background:#fbfbff;
  max-height: 130px; overflow:auto; font-size:13px;
}
.tgs-card-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

.tgs-note{
  margin-top:12px; padding:12px; border:1px solid var(--border); border-radius: var(--radius);
  background:#fbfbff; color:var(--text); font-size:13px;
}

/* Screen preview uses px sizes to avoid layout issues with mm */
.tgs-canvas-wrap{
  display:flex; justify-content:center;
  padding:12px; background: var(--bg);
  border:1px dashed var(--border); border-radius: var(--radius);
  overflow:auto;
}
.tgs-canvas{
  background:#fff; border:1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(17,24,39,.10);
  padding: 40px;
  display:flex; flex-direction:column; gap:10px;
  position:relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  /* Do not force a layout min-width; we scale the preview via transform on small screens */
}
.tgs-canvas.portrait{ width: 794px; min-height: 1123px; }
.tgs-canvas.landscape{ width: 1123px; min-height: 794px; }
.tgs-canvas.dragover{ outline: 3px solid rgba(37,99,235,.35); }

.tgs-canvas-hint{
  color:var(--muted); font-weight:900; text-align:center;
  padding:22px; border:2px dashed var(--border); border-radius: 12px;
}

.tgs-block{
  border:2px solid #111; border-radius: 12px;
  padding: 12px;
  background:#fff;
}
.tgs-block[draggable="true"]{ cursor: grab; }
.tgs-block-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.tgs-block-title{ font-weight:900; color:#111; }
.tgs-block-tools{ display:flex; gap:8px; }
.tgs-icon{
  border:1px solid var(--border); background:#fff; border-radius: 10px;
  padding:6px 10px; cursor:pointer; font-weight:900;
}
.tgs-icon.danger{ border-color:#fecaca; color: var(--danger); }

.tgs-block-body{ margin-top:8px; font-size:13px; line-height:1.75; }
.tgs-line{ display:block; }
.tgs-line.ar{ direction:rtl; text-align:right; font-weight:800; }
.tgs-line.en{ direction:ltr; text-align:left; color:#374151; }

.tgs-alert{
  padding:12px 14px; border:1px solid var(--border); border-radius: var(--radius);
  background:#fff; color: var(--text);
}

.tgs-modal-backdrop{ position:fixed; inset:0; background: rgba(17,24,39,.42); z-index:99999; display:flex; align-items:center; justify-content:center; padding:14px; }
.tgs-modal{ width: min(860px, 96vw); background:#fff; border-radius: var(--radius); border:1px solid var(--border); box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow:hidden; }
.tgs-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.tgs-modal-title{ font-weight:900; color:var(--text); }
.tgs-modal-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.tgs-modal-foot{ padding:14px 16px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.tgs-field{ display:flex; flex-direction:column; gap:6px; }
.tgs-field label{ font-weight:900; }
.tgs-input2{ border:1px solid var(--border); border-radius: 12px; padding:12px; width:100%; }

.tgs-print-only{ background: var(--bg); margin:0; }
.tgs-toolbar{
  position:sticky; top:0; z-index:999; display:flex; gap:10px; flex-wrap:wrap;
  padding:12px; background:#fff; border-bottom:1px solid var(--border);
}

@media (max-width: 1100px){
  .tgs-columns{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .tgs-app{ margin: 14px auto; padding: 0 10px; }
  .tgs-topbar{ padding:12px; }
  .tgs-actions{ width:100%; justify-content:flex-start; }
  .tgs-btn{ width:100%; justify-content:center; }
  .tgs-orient{ width:100%; }
  .tgs-chip{ flex:1 1 auto; text-align:center; }
  .tgs-inline-settings{ padding:10px 12px; }
  .tgs-inline-group{ flex: 1 1 100%; min-width: 100%; }
  .tgs-grid{ max-height: none; }

  /* Prevent any accidental horizontal overflow on mobile */
  .tgs-topbar, .tgs-inline-settings, .tgs-columns, .tgs-col{ max-width:100%; }
  /* Mobile preview: allow horizontal scroll inside the preview (not the whole page)
     so the canvas stays readable instead of becoming tiny. */
  .tgs-canvas-wrap{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; }
}


@media print{
  @page { size: A4 portrait; margin: 10mm; } /* overwritten by injected style */
  .no-print, .tgs-topbar, .tgs-col:first-child, .tgs-row, .tgs-sub2, .tgs-note{ display:none !important; }
  body{ background:#fff !important; }
  .tgs-col{ border:none !important; box-shadow:none !important; padding:0 !important; }
  .tgs-canvas-wrap{ border:none !important; padding:0 !important; background:#fff !important; overflow:visible !important; }
  .tgs-canvas{
    border:none !important; box-shadow:none !important; border-radius:0 !important;
    padding: 0 !important; margin:0 !important;
    width:auto !important; min-width:0 !important;
  }
  .tgs-block{ page-break-inside: avoid; }
}

/* v3.0.3 UI improvements */
.tgs-col{ overflow:hidden; }
.tgs-grid{ max-height: calc(100vh - 310px); overflow:auto; padding-right:4px; }
.tgs-col-canvas{ overflow:visible; }
@media print{ .tgs-block-tools{ display:none !important; } .tgs-pill{ display:none !important; } }

/* v3.0.5 layout: canvas under library + responsive scaling */
.tgs-canvas{ max-width: 100%; }
.tgs-canvas-wrap{ justify-content:flex-start; }
.tgs-canvas-scale{
  transform-origin: top center;
}

/* Mobile/tablet: keep the preview readable.
   Allow horizontal scroll INSIDE the preview area (never on the whole page). */
@media (max-width: 820px){
  .tgs-canvas-wrap{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
  }
}


/* v3.0.6: columns inside canvas */
.tgs-canvas-inner{ display:block; }
.tgs-canvas-inner .tgs-block{ break-inside: avoid; page-break-inside: avoid; }
.tgs-canvas.tgs-cols-2 .tgs-canvas-inner{ column-count: 2; column-gap: 18px; }
.tgs-canvas.tgs-cols-1 .tgs-canvas-inner{ column-count: 1; column-gap: 0; }
.tgs-canvas.tgs-cols-2 .tgs-block{ display:inline-block; width: 100%; margin: 0 0 12px 0; }

/* v3.0.6: Print isolation - hide theme header/footer and print ONLY canvas */
@media print{
  header, footer, nav, .site-header, .site-footer, .header, .footer, #header, #footer,
  .entry-header, .page-header, .wp-block-site-title, .wp-block-navigation,
  .wp-site-blocks > header, .wp-site-blocks > footer { display:none !important; }

  body * { visibility: hidden !important; }
  .tgs-canvas-wrap, .tgs-canvas-wrap * { visibility: visible !important; }

  .tgs-canvas-wrap{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  .tgs-canvas{
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 10mm !important;
  }
  .tgs-canvas-inner{ column-fill: auto; }
}


/* v3.0.7: library 3 columns to reduce page height */
.tgs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1100px){
  .tgs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .tgs-grid{ grid-template-columns: 1fr; }
}

/* make cards more compact for multi-column */
.tgs-card-preview{ max-height: 90px; }
.tgs-card-actions .tgs-btn.sm{ padding:7px 9px; }

.tgs-grid{ max-height: calc(100vh - 330px); overflow:auto; padding: 6px 4px 6px 0; }

/* v3.0.9: Fix landscape preview shift - always center scaled canvas */
.tgs-canvas-wrap{ justify-content:center !important; overflow-x:hidden !important; }
.tgs-canvas{ margin: 0 auto; }

/* v3.0.9: Canvas variables */
.tgs-canvas-inner{ font-size: var(--tgs-font, 13px); }
.tgs-canvas.tgs-cols-2 .tgs-canvas-inner,
.tgs-canvas.tgs-cols-3 .tgs-canvas-inner{ column-gap: var(--tgs-colgap, 18px); }
.tgs-canvas.tgs-cols-1 .tgs-canvas-inner{ column-gap: 0; }

/* 3 columns */
.tgs-canvas.tgs-cols-3 .tgs-canvas-inner{ column-count: 3; }
.tgs-canvas.tgs-cols-3 .tgs-block{ display:inline-block; width: 100%; margin: 0 0 12px 0; }

/* Icon styles */
.tgs-iconmark{
  display:inline-flex;
  width:28px; height:28px;
  align-items:center; justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  font-size:16px;
  flex: 0 0 auto;
}
.tgs-card-top{ gap:10px; }
.tgs-block-title{ display:flex; align-items:center; gap:10px; }
.tgs-canvas.tgs-icons-off .tgs-iconmark{ display:none !important; }

@media print{
  .tgs-canvas-inner{ font-size: var(--tgs-font, 13px) !important; }
  .tgs-canvas.tgs-cols-2 .tgs-canvas-inner,
  .tgs-canvas.tgs-cols-3 .tgs-canvas-inner{ column-gap: var(--tgs-colgap, 18px) !important; }
}

/* v3.1.0: preview scaling fix */
.tgs-canvas-wrap{ overflow-x:hidden !important; }
.tgs-canvas-scale{ transform-origin: top center; }


/* ===== v3.2.0: Blocks library badge + subtitles ===== */
.tgs-section-sub{ color:#6b7280; font-size:12px; margin:4px 0 10px; }
.tgs-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px; border-radius:999px; font-size:11px;
  border:1px solid var(--border); background:#fff; color:#111827;
}
/* ===== v3.2.0: Grid Layout Builder ===== */
.tgs-canvas.tgs-layout-grid .tgs-canvas-inner{
  column-count: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--tgs-grid-cols, 2), 1fr);
  grid-template-rows: repeat(var(--tgs-grid-rows, 4), minmax(120px, auto));
  gap: var(--tgs-grid-gap, 12px);
}
.tgs-cell{
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.55);
  min-height: 120px;
}
.tgs-canvas.tgs-grid-lines-off .tgs-cell{
  border-color: transparent;
  background: transparent;
}
.tgs-cell.dragover{ outline: 2px solid rgba(0,0,0,0.15); }
@media print{
  .tgs-canvas.tgs-layout-grid .tgs-cell{ border:1px solid #e5e7eb; }
  .tgs-canvas.tgs-grid-lines-off .tgs-cell{ border:0; }
}

/* v3.2.3: hide editing tools for guests */
body.tgs-no-edit .tgs-block-tools{ display:none !important; }