/* ================================
   Optometry Flashcards – Theme
   ================================ */

/* ---------- Vars (tweak here) ---------- */
.ofc-container,
.ofc-dashboard-wrap{
  --ofc-front:  #E8F5FF;     /* card front (soft blue)   */
  --ofc-back:   #FFF5A8;     /* card back  (soft yellow) */
  --ofc-text:   #0F172A;     /* near-black text          */
  --ofc-muted:  #475569;     /* slate */
  --ofc-border: #E2E8F0;     /* light border */
  --ofc-blue:   #0EA5E9;     /* accent blue */
  --ofc-amber:  #F59E0B;     /* accent amber */
  --ofc-shadow: 0 20px 60px rgba(2,6,23,.08);
}

/* =======================================================
   A) Single-set player  [optometry_flashcards]
   Markup: .ofc-container > #ofc-info, #ofc-timer, .ofc-card
   ======================================================= */
.ofc-container{
  max-width: 980px;
  margin: 24px auto 40px;
  padding: 8px 12px;
  color: var(--ofc-text);
}

.ofc-container #ofc-info,
.ofc-container #ofc-timer{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #0C4A6E;
  background: #EFF6FF;
  border: 1px solid var(--ofc-border);
  border-radius: 999px;
  padding: 8px 14px;
  margin: 6px 8px;
}

/* card wrapper */
.ofc-container .ofc-card{
  margin: 20px auto 10px;
  max-width: 920px;
}

/* both faces share look */
.ofc-container .ofc-card-front,
.ofc-container .ofc-card-back{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  min-height: 280px;
  padding: 36px 44px;
  border-radius: 20px;
  border: 1px solid var(--ofc-border);
  box-shadow: var(--ofc-shadow);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--ofc-text);
}

/* face colors */
.ofc-container .ofc-card-front{ background: var(--ofc-front); }
.ofc-container .ofc-card-back { background: var(--ofc-back);  }

/* controls */
.ofc-container #ofc-flip,
.ofc-container #ofc-prev,
.ofc-container #ofc-next{
  margin: 12px 6px 0;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--ofc-border);
  background: #fff;
  color: var(--ofc-text);
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ofc-container #ofc-flip:hover,
.ofc-container #ofc-prev:hover,
.ofc-container #ofc-next:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* primary action – Next */
.ofc-container #ofc-next{
  background: var(--ofc-amber);
  border-color: #EAB308;
  color: #111;
}
.ofc-container #ofc-next:hover{ box-shadow: 0 10px 22px rgba(245,158,11,.35); }

/* responsive */
@media (max-width: 640px){
  .ofc-container .ofc-card-front,
  .ofc-container .ofc-card-back{
    min-height: 220px;
    padding: 24px;
    font-size: clamp(18px, 5.5vw, 24px);
  }
}

/* =======================================================
   B) Dashboard + Modal  [optometry_flashcards_dashboard]
   (If you kept inline styles, this complements/overrides.)
   ======================================================= */
.ofc-dashboard-wrap{ margin: 10px 0 0; }

/* search + grid tiles */
.ofc-dashboard-wrap .ofc-dash-title{ margin:0 0 10px; font-size:28px; }
.ofc-dashboard-wrap .ofc-dash-search{ margin: 10px 0 20px; }
.ofc-dashboard-wrap .ofc-search-input{
  width:100%; max-width:420px; padding:10px 12px;
  border:1px solid var(--ofc-border); border-radius:8px;
}
.ofc-dashboard-wrap .ofc-dash-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ofc-dashboard-wrap .ofc-tile{
  background:#fff; border:1px solid #e6e6e6;
  border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.ofc-dashboard-wrap .ofc-tile-inner{ padding:22px; text-align:center; }
.ofc-dashboard-wrap .ofc-tile-title{ margin:4px 0 10px; font-size:22px; }
.ofc-dashboard-wrap .ofc-tile-count{ margin:0 0 14px; color:#666; font-size:14px; }
.ofc-dashboard-wrap .ofc-start-btn{ padding:8px 18px; border-radius:8px; }

/* locks */
.ofc-dashboard-wrap .ofc-tile.is-locked{
  position:relative; filter:grayscale(.15); opacity:.9;
}
.ofc-dashboard-wrap .ofc-tile.is-locked::after{
  content:'🔒 Members Only';
  position:absolute; top:10px; right:12px;
  font-size:13px; padding:4px 8px; background:#222; color:#fff; border-radius:999px;
}
.ofc-dashboard-wrap .ofc-tile.is-locked .ofc-start-btn[disabled]{
  background:#ccc; border-color:#bbb; color:#333; cursor:not-allowed;
}

/* modal shell */
.ofc-dashboard-wrap .ofc-modal{
  position:fixed; inset:0; background:rgba(15,23,42,.6);
  display:none; align-items:center; justify-content:center;
  z-index:99999; padding:24px;
}
.ofc-dashboard-wrap .ofc-modal-card{
  background:#fff; width:100%; max-width:1280px;
  border-radius:22px; padding:28px 28px 32px; position:relative;
  box-shadow: var(--ofc-shadow);
}
.ofc-dashboard-wrap .ofc-close{
  position:absolute; top:14px; right:16px; width:40px; height:40px;
  background:#f1f5f9; border:0; border-radius:999px; font-size:20px; cursor:pointer;
}
.ofc-dashboard-wrap .ofc-close:hover{ background:#e2e8f0; }
.ofc-dashboard-wrap .ofc-modal-title{ margin:0 44px 18px 0; font-size:28px; }

/* player inside modal */
.ofc-dashboard-wrap .ofc-player{ display:flex; flex-direction:column; align-items:center; }
.ofc-dashboard-wrap .ofc-timer{
  margin-bottom:12px; font-weight:700; color:#334155;
  background:#EFF6FF; border:1px solid var(--ofc-border);
  padding:6px 12px; border-radius:999px;
}
.ofc-dashboard-wrap .ofc-card {
  display:flex; align-items:center; justify-content:center; text-align:center;
  width: clamp(280px, 90vw, 1160px);
  padding: 40px 48px; margin: 12px auto;
  border-radius: 20px; line-height: 1.25; font-weight:700;
  color: var(--ofc-text); font-size: clamp(22px, 3.4vw, 58px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06); background: var(--ofc-front);
}
.ofc-dashboard-wrap .ofc-controls{
  margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.ofc-dashboard-wrap .ofc-controls button{
  padding:10px 18px; font-size:16px; font-weight:600;
  border-radius:10px; border:1px solid rgba(0,0,0,.08); background:#fff; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ofc-dashboard-wrap .ofc-controls button:hover{
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.ofc-dashboard-wrap .ofc-controls .primary{
  background: var(--ofc-amber); border-color:#eab308; color:#111;
}
.ofc-dashboard-wrap .ofc-progress{ margin-top:10px; color:#64748b; font-weight:600; }

@media (max-width: 900px){
  .ofc-dashboard-wrap .ofc-modal-card{ max-width:96vw; }
  .ofc-dashboard-wrap .ofc-card{
    width: 92vw; padding: 24px; font-size: clamp(22px, 7.2vw, 40px);
  }
}
/* --- Dashboard polish (tiles + Start button) --- */
.ofc-dashboard-wrap .ofc-tile{
  transition: transform .15s ease, box-shadow .15s ease;
  background: linear-gradient(180deg,#F8FAFF 0%,#FFFFFF 100%);
}
.ofc-dashboard-wrap .ofc-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.ofc-dashboard-wrap .ofc-start-btn.button-primary{
  background:#0EA5E9;           /* blue */
  border-color:#0284C7;
  color:#fff;
}
.ofc-dashboard-wrap .ofc-start-btn.button-primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 8px 18px rgba(2,132,199,.28);
}

/* =======================================================
   v2.2 – Single-set player button row & timer badge
   (new class names used by instance-scoped shortcode)
   ======================================================= */
.ofc-container .ofc-info,
.ofc-container .ofc-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #0C4A6E;
  background: #EFF6FF;
  border: 1px solid var(--ofc-border);
  border-radius: 999px;
  padding: 8px 14px;
  margin: 6px 8px;
}

.ofc-container .ofc-btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ofc-container .ofc-btn-prev,
.ofc-container .ofc-btn-flip,
.ofc-container .ofc-btn-next {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--ofc-border);
  background: #fff;
  color: var(--ofc-text);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.ofc-container .ofc-btn-prev:hover,
.ofc-container .ofc-btn-flip:hover,
.ofc-container .ofc-btn-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

.ofc-container .ofc-btn-next {
  background: var(--ofc-amber);
  border-color: #EAB308;
  color: #111;
}
.ofc-container .ofc-btn-next:hover { box-shadow: 0 10px 22px rgba(245,158,11,.35); }