@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');
/* 3:4 aspect, no cropping; consistent across all shortcodes */
:root{
  --plick-bg:#0b1d2a;
  --plick-text:#e2e8f0;
  --plick-muted:#94a3b8;
  --plick-danger:#ef4444;
}

.plick-notice{background:#0f172a;color:inherit;padding:12px 16px;border-left:4px solid var(--plick-accent);border-radius:8px;}

.plick-card-shell,.plick-collection,.plick-timeline{background:transparent;}

.plick-card {
  width:min(100%, 360px);
  margin:12px auto;
  perspective:1000px;
  position:relative;
}
.plick-card.mini { width: 180px; } /* height derives from ratio below */

.plick-card__inner {
  position:relative;
  width:100%;
  padding-top:133.333%; /* 3:4 aspect ratio */
  transform-style:preserve-3d;
  transition:transform .6s ease;
}
.plick-card__inner.is-flipped{ transform: rotateY(180deg); }

.plick-card__face {
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:14px;
  overflow:hidden;
  border:3px solid var(--plick-accent);
  background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.plick-card__face img{
  width:100%; height:100%;
  object-fit:cover; /* no crop */
  display:block;
  background:#000; /* subtle letterbox */
}
.plick-card__face--back{ transform: rotateY(180deg); }

.plick-card__flip{
  position:absolute; right:8px; top:8px; z-index:2;
  font-size:12px; padding:6px 10px;
  border-radius:999px; border:1px solid var(--plick-accent); background:rgba(0,0,0,.3); color:inherit;
}

.plick-btn.plick-btn--gradient { color:#fff !important; } 
.plick-btn--gradient{
  display:inline-block;
  width:100%; max-width:360px;
  margin:10px auto 0; padding:12px 16px;
  border:0; border-radius:999px; color:white; text-align:center; text-decoration:none;
  background:linear-gradient(135deg, var(--plick-accent), #22d3ee);
  font-weight:700;
}
.plick-btn--sm{ max-width:160px; padding:10px 14px; font-size:14px; }

.plick-save-btn.is-saved{opacity:.85;cursor:default;}

.plick-filters{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  margin:12px 0 16px;
}
.plick-filters label{display:flex; flex-direction:column; gap:6px; font-size:14px;}
.plick-filters select{background:#0f172a;color:inherit;border:1px solid #334155;border-radius:8px;padding:8px;}
.plick-status-toggle{display:flex; gap:12px; align-items:center; padding:8px 0;}
.plick-status-toggle label{display:flex; align-items:center; gap:6px; font-weight:600;}
.plick-status-toggle input{accent-color:var(--plick-accent);}

.plick-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.plick-pager{ text-align:center; margin-top:12px; }
.plick-load-more{ padding:10px 16px; border-radius:10px; border:1px solid var(--plick-accent); color:inherit; background:#0f172a; }

.plick-box{
  background:#051622;
  border:3px solid var(--plick-accent);
  border-radius:18px;
  padding:10px;
  display:flex; flex-direction:column; gap:10px;
}
.plick-box__level{
  display:flex; gap:12px; align-items:center; font-weight:700; font-size:14px;
}
.plick-box__level input{accent-color:var(--plick-accent);}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid #e5e7eb;margin-right:6px;}
.dot--blue{background:#38bdf8;} .dot--white{background:#f1f5f9;}

.plick-box__actions{
  display:grid; grid-template-columns: 1fr auto auto; gap:8px; align-items:center;
}
.plick-btn{
  background:#0f172a; color:inherit;
  border:1px solid var(--plick-accent);
  border-radius:12px; padding:10px 12px; text-align:center; text-decoration:none; font-weight:700;
}
.plick-date{ background:#0f172a; color:#22d3ee; border:1px solid #164e63; border-radius:12px; padding:10px 12px; text-align:center; text-decoration:none; }
.plick-btn--danger{ border-color:var(--plick-danger); color:#fecaca; }

/* Timeline */
.plick-timeline{ position:relative; }
.plick-timeline__line{position:absolute;left:50%;top:84px;bottom:0;width:8px;background:black;transform:translateX(-50%);z-index:1;}
.plick-timeline__items{ position:relative; display:flex; flex-direction:column; gap:30px; }
.plick-tl-item{ position:relative; display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:12px; }
.plick-tl-item--left  { grid-template-areas: "side time"; }
.plick-tl-item--right { grid-template-areas: "time side"; }
.plick-tl-time{ grid-area: time; justify-self:center; text-align:center; background: transparent !important; border: 0 !important; box-shadow: none !important;  }
.plick-tl-side{ grid-area: side; display:flex; flex-direction:column; align-items:center; gap:8px; }
.plick-tl-text{ font-size:clamp(1.05rem,2vw,1.35rem); text-align:center; font-weight:800;   }
.plick-tl-actions{ text-align:center; width:100%; }

@media (max-width: 720px){
  /* Keep two columns; just tighten spacing and shrink card */
  .plick-timeline{gap:12px 10px;}
  .plick-timeline__line{position:absolute;left:50%;top:84px;bottom:0;width:8px;background:black;transform:translateX(-50%);z-index:1;}
}


/* Keep alternating timeline on mobile by shrinking card width */
@media (max-width: 480px){
  .plick-timeline .plick-card{ width: clamp(110px, 40vw, 160px); }
  .plick-tl-text{ font-size:clamp(1.05rem,2vw,1.35rem); font-size: .9rem;  }
}


/* Left/right lanes remain at all widths */
.plick-tl-item--left  { grid-column: 1; }
.plick-tl-item--right { grid-column: 2; }

@media (max-width: 720px){
  .plick-timeline__items{ gap:12px 10px; }
}
@media (max-width: 480px){
  .plick-timeline__items{ gap:10px 8px; }
  .plick-timeline .plick-card{ width: clamp(110px, 40vw, 160px); }
}


/* Handwriting page title */
.plick-tl-heading{
  font-family:"Dancing Script",cursive;
  font-size:clamp(2rem,5vw,3.25rem);
  text-align:center;
  margin:0 0 1.25rem;
  letter-spacing:.3px;
}

.plick-tl-time{ grid-area: time; justify-self:center; text-align:center; background: transparent !important; border: 0 !important; box-shadow: none !important;  }
.plick-tl-date{ font-size:clamp(1.1rem,2.2vw,1.5rem); margin:0 0 .25rem; }
.plick-tl-title{ font-size:clamp(1rem,2vw,1.25rem); margin:0; }
.plick-tl-title a{ text-decoration:none; }


/* === Timeline tweaks per user's requests === */
.plick-tl-heading{
  font-size: clamp(2.6rem, 6vw, 4rem) !important; /* bigger */
  color: #000 !important;
  position: relative;
  z-index: 2;
}

/* Move the vertical line down so the heading appears above it */
.plick-timeline{ position: relative; }
.plick-timeline__line{position:absolute;left:50%;top:84px;bottom:0;width:8px;background:black;transform:translateX(-50%);z-index:1;}

/* All fonts black */
.plick-tl-date,
.plick-tl-title,
.plick-tl-title a,
.plick-tl-text,
.plick-tl-actions a,
.plick-tl-time,
.plick-tl-actions button,
.plick-tl-actions .plick-btn { color:#fff !important; }

/* Remove black container behind dates */
.plick-tl-time{ grid-area: time; justify-self:center; text-align:center; background: transparent !important; border: 0 !important; box-shadow: none !important;  }

/* Optional: ensure label weight */
.plick-tl-text{ font-weight: 800;  }

/* Ensure card borders/accents don't override black typography */
.plick-tl-title a{ text-decoration: none; }

.plick-tl-item::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:20px;height:20px;
  border-radius:50%;
  background:#fff;
  border:4px solid #000;
  z-index:2;
  top:50%;
}

.plick-btn--grad, .plick-tl-actions a { color:#fff; }


/* Ensure timeline text defaults to black */
.plick-timeline, .plick-tl-date, .plick-tl-title, .plick-tl-title a, .plick-tl-text { color: #000 !important; }
/* Learn button: white text */
.plick-tl-actions .plick-btn, .plick-tl-actions .plick-btn--grad { color:#fff !important; }
/* Restore gradient background for primary learn button variant */
.plick-btn--grad {
  background-image: linear-gradient(90deg, var(--plick-accent, #7C3AED), #9C27B0);
  background-size: 200% 100%;
  background-position: 0 0;
  border: none;
  transition: background-position .3s ease, transform .2s ease;
}
.plick-btn--grad:hover { background-position: 100% 0; transform: translateY(-1px); }


/* Make my_cards card images transparent behind (no black fill) */
.plick-collection .plick-card__face img{
  background: transparent !important;
}


/* Override: remove dark container background behind each card in [my_cards] */
.plick-collection .plick-box{
  background: transparent !important;
  box-shadow: none !important;
}


/* === UI Fix: Consistent gradient pills/buttons + proportional font === */
:root{
  --plick-grad-start: var(--plick-accent, #7C3AED);
  --plick-grad-end: #9C27B0;
}
.plick-btn,
.plick-btn--gradient,
.plick-btn--grad,
.plick-date{
  display:inline-block;
  background-image: linear-gradient(135deg, var(--plick-grad-start), var(--plick-grad-end)) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2.2vw, 20px) !important;
  font-size: clamp(13px, 1.6vw, 16px) !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  text-decoration:none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.plick-btn:hover,
.plick-btn--gradient:hover,
.plick-btn--grad:hover,
.plick-date:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
  filter: brightness(1.02);
}
.plick-btn:active,
.plick-btn--gradient:active,
.plick-btn--grad:active,
.plick-date:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
/* Keep danger button solid but same pill sizing */
.plick-btn--danger{
  background:#dc2626 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2.2vw, 20px) !important;
  font-size: clamp(13px, 1.6vw, 16px) !important;
  font-weight:700 !important;
  line-height:1.1 !important;
}

/* === UI Fix: Remove black from dropdown boxes in filters === */
.plick-filters select{
  background:#fff !important;
  color:#000 !important;
  border:1px solid #d1d5db !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  box-shadow:none !important;
}
.plick-filters select:focus{
  outline:none !important;
  border-color: var(--plick-accent, #7C3AED) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
}


/* Center the single-card 'Save to My Cards' button */
.plick-btn--gradient,
.plick-btn--grad{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* Align Learn / Date / Delete pills on My Cards grid */
.plick-collection .plick-box__actions{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:8px;
  align-items:center; /* vertical centering */
}
/* Revert button to inline for grid; remove extra margins */
.plick-collection .plick-box__actions .plick-btn--gradient,
.plick-collection .plick-box__actions .plick-btn--grad{
  display:inline-block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  align-self:center !important;
  justify-self:start !important;
}
/* Ensure date pill and delete share same sizing logic */
.plick-collection .plick-box__actions .plick-date,
.plick-collection .plick-box__actions .plick-btn--danger{
  margin:0 !important;
  align-self:center !important;
}


/* Login modal: transparent overlay + larger dialog */
.plick-login-modal{
  position:fixed; inset:0;
  background: transparent !important; /* no dark backdrop */
  display:flex; align-items:center; justify-content:center;
  z-index: 99999;
}
.plick-login-dialog{
  width: min(92vw, 560px); /* bigger */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  padding: 20px 22px;
}
.plick-login-title{ font-size: 24px; margin: 0 0 6px; }
.plick-login-text{ font-size: 16px; margin: 0 0 14px; opacity: .8; }
.plick-login-actions{ display:flex; gap:12px; justify-content:flex-end; }

/* Remove the tiny dots near learning/mastered in My Cards */
.plick-collection .dot,
.plick-collection .dot--blue,
.plick-collection .dot--white{
  display:none !important;
}