html {
  font-size: 14px;
}

:root {
  --atf-primary: #3f5ed7;
  --atf-primary-dark: #1e2a4a;
  --atf-bg-soft: #f4f6fb;
  --atf-text: #1b243b;
  --atf-border: #dce2ee;
  --atf-surface: #ffffff;
  --atf-radius: 12px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-bottom: 0;
  background-color: var(--atf-bg-soft);
  color: var(--atf-text);
}

body > .container,
body > .content-wrapper {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

.navbar {
  background-color: var(--atf-surface) !important;
}

/* Shared application shell. Pages keep their own content, but inherit one
   navigation, surface, spacing, and form language everywhere outside the
   visual editor. */
.app-header { position: relative; z-index: 1000; }
.app-nav {
  min-height: 68px;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--atf-border) !important;
  box-shadow: 0 2px 14px rgba(23,33,61,.07);
}
.app-nav-inner { max-width: 1440px; padding: 0 24px; }
.app-brand { margin-right: 22px; }
.app-brand img { height: 36px !important; }
.app-nav-collapse { gap: 16px; }
.app-nav-links { gap: 3px; align-items: center; }
.app-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #42506f !important;
  border-radius: 7px;
  padding: 9px 10px !important;
  font-size: .88rem;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.app-nav-link:hover, .app-nav-link:focus, .app-nav-link[aria-current="page"] {
  color: var(--atf-primary) !important;
  background: #eef2ff;
}
.app-nav-link i { color: var(--atf-primary); font-size: 1rem; }
.app-nav .dropdown-menu {
  min-width: 215px;
  margin-top: .45rem;
  padding: .45rem;
  border: 1px solid var(--atf-border);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(23,33,61,.14);
}
.app-nav .dropdown-header {
  padding: .45rem .7rem .3rem;
  color: #69758f;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.app-nav .dropdown-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  border-radius: 6px;
  color: var(--atf-text);
  padding: .55rem .7rem;
  font-size: .9rem;
}
.app-nav .dropdown-item:hover,
.app-nav .dropdown-item:focus {
  color: var(--atf-primary-dark);
  background: #eef2ff;
}
.app-nav .dropdown-item i { width: 1.15rem; color: var(--atf-primary); text-align: center; }
.app-account-link { color: #5f6b86 !important; font-weight: 500; }
.app-logout-link { border: 0; }
.app-content { min-height: calc(100vh - 68px); }
.app-container { max-width: 1440px; }
.app-main { padding-top: 8px; }
.app-main > .container, .app-main > .container-fluid { max-width: 100%; }
.app-main h1.display-4 { color: var(--atf-primary-dark); font-weight: 750; letter-spacing: -.025em; }
.app-main > .container > .d-flex:first-child,
.app-main > .container-fluid > .d-flex:first-child { margin-top: 14px; }
.app-main .card {
  border: 1px solid var(--atf-border);
  border-radius: var(--atf-radius);
  box-shadow: 0 5px 18px rgba(23,33,61,.06) !important;
}
.app-main .card-header { background: #f8f9fd; border-bottom-color: var(--atf-border); font-weight: 700; }
.app-main .form-control, .app-main .form-select { border-color: #cbd4e4; border-radius: 7px; }
.app-main .form-control:focus, .app-main .form-select:focus { border-color: var(--atf-primary); box-shadow: 0 0 0 .2rem rgba(63,94,215,.14); }
.app-main .btn { border-radius: 7px; font-weight: 600; }
.app-main .btn-lg { padding: .65rem 1.1rem; }
.app-main .alert { border: 1px solid transparent; border-radius: 9px; box-shadow: 0 3px 12px rgba(23,33,61,.04); }
.app-footer { background: #fff; border-color: var(--atf-border) !important; }
.app-footer a { color: var(--atf-primary); }

/* Shared administrator shell. Keep admin pages compact and predictable while
   allowing each feature to focus on its own work. */
.admin-shell {
  background: var(--atf-bg-soft);
}
.admin-header {
  position: relative;
  z-index: 1000;
}
.admin-nav {
  min-height: 68px;
  margin-bottom: 0 !important;
  background: var(--atf-surface) !important;
  border-bottom: 1px solid var(--atf-border) !important;
  box-shadow: 0 2px 14px rgba(23,33,61,.07);
}
.admin-nav-inner {
  max-width: 1480px;
  padding: 0 24px;
}
.admin-nav .navbar-brand {
  margin-right: 26px;
  font-weight: 700;
  white-space: nowrap;
}
.admin-nav .navbar-brand img {
  height: 36px !important;
}
.admin-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #42506f !important;
  border-radius: 7px;
  padding: 9px 11px !important;
  font-size: .9rem;
  font-weight: 600;
}
.admin-nav .nav-link:hover,
.admin-nav .nav-link:focus,
.admin-nav .nav-link.active {
  color: var(--atf-primary) !important;
  background: #eef2ff;
}
.admin-nav .nav-link i,
.admin-nav .dropdown-item i {
  width: 1.15rem;
  text-align: center;
}
.admin-nav .dropdown-menu {
  min-width: 215px;
  margin-top: .45rem;
  padding: .45rem;
  border: 1px solid var(--atf-border);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(23,33,61,.16);
}
.admin-nav .dropdown-header {
  padding: .45rem .7rem .3rem;
  color: #69758f;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.admin-nav .dropdown-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  border-radius: 6px;
  color: var(--atf-text);
  padding: .55rem .7rem;
  font-size: .9rem;
}
.admin-nav .dropdown-item:hover,
.admin-nav .dropdown-item:focus {
  color: var(--atf-primary-dark);
  background: #eef2ff;
}
.admin-nav .dropdown-item i { color: var(--atf-primary); }
.admin-back-link { margin-left: 8px; }
.admin-content {
  max-width: 1480px;
  flex: 1 0 auto;
  padding: 0 24px;
}
.admin-main {
  padding-top: 22px;
}
.admin-main > .card,
.admin-main .card {
  border-color: var(--atf-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(23,33,61,.05);
}
.admin-footer {
  max-width: 1480px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 24px;
  border-color: var(--atf-border) !important;
}

@media (max-width: 991.98px) {
  .admin-nav-inner,
  .admin-content { padding-left: 16px; padding-right: 16px; }
  .admin-nav .navbar-collapse {
    margin-top: .75rem;
    padding: .5rem;
    border-top: 1px solid var(--atf-border);
  }
  .admin-nav .dropdown-menu {
    margin-top: .2rem;
    background: var(--atf-surface);
    border-color: var(--atf-border);
  }
  .admin-nav .dropdown-header { color: #69758f; }
  .admin-nav .dropdown-item { color: var(--atf-text); }
  .admin-nav .dropdown-item:hover,
  .admin-nav .dropdown-item:focus { color: var(--atf-primary-dark); background: #eef2ff; }
  .admin-nav .dropdown-item i { color: var(--atf-primary); }
  .admin-back-link { margin-left: 0; }
}

.btn-primary {
  background-color: var(--atf-primary);
  border-color: var(--atf-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #304ebf;
  border-color: #304ebf;
}

.btn-outline-primary {
  color: var(--atf-primary);
  border-color: var(--atf-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--atf-primary);
  border-color: var(--atf-primary);
  color: #ffffff;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Affiliate button spacing - ensure proper margins around CTA buttons */
.section-content p:has(> a.btn),
.section-content div:has(> a.btn) {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.section-content a.btn {
  display: inline-block;
  margin: 0.5rem 0;
}

/* Ensure buttons in grid layouts have full spacing */
.d-grid .btn {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Additional spacing for button paragraphs */
p.text-center:has(a.btn) {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Typography improvements for generated content */
.section-content {
  font-size: 0.95rem;
  line-height: 1.6;
}

.section-content h2 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.section-content h3 {
  font-size: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.section-content h4 {
  font-size: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

.section-content p {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  max-width: 800px;
}

/* Bulleted lists in narrower columns for better readability */
.section-content ul,
.section-content ol {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.section-content li {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  padding-left: 0.25rem;
}

/* Center text blocks for better reading */
.section-content > * {
  margin-left: auto;
  margin-right: auto;
}
.ck-editor__editable_inline { min-height: 420px; max-height: 65vh; overflow-y: auto; }
.ck.ck-toolbar { border-radius: .375rem .375rem 0 0; }
.section-content.inline-editing { outline: 2px solid #4f6bed; outline-offset: 6px; cursor: text; min-height: 3rem; }
.section-content.inline-editing .inline-editable-element { outline: 1px dashed transparent; }
.section-content.inline-editing .inline-editable-element:hover, .section-content.inline-editing .inline-editable-element:focus { outline-color: #4f6bed; }
.section-content.inline-editing a, .section-content.inline-editing button { cursor: grab; }
.section-content.inline-editing .dragging-control { opacity: .45; outline: 2px dashed #4f6bed; }
.inline-edit-toolbar { position:fixed; z-index:3000; display:flex; width:max-content; max-width:calc(100vw - 32px); gap:4px; background:#17213d; padding:6px; border-radius:6px; top:76px; right:24px; }
.section-content.inline-editing img, .section-content.inline-editing video { max-width:100%; height:auto; }
.inline-edit-toolbar button { border:0; background:#fff; color:#17213d; border-radius:4px; padding:4px 9px; font-size:.85rem; }
.visual-editor-bar { background:#17213d; color:#fff; z-index:2500; }
.visual-editor-page { max-width: none !important; width: 100% !important; }
.visual-workspace { position:fixed; inset:0; background:#eef1f7; z-index:2000; display:flex; flex-direction:column; }
.visual-workspace-header { min-height:58px; display:flex; align-items:center; gap:18px; padding:10px 20px; background:#17213d; color:#fff; }
.visual-workspace-header .text-muted { color:#cbd3e6 !important; }
.visual-workspace-header .btn { margin-left:auto; color:#fff; border-color:#adb5bd; }
.visual-workspace-canvas { flex:1; width:100%; border:0; background:#fff; }
.visual-workspace-main { flex:1; min-height:0; display:flex; }
.visual-inspector { width:260px; padding:18px; background:#fff; border-left:1px solid #d9deea; }
.visual-inspector h2 { font-size:1rem; }
.visual-canvas { flex:1; width:100%; max-width:100%; overflow:auto; padding:32px; background:#f6f8fc; transition:max-width .2s; }
.canvas-section { position:relative; margin:0 auto 24px; padding:28px; background:#fff; border:1px solid #dfe4ef; border-radius:8px; min-height:80px; }
.canvas-section:hover { border-color:#4f6bed; box-shadow:0 2px 12px rgba(30,45,90,.12); }
.canvas-section-tools { position:absolute; top:6px; right:8px; display:none; gap:4px; z-index:2; }
.canvas-section:hover .canvas-section-tools { display:flex; }
.canvas-section-tools button { border:1px solid #c8d0e2; border-radius:4px; background:#fff; font-size:.75rem; padding:3px 8px; }
.visual-editor-bar .btn-outline-secondary { color:#fff; border-color:#adb5bd; }