/* ==========================================================================
   BhavPro Schema Manager – Public Review Form
   - Desktop: centered card, 450×650
   - Mobile: 100% fluid width, auto-height (no vertical letter wrapping)
   - Design: modern, professional, very light shadow
   - Inputs padding = 5px; slim inputs (36px)
   - Strictly scoped to .bpsm-rf-* classes to avoid theme clashes
   ========================================================================== */

/* Reset inside the component */
.bpsm-rf-wrap, .bpsm-rf-wrap * { box-sizing: border-box; }

/* -------- Theme variables (can be overridden inline by BPSM_Assets::enqueue_public_form) -------- */
:root{
  --rf-tint:#e7f0ff;

  /* Deep blue → cyan (3-stop) */
  --rf-accent-start:#0b5ac9;
  --rf-accent-mid:#137fce;
  --rf-accent-end:#19b2cd;

  --rf-star:#f59e0b;
  --rf-border:#e5e7eb;
  --rf-focus:rgba(11,90,201,.30);
  --rf-text:#111827;
  --rf-muted:#6b7280;

  /* Compact scale */
  --rf-radius-xl:16px;
  --rf-radius:10px;
  --rf-gap:12px;

  --rf-pad-card:16px;
  --rf-pad-input:5px;        /* requested: 5 only */

  --rf-font-base:14px;
  --rf-font-sm:12px;
  --rf-font-lg:18px;
  --rf-line:1.35;

  --rf-input-h:36px;         /* slimmer text inputs */
  --rf-star-size:26px;
  --rf-btn-h:44px;

  /* Very light, professional shadow */
  --rf-shadow:0 1px 3px rgba(0,0,0,.06);
  --rf-shadow-soft:0 1px 2px rgba(0,0,0,.05);
}

/* ---------- Outer tint band (centers the card and prevents narrow columns) ---------- */
.bpsm-rf-wrap{
  
  padding:12px 0;
  display:flex;
  justify-content:center;
  width:100%;
}

/* ---------- Card (desktop default: 450×650) ---------- */
.bpsm-rf-card{
  width:100%;
  max-width:450px;          /* desktop width cap */
  max-height:650px;         /* desktop height cap */
  min-width:280px;          /* avoid ultra-narrow columns stacking letters */
  margin:0 12px 18px;
  background:#fff;
  color:var(--rf-text);
  border:1px solid var(--rf-border);
  border-radius:var(--rf-radius-xl);
  box-shadow:var(--rf-shadow);
  overflow:hidden;          /* preserve rounded corners */
  font-size:var(--rf-font-base);
  line-height:var(--rf-line);
  display:flex;
  flex-direction:column;
}

/* ---------- Header ---------- */
.bpsm-rf-head{
  padding:16px;
  text-align:center;
  color:#fff;
  background:linear-gradient(
    135deg,
    var(--rf-accent-start) 0%,
    var(--rf-accent-mid)   50%,
    var(--rf-accent-end)   100%
  );
}
.bpsm-rf-title{
  margin:0 0 6px 0;
  font-size:calc(var(--rf-font-lg) + 2px);
  font-weight:700;
  white-space:normal;
  word-break:keep-all;      /* prevents vertical letter stacking */
}
.bpsm-rf-sub{
  margin:0;
  opacity:.95;
  font-size:var(--rf-font-sm);
}

/* ---------- Body (scrolls inside card on desktop if content grows) ---------- */
.bpsm-rf-body{
  padding:var(--rf-pad-card);
  overflow:auto;
  flex:1 1 auto;
}
.bpsm-rf-row{ display:grid; grid-template-columns:1fr; gap:var(--rf-gap); }
.bpsm-rf-label{ display:block; font-weight:600; margin:4px 0 6px; }

/* ---------- Inputs & Textarea (padding = 5px) ---------- */
.bpsm-rf-input,
.bpsm-rf-textarea{
  width:100%;
  border:1px solid var(--rf-border);
  border-radius:var(--rf-radius);
  background:#fff;
  color:var(--rf-text);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
  transition:border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  line-height:1.1;
}
.bpsm-rf-input{ height:var(--rf-input-h); }
.bpsm-rf-textarea{ min-height:90px; resize:vertical; } /* compact textarea */

.bpsm-rf-input:focus,
.bpsm-rf-textarea:focus{
  outline:0;
  border-color:var(--rf-accent-start);
  box-shadow:0 0 0 3px var(--rf-focus);
}

/* Placeholder (subtle, professional) */
.bpsm-rf-input::placeholder,
.bpsm-rf-textarea::placeholder{
  color:#9ca3af; opacity:.95; font-size:13px;
}

/* ---------- Stars ---------- */
.bpsm-rf-stars{
  margin-top:6px;
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
}
.bpsm-rf-star{
  appearance:none; -webkit-appearance:none;
  width:var(--rf-star-size); height:var(--rf-star-size);
  display:grid; place-items:center;
  border:1px solid var(--rf-border);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--rf-shadow-soft);
  cursor:pointer;
  padding:0; margin:0; line-height:1; font-size:0;
  transition:transform .06s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.bpsm-rf-star:hover{ transform:translateY(-1px); }
.bpsm-rf-star:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--rf-focus); border-color:var(--rf-accent-start); }
.bpsm-rf-star svg{
  width:calc(var(--rf-star-size) - 10px);
  height:calc(var(--rf-star-size) - 10px);
  display:block;
  fill:#e5e7eb;
}
.bpsm-rf-star.active{ border-color:#fbbf24; background:#fff7ed; }
.bpsm-rf-star.active svg{ fill:var(--rf-star); }
.bpsm-rf-rating-caption{
  text-align:center; margin-top:6px;
  color:var(--rf-muted); font-size:var(--rf-font-sm); font-weight:500;
}

/* ---------- Actions ---------- */
.bpsm-rf-actions{
  margin-top:var(--rf-gap);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.bpsm-rf-actions .button.button-primary{
  width:100%; max-width:420px; height:var(--rf-btn-h);
  border:0; border-radius:999px;
  background:linear-gradient(135deg,var(--rf-accent-start) 0%,var(--rf-accent-mid) 50%,var(--rf-accent-end) 100%);
  color:#fff; font-weight:700;
  box-shadow:var(--rf-shadow-soft);
  transition:transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.bpsm-rf-actions .button.button-primary:hover{ filter:brightness(1.03); transform:translateY(-1px); }
.bpsm-rf-footnote{ font-size:var(--rf-font-sm); color:var(--rf-muted); }

/* ---------- Status note ---------- */
.bpsm-rf-note{
  margin:12px auto; width:100%; max-width:450px;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--rf-border); background:#f9fafb;
  box-shadow:var(--rf-shadow);
}
.bpsm-rf-note.ok{ border-color:#bbf7d0; background:#f0fdf4; }
.bpsm-rf-note.err{ border-color:#fecaca; background:#fef2f2; }

/* =========================
   RESPONSIVE ADAPTATIONS
   ========================= */

/* Phones & narrow devices: fluid width, auto height; increase tap comfort a bit */
@media (max-width:520px){
  :root{
    --rf-font-base:15px;
    --rf-font-sm:13px;
    --rf-input-h:40px;     /* slightly taller on mobile */
    --rf-star-size:28px;
    --rf-btn-h:46px;
  }
  .bpsm-rf-card{
    max-width:100%;        /* fill viewport width */
    max-height:none;       /* let content define height */
    margin:0 12px 18px;
  }
  .bpsm-rf-head{ padding:14px; }
  .bpsm-rf-body{ padding:14px; overflow:visible; }
  .bpsm-rf-actions .button.button-primary{ max-width:100%; }
  .bpsm-rf-note{ max-width:100%; }
}

/* Ultra-narrow widths */
@media (max-width:360px){
  .bpsm-rf-head{ padding:12px; }
  .bpsm-rf-body{ padding:12px; }
}

/* Short landscape heights (tablets/phones): relax internal cap */
@media (max-height:750px) and (min-width:521px){
  .bpsm-rf-card{ max-height:90vh; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .bpsm-rf-star,
  .bpsm-rf-actions .button.button-primary{ transition:none !important; }
}