/* =========================================================
 * GCC — Forms, Preview, 2-Column Layout
 * + Unified Soft Radius (mobile-first)
 * + Size normalization (fix tiny buttons/select)
 * + Compact spacing + header gap
 * =======================================================*/

/* --------- Tokens --------- */
:root{
  --gcc-radius: 12px;
  --gcc-border: #e5e7eb;
  --gcc-bg: #fff;
  --gcc-ink: #111827;
  --gcc-ring: rgba(17,24,39,.12);
}

/* ========== Form & Card khung cơ bản ========== */
.gcc-form{
  max-width:1200px;
  margin:18px auto 0;               /* tách viền form khỏi header */
  padding:12px 12px 14px;
  border:1px solid #ddd;
  border-radius:10px;
}
.gcc-card{
  border:1px solid #eee; padding:16px; border-radius:14px;
  max-width:1200px; margin:0 auto;
}
.gcc-card .title{font-weight:700;font-size:1.4rem;margin-bottom:6px}
.gcc-card .message{white-space:pre-wrap;line-height:1.5}

/* responsive để không tràn trên màn nhỏ */
@media (max-width:1280px){
  .gcc-form,.gcc-card{max-width:100%}
}

/* ========== Lưới 2 cột: Form + Preview ========== */
.gcc-two-col{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:7fr 5fr; gap:20px; align-items:start;
}
.gcc-col--form .gcc-form{ max-width:100% !important; width:100%; }
.gcc-col--preview{ position:relative; }
.gcc-col--preview .gcc-preview-card{ position:sticky; top:20px; max-width:100%; }
.gcc-card{ max-width:1200px; margin:0 auto; }
.gcc-preview-media img, .gcc-preview-media video{ max-width:100%; height:auto; display:block; }

@media (max-width:1024px){
  .gcc-two-col{ grid-template-columns:1fr; gap:16px; }
  .gcc-col--preview .gcc-preview-card{ position:static; }
}

/* ========== Mobile responsiveness ========== */
@media (max-width:768px){
  .logo-tagline{ display:none !important; }
}

/* ========== Unified soft radius for ALL controls ========== */
.gcc-form input[type="text"],
.gcc-form input[type="email"],
.gcc-form input[type="number"],
.gcc-form input[type="url"],
.gcc-form input[type="tel"],
.gcc-form input[type="search"],
.gcc-form input[type="password"],
.gcc-form input[type="date"],
.gcc-form input[type="time"],
.gcc-form input[type="datetime-local"],
.gcc-form input[type="file"],
.gcc-form select,
.gcc-form textarea,
.gcc-input,
input[type="text"].gcc-input,
select.gcc-input,
textarea.gcc-input{
  -webkit-appearance:none; appearance:none; width:100%;
  border:1px solid var(--gcc-border); border-radius:var(--gcc-radius);
  background:var(--gcc-bg); color:var(--gcc-ink);
  padding:10px 12px; line-height:1.5;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-sizing:border-box;
}

.gcc-form input:focus,
.gcc-form select:focus,
.gcc-form textarea:focus,
.gcc-input:focus{
  outline:0; border-color:#111827; box-shadow:0 0 0 3px var(--gcc-ring);
}

.gcc-form input[disabled],
.gcc-form select[disabled],
.gcc-form textarea[disabled]{ opacity:.65; cursor:not-allowed; background:#f9fafb; }

.gcc-form textarea{ resize:vertical; min-height:120px; }
.gcc-form input[type="file"]{ padding:8px 10px; border-radius:var(--gcc-radius); }

/* caret cho select */
.gcc-form select{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:36px;
}

/* Buttons */
.gcc-form button,
.gcc-copy-btn,
button.gcc-btn,
.woocommerce a.button,
.woocommerce button.button{
  border-radius:max(10px, var(--gcc-radius));
}

/* Share page input đảm bảo radius nếu theme ghi đè */
.gcc-share-standalone .gcc-input{ border-radius:var(--gcc-radius) !important; }

/* Woo forms chung */
.woocommerce form input[type="text"],
.woocommerce form input[type="search"],
.woocommerce form select,
.woocommerce form textarea{ border-radius:var(--gcc-radius); }

/* Dark scheme */
@media (prefers-color-scheme: dark){
  :root{ --gcc-border:#2e2e2e; --gcc-bg:#121212; --gcc-ink:#eaeaea; --gcc-ring:rgba(255,255,255,.14); }
}

/* =========================================================
 * Size normalization inside .gcc-form (fix tiny buttons/select)
 * + Compact spacing giữa các input
 * =======================================================*/
.gcc-form{
  --gcc-field-h: 40px;
  --gcc-pad-y: 10px;
  --gcc-pad-x: 12px;
  font-size:16px;
}
.gcc-form input[type="text"],
.gcc-form input[type="email"],
.gcc-form input[type="url"],
.gcc-form input[type="number"],
.gcc-form input[type="tel"],
.gcc-form input[type="search"],
.gcc-form input[type="password"],
.gcc-form textarea,
.gcc-form select{
  font-size:1rem !important;
  line-height:1.3;
  min-height:var(--gcc-field-h);
  padding:var(--gcc-pad-y) var(--gcc-pad-x);
  width:100%; box-sizing:border-box;
}

/* Select caret SVG */
.gcc-form select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:13px 8px; padding-right:36px;
}

/* Button (kể cả Flatsome/WC) */
.gcc-form .button,
.gcc-form button,
.gcc-form input[type="submit"],
.gcc-form input[type="button"]{
  display:inline-flex !important; align-items:center; justify-content:center; gap:6px;
  height:var(--gcc-field-h); padding:0 14px; line-height:1 !important;
  font-size:0.95rem !important; font-weight:600;
  border-radius:var(--gcc-radius); border:1px solid #ccc; background:#fff; color:#222; text-decoration:none; cursor:pointer;
}
.gcc-form .button:hover,
.gcc-form button:hover,
.gcc-form input[type="submit"]:hover,
.gcc-form input[type="button"]:hover{ background:#f5f5f5; border-color:#999; }

.gcc-form .gcc-btn--sm{ height:34px; padding:0 10px; font-size:12px !important; border-radius:10px; }
.gcc-form input[type="checkbox"], .gcc-form input[type="radio"]{ width:18px; height:18px; accent-color:#111; }

.gcc-form .button.is-small, .gcc-form .button.small{
  height:var(--gcc-field-h); padding:0 12px; font-size:0.95rem !important; line-height:1 !important;
}

/* Compact spacing giữa các khối trong form */
.gcc-fieldset{ margin:10px 0; padding:10px; border:1px solid #e5e7eb; border-radius:8px; }
.gcc-fieldset legend{ font-weight:600; padding:0 4px; }
.gcc-form p{ margin:8px 0; }
.gcc-inline{ display:flex; gap:6px; align-items:center; }
.gcc-caption-item{ padding:4px 0; border-bottom:1px dashed #ddd; }
.gcc-caption-item:last-child{ border-bottom:0; }
.gcc-form .description{ display:block; color:#6b7280; margin-top:3px; font-size:12px; }

/* Mobile tappable */
@media (max-width:480px){
  .gcc-form{ --gcc-field-h:42px; --gcc-pad-y:11px; }
}

/* =========================================================
 * ONLY: Message textarea bigger (~3x)
 * =======================================================*/
.gcc-form textarea#gcc_message{
  min-height:150px;
}
@media (max-width:1024px){
  .gcc-form textarea#gcc_message{ min-height:300px; }
}
@media (max-width:480px){
  .gcc-form textarea#gcc_message{ min-height:240px; }
}

/* =========================================================
 * Preview toggle & sticky header offset
 * =======================================================*/
.gcc-preview-toggle{ scroll-margin-top:80px; }  /* nếu header sticky */