/**
* GCC Flatsome Guard
* ──────────────────
* Chiến lược cô lập CSS plugin khỏi theme Flatsome (và mọi theme chạy trên
* WooCommerce thường override nav/header/entry-content aggressively).
*
* ĐỊNH LƯỢNG SPECIFICITY
* Flatsome selector điển hình:
* .header-nav li a → (0,1,2)
* #masthead .nav > li > a → (1,1,2)
* .entry-content > p → (0,1,1)
* body .woocommerce .button → (0,2,1)
*
* GCC guard hiện dùng nhiều lớp bảo vệ:
* .gcc-scope.gcc-scope → (0,2,0) (nhân đôi class)
* .gcc-scope.gcc-scope:not(#_) → (1,2,0) (+ :not(#id))
* .gcc-scope.gcc-scope:not(#_):not(#__) → (2,2,0) (cho rule đặc biệt)
*
* :not(#_) KHÔNG match phần tử nào (không ai dùng id="_"), nên không ảnh
* hưởng matching — chỉ cộng thêm 1-0-0 specificity. Đây là thủ thuật
* chuẩn CSS (được W3C spec xác nhận), không phải hack.
*
* HOW IT WORKS
* 1. .gcc-scope — wrapper class để bọc mọi output plugin nằm trong vùng
* theme quản (header, nav, sidebar, entry-content), neutralize
* inheritance và specificity fight sẵn có.
* 2. Class nhân đôi `.gcc-scope.gcc-scope` + `:not(#_)` cho specificity
* cao mà không cần !important.
* 3. File này được CSS Guard (class-css-guard.php) enqueue với dependency
* `flatsome-main` → plugin nằm SAU theme trong ,
* thắng cascade tie tự nhiên.
* 4. @layer declaration giúp cô lập với layer của theme nếu theme tương
* lai dùng cascade layers.
*
* WHERE TO APPLY
* Bọc shortcode output nằm trong vùng theme quản:
*
...
* (class lặp 2 lần có chủ ý — xem điểm 2)
*
* Cho case cực cứng đầu (theme có rule !important hoặc inline style):
*
...
* → dùng `all: revert` để reset toàn bộ cascade về mặc định UA/browser.
*
* IMPORTANT
* KHÔNG áp .gcc-scope lên preview iframe (.gcc-card / .gcc-preview) —
* chúng đã isolated sẵn qua container riêng và sẽ vỡ layout nếu reset.
*
* @package greeting-card-creator
* @since 1.0
* @updated 2026-04-17 Thêm :not(#_) boost, @layer, Flatsome-specific
* neutralizers, .gcc-isolate utility.
*/
/* ──────────────────────────────────────────────────────────────────────
* 0. Cascade layer declaration
* Khai báo thứ tự layer theo convention. Unlayered rules (như các rule
* bên dưới) luôn thắng mọi layer theo spec CSS — nên dù theme có đẩy
* CSS vào layer, plugin vẫn thắng. Khai báo này chỉ để document intent.
* ────────────────────────────────────────────────────────────────────── */
@layer theme, plugin, gcc-overrides;
/* ──────────────────────────────────────────────────────────────────────
* 1. Wrapper reset — neutralize theme inheritance
* ────────────────────────────────────────────────────────────────────── */
.gcc-scope.gcc-scope {
/* Reset typography mà nav/header thường force */
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #111827;
text-align: left;
text-transform: none;
letter-spacing: normal;
font-style: normal;
/* Reset nav-li/ul context */
list-style: none;
margin: 0;
padding: 0;
/* Block context mặc định inline-block (giữ backward-compat với balance widget) */
display: inline-block;
box-sizing: border-box;
/* Không cho theme inject shadow/outline text vào vùng này */
text-shadow: none;
-webkit-font-smoothing: antialiased;
}
/* Modifier: dùng khi output là block-level (form, panel, page content) */
.gcc-scope.gcc-scope.gcc-scope--block {
display: block;
width: 100%;
}
/* Child inherit baseline box-sizing */
.gcc-scope.gcc-scope *,
.gcc-scope.gcc-scope *::before,
.gcc-scope.gcc-scope *::after {
box-sizing: border-box;
}
/* ──────────────────────────────────────────────────────────────────────
* 2. Tag-level neutralizers cho nav/header context
* Flatsome apply link underlines, list markers, uppercase nav, etc.
* Dùng :not(#_) để boost lên (1,2,0) — thắng cả selector có id.
* ────────────────────────────────────────────────────────────────────── */
.gcc-scope.gcc-scope:not(#_) ul,
.gcc-scope.gcc-scope:not(#_) ol {
margin: 0;
padding: 0;
list-style: none;
}
.gcc-scope.gcc-scope:not(#_) li {
margin: 0;
padding: 0;
list-style: none;
border: 0;
background: transparent;
display: list-item;
text-transform: none;
letter-spacing: normal;
}
.gcc-scope.gcc-scope:not(#_) a {
color: inherit;
text-decoration: none;
background: transparent;
border-bottom: 0;
box-shadow: none;
text-shadow: none;
}
.gcc-scope.gcc-scope:not(#_) a:hover,
.gcc-scope.gcc-scope:not(#_) a:focus,
.gcc-scope.gcc-scope:not(#_) a:active {
color: inherit;
text-decoration: none;
background: transparent;
border-bottom: 0;
box-shadow: none;
}
.gcc-scope.gcc-scope:not(#_) p {
margin: 0;
padding: 0;
line-height: inherit;
}
.gcc-scope.gcc-scope:not(#_) h1,
.gcc-scope.gcc-scope:not(#_) h2,
.gcc-scope.gcc-scope:not(#_) h3,
.gcc-scope.gcc-scope:not(#_) h4,
.gcc-scope.gcc-scope:not(#_) h5,
.gcc-scope.gcc-scope:not(#_) h6 {
/* Flatsome force heading font-family/weight — reset về inherit để plugin kiểm soát */
font-family: inherit;
font-weight: inherit;
text-transform: none;
letter-spacing: normal;
color: inherit;
margin: 0;
padding: 0;
line-height: inherit;
}
.gcc-scope.gcc-scope:not(#_) img,
.gcc-scope.gcc-scope:not(#_) img.emoji {
/* Flatsome + entry-content thường force width:100% trên img */
width: auto;
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
vertical-align: middle;
display: inline-block;
box-shadow: none;
border-radius: 0;
}
.gcc-scope.gcc-scope:not(#_) img.emoji {
width: 1em;
height: 1em;
vertical-align: -.1em;
}
/* ──────────────────────────────────────────────────────────────────────
* 3. Form controls — Flatsome & WooCommerce style inputs rất aggressive
* ────────────────────────────────────────────────────────────────────── */
.gcc-scope.gcc-scope:not(#_) input,
.gcc-scope.gcc-scope:not(#_) select,
.gcc-scope.gcc-scope:not(#_) textarea,
.gcc-scope.gcc-scope:not(#_) button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
box-sizing: border-box;
text-transform: none;
letter-spacing: normal;
}
/* Không cho theme inject chrome trên button trừ khi opt-in */
.gcc-scope.gcc-scope:not(#_) button:not(.gcc-themed-btn):not(.button) {
background: none;
border: 0;
padding: 0;
cursor: pointer;
box-shadow: none;
text-shadow: none;
min-height: 0;
}
/* ──────────────────────────────────────────────────────────────────────
* 4. Flatsome-specific neutralizers
* Các selector mà Flatsome "tấn công" khi plugin output lọt vào
* entry-content / header / nav. Dùng specificity (2,2,0) để áp đảo.
* ────────────────────────────────────────────────────────────────────── */
/* Flatsome inject margin/spacing vào con trực tiếp của .entry-content */
.gcc-scope.gcc-scope:not(#_):not(#__) > *,
.entry-content .gcc-scope.gcc-scope:not(#_) > * {
/* Reset các spacing bất định của theme — plugin sẽ tự set lại nếu cần */
margin-top: 0;
margin-bottom: 0;
}
/* Flatsome .row / .flex-row clearfix & spacing thường bleed qua */
.gcc-scope.gcc-scope:not(#_) .row::before,
.gcc-scope.gcc-scope:not(#_) .row::after,
.gcc-scope.gcc-scope:not(#_) .stack::before,
.gcc-scope.gcc-scope:not(#_) .stack::after {
content: none;
display: none;
}
/* Flatsome uppercase nav — bẻ về bình thường trong scope */
.gcc-scope.gcc-scope:not(#_) .nav,
.gcc-scope.gcc-scope:not(#_) .nav > li,
.gcc-scope.gcc-scope:not(#_) .nav > li > a {
text-transform: none;
letter-spacing: normal;
font-weight: inherit;
}
/* WooCommerce / Flatsome .button gradient + shadow — reset trừ khi opt-in */
.gcc-scope.gcc-scope:not(#_) .button:not(.gcc-themed-btn) {
background-image: none;
box-shadow: none;
text-shadow: none;
min-height: 0;
line-height: inherit;
}
/* Flatsome header-block / .header-top style bleed */
.gcc-scope.gcc-scope:not(#_) .header-block,
.gcc-scope.gcc-scope:not(#_) .header-top {
padding: 0;
margin: 0;
background: transparent;
}
/* ──────────────────────────────────────────────────────────────────────
* 5. Specific known-overridden widgets
* (Thêm entry vào đây khi phát hiện conflict mới)
* ────────────────────────────────────────────────────────────────────── */
/* Balance widget (top bar Flatsome header) — specificity (2,2,0) */
.gcc-bal-wrap.gcc-bal-wrap:not(#_) {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 5px 11px;
margin: 0;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
font-family: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1;
color: #111827;
text-transform: none;
letter-spacing: normal;
text-shadow: none;
}
.gcc-bal-wrap.gcc-bal-wrap:not(#_) .gccqp-balance-amount {
font-weight: 800;
color: #111827;
}
.gcc-bal-wrap.gcc-bal-wrap:not(#_) .gccqp-balance-package {
font-size: 11px;
font-weight: 700;
color: #6b7280;
text-transform: capitalize;
}
.gcc-bal-wrap.gcc-bal-wrap:not(#_) .gccqp-cd-label {
font-size: 11px;
font-weight: 700;
color: #92400e;
white-space: nowrap;
}
.gcc-bal-wrap.gcc-bal-wrap:not(#_) .gccqp-cd-timer {
font-variant-numeric: tabular-nums;
font-weight: 800;
min-width: 58px;
color: #b45309;
white-space: nowrap;
}
/* Simple balance widget [gcc_balance] — đặt trong header/widget.
Thay thế inline-style cũ bằng class để cho phép override qua CSS. */
.gcc-scope.gcc-scope:not(#_) .gcc-balance {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: #111827;
line-height: 1.3;
}
.gcc-scope.gcc-scope:not(#_) .gcc-balance-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
background: #5B6EF5;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
text-transform: capitalize;
letter-spacing: normal;
text-shadow: none;
}
/* ──────────────────────────────────────────────────────────────────────
* 6. Nuclear-option utility: .gcc-isolate
* Dùng khi theme có !important hoặc inline-style cứng đầu.
* `all: revert` bẻ mọi property về giá trị UA/browser mặc định
* (KHÔNG phải initial) — an toàn hơn `all: unset`.
*
* CHỈ dùng trên element container nhỏ, không áp cho form/preview/iframe
* vì sẽ xóa mọi CSS plugin kế thừa luôn.
* ────────────────────────────────────────────────────────────────────── */
.gcc-scope.gcc-scope:not(#_).gcc-isolate,
.gcc-scope.gcc-scope:not(#_) .gcc-isolate {
all: revert;
/* Sau revert, khôi phục baseline plugin */
box-sizing: border-box;
font-family: inherit;
color: #111827;
line-height: 1.5;
}
/* ──────────────────────────────────────────────────────────────────────
* 7. Debug helper (tắt mặc định — bật qua query ?gcc_css_debug=1 nếu cần)
* Outline màu cam mọi element trong scope để dev verify phạm vi guard.
* ────────────────────────────────────────────────────────────────────── */
html[data-gcc-css-debug="1"] .gcc-scope.gcc-scope,
html[data-gcc-css-debug="1"] .gcc-scope.gcc-scope * {
outline: 1px dashed rgba(234, 88, 12, .55) !important;
outline-offset: -1px;
}