/* SiteCraft — minimal black / white / grey UI */

:root{
	--sc-black: #111111;
	--sc-gray-900: #1e1e1e;
	--sc-gray-700: #3d3d3d;
	--sc-gray-500: #6b6b6b;
	--sc-gray-300: #a3a3a3;
	--sc-gray-200: #d4d4d4;
	--sc-gray-100: #ececec;
	--sc-gray-50: #f7f7f7;
	--sc-white: #ffffff;
	--sc-radius: 10px;
}

.sc-auth-card, .sc-billing-card {
	max-width: 420px;
	margin: 60px auto;
	padding: 36px;
	background: var(--sc-white);
	border: 1px solid var(--sc-gray-200);
	border-radius: var(--sc-radius);
}
.sc-auth-title { font-size: 22px; font-weight: 600; color: var(--sc-black); margin: 0 0 20px; }
.sc-form label { display:block; font-size:13px; color: var(--sc-gray-500); margin: 14px 0 6px; }
.sc-form input, .sc-form select {
	width: 100%; padding: 11px 14px; font-size: 14px;
	border: 1px solid var(--sc-gray-200); border-radius: 8px;
	background: var(--sc-gray-50); color: var(--sc-black);
}
.sc-form input:focus, .sc-form select:focus { outline: none; border-color: var(--sc-black); background: var(--sc-white); }

.sc-btn {
	display: inline-block; padding: 11px 20px; font-size: 14px; font-weight: 500;
	border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: opacity .15s ease;
}
.sc-btn:hover { opacity: .85; }
.sc-btn-dark { background: var(--sc-black); color: var(--sc-white); width: 100%; margin-top: 18px; text-align:center; }
.sc-btn-outline { background: var(--sc-white); color: var(--sc-black); border-color: var(--sc-gray-200); }
.sc-btn-sm { padding: 7px 14px; font-size: 13px; width: auto; margin-top: 0; }

.sc-form-msg { font-size: 13px; margin-top: 10px; color: var(--sc-gray-700); }
.sc-form-msg.sc-error { color: #b00020; }
.sc-form-msg.sc-success { color: #146c2e; }

.sc-auth-switch, .sc-note { font-size: 13px; color: var(--sc-gray-500); text-align: center; margin-top: 18px; }
.sc-auth-switch a, .sc-note a { color: var(--sc-black); font-weight: 500; }

/* Gallery */
.sc-gallery-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 24px; }
.sc-chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--sc-gray-200); color: var(--sc-gray-700); font-size: 13px; text-decoration:none; }
.sc-chip-active { background: var(--sc-black); color: var(--sc-white); border-color: var(--sc-black); }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.sc-card { border: 1px solid var(--sc-gray-200); border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-white); }
.sc-card-thumb { height: 160px; background-size: cover; background-position: center; background-color: var(--sc-gray-100); }
.sc-card-body { padding: 16px; }
.sc-card-body h3 { font-size: 15px; margin: 0 0 12px; color: var(--sc-black); }

/* Dashboard */
.sc-dashboard { max-width: 900px; margin: 40px auto; }
.sc-dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 24px; }
.sc-dashboard-header h2 { font-size: 20px; color: var(--sc-black); }
.sc-site-row { display:flex; align-items:center; gap:16px; padding: 16px 0; border-bottom: 1px solid var(--sc-gray-100); }
.sc-site-info { display:flex; flex-direction:column; flex:1; }
.sc-site-url { font-size: 12px; color: var(--sc-gray-500); }
.sc-site-actions { display:flex; gap:8px; }

.sc-badge { font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.sc-badge-dark { background: var(--sc-black); color: var(--sc-white); }
.sc-badge-outline { background: var(--sc-gray-100); color: var(--sc-gray-700); }

/* Editor */
.sc-editor-toolbar {
	position: sticky; top: 0; z-index: 999;
	display:flex; align-items:center; gap:18px; flex-wrap:wrap;
	background: var(--sc-white); border-bottom: 1px solid var(--sc-gray-200);
	padding: 12px 20px;
}
.sc-toolbar-group { display:flex; align-items:center; gap:8px; font-size: 12px; color: var(--sc-gray-500); }
.sc-toolbar-group select, .sc-toolbar-group input[type=color] { border: 1px solid var(--sc-gray-200); border-radius: 6px; padding: 5px; }
.sc-toolbar-spacer { flex: 1; }
.sc-editor-hint { text-align:center; font-size: 12px; color: var(--sc-gray-500); padding: 8px; background: var(--sc-gray-50); }

.sc-editable { outline: 1px dashed transparent; cursor: text; transition: outline-color .15s; overflow-wrap: break-word; word-break: break-word; }
.sc-editable:hover { outline-color: var(--sc-gray-300); }
.sc-editable[contenteditable="true"]:focus { outline: 1px solid var(--sc-black); background: var(--sc-gray-50); }
.sc-editable-image { position: relative; cursor: pointer; }
.sc-editable-image:hover::after {
	content: "Click to replace image";
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	background: rgba(17,17,17,.55); color:#fff; font-size: 13px;
}
/* Opt-in: add "sc-fixed-ratio" alongside "sc-editable" on an Elementor image widget
   (Advanced > CSS Classes) to lock that box's shape. Pair it with a height set in
   that same widget's Advanced > Custom CSS tab, e.g. `selector { height: 320px; }`.
   Any image a user swaps in then crops to fill the box (object-fit: cover) instead
   of stretching or changing the page layout — see the setup guide's "Designing
   templates that survive user edits" section. */
.sc-editable-image.sc-fixed-ratio { overflow: hidden; }
.sc-editable-image.sc-fixed-ratio img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Guaranteed theme-color utility classes — add any of these directly to a widget
   (Advanced > CSS Classes) to have it follow the Primary/Secondary pickers in the
   editor toolbar, regardless of Elementor version or whether that widget uses
   Global Colors at all. This is the recommended approach for Elementor V4/Atomic
   elements, whose own Global Color wiring isn't something SiteCraft controls. */
.sc-text-primary   { color: var(--sc-primary) !important; }
.sc-text-secondary { color: var(--sc-secondary) !important; }
.sc-bg-primary      { background-color: var(--sc-primary) !important; }
.sc-bg-secondary    { background-color: var(--sc-secondary) !important; }
.sc-border-primary   { border-color: var(--sc-primary) !important; }
.sc-border-secondary { border-color: var(--sc-secondary) !important; }

.sc-editor-publish-panel {
	max-width: 480px; margin: 30px auto 60px; padding: 24px;
	border: 1px solid var(--sc-gray-200); border-radius: var(--sc-radius);
}
.sc-editor-publish-panel h3 { font-size: 15px; margin: 0 0 14px; }
.sc-publish-row { display:flex; justify-content:space-between; align-items:center; padding: 10px 0; border-bottom: 1px solid var(--sc-gray-100); font-size: 13px; }
.sc-publish-row:last-child { border-bottom: none; }
.sc-publish-row select { border:1px solid var(--sc-gray-200); border-radius:6px; padding:5px 8px; }
.sc-publish-row-stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.sc-inline-form { display:flex; align-items:center; gap:6px; width:100%; }
.sc-inline-form .sc-slug-prefix { color: var(--sc-gray-500); white-space: nowrap; }
.sc-inline-form input { flex:1; border:1px solid var(--sc-gray-200); border-radius:6px; padding:5px 8px; font-size:13px; }
#sc-slug-msg { margin: -4px 0 10px; }

/* Billing */
.sc-plan-options { display:flex; gap:12px; margin-bottom: 20px; }
.sc-plan-box { flex:1; border:1px solid var(--sc-gray-200); border-radius: 8px; padding: 16px; text-align:center; cursor:pointer; display:flex; flex-direction:column; gap:6px; }
.sc-plan-box input { width:auto; }
.sc-plan-name { font-weight:600; color: var(--sc-black); }
.sc-plan-price { font-size: 13px; color: var(--sc-gray-500); }

.sc-dns-instructions { margin-top: 24px; }
.sc-table { width:100%; border-collapse: collapse; font-size: 13px; }
.sc-table td { border: 1px solid var(--sc-gray-200); padding: 8px 10px; }