/* Bantokens template — Joomla integration styles (messages, generic pages, placeholders). */

/* Image placeholders (former design-tool <image-slot>): put an <img> inside to fill them. */
.bt-slot{display:block;position:relative;width:100%;height:100%;min-height:120px;border-radius:inherit;overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(0,48,95,.06) 0 12px,rgba(0,48,95,.1) 12px 24px)}
.bt-slot:empty::after{content:attr(data-placeholder);position:absolute;inset:auto 12px 12px 12px;font:600 12px/1.3 var(--font-sans,system-ui);
  color:var(--text-secondary,#5b6b7f);text-align:center}
[data-theme=dark] .bt-slot,[data-theme=deep] .bt-slot{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,.09) 12px 24px)}
[data-theme=dark] .bt-slot:empty::after,[data-theme=deep] .bt-slot:empty::after{color:rgba(255,255,255,.7)}
.bt-slot>img{display:block;width:100%;height:100%;object-fit:cover}
.vframe .bt-slot{position:absolute;inset:0}
.vframe.live .bt-slot{display:none}

/* System messages (save confirmations, login errors...) float under the navigation bar. */
#system-message-container{position:fixed;top:calc(var(--nav-h,120px) + 12px);right:16px;z-index:1000;width:min(420px,calc(100vw - 32px))}
#system-message-container:empty{display:none}
#system-message-container joomla-alert,#system-message-container .alert{display:block;margin:0 0 10px;padding:14px 44px 14px 16px;border-radius:14px;
  background:#fff;color:var(--text-primary,#0b1b2b);box-shadow:var(--shadow-float,0 12px 32px rgba(0,20,50,.18));font:14px/1.45 var(--font-sans,system-ui);position:relative}
#system-message-container [type=danger],#system-message-container [type=error]{border-left:4px solid #d93025}
#system-message-container [type=success]{border-left:4px solid #1e8e3e}
#system-message-container [type=warning]{border-left:4px solid #f5b301}
#system-message-container [type=info],#system-message-container [type=message]{border-left:4px solid var(--blue-primary,#0a66c2)}
#system-message-container .joomla-alert--close,#system-message-container button{position:absolute;top:8px;right:10px;border:0;background:none;font-size:20px;cursor:pointer;color:inherit}

/* Any Joomla page that is not one of the Bantokens pages (contact, login, search, other articles). */
.bt-generic{padding:calc(var(--nav-h,150px) + 56px) 0 96px;min-height:60vh;font-family:var(--font-sans,system-ui);color:var(--text-primary,#0b1b2b)}
.bt-generic h1{margin:10px 0 18px}
.bt-generic h2{margin:32px 0 12px}
.bt-generic p,.bt-generic li{line-height:1.6}
.bt-generic a{color:var(--blue-primary,#0a66c2)}
.bt-generic input:not([type=checkbox]):not([type=radio]),.bt-generic select,.bt-generic textarea{width:100%;max-width:520px;padding:12px 14px;border:1px solid rgba(0,48,95,.2);border-radius:12px;font:inherit}
.bt-generic button,.bt-generic .btn,.bt-generic [type=submit],.bt-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:0;border-radius:999px;
  background:var(--blue-primary,#0a66c2);color:#fff !important;font-weight:700;text-decoration:none;cursor:pointer}
.bt-generic .control-group,.bt-generic .mb-3{margin-bottom:16px}
.bt-generic .pagination{display:flex;gap:6px;list-style:none;padding:0}
.bt-article-body img{max-width:100%;height:auto}
.bt-error .bt-error-debug{white-space:pre-wrap;background:#f4f6f9;padding:16px;border-radius:12px;overflow:auto}
.bt-component-view{padding:24px}

/* Generic Wrapper / Iframe Views (com_wrapper) */
.bt-wrapper-page {
  padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 80px);
}
.bt-wrapper-head {
  padding: 16px 0 clamp(16px, 2.5vw, 24px);
}
.bt-wrapper-head h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary, #0b1b2b);
}
.bt-iframe-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.bt-iframe-card {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border-subtle, #E2E8F0);
  box-shadow: 0 4px 24px rgba(0, 24, 56, 0.06);
  padding: clamp(14px, 2vw, 20px);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.bt-iframe-card:hover {
  box-shadow: 0 8px 36px rgba(0, 24, 56, 0.09);
  border-color: rgba(0, 125, 255, 0.2);
}
.bt-wrapper-iframe {
  width: 100% !important;
  min-height: 600px;
  border: none !important;
  border-radius: 14px;
  display: block;
  background: #ffffff;
}
.bt-iframe-loading {
  position: absolute;
  inset: clamp(14px, 2vw, 20px);
  border-radius: 14px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.bt-iframe-loading.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bt-iframe-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(0, 125, 255, 0.15);
  border-top-color: var(--blue-primary, #007DFF);
  border-radius: 50%;
  animation: bt-iframe-spin 0.85s linear infinite;
}
.bt-iframe-loading span {
  font-size: 15px;
  color: var(--text-secondary, #64748B);
  font-weight: 500;
}
@keyframes bt-iframe-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  .bt-iframe-card {
    padding: 10px;
    border-radius: 16px;
  }
  .bt-wrapper-iframe {
    border-radius: 10px;
  }
}