/*
 * Selina Theme - Shortcodes Styling
 * Used by the "Selina Codes" editor dropdown and all selina_* shortcodes.
 */

/* --------------------------------------------------------------------------
   Generic helpers
   -------------------------------------------------------------------------- */

.selina-sc-center{ text-align: center; }
.selina-sc-center > *{ margin-inline: auto; }

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.selina-sc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
  user-select: none;
}

.selina-sc-btn:hover{ filter: brightness(.96); }
.selina-sc-btn:active{ transform: translateY(1px); }

.selina-sc-btn--small{ padding: 9px 14px; font-size: 13px; }
.selina-sc-btn--medium{ padding: 12px 18px; font-size: 15px; }
.selina-sc-btn--large{ padding: 14px 22px; font-size: 16px; }

.selina-sc-btn i, .selina-sc-btn svg{ font-size: 1em; line-height: 1; }

.selina-sc-btn--primary{ background: var(--selina-accent, #0a84ff); color: #fff; }
.selina-sc-btn--red{ background: #d11a2a; color: #fff; }
.selina-sc-btn--orange{ background: #f97316; color: #fff; }
.selina-sc-btn--blue{ background: #2563eb; color: #fff; }
.selina-sc-btn--green{ background: #16a34a; color: #fff; }
.selina-sc-btn--black{ background: #111827; color: #fff; }
.selina-sc-btn--gray{ background: #6b7280; color: #fff; }
.selina-sc-btn--pink{ background: #ec4899; color: #fff; }
.selina-sc-btn--purple{ background: #7c3aed; color: #fff; }
.selina-sc-btn--white{ background: #fff; color: #111827; border-color: #e5e7eb; }

html.selina-dark-mode .selina-sc-btn--white{
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */

.selina-sc-quote{
  margin: 18px 0;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid #e6e9ef;
  background: #fff;
}

.selina-sc-quote--dark{
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.selina-sc-quote--simple{
  background: transparent;
  border: 0;
  border-inline-start: 4px solid var(--selina-accent, #0a84ff);
  border-radius: 0;
  padding: 6px 0 6px 14px;
}

.selina-sc-quote__content{ font-size: 16px; line-height: 1.9; }

.selina-sc-quote__author{
  display: block;
  margin-top: 10px;
  font-weight: 800;
  opacity: .8;
}

.selina-sc-quote--start{ text-align: start; }
.selina-sc-quote--center{ text-align: center; }
.selina-sc-quote--end{ text-align: end; }

html.selina-dark-mode .selina-sc-quote{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

html.selina-dark-mode .selina-sc-quote--simple{
  background: transparent;
  border-color: transparent;
  border-inline-start-color: var(--selina-accent, #0a84ff);
}

/* --------------------------------------------------------------------------
   Alert
   -------------------------------------------------------------------------- */

.selina-sc-alert{
  margin: 16px 0;
  border-radius: 16px;
  border: 1px solid #e6e9ef;
  background: #fff;
  overflow: hidden;
}

.selina-sc-alert__inner{
  position: relative;
  padding: 14px 16px;
}

.selina-sc-alert__title{ font-weight: 900; margin-bottom: 6px; }
.selina-sc-alert__content{ line-height: 1.8; }

.selina-sc-alert__close{
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,0.06);
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 32px;
}

.selina-sc-alert--info{ border-inline-start: 4px solid #0ea5e9; }
.selina-sc-alert--success{ border-inline-start: 4px solid #22c55e; }
.selina-sc-alert--warning{ border-inline-start: 4px solid #f59e0b; }
.selina-sc-alert--danger{ border-inline-start: 4px solid #ef4444; }

html.selina-dark-mode .selina-sc-alert{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
html.selina-dark-mode .selina-sc-alert__close{ background: rgba(255,255,255,0.10); }

/* --------------------------------------------------------------------------
   Highlight + Dropcap
   -------------------------------------------------------------------------- */

.selina-sc-highlight{ padding: 0 4px; border-radius: 6px; }
.selina-sc-highlight--yellow{ background: rgba(250, 204, 21, .35); }
.selina-sc-highlight--red{ background: rgba(239, 68, 68, .22); }
.selina-sc-highlight--orange{ background: rgba(249, 115, 22, .22); }
.selina-sc-highlight--blue{ background: rgba(59, 130, 246, .20); }
.selina-sc-highlight--green{ background: rgba(34, 197, 94, .20); }
.selina-sc-highlight--gray{ background: rgba(107, 114, 128, .18); }
.selina-sc-highlight--primary{ background: rgba(10, 132, 255, .22); }

.selina-sc-dropcap{
  float: inline-start;
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  margin-inline-end: 10px;
  margin-top: 3px;
  color: var(--selina-accent, #0a84ff);
}

/* --------------------------------------------------------------------------
   Tooltip
   -------------------------------------------------------------------------- */

.selina-sc-tooltip{
  position: relative;
  cursor: help;
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}

.selina-sc-tooltip::after{
  content: attr(data-selina-tooltip-content);
  position: absolute;
  z-index: 999;
  min-width: 180px;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15,23,42,.95);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.selina-sc-tooltip:hover::after{ opacity: 1; transform: translateY(0); }

/* default: top */
.selina-sc-tooltip[data-selina-tooltip-dir="top"]::after{
  inset-inline-start: 0;
  bottom: calc(100% + 10px);
}

.selina-sc-tooltip[data-selina-tooltip-dir="bottom"]::after{
  inset-inline-start: 0;
  top: calc(100% + 10px);
}

.selina-sc-tooltip[data-selina-tooltip-dir="start"]::after{
  inset-inline-end: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

.selina-sc-tooltip[data-selina-tooltip-dir="end"]::after{
  inset-inline-start: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   Padding + Divider
   -------------------------------------------------------------------------- */

.selina-sc-padding{ width: 100%; }

.selina-sc-divider{
  border: 0;
  border-top: 1px solid #e6e9ef;
}
.selina-sc-divider--dashed{ border-top-style: dashed; }
.selina-sc-divider--dotted{ border-top-style: dotted; }
.selina-sc-divider--double{ border-top-style: double; border-top-width: 3px; }

html.selina-dark-mode .selina-sc-divider{ border-top-color: rgba(255,255,255,0.14); }

/* --------------------------------------------------------------------------
   Columns
   -------------------------------------------------------------------------- */

.selina-sc-columns{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0;
}

.selina-sc-col{
  min-width: 0;
}

@media (max-width: 700px){
  .selina-sc-col{
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Full width image wrapper
   -------------------------------------------------------------------------- */

.selina-sc-full-img img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   Toggle (details)
   -------------------------------------------------------------------------- */

.selina-sc-toggle{
  margin: 14px 0;
  border: 1px solid #e6e9ef;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.selina-sc-toggle > summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selina-sc-toggle > summary::-webkit-details-marker{ display: none; }

.selina-sc-toggle > summary::after{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .7;
}

.selina-sc-toggle[open] > summary::after{ transform: rotate(45deg); }

.selina-sc-toggle__content{ padding: 14px 16px; border-top: 1px solid #eef1f5; line-height: 1.85; }

html.selina-dark-mode .selina-sc-toggle{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
html.selina-dark-mode .selina-sc-toggle__content{ border-top-color: rgba(255,255,255,0.12); }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.selina-sc-tabs{ margin: 18px 0; }

.selina-sc-tabs__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.selina-sc-tabs__btn{
  appearance: none;
  border: 1px solid #e6e9ef;
  background: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.selina-sc-tabs__btn.is-active{
  background: var(--selina-accent, #0a84ff);
  border-color: var(--selina-accent, #0a84ff);
  color: #fff;
}

.selina-sc-tabs__panel{
  display: none;
  border: 1px solid #e6e9ef;
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  line-height: 1.85;
}

.selina-sc-tabs__panel.is-active{ display: block; }

.selina-sc-tabs--vertical{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  align-items: start;
}

.selina-sc-tabs--vertical .selina-sc-tabs__nav{ flex-direction: column; margin: 0; }

@media (max-width: 800px){
  .selina-sc-tabs--vertical{ grid-template-columns: 1fr; }
  .selina-sc-tabs--vertical .selina-sc-tabs__nav{ flex-direction: row; }
}

html.selina-dark-mode .selina-sc-tabs__btn,
html.selina-dark-mode .selina-sc-tabs__panel{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

html.selina-dark-mode .selina-sc-tabs__btn.is-active{ color: #fff; }

/* --------------------------------------------------------------------------
   Tag Cloud
   -------------------------------------------------------------------------- */

.selina-sc-tag-cloud{ display: flex; flex-wrap: wrap; gap: 10px; }

.selina-sc-tag-cloud a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e6e9ef;
  background: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px !important;
}

.selina-sc-tag-cloud a:hover{ filter: brightness(.97); }

html.selina-dark-mode .selina-sc-tag-cloud a{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

/* --------------------------------------------------------------------------
   List wrapper
   -------------------------------------------------------------------------- */

.selina-sc-list ul{ padding-inline-start: 22px; margin: 0; }
.selina-sc-list li{ margin: 6px 0; }

.selina-sc-list--check li{ list-style: none; position: relative; padding-inline-start: 24px; }
.selina-sc-list--check li::before{ content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: #16a34a; font-weight: 900; }

.selina-sc-list--star li{ list-style: none; position: relative; padding-inline-start: 24px; }
.selina-sc-list--star li::before{ content: "★"; position: absolute; inset-inline-start: 0; top: 0; color: #f59e0b; font-weight: 900; }

.selina-sc-list--arrow li{ list-style: none; position: relative; padding-inline-start: 24px; }
.selina-sc-list--arrow li::before{ content: "›"; position: absolute; inset-inline-start: 0; top: 0; color: var(--selina-accent, #0a84ff); font-weight: 900; }

/* --------------------------------------------------------------------------
   Restrict
   -------------------------------------------------------------------------- */

.selina-sc-restrict{
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #e6e9ef;
  background: #fff;
}

html.selina-dark-mode .selina-sc-restrict{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Video wrapper
   -------------------------------------------------------------------------- */

.selina-sc-video{
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin: 16px 0;
}

.selina-sc-video iframe,
.selina-sc-video video{
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* Maintain 16:9 ratio by default if no height is enforced */
.selina-sc-video--ratio{
  padding-top: 56.25%;
}
.selina-sc-video--ratio iframe,
.selina-sc-video--ratio video{
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   Content box
   -------------------------------------------------------------------------- */

.selina-sc-box{
  margin: 16px 0;
  border-radius: 16px;
  border: 1px solid #e6e9ef;
  background: #fff;
  overflow: hidden;
}

.selina-sc-box__head{
  padding: 12px 16px;
  font-weight: 900;
  border-bottom: 1px solid #eef1f5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.selina-sc-box__body{ padding: 14px 16px; line-height: 1.85; }

html.selina-dark-mode .selina-sc-box{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

html.selina-dark-mode .selina-sc-box__head{ border-bottom-color: rgba(255,255,255,0.12); }

/* --------------------------------------------------------------------------
   Share buttons shortcode wrapper (uses existing theme buttons)
   -------------------------------------------------------------------------- */

.selina-sc-share{ margin: 16px 0; }

/* --------------------------------------------------------------------------
   Login form wrapper
   -------------------------------------------------------------------------- */

.selina-sc-login{ margin: 16px 0; }

.selina-sc-login .login-remember,
.selina-sc-login .login-submit{ margin-top: 10px; }

.selina-sc-login .login-submit input{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  border: 0;
  background: var(--selina-accent, #0a84ff);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.selina-sc-login .login-submit input:hover{ filter: brightness(.96); }

/* --------------------------------------------------------------------------
   Selina Slider
   -------------------------------------------------------------------------- */

.selina-slider{
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 10px 26px rgba(16,24,40,.14);
}

.selina-slider__viewport{ position: relative; height: var(--selina-slider-h-desktop, 420px); }
@media (max-width: 768px){
  .selina-slider__viewport{ height: var(--selina-slider-h-mobile, 280px); }
}

.selina-slider__track{
  display: flex;
  height: 100%;
  will-change: transform;
}

.selina-slider__slide{
  position: relative;
  min-width: 100%;
  height: 100%;
}

.selina-slider__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.selina-slider__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0, calc(var(--selina-slider-overlay,45) / 100));
}

.selina-slider__content{
  position: absolute;
  inset-inline-start: 18px;
  inset-inline-end: 18px;
  bottom: 18px;
  max-width: 720px;
  color: #fff;
}

.selina-slider__title{
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
  margin: 0;
}

.selina-slider__subtitle{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  opacity: .92;
}

.selina-slider__cta{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--selina-accent, #0a84ff);
  color: #fff !important;
  text-decoration: none;
  font-weight: 900;
}

.selina-slider__cta:hover{ filter: brightness(.96); }

.selina-slider__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

.selina-slider__nav span{ font-size: 22px; line-height: 1; }
.selina-slider__nav--prev{ inset-inline-start: 12px; }
.selina-slider__nav--next{ inset-inline-end: 12px; }
.selina-slider__nav:hover{ background: rgba(0,0,0,.45); }

.selina-slider__dots{
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  inset-inline-end: 12px;
  display: flex;
  gap: 6px;
  justify-content: center;
  z-index: 3;
}

.selina-slider__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}

.selina-slider__dot.is-active{ background: #fff; }

@media (max-width: 768px){
  .selina-slider{ border-radius: 16px; }
  .selina-slider__title{ font-size: 20px; }
  .selina-slider__nav{ width: 34px; height: 34px; }
}