/* =========================================================
   Gift Card Calculator (Shared CSS)
   Used by: /rate/... page + [gc_calc_inline]
   ========================================================= */
.rate-calculator-page,
.gc-inline-wrap{
  --bg:#0b1220;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:rgba(148,163,184,.18);
  --accent:#60a5fa;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ------------------- Rate Page UI ------------------- */
.rate-calculator-page{max-width:1050px;margin:0 auto;padding:18px 14px;}
.gc-shell{display:grid;grid-template-columns: 1.05fr .95fr;gap:14px;align-items:start;}
@media (max-width: 960px){.gc-shell{grid-template-columns:1fr;}}

.gc-card{
  background: linear-gradient(180deg, rgba(15,23,42,.95), rgba(2,6,23,.92));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.gc-card-h{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.gc-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:.2px;}
.gc-sub{font-size:12px;color:var(--muted);}
.gc-card-b{padding:14px 16px;}

.gc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width: 560px){.gc-grid{grid-template-columns:1fr;}}

.gc-row label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px;}
.gc-row select,.gc-row input{
  width:100%;
  background: rgba(2,6,23,.65);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  transition: border .15s ease, transform .15s ease;
}
.gc-row select:focus,.gc-row input:focus{border-color:rgba(96,165,250,.6);}

.gc-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.gc-btn{
  background: linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.95));
  color:#07101f;
  border:0;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(59,130,246,.22);
}
.gc-btn.secondary{
  background: rgba(2,6,23,.65);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.gc-btn:active{transform: translateY(1px);}
.gc-mini{font-size:12px;color:var(--muted);}

.gc-result{padding:16px;}
.gc-big{font-size:30px;font-weight:800;color:var(--text);letter-spacing:.4px;}
.gc-big small{font-size:13px;color:var(--muted);font-weight:600;margin-left:8px;}
.gc-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  background: rgba(2,6,23,.55);
}
.gc-chip .dot{width:8px;height:8px;border-radius:999px;background:var(--accent);opacity:.9;}
.gc-break{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.45;}
.gc-warn{margin-top:8px;font-size:12px;color:#fca5a5;display:none;}
.gc-skel{
  display:inline-block;height:34px;width:220px;border-radius:10px;
  background: linear-gradient(90deg, rgba(148,163,184,.10), rgba(148,163,184,.22), rgba(148,163,184,.10));
  background-size: 200% 100%;
  animation: sk 1.1s ease-in-out infinite;
}
@keyframes sk{0%{background-position:0% 0}100%{background-position:200% 0}}

/* ------------------- Inline Shortcode UI ------------------- */
.gc-inline-wrap{
  margin:14px 0;
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(2,6,23,.92));
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.gc-inline-h{
  padding:14px 16px;
  border-bottom:1px solid rgba(148,163,184,.18);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.gc-inline-title{color:#e5e7eb;font-weight:800;font-size:14px;letter-spacing:.2px;}
.gc-inline-sub{color:#94a3b8;font-size:12px;margin-top:2px;}
.gc-inline-status{
  color:#94a3b8;font-size:12px;border:1px solid rgba(148,163,184,.18);
  padding:6px 10px;border-radius:999px;background:rgba(2,6,23,.55);
}
.gc-inline-b{padding:14px 16px;display:grid;grid-template-columns:1.05fr .95fr;gap:12px;}
@media(max-width:960px){.gc-inline-b{grid-template-columns:1fr;}}
.gc-inline-card{
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;padding:12px;background:rgba(2,6,23,.45);
}
.gc-inline-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:560px){.gc-inline-grid{grid-template-columns:1fr;}}
.gc-inline-row label{display:block;color:#94a3b8;font-size:12px;margin:0 0 6px;}
.gc-inline-row input,.gc-inline-row select{
  width:100%;background:rgba(2,6,23,.65);color:#e5e7eb;
  border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:10px 12px;outline:none;
}
.gc-inline-row input:focus,.gc-inline-row select:focus{border-color:rgba(96,165,250,.6);}
.gc-inline-big{font-size:30px;color:#e5e7eb;font-weight:900;letter-spacing:.3px;}
.gc-inline-muted{color:#94a3b8;font-size:12px;line-height:1.45;margin-top:8px;}
.gc-inline-chip{
  display:inline-flex;align-items:center;gap:8px;border:1px dashed rgba(148,163,184,.18);
  border-radius:999px;padding:6px 10px;background:rgba(2,6,23,.55);color:#94a3b8;font-size:12px;
}
.gc-inline-chip strong{color:#e5e7eb;}