.fwc-floating-whatsapp {
    position: fixed;
    width: var(--fwc-desktop-size, 64px);
    height: var(--fwc-desktop-size, 64px);
    z-index: var(--fwc-z, 9999);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 1;
    transition: transform .22s ease, opacity .22s ease, filter .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.fwc-floating-whatsapp:hover,
.fwc-floating-whatsapp:focus { transform: translateY(-3px) scale(1.04); opacity: .96; outline: none; }
.fwc-image-wrap {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    border-radius: var(--fwc-radius, 50%); overflow: hidden; background: var(--fwc-image-bg, transparent);
    border: var(--fwc-border-width, 0) var(--fwc-border-style, solid) var(--fwc-border-color, #25D366);
    padding: var(--fwc-image-padding, 0); box-sizing: border-box; position: relative; z-index: 2;
}
.fwc-image-wrap img { width: 100%; height: 100%; object-fit: var(--fwc-image-fit, cover); display: block; border-radius: inherit; box-sizing: border-box; }
.fwc-has-shadow .fwc-image-wrap { box-shadow: 0 14px 34px rgba(15, 23, 42, .24); }
.fwc-has-pulse::before { content: ''; position: absolute; inset: 0; border-radius: var(--fwc-radius, 50%); background: rgba(37, 211, 102, .32); animation: fwcPulse 1.9s ease-out infinite; z-index: 1; }
.fwc-tooltip { position: absolute; top: 50%; transform: translateY(-50%); background: #111827; color: #fff; font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility .22s ease, transform .22s ease; box-shadow: 0 8px 20px rgba(0, 0, 0, .16); }
.fwc-floating-whatsapp:hover .fwc-tooltip,
.fwc-floating-whatsapp:focus .fwc-tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
@keyframes fwcPulse { 0% { transform: scale(1); opacity: .75; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }
@media (max-width: 768px) { .fwc-floating-whatsapp { width: var(--fwc-mobile-size, 56px); height: var(--fwc-mobile-size, 56px); } .fwc-tooltip { display: none; } }

/* =========================
   Professional Admin Layout
========================= */
.fwc-admin-wrap { margin: 22px 24px 0 2px; color: #0f172a; }
.fwc-admin-wrap * { box-sizing: border-box; }
.fwc-admin-hero { display: flex; justify-content: space-between; gap: 24px; align-items: stretch; margin: 18px 0 22px; padding: 28px; border-radius: 24px; background: linear-gradient(135deg, #071521 0%, #0f2f25 52%, #0ea85e 100%); color: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); overflow: hidden; position: relative; }
.fwc-admin-hero:after { content: ''; position: absolute; width: 260px; height: 260px; right: -80px; top: -100px; border-radius: 50%; background: rgba(255,255,255,.12); }
.fwc-admin-hero h1 { color: #fff; margin: 10px 0 8px; font-size: 30px; line-height: 1.15; font-weight: 800; }
.fwc-admin-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }
.fwc-admin-badge { display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.12); color: #dcfce7; border-radius: 999px; font-size: 12px; font-weight: 700; }
.fwc-admin-hero-meta { min-width: 220px; position: relative; z-index: 1; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.20); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 4px; align-self: center; }
.fwc-admin-hero-meta strong { color: #bbf7d0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.fwc-admin-hero-meta span { font-size: 15px; font-weight: 800; }
.fwc-admin-hero-meta a { color: #fff; text-decoration: none; opacity: .9; }
.fwc-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.fwc-settings-panel { display: flex; flex-direction: column; gap: 18px; }
.fwc-card, .fwc-preview-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 22px; box-shadow: 0 14px 34px rgba(15, 23, 42, .06); }
.fwc-card { padding: 22px; }
.fwc-card-title { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #edf2f7; }
.fwc-card-title h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.25; color: #0f172a; }
.fwc-card-title p { margin: 0; color: #64748b; font-size: 13px; }
.fwc-step { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #dcfce7; color: #15803d; font-weight: 900; font-size: 12px; }
.fwc-grid { display: grid; gap: 16px; margin-top: 16px; }
.fwc-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fwc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fwc-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fwc-grid.compact { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #e2e8f0; }
.fwc-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.fwc-field > span, .fwc-field-inline > span { color: #334155; font-size: 13px; font-weight: 800; }
.fwc-field em, .fwc-field-inline em { color: #64748b; font-style: normal; font-size: 12px; line-height: 1.45; }
.fwc-field input[type="text"], .fwc-field input[type="url"], .fwc-field input[type="number"], .fwc-field select, .fwc-field textarea { width: 100%; max-width: 100%; min-height: 42px; border: 1px solid #dbe3ef; border-radius: 12px; padding: 8px 12px; background: #fff; color: #0f172a; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.fwc-field textarea { min-height: 112px; resize: vertical; }
.fwc-field input:focus, .fwc-field select:focus, .fwc-field textarea:focus { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.12); outline: none; }
.fwc-color { padding: 4px !important; height: 42px; }
.fwc-input-suffix { display: flex; align-items: center; border: 1px solid #dbe3ef; border-radius: 12px; overflow: hidden; background: #fff; }
.fwc-input-suffix input { border: 0 !important; border-radius: 0 !important; min-height: 40px !important; box-shadow: none !important; }
.fwc-input-suffix span { padding: 0 12px; color: #64748b; font-weight: 700; border-left: 1px solid #edf2f7; }
.fwc-field-inline { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; }
.fwc-field-inline em { grid-column: 1 / -1; }
.fwc-switch { position: relative; display: inline-flex; }
.fwc-switch input { display: none; }
.fwc-switch span { width: 48px; height: 26px; border-radius: 999px; background: #cbd5e1; display: inline-block; position: relative; transition: background .18s ease; }
.fwc-switch span:before { content: ''; position: absolute; width: 20px; height: 20px; top: 3px; left: 3px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(15,23,42,.2); transition: transform .18s ease; }
.fwc-switch input:checked + span { background: #22c55e; }
.fwc-switch input:checked + span:before { transform: translateX(22px); }
.fwc-check { display: inline-flex; align-items: center; gap: 8px; color: #334155; font-weight: 700; margin: 0; }
.fwc-media-row { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; }
.fwc-media-thumb { width: 130px; height: 130px; border-radius: 22px; background: #f8fafc; border: 1px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; padding: 12px; }
.fwc-media-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
.fwc-media-controls { min-width: 0; }
.fwc-button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fwc-button-row .button, .fwc-save-box .button { border-radius: 10px; }

.fwc-preview-panel { position: sticky; top: 48px; }
.fwc-preview-card { overflow: hidden; }
.fwc-preview-header { padding: 18px; border-bottom: 1px solid #edf2f7; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.fwc-preview-header span { display: block; color: #64748b; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.fwc-preview-header strong { display: block; color: #0f172a; font-size: 17px; margin-top: 2px; }
.fwc-preview-toggle { background: #f1f5f9; border-radius: 999px; padding: 4px; display: inline-flex; gap: 2px; }
.fwc-preview-toggle button { border: 0; background: transparent; color: #64748b; cursor: pointer; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.fwc-preview-toggle button.active { background: #fff; color: #15803d; box-shadow: 0 4px 10px rgba(15,23,42,.08); }
.fwc-preview-browser { margin: 18px; border: 1px solid #e2e8f0; border-radius: 18px; overflow: hidden; background: #fff; }
.fwc-browser-bar { height: 38px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.fwc-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; display: inline-block; }
.fwc-browser-bar span { margin-left: 8px; color: #94a3b8; font-size: 12px; font-weight: 700; }
.fwc-admin-preview-stage { position: relative; height: 330px; overflow: hidden; background: linear-gradient(180deg, #f8fafc, #eef6f1); transition: width .2s ease, height .2s ease; }
.fwc-admin-preview-stage.mobile { width: 230px; height: 410px; margin: 0 auto; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; }
.fwc-demo-content { position: absolute; inset: 28px; display: flex; flex-direction: column; gap: 12px; opacity: .75; }
.fwc-demo-content span { display: block; height: 18px; border-radius: 999px; background: rgba(148, 163, 184, .22); }
.fwc-demo-content span:nth-child(1) { width: 62%; height: 34px; background: rgba(34,197,94,.14); }
.fwc-demo-content span:nth-child(2) { width: 84%; }
.fwc-demo-content span:nth-child(3) { width: 48%; }
.fwc-admin-live-preview { position: absolute !important; right: 24px !important; left: auto !important; bottom: 24px !important; width: var(--fwc-desktop-size, 64px); height: var(--fwc-desktop-size, 64px); }
.fwc-admin-preview-stage.mobile .fwc-admin-live-preview { width: var(--fwc-mobile-size, 56px); height: var(--fwc-mobile-size, 56px); right: 18px !important; bottom: 18px !important; }
.fwc-admin-live-preview.fwc-preview-left { left: 24px !important; right: auto !important; }
.fwc-admin-preview-stage.mobile .fwc-admin-live-preview.fwc-preview-left { left: 18px !important; right: auto !important; }
.fwc-admin-live-preview .fwc-tooltip { right: calc(100% + 10px); left: auto; opacity: 1; visibility: visible; transform: translateY(-50%); }
.fwc-admin-live-preview.fwc-preview-left .fwc-tooltip { left: calc(100% + 10px); right: auto; }
.fwc-admin-preview-stage.mobile .fwc-tooltip, .fwc-admin-live-preview.fwc-tooltip-hidden .fwc-tooltip { display: none; }
.fwc-preview-note { margin: 0 18px 18px; padding: 13px 14px; border-radius: 14px; background: #f0fdf4; color: #166534; font-size: 12px; line-height: 1.5; border: 1px solid #bbf7d0; }
.fwc-save-box { padding: 18px; border-top: 1px solid #edf2f7; background: #f8fafc; }
.fwc-save-box .button { width: 100%; justify-content: center; min-height: 44px; font-weight: 800; }

@media (max-width: 1280px) { .fwc-admin-layout { grid-template-columns: 1fr; } .fwc-preview-panel { position: relative; top: auto; order: -1; } }
@media (max-width: 782px) { .fwc-admin-wrap { margin-right: 10px; } .fwc-admin-hero, .fwc-preview-header, .fwc-media-row { flex-direction: column; display: flex; } .fwc-admin-hero-meta { width: 100%; } .fwc-grid.two, .fwc-grid.three, .fwc-grid.four { grid-template-columns: 1fr; } .fwc-card { padding: 16px; } .fwc-media-thumb { width: 110px; height: 110px; } }