/* =========================================================
   PodSync – Podcast Feed Sync  – Frontend Styles
   Publisher: Sekela IT
   Version: 1.0.3 (Dark mode support)
   Scoped, lightweight, theme-friendly
========================================================= */

.podsync{
  /* Default (Light) tokens */
  --podsync-border: rgba(0,0,0,.12);
  --podsync-bg: #ffffff;
  --podsync-text: rgba(0,0,0,.92);
  --podsync-muted: rgba(0,0,0,.7);
  --podsync-card-shadow: 0 6px 18px rgba(0,0,0,.08);

  --podsync-radius: 14px;
  --podsync-gap: 12px;

  color: var(--podsync-text);
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
}

/* =========================
   AUTO DARK MODE (OS-level)
   Only applies when plugin is not forced to light.
========================= */
@media (prefers-color-scheme: dark){
  .podsync:not([data-podsync-theme="light"]){
    --podsync-border: rgba(255,255,255,.14);
    --podsync-bg: rgba(20,20,22,.92);
    --podsync-text: rgba(255,255,255,.92);
    --podsync-muted: rgba(255,255,255,.70);
    --podsync-card-shadow: 0 10px 26px rgba(0,0,0,.35);
  }
}

/* =========================
   FORCED DARK MODE
========================= */
.podsync[data-podsync-theme="dark"]{
  --podsync-border: rgba(255,255,255,.14);
  --podsync-bg: rgba(20,20,22,.92);
  --podsync-text: rgba(255,255,255,.92);
  --podsync-muted: rgba(255,255,255,.70);
  --podsync-card-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* =========================================================
   PLATFORM LINKS
========================================================= */
.podsync-platforms{
  background: var(--podsync-bg);
  border: 1px solid var(--podsync-border);
  border-radius: var(--podsync-radius);
  padding: 14px 16px;
  box-shadow: var(--podsync-card-shadow);
  backdrop-filter: saturate(1.1);
}

.podsync-title{
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.podsync-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.podsync-platforms[data-podsync-platform-layout="grid"] .podsync-buttons{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.podsync-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--podsync-border);
  text-decoration: none;
  font-weight: 700;
  background: transparent;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}

.podsync-btn--platform{
  gap: 8px;
}

.podsync-platform-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.podsync-platform-logo svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.podsync-btn--platform img.podsync-platform-logo{
  object-fit: contain;
  border: 1px solid var(--podsync-border);
}

.podsync-platforms[data-podsync-platform-size="sm"] .podsync-platform-logo{ width:18px; height:18px; }
.podsync-platforms[data-podsync-platform-size="sm"] .podsync-platform-logo svg{ width:16px; height:16px; }

.podsync-platforms[data-podsync-platform-size="lg"] .podsync-platform-logo{ width:28px; height:28px; }
.podsync-platforms[data-podsync-platform-size="lg"] .podsync-platform-logo svg{ width:26px; height:26px; }

.podsync-platform-name{ line-height: 1; }

.podsync-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* Platform logo handling */
.podsync-btn--platform{
  justify-content: center;
}

.podsync-platform-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.podsync-platform-logo svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.podsync-platform-logo img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 6px;
}

.podsync-platforms[data-podsync-platform-size="sm"] .podsync-platform-logo,
.podsync-platforms[data-podsync-platform-size="sm"] .podsync-platform-logo svg,
.podsync-platforms[data-podsync-platform-size="sm"] .podsync-platform-logo img{
  width: 18px;
  height: 18px;
}

.podsync-platforms[data-podsync-platform-size="lg"] .podsync-platform-logo,
.podsync-platforms[data-podsync-platform-size="lg"] .podsync-platform-logo svg,
.podsync-platforms[data-podsync-platform-size="lg"] .podsync-platform-logo img{
  width: 24px;
  height: 24px;
}

.podsync-platforms[data-podsync-platform-style="logos"] .podsync-btn{
  padding-left: 12px;
  padding-right: 12px;
}

.podsync-platforms[data-podsync-platform-style="logos"] .podsync-platform-name{
  display: none;
}

/* =========================================================
   EPISODE LIST
========================================================= */
.podsync-list{
  display: grid;
  gap: var(--podsync-gap);
}

.podsync-episode{
  background: var(--podsync-bg);
  border: 1px solid var(--podsync-border);
  border-radius: var(--podsync-radius);
  padding: 14px 16px;
  box-shadow: var(--podsync-card-shadow);
  backdrop-filter: saturate(1.1);
}

.podsync-badge{
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  opacity: .75;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.podsync-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.podsync-thumb img{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.podsync-body{
  flex: 1;
  min-width: 0;
}

.podsync-ep-title{
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.podsync-ep-title a{
  text-decoration: none;
  color: inherit;
}

.podsync-date{
  margin-top: 4px;
  font-size: 13px;
  opacity: .7;
}

.podsync-excerpt{
  margin-top: 8px;
  opacity: .9;
}

.podsync-player{
  margin-top: 10px;
}

.podsync-player audio{
  width: 100%;
}

.podsync-actions{
  margin-top: 10px;
}

.podsync-link{
  font-weight: 800;
  text-decoration: none;
  color: inherit;
}

/* =========================================================
   IMPORT / UPGRADE / ERROR BOXES
========================================================= */
.podsync-upgrade,
.podsync-import,
.podsync-error{
  background: var(--podsync-bg);
  border: 1px solid var(--podsync-border);
  border-radius: var(--podsync-radius);
  padding: 14px 16px;
  box-shadow: var(--podsync-card-shadow);
}

.podsync-error{
  border-color: rgba(192,38,45,.45);
}

.podsync-upgrade{
  border-style: dashed;
}

body.dark .podsync:not([data-podsync-theme="light"]),
body.dark-mode .podsync:not([data-podsync-theme="light"]),
body.is-dark-theme .podsync:not([data-podsync-theme="light"]){
  --podsync-border: rgba(255,255,255,.14);
  --podsync-bg: rgba(20,20,22,.92);
  --podsync-text: rgba(255,255,255,.92);
  --podsync-muted: rgba(255,255,255,.70);
  --podsync-card-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 600px){
  .podsync-row{ flex-direction: column; }
  .podsync-thumb img{
    width: 100%;
    height: auto;
    max-height: 220px;
  }
}