/*
* Golden Forex Scalping Theme — WooCommerce Styles
* Dark theme to match existing site design exactly.
* Only WooCommerce pages are affected. Home page style unchanged.
*/
/* ── Page wrapper ────────────────────────────────────────────── */
.gfs-woo-wrapper,
.gfs-woo-content {
padding: 80px 0 60px;
min-height: 70vh;
background: var(--color-bg, #070C18);
color: var(--color-text, #E2E8F0);
}
/* ── Notices ─────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: rgba(13,18,32,0.97);
border-top: 3px solid #FFC857;
color: var(--color-text, #E2E8F0);
padding: 14px 20px;
border-radius: 8px;
margin-bottom: 24px;
list-style: none;
}
.woocommerce-error { border-top-color: #EF4444; }
.woocommerce-info { border-top-color: #60A5FA; }
/* ── Breadcrumbs ─────────────────────────────────────────────── */
.woocommerce-breadcrumb { color: var(--color-text-muted,#64748B); font-size:.88rem; margin-bottom:20px; }
.woocommerce-breadcrumb a { color:#FFC857; text-decoration:none; }
/* ── Page headings ───────────────────────────────────────────── */
.woocommerce-products-header__title,
h1.page-title,
.woocommerce-loop-product__title { color: var(--color-text,#E2E8F0) !important; }
/* ── Product grid ────────────────────────────────────────────── */
/* ══ Product Grid ══════════════════════════════════════════════ */
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px;
list-style: none;
padding: 0;
margin: 0 !important;
clear: both;
}
@media(max-width:640px){
.woocommerce ul.products { grid-template-columns: 1fr; }
}
/* ══ Product Card ══════════════════════════════════════════════ */
.woocommerce ul.products li.product {
background: rgba(13,18,32,.97);
border: 1px solid rgba(255,255,255,.07);
border-radius: 16px;
padding: 0;
overflow: hidden;
transition: border-color .3s, box-shadow .3s, transform .25s;
display: flex;
flex-direction: column;
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.woocommerce ul.products li.product:hover {
border-color: rgba(255,200,87,.4);
box-shadow: 0 12px 48px rgba(255,200,87,.10);
transform: translateY(-3px);
}
/* ── Product Image ─────────────────────────────────────────── */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
display: block;
text-decoration: none;
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
border-radius: 0;
width: 100% !important;
height: 220px !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
margin: 0 !important;
}
/* ── Product Info Area ─────────────────────────────────────── */
.woocommerce ul.products li.product .gfs-product-body,
.woocommerce ul.products li.product > a + *,
.woocommerce ul.products li.product > .woocommerce-loop-product__link + * {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
/* Use a wrapper trick: restyle content area after image */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--color-text, #E2E8F0) !important;
line-height: 1.45 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
padding: 16px 20px 0 !important;
margin: 0 !important;
display: block !important;
}
.woocommerce ul.products li.product .price {
font-size: 1.2rem !important;
font-weight: 800 !important;
color: #FFC857 !important;
padding: 4px 20px 0 !important;
display: block !important;
}
.woocommerce ul.products li.product .price del {
color: var(--color-text-muted, #64748B);
font-size: .85rem;
font-weight: 400;
}
/* ── Add to Cart button inside product card ────────────────── */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
display: block !important;
width: calc(100% - 40px) !important;
margin: 12px 20px 20px !important;
text-align: center !important;
background: linear-gradient(135deg, #FFC857, #F59E0B) !important;
color: #0A0E1A !important;
font-weight: 800 !important;
font-size: .95rem !important;
padding: 13px 20px !important;
border-radius: 10px !important;
border: none !important;
cursor: pointer !important;
text-decoration: none !important;
transition: opacity .2s, transform .15s !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
opacity: .88 !important;
transform: translateY(-1px) !important;
color: #0A0E1A !important;
}
/* ── Buttons ─────────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background: linear-gradient(135deg,#FFC857,#F59E0B);
color: #0A0E1A;
font-weight: 700;
padding: 12px 24px;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: .95rem;
transition: opacity .2s, transform .15s;
display: inline-block;
text-decoration: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover { opacity:.88; transform:translateY(-1px); color:#0A0E1A; }
/* ── Single Product ──────────────────────────────────────────── */
.woocommerce div.product {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
@media(max-width:768px){ .woocommerce div.product { grid-template-columns:1fr; } }
.woocommerce div.product .product_title { font-size:2rem; font-weight:800; color:var(--color-text,#E2E8F0); margin-bottom:12px; }
.woocommerce div.product p.price { font-size:1.8rem; font-weight:800; color:#FFC857; margin-bottom:20px; }
.woocommerce div.product .woocommerce-product-details__short-description { color:var(--color-text-secondary,#94A3B8); line-height:1.7; }
/* ── Cart table ──────────────────────────────────────────────── */
.woocommerce table.shop_table {
width:100%; border-collapse:collapse;
background:rgba(13,18,32,.97);
border:1px solid rgba(255,255,255,.07);
border-radius:12px; overflow:hidden;
}
.woocommerce table.shop_table th { background:rgba(255,255,255,.04); color:var(--color-text,#E2E8F0); font-weight:700; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07); text-align:left; }
.woocommerce table.shop_table td { padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--color-text,#E2E8F0); vertical-align:middle; }
.woocommerce table.shop_table .order-total .amount { color:#FFC857; font-size:1.2rem; font-weight:800; }
.woocommerce table.shop_table .product-name a { color:var(--color-text,#E2E8F0); text-decoration:none; font-weight:600; }
.woocommerce table.shop_table .product-name a:hover { color:#FFC857; }
.cart_totals { background:rgba(13,18,32,.97); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:24px; margin-top:32px; }
.cart_totals h2 { color:var(--color-text,#E2E8F0); font-size:1.2rem; margin-bottom:16px; }
/* ── Checkout ────────────────────────────────────────────────── */
.woocommerce-checkout .col2-set { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media(max-width:768px){ .woocommerce-checkout .col2-set { grid-template-columns:1fr; } }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
color:var(--color-text,#E2E8F0);
padding:12px 16px; width:100%; font-size:.95rem;
transition:border-color .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color:#FFC857; outline:none; }
.woocommerce form .form-row label { color:var(--color-text-secondary,#94A3B8); font-size:.88rem; display:block; margin-bottom:6px; }
#order_review_heading, .woocommerce h3 { color:var(--color-text,#E2E8F0); font-size:1.2rem; font-weight:700; margin-bottom:16px; }
#payment { background:rgba(13,18,32,.97); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:24px; }
#payment ul.payment_methods { list-style:none; padding:0; margin-bottom:20px; }
#payment ul.payment_methods li label { color:var(--color-text,#E2E8F0); font-weight:600; }
#payment .payment_box { background:rgba(255,255,255,.03); border-radius:8px; padding:14px; color:var(--color-text-secondary,#94A3B8); font-size:.9rem; }
/* ── Classic WC Payment Radio Buttons — theme colors ── */
#payment ul.payment_methods li input[type="radio"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border-radius: 50% !important;
border: 2px solid rgba(255,200,87,0.35) !important;
background: transparent !important;
cursor: pointer !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: border-color 0.15s, background 0.15s !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
margin-right: 8px !important;
}
#payment ul.payment_methods li input[type="radio"]:checked {
border-color: #FFC857 !important;
background: transparent !important;
}
#payment ul.payment_methods li input[type="radio"]:checked::after {
content: "" !important;
display: block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #FFC857 !important;
position: absolute !important;
}
/* ── Classic WC Order Note Checkbox — theme colors ── */
.woocommerce-checkout .woocommerce-additional-fields input[type="checkbox"],
#order_comments_field input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"]:not(.wc-block-components-checkbox input) {
appearance: none !important;
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border-radius: 4px !important;
border: 2px solid rgba(255,200,87,0.35) !important;
background: transparent !important;
cursor: pointer !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.15s, border-color 0.15s !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
}
.woocommerce-checkout .woocommerce-additional-fields input[type="checkbox"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked {
background: #FFC857 !important;
border-color: #FFC857 !important;
}
.woocommerce-checkout .woocommerce-additional-fields input[type="checkbox"]:checked::after,
.woocommerce-checkout input[type="checkbox"]:checked::after {
content: "" !important;
display: block !important;
width: 5px !important;
height: 9px !important;
border: 2px solid #0A0E1A !important;
border-top: none !important;
border-left: none !important;
transform: rotate(45deg) translate(-1px, -1px) !important;
position: absolute !important;
}
/* ── My Account ──────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation { background:rgba(13,18,32,.97); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:20px; margin-bottom:28px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style:none; padding:0; margin:0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { color:var(--color-text-secondary,#94A3B8); text-decoration:none; display:block; padding:10px 14px; border-radius:8px; transition:background .2s,color .2s; font-weight:500; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background:rgba(255,200,87,.1); color:#FFC857; }
.woocommerce-account .woocommerce-MyAccount-content { color:var(--color-text,#E2E8F0); }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { color:var(--color-text,#E2E8F0); }
/* ── Order confirmation ──────────────────────────────────────── */
.woocommerce-order-received h2,
.woocommerce-order-received p,
.woocommerce-order-details h2 { color:var(--color-text,#E2E8F0); }
.woocommerce-order-overview { background:rgba(13,18,32,.97); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:20px 24px; list-style:none; display:flex; flex-wrap:nowrap; gap:0; margin-bottom:32px; align-items:stretch; }
.woocommerce-order-overview li { color:var(--color-text-secondary,#94A3B8); font-size:.9rem; flex:1; min-width:0; padding:0 20px; border-right:1px solid rgba(255,255,255,.07); }
.woocommerce-order-overview li:first-child { padding-left:0; }
.woocommerce-order-overview li:last-child { border-right:none; }
.woocommerce-order-overview strong { color:var(--color-text,#E2E8F0); display:block; font-size:1rem; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:768px){
.woocommerce-order-overview {
flex-wrap: wrap;
gap: 12px;
padding: 14px 14px;
}
.woocommerce-order-overview li {
flex: 1 1 calc(50% - 6px);
border-right: none;
padding: 0;
font-size: 0.78rem;
}
.woocommerce-order-overview strong {
white-space: normal;
overflow: visible;
text-overflow: unset;
word-break: break-word;
font-size: 0.82rem;
}
}
/* ── Pagination ──────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul { list-style:none; display:flex; gap:8px; justify-content:center; padding:0; margin-top:40px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { background:rgba(13,18,32,.97); border:1px solid rgba(255,255,255,.1); color:var(--color-text,#E2E8F0); border-radius:6px; padding:8px 14px; text-decoration:none; }
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { border-color:#FFC857; color:#FFC857; }
/* ── License Key Box (DLM) ───────────────────────────────────── */
.gfs-license-box {
background: linear-gradient(160deg,rgba(13,18,32,.97),rgba(7,12,24,.99));
border: 1px solid rgba(74,222,128,.3);
border-radius: 12px;
padding: 28px;
margin: 32px 0;
box-shadow: 0 0 40px rgba(74,222,128,.07);
}
.gfs-license-box h3 { color:#4ADE80; font-size:1.2rem; font-weight:700; margin-bottom:10px; }
.gfs-license-box p { color:var(--color-text-secondary,#94A3B8); font-size:.95rem; margin-bottom:16px; }
/* ── License key — blurred (default) state ── */
.gfs-license-key {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
transition: border-color .2s, background .2s;
user-select: none;
}
.gfs-license-key code,
.gfs-license-key .gfs-license-key__code {
font-family: 'Courier New', monospace;
font-size: 1rem;
color: #FFC857;
letter-spacing: 1px;
word-break: break-all;
flex: 1;
transition: filter .3s;
}
.gfs-license-key .gfs-license-key__hint {
font-size: .78rem;
color: #64748B;
white-space: nowrap;
flex-shrink: 0;
transition: color .2s;
}
/* Blurred state */
.gfs-license-key--blurred {
border-color: rgba(255,200,87,.15);
}
.gfs-license-key--blurred .gfs-license-key__code {
filter: blur(6px);
color: #94A3B8;
letter-spacing: 2px;
}
.gfs-license-key--blurred:hover {
border-color: rgba(255,200,87,.4);
background: rgba(255,200,87,.04);
}
.gfs-license-key--blurred:hover .gfs-license-key__hint {
color: #FFC857;
}
/* Revealed state */
.gfs-license-key--revealed {
border-color: rgba(74,222,128,.3);
background: rgba(74,222,128,.04);
}
.gfs-license-key--revealed .gfs-license-key__code {
filter: none;
color: #FFC857;
}
.gfs-license-key--revealed .gfs-license-key__hint {
color: #4ADE80;
}
.gfs-license-key--revealed:hover {
border-color: rgba(74,222,128,.5);
background: rgba(74,222,128,.07);
}
.gfs-license-key--revealed:hover .gfs-license-key__hint {
color: #4ADE80;
}
/* ── Cart count badge in nav ─────────────────────────────────── */
.gfs-cart-item a { position:relative; display:inline-flex; align-items:center; }
.gfs-cart-count {
background: #EF4444;
color: #fff;
font-size: .7rem;
font-weight: 700;
border-radius: 50%;
min-width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 3px;
margin-left: 5px;
line-height: 1;
}
/* ═══════════════════════════════════════════════════════════
Generic WordPress Page (page.php non-WC)
═══════════════════════════════════════════════════════════ */
.gfs-page-wrapper {
padding: 80px 0 60px;
min-height: 70vh;
background: var(--color-bg, #070C18);
color: var(--color-text, #E2E8F0);
}
.gfs-page-header { margin-bottom: 32px; }
.gfs-page-title { font-size: 2rem; font-weight: 800; color: var(--color-text, #E2E8F0); }
.gfs-page-body { line-height: 1.8; color: var(--color-text-secondary, #94A3B8); }
/* ═══════════════════════════════════════════════════════════
WooCommerce Cart — View Cart + Update Cart + Proceed button
═══════════════════════════════════════════════════════════ */
/* Cart table actions row */
.woocommerce-cart table.cart td.actions {
padding: 16px;
background: rgba(13,18,32,.97);
border-top: 1px solid rgba(255,255,255,.07);
}
.woocommerce-cart table.cart td.actions .coupon {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 0;
}
.woocommerce-cart table.cart td.actions .coupon input#coupon_code {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
color: var(--color-text, #E2E8F0);
padding: 10px 14px;
font-size: .9rem;
width: 180px;
}
.woocommerce-cart table.cart td.actions .coupon input#coupon_code::placeholder {
color: rgba(255,255,255,.3);
}
/* Update Cart / Apply Coupon buttons */
.woocommerce-cart .cart-collaterals { margin-top: 32px; }
/* Cart Totals box */
.woocommerce-cart .cart-collaterals .cart_totals {
background: rgba(13,18,32,.97);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
padding: 24px;
float: right;
width: 48%;
}
@media(max-width:768px){
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; }
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
color: var(--color-text, #E2E8F0);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.woocommerce-cart .cart-collaterals .cart_totals table {
width: 100%;
border: none;
background: transparent;
}
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td {
padding: 10px 0;
border: none;
border-bottom: 1px solid rgba(255,255,255,.05);
color: var(--color-text-secondary, #94A3B8);
background: transparent;
}
.woocommerce-cart .cart-collaterals .cart_totals table .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals table .order-total td {
color: var(--color-text, #E2E8F0);
font-weight: 700;
font-size: 1.1rem;
border-bottom: none;
}
.woocommerce-cart .cart-collaterals .cart_totals table .order-total .amount { color: #FFC857; }
/* ── Proceed to Checkout button ── */
.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout {
margin-top: 16px;
}
.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
display: block;
width: 100%;
text-align: center;
background: linear-gradient(135deg, #FFC857, #F59E0B) !important;
color: #0A0E1A !important;
font-weight: 800 !important;
font-size: 1rem !important;
padding: 16px 24px !important;
border-radius: 10px !important;
border: none !important;
text-decoration: none;
transition: opacity .2s, transform .15s;
letter-spacing: .3px;
}
.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
opacity: .88;
transform: translateY(-1px);
color: #0A0E1A !important;
}
/* ── Return to Shop link ── */
.woocommerce-cart .return-to-shop a,
.woocommerce table.cart .return-to-shop a {
color: #FFC857;
text-decoration: none;
font-size: .9rem;
}
.woocommerce-cart .return-to-shop a:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════
WooCommerce Checkout — full form styles
═══════════════════════════════════════════════════════════ */
.woocommerce-checkout #customer_details { margin-bottom: 32px; }
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout h3#order_review_heading {
color: var(--color-text, #E2E8F0);
font-size: 1.15rem;
font-weight: 700;
padding: 14px 20px;
margin: 0 0 20px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
border-radius: 10px 10px 0 0;
}
/* Checkout form grid */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
background: rgba(13,18,32,.97);
border: 1px solid rgba(255,255,255,.07);
border-radius: 0 0 10px 10px;
padding: 20px;
margin-bottom: 24px;
}
/* Place order button */
#place_order,
.woocommerce #payment #place_order {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
background: linear-gradient(135deg, #FFC857 0%, #e6a800 100%) !important;
color: #0A0E1A !important;
font-weight: 800 !important;
font-size: 1.05rem !important;
padding: 16px 24px !important;
border-radius: 10px !important;
border: none !important;
cursor: pointer;
transition: opacity .2s;
margin-top: 16px;
letter-spacing: 1.5px;
text-transform: uppercase !important;
box-shadow: 0 4px 20px rgba(255,200,87,0.3) !important;
}
#place_order:hover { opacity: .88; }
/* Privacy policy text */
.woocommerce-checkout .woocommerce-privacy-policy-text {
color: var(--color-text-secondary, #94A3B8);
font-size: .82rem;
margin-top: 12px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: #FFC857; }
/* Terms checkbox */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
color: var(--color-text-secondary, #94A3B8);
font-size: .9rem;
margin-bottom: 16px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: #FFC857; }
/* ═══════════════════════════════════════════════════════════
Order Received / Thank You page
═══════════════════════════════════════════════════════════ */
.woocommerce-order { padding: 20px 0; }
.woocommerce-order .woocommerce-notice {
background: rgba(74,222,128,.1);
border: 1px solid rgba(74,222,128,.3);
border-radius: 10px;
padding: 20px 24px;
margin-bottom: 24px;
color: #4ADE80;
font-weight: 600;
font-size: 1rem;
}
/* ═══════════════════════════════════════════════════════════
My Account — full page styles
═══════════════════════════════════════════════════════════ */
/* Outer woocommerce wrapper — vertical stack:
[welcome panel - full width]
[nav wrapper + content - side by side] */
.woocommerce-account .woocommerce {
display: flex;
flex-direction: column;
gap: 0;
padding-top: 24px;
}
/* Welcome panel — full width, sits above nav+content row */
.gfs-welcome-fullwidth {
width: 100%;
margin-bottom: 28px;
box-sizing: border-box;
}
/* Nav + Content side-by-side row */
.woocommerce-account .woocommerce-MyAccount-navigation-wrapper,
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 220px;
flex-shrink: 0;
}
/* Make nav + content sit in a flex row */
.woocommerce-account .woocommerce-notices-wrapper {
width: 100%;
}
/* Flex row container for nav + content */
.woocommerce-account .woocommerce::after {
content: none;
}
/* Use a wrapper approach via CSS flex on the .woocommerce children */
.woocommerce-account .woocommerce {
display: flex !important;
flex-direction: column !important;
}
/* The nav wrapper and content must sit side by side */
.woocommerce-account .woocommerce-MyAccount-navigation-wrapper {
display: block;
}
/* Create the side-by-side layout using an inner flex row */
/* Welcome panel takes full row */
.gfs-welcome-fullwidth {
order: 1;
flex: 0 0 100%;
width: 100%;
}
.woocommerce-account .woocommerce-notices-wrapper {
order: 2;
width: 100%;
}
/* Nav and Content must appear next to each other.
We achieve this by targeting them both in one flex row.
Since WC wraps them both inside .woocommerce, we create
a row by using display:contents on the woocommerce div
effectively — instead, wrap with CSS grid on parent. */
/* Override: make .woocommerce itself a grid with 3 rows */
.woocommerce-account .woocommerce {
display: grid !important;
grid-template-columns: 220px 1fr !important;
grid-template-rows: auto auto auto !important;
column-gap: 32px !important;
row-gap: 0 !important;
align-items: start !important;
padding-top: 24px !important;
}
/* Welcome panel: full width, row 1 */
.gfs-welcome-fullwidth {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
margin-bottom: 28px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Notices: full width, row 2 */
.woocommerce-account .woocommerce-notices-wrapper {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
/* Nav wrapper: col 1, row 3 */
.woocommerce-account .woocommerce-MyAccount-navigation-wrapper {
grid-column: 1 / 2 !important;
grid-row: 3 !important;
}
/* Content: col 2, row 3 */
.woocommerce-account .woocommerce-MyAccount-content {
grid-column: 2 / 3 !important;
grid-row: 3 !important;
color: var(--color-text, #E2E8F0);
}
@media (max-width: 768px) {
.woocommerce-account .woocommerce {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
column-gap: 0 !important;
row-gap: 16px !important;
padding-top: 0 !important;
}
.gfs-welcome-fullwidth {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
margin-bottom: 0 !important;
}
.woocommerce-account .woocommerce-notices-wrapper {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-wrapper {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
width: 100% !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
}
}
/* Login / Register forms on My Account when logged out */
.woocommerce-account form.login,
.woocommerce-account form.register {
background: rgba(13,18,32,.97);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
padding: 28px;
max-width: 480px;
margin-bottom: 24px;
}
.woocommerce-account form.login h2,
.woocommerce-account form.register h2 {
color: var(--color-text, #E2E8F0);
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
}
/* My Account orders table */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table {
width: 100%;
border-collapse: collapse;
background: rgba(13,18,32,.97);
border: 1px solid rgba(255,255,255,.07);
border-radius: 10px;
overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-content table th {
background: rgba(255,255,255,.04);
}
.woocommerce-account .woocommerce-MyAccount-content table td,
.woocommerce-account .woocommerce-MyAccount-content table th {
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,.05);
color: var(--color-text, #E2E8F0);
}
/* ═══════════════════════════════════════════════════════════
WC Notices (success/error/info) — ensure they show
═══════════════════════════════════════════════════════════ */
.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message {
background: rgba(74,222,128,.08);
border-top-color: #4ADE80;
color: var(--color-text, #E2E8F0);
display: flex;
align-items: center;
gap: 12px;
}
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
background: rgba(239,68,68,.08);
border-top-color: #EF4444;
}
/* ═══════════════════════════════════════════════════════════════
GFS CART POPUP MODAL
Triggered by "Purchase Now →" buttons on landing page
═══════════════════════════════════════════════════════════════ */
/* Overlay */
#gfs-cart-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.72);
z-index: 99998;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: gfsOverlayIn .25s ease;
}
#gfs-cart-modal-overlay.gfs-modal-open { display: block; }
@keyframes gfsOverlayIn {
from { opacity:0; }
to { opacity:1; }
}
/* Modal Box */
#gfs-cart-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.94);
z-index: 99999;
width: min(560px, 92vw);
max-height: 85vh;
overflow-y: auto;
background: #1A1F2E;
border: 1px solid rgba(255,200,87,.25);
border-radius: 18px;
box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,200,87,.08);
display: none;
flex-direction: column;
animation: gfsModalIn .28s cubic-bezier(.34,1.2,.64,1) forwards;
}
#gfs-cart-modal.gfs-modal-open {
display: flex;
}
@keyframes gfsModalIn {
from { opacity:0; transform:translate(-50%,-50%) scale(.9); }
to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
/* Modal Header */
#gfs-cart-modal .gfs-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
#gfs-cart-modal .gfs-modal-header h3 {
font-size: 1rem;
font-weight: 700;
color: #E2E8F0;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0;
}
#gfs-cart-modal .gfs-modal-close {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.07);
border: none;
color: #94A3B8;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, color .2s;
line-height: 1;
padding: 0;
}
#gfs-cart-modal .gfs-modal-close:hover {
background: rgba(239,68,68,.15);
color: #EF4444;
}
/* Loading state */
#gfs-cart-modal .gfs-modal-loading {
padding: 48px 24px;
text-align: center;
color: #94A3B8;
font-size: .95rem;
}
#gfs-cart-modal .gfs-modal-loading::after {
content: '';
display: block;
width: 36px;
height: 36px;
border: 3px solid rgba(255,200,87,.2);
border-top-color: #FFC857;
border-radius: 50%;
margin: 16px auto 0;
animation: gfsSpin .7s linear infinite;
}
@keyframes gfsSpin { to { transform: rotate(360deg); } }
/* Cart Items List */
#gfs-cart-modal .gfs-modal-items {
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
#gfs-cart-modal .gfs-cart-item {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
padding: 14px 16px;
}
#gfs-cart-modal .gfs-cart-item-img {
width: 64px;
height: 64px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: rgba(255,255,255,.06);
}
#gfs-cart-modal .gfs-cart-item-info {
flex: 1;
min-width: 0;
}
#gfs-cart-modal .gfs-cart-item-name {
font-size: .9rem;
font-weight: 600;
color: #E2E8F0;
line-height: 1.4;
margin-bottom: 4px;
}
#gfs-cart-modal .gfs-cart-item-price {
font-size: .85rem;
color: #94A3B8;
}
#gfs-cart-modal .gfs-cart-item-qty {
font-size: .82rem;
font-weight: 700;
color: #E2E8F0;
background: rgba(255,255,255,.08);
border-radius: 6px;
padding: 4px 10px;
flex-shrink: 0;
}
#gfs-cart-modal .gfs-cart-item-controls {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
#gfs-cart-modal .gfs-qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
border-radius: 6px;
color: #E2E8F0;
font-size: 1rem;
line-height: 1;
cursor: pointer;
padding: 0;
transition: background .15s;
}
#gfs-cart-modal .gfs-qty-btn:hover {
background: rgba(255,200,87,.18);
border-color: rgba(255,200,87,.4);
color: #FFC857;
}
#gfs-cart-modal .gfs-remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: rgba(239,68,68,.1);
border: 1px solid rgba(239,68,68,.25);
border-radius: 6px;
color: #EF4444;
font-size: 1rem;
line-height: 1;
cursor: pointer;
padding: 0;
margin-left: 4px;
transition: background .15s;
}
#gfs-cart-modal .gfs-remove-btn:hover {
background: rgba(239,68,68,.25);
border-color: rgba(239,68,68,.5);
}
/* Error state */
#gfs-cart-modal .gfs-modal-error {
padding: 24px;
text-align: center;
color: #EF4444;
font-size: .9rem;
}
/* Total row */
#gfs-cart-modal .gfs-modal-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 24px;
border-top: 1px solid rgba(255,255,255,.07);
margin-top: 4px;
}
#gfs-cart-modal .gfs-modal-total-label {
font-size: .95rem;
color: #94A3B8;
font-weight: 600;
}
#gfs-cart-modal .gfs-modal-total-amount {
font-size: 1.25rem;
font-weight: 800;
color: #FFC857;
}
/* Action buttons */
#gfs-cart-modal .gfs-modal-actions {
padding: 16px 24px 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
#gfs-cart-modal .gfs-btn-checkout {
display: block;
text-align: center;
background: linear-gradient(135deg, #FFC857, #F59E0B);
color: #0A0E1A !important;
font-weight: 800;
font-size: 1rem;
padding: 16px 24px;
border-radius: 10px;
border: none;
cursor: pointer;
text-decoration: none;
transition: opacity .2s, transform .15s;
letter-spacing: .3px;
}
#gfs-cart-modal .gfs-btn-checkout:hover {
opacity: .9;
transform: translateY(-1px);
color: #0A0E1A !important;
text-decoration: none;
}
#gfs-cart-modal .gfs-btn-continue {
display: block;
text-align: center;
background: transparent;
color: #94A3B8 !important;
font-size: .88rem;
font-weight: 500;
padding: 8px;
border: none;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s;
}
#gfs-cart-modal .gfs-btn-continue:hover {
color: #E2E8F0 !important;
text-decoration: underline;
}
/* Success toast */
#gfs-cart-toast {
display: none;
position: fixed;
bottom: 28px;
right: 28px;
background: #1A1F2E;
border: 1px solid rgba(74,222,128,.35);
border-radius: 12px;
padding: 14px 20px;
color: #4ADE80;
font-size: .9rem;
font-weight: 600;
z-index: 99997;
box-shadow: 0 8px 32px rgba(0,0,0,.4);
animation: gfsToastIn .3s ease;
gap: 8px;
align-items: center;
}
#gfs-cart-toast.show {
display: flex;
}
@keyframes gfsToastIn {
from { opacity:0; transform:translateY(10px); }
to { opacity:1; transform:translateY(0); }
}
/* ═══════════════════════════════════════════════════════════════
GFS CHECKOUT PAGE — Premium Narrow Layout
Applies to BOTH classic WooCommerce checkout AND WC Block Checkout
Reduces width from full 1400px container to a focused 960px
premium checkout experience matching the Golden Forex dark theme.
v7.5 update — screenshot-matched premium redesign.
═══════════════════════════════════════════════════════════════ */
/* ── Checkout page narrow wrapper ── */
.woocommerce-checkout .gfs-woo-wrapper .container,
.woocommerce-page.woocommerce-checkout .container,
body.woocommerce-checkout .container {
max-width: 1080px;
}
/* ── WC Block Checkout — narrow container ── */
.wp-block-woocommerce-checkout,
.wc-block-checkout,
.wc-block-checkout__main {
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── Block Checkout page wrapper ── */
body.woocommerce-checkout .wp-block-post-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .wp-site-blocks {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px;
}
/* ── Block Checkout layout: form left, summary right ── */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar-layout,
.wp-block-woocommerce-checkout.is-sidebar-layout {
gap: 32px !important;
}
/* ── Contact Information Section ── */
.wc-block-checkout__contact-fields,
.wc-block-components-checkout-step.wc-block-checkout__contact-fields {
background: rgba(10, 14, 26, 0.95) !important;
border: 1px solid rgba(255, 200, 87, 0.12) !important;
border-radius: 14px !important;
padding: 28px !important;
margin-bottom: 20px !important;
box-shadow:
0 0 0 1px rgba(255,200,87,0.04),
0 8px 32px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
position: relative;
overflow: hidden;
}
.wc-block-checkout__contact-fields::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255,200,87,0.5), transparent);
pointer-events: none;
}
/* ── Checkout Step Headers ── */
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading {
color: #E2E8F0 !important;
font-size: 1.0rem !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
font-family: 'Poppins', sans-serif !important;
}
.wc-block-components-checkout-step__heading-content {
color: #E2E8F0 !important;
}
/* ── Step Number Badge ── */
.wc-block-components-checkout-step__index {
background: linear-gradient(135deg, #FFC857, #F59E0B) !important;
color: #0A0E1A !important;
font-weight: 800 !important;
border: none !important;
}
/* ── Checkout Sections (Billing Address, etc.) ── */
.wc-block-components-checkout-step {
background: rgba(10, 14, 26, 0.95) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 14px !important;
padding: 26px 28px !important;
margin-bottom: 20px !important;
box-shadow:
0 8px 32px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.03) !important;
transition: border-color 0.3s ease;
position: relative;
}
.wc-block-components-checkout-step:hover {
border-color: rgba(255,200,87,0.18) !important;
}
/* Active step highlight */
.wc-block-components-checkout-step--with-step-number {
border-color: rgba(255,200,87,0.10) !important;
}
/* ── Text Inputs & Selects — Block Checkout ── */
.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select select,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select,
.wc-block-checkout textarea {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 9px !important;
color: #E2E8F0 !important;
padding: 13px 16px !important;
font-size: 0.92rem !important;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
font-family: 'Inter', sans-serif !important;
-webkit-appearance: none;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus,
.wc-block-checkout input:focus,
.wc-block-checkout select:focus {
border-color: #FFC857 !important;
background: rgba(255,200,87,0.04) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(255,200,87,0.10), inset 0 1px 3px rgba(0,0,0,0.15) !important;
}
/* Input Labels */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label,
.wc-block-checkout label {
color: #94A3B8 !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
margin-bottom: 6px !important;
}
/* Floating label (active) */
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox.is-active label {
color: #FFC857 !important;
}
/* ── "Log in" link in contact section ── */
.wc-block-checkout__contact-fields .wc-block-checkout__log-in-notice,
.wc-block-checkout .wc-block-checkout__log-in-notice {
font-size: 0.85rem !important;
color: #94A3B8 !important;
}
.wc-block-checkout .wc-block-checkout__log-in-notice a,
.wc-block-checkout .wc-block-checkout__log-in-notice button {
color: #FFC857 !important;
font-weight: 600 !important;
text-decoration: none !important;
background: none !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
font-size: 0.85rem !important;
}
.wc-block-checkout .wc-block-checkout__log-in-notice a:hover {
text-decoration: underline !important;
}
/* ── Guest / Create Account text ── */
.wc-block-checkout .wc-block-checkout__use-address-for-billing,
.wc-block-checkout__create-account {
color: #94A3B8 !important;
font-size: 0.88rem !important;
}
.wc-block-checkout .wc-block-components-checkbox label {
color: #94A3B8 !important;
font-size: 0.88rem !important;
}
/* ── Checkbox Styling ── */
.wc-block-components-checkbox input[type="checkbox"],
.wc-block-checkout input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border-radius: 4px !important;
border: 2px solid rgba(255,200,87,0.35) !important;
background: transparent !important;
cursor: pointer !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.15s, border-color 0.15s !important;
flex-shrink: 0 !important;
}
.wc-block-components-checkbox input[type="checkbox"]:checked,
.wc-block-checkout input[type="checkbox"]:checked {
background: #FFC857 !important;
border-color: #FFC857 !important;
}
.wc-block-components-checkbox input[type="checkbox"]:checked::after,
.wc-block-checkout input[type="checkbox"]:checked::after {
content: "" !important;
display: block !important;
width: 5px !important;
height: 9px !important;
border: 2px solid #0A0E1A !important;
border-top: none !important;
border-left: none !important;
transform: rotate(45deg) translate(-1px, -1px) !important;
position: absolute !important;
}
/* ── Dropdown / Combobox ── */
.wc-block-components-combobox .wc-block-components-combobox-control {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 9px !important;
}
.wc-block-components-combobox-control__suggestions-container {
background: #0D1222 !important;
border: 1px solid rgba(255,200,87,0.2) !important;
border-radius: 10px !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important;
margin-top: 4px !important;
overflow: hidden !important;
}
.wc-block-components-combobox-control__suggestion {
color: #E2E8F0 !important;
padding: 10px 14px !important;
font-size: 0.9rem !important;
}
.wc-block-components-combobox-control__suggestion:hover,
.wc-block-components-combobox-control__suggestion[aria-selected="true"] {
background: rgba(255,200,87,0.12) !important;
color: #FFC857 !important;
}
/* ── Order Summary Sidebar ── */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
background: rgba(8, 12, 22, 0.98) !important;
border: 1px solid rgba(255,200,87,0.12) !important;
border-radius: 14px !important;
padding: 0 !important;
overflow: hidden !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
position: sticky !important;
top: 24px !important;
}
/* Order Summary heading */
.wc-block-components-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button {
background: rgba(255,200,87,0.06) !important;
border-bottom: 1px solid rgba(255,200,87,0.12) !important;
padding: 18px 22px !important;
color: #E2E8F0 !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
}
.wc-block-components-panel__button-icon {
color: #FFC857 !important;
}
/* Order Summary items */
.wc-block-components-order-summary-item {
padding: 16px 22px !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
display: flex !important;
gap: 14px !important;
align-items: center !important;
}
.wc-block-components-order-summary-item__image {
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,0.07) !important;
flex-shrink: 0 !important;
}
.wc-block-components-order-summary-item__full-name {
color: #E2E8F0 !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__description {
color: #64748B !important;
font-size: 0.82rem !important;
}
.wc-block-components-order-summary-item__total-price {
color: #E2E8F0 !important;
font-weight: 700 !important;
font-size: 0.92rem !important;
margin-left: auto !important;
}
/* Badge on item count */
.wc-block-components-order-summary-item__quantity {
background: linear-gradient(135deg, #FFC857, #F59E0B) !important;
color: #0A0E1A !important;
font-weight: 800 !important;
border-radius: 50% !important;
width: 22px !important;
height: 22px !important;
font-size: 0.75rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── Coupon section ── */
.wc-block-components-totals-coupon,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
padding: 14px 22px !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.wc-block-components-totals-coupon__form input {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 8px !important;
color: #E2E8F0 !important;
padding: 10px 14px !important;
font-size: 0.88rem !important;
}
.wc-block-components-totals-coupon__form input:focus {
border-color: #FFC857 !important;
outline: none !important;
}
.wc-block-components-totals-coupon__button {
background: rgba(255,200,87,0.1) !important;
color: #FFC857 !important;
border: 1px solid rgba(255,200,87,0.25) !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
padding: 10px 16px !important;
transition: background 0.2s !important;
}
.wc-block-components-totals-coupon__button:hover {
background: rgba(255,200,87,0.18) !important;
}
.wc-block-components-totals-coupon__button-icon {
color: #FFC857 !important;
}
/* ── Add coupons toggle ── */
.wc-block-components-panel__button {
background: transparent !important;
color: #94A3B8 !important;
font-size: 0.88rem !important;
padding: 14px 22px !important;
border: none !important;
width: 100% !important;
text-align: left !important;
cursor: pointer !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
transition: color 0.2s !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.wc-block-components-panel__button:hover {
color: #FFC857 !important;
background: rgba(255,200,87,0.04) !important;
}
/* ── Totals rows (Subtotal, Total) ── */
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
padding: 12px 22px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item__label {
color: #94A3B8 !important;
font-size: 0.88rem !important;
font-weight: 500 !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item__value {
color: #E2E8F0 !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
}
/* Total (big) row */
.wc-block-components-totals-footer-item {
padding: 18px 22px !important;
border-bottom: none !important;
background: rgba(255,200,87,0.04) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value,
.wc-block-components-totals-footer-item__value {
color: #FFC857 !important;
font-size: 1.25rem !important;
font-weight: 800 !important;
}
.wc-block-components-totals-footer-item__label {
color: #E2E8F0 !important;
font-size: 1.0rem !important;
font-weight: 700 !important;
}
/* ── Place Order Button ── */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order .wc-block-components-checkout-place-order-button {
background: linear-gradient(135deg, #FFC857 0%, #e6a800 100%) !important;
color: #0A0E1A !important;
font-weight: 900 !important;
font-size: 1.05rem !important;
letter-spacing: 1.5px !important;
padding: 18px 28px !important;
border-radius: 12px !important;
border: none !important;
width: 100% !important;
cursor: pointer !important;
transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s !important;
box-shadow: 0 4px 20px rgba(255,200,87,0.3), 0 2px 8px rgba(0,0,0,0.3) !important;
text-transform: uppercase !important;
font-family: 'Poppins', sans-serif !important;
margin-top: 8px !important;
position: relative !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Fix: inner span/text highlight box during processing */
.wc-block-components-checkout-place-order-button span,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
background: transparent !important;
color: #0A0E1A !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
display: inline !important;
}
/* Fix: processing/loading state — keep button styled */
.wc-block-components-checkout-place-order-button.wc-block-components-button--loading,
.wc-block-components-checkout-place-order-button[disabled] {
background: linear-gradient(135deg, #FFC857 0%, #F59E0B 50%, #D97706 100%) !important;
opacity: 0.75 !important;
color: #0A0E1A !important;
cursor: not-allowed !important;
}
.wc-block-components-checkout-place-order-button::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
pointer-events: none;
}
.wc-block-components-checkout-place-order-button:hover {
opacity: 0.92 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 28px rgba(255,200,87,0.4), 0 4px 12px rgba(0,0,0,0.3) !important;
}
.wc-block-components-checkout-place-order-button:active {
transform: translateY(0) !important;
}
/* ── Place Order section wrapper ── */
.wc-block-checkout__place-order {
padding: 20px 22px !important;
background: rgba(255,200,87,0.03) !important;
border-top: 1px solid rgba(255,200,87,0.10) !important;
}
/* ── Payment Methods ── */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method-label {
color: #E2E8F0 !important;
font-size: 0.92rem !important;
}
.wc-block-components-radio-control__option-description {
color: #64748B !important;
font-size: 0.82rem !important;
}
input[type="radio"]:checked + .wc-block-components-radio-control__option-layout
.wc-block-components-radio-control__label {
color: #FFC857 !important;
}
.wc-block-components-radio-control input[type="radio"] {
accent-color: #FFC857 !important;
}
/* Payment block wrapper */
.wp-block-woocommerce-checkout-payment-block {
background: rgba(10, 14, 26, 0.95) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 14px !important;
padding: 22px 24px !important;
margin-bottom: 16px !important;
}
/* ── Privacy policy / terms ── */
.wc-block-checkout__policies,
.wc-block-checkout__terms {
color: #4B5563 !important;
font-size: 0.78rem !important;
text-align: center !important;
margin-top: 14px !important;
line-height: 1.6 !important;
}
.wc-block-checkout__policies a,
.wc-block-checkout__terms a {
color: #FFC857 !important;
text-decoration: none !important;
}
.wc-block-checkout__policies a:hover,
.wc-block-checkout__terms a:hover {
text-decoration: underline !important;
}
/* ── Return to Cart link ── */
.wc-block-checkout__return-to-cart-link,
.wc-block-checkout__return-to-cart-link a {
color: #64748B !important;
font-size: 0.82rem !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
margin-top: 10px !important;
}
.wc-block-checkout__return-to-cart-link:hover {
color: #94A3B8 !important;
}
/* ── Validation error messages ── */
.wc-block-components-validation-error,
.wc-block-components-text-input .wc-block-components-validation-error {
color: #EF4444 !important;
font-size: 0.78rem !important;
margin-top: 4px !important;
}
.wc-block-components-text-input.has-error input,
.wc-block-components-combobox.has-error input {
border-color: rgba(239,68,68,0.5) !important;
background: rgba(239,68,68,0.04) !important;
}
/* ── Spinner / Loading state ── */
.wc-block-checkout .wc-block-components-spinner {
border-color: rgba(255,200,87,0.2) !important;
border-top-color: #FFC857 !important;
}
/* ── Notice / Alert banners ── */
.wc-block-checkout .wc-block-components-notice-banner {
background: rgba(239,68,68,0.08) !important;
border-left: 3px solid #EF4444 !important;
border-radius: 8px !important;
color: #E2E8F0 !important;
padding: 14px 18px !important;
font-size: 0.9rem !important;
margin-bottom: 16px !important;
}
.wc-block-checkout .wc-block-components-notice-banner.is-info {
background: rgba(96,165,250,0.08) !important;
border-left-color: #60A5FA !important;
}
.wc-block-checkout .wc-block-components-notice-banner.is-success {
background: rgba(74,222,128,0.08) !important;
border-left-color: #4ADE80 !important;
}
/* ── Scrollbar (webkit) for dropdowns ── */
.wc-block-components-combobox-control__suggestions-container::-webkit-scrollbar {
width: 5px;
}
.wc-block-components-combobox-control__suggestions-container::-webkit-scrollbar-track {
background: rgba(255,255,255,0.02);
}
.wc-block-components-combobox-control__suggestions-container::-webkit-scrollbar-thumb {
background: rgba(255,200,87,0.3);
border-radius: 4px;
}
/* ── Responsive: mobile checkout ── */
@media (max-width: 768px) {
.wp-block-woocommerce-checkout,
.wc-block-checkout,
.wc-block-checkout__main {
max-width: 100% !important;
padding: 0 16px !important;
}
.wc-block-components-checkout-step {
padding: 20px 18px !important;
}
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
position: static !important;
border-radius: 14px !important;
margin-top: 20px !important;
}
}
/* ── Classic Checkout Width Narrow (fallback) ── */
body.woocommerce-checkout:not(.wp-block-page) .gfs-woo-wrapper .container,
body.woocommerce-checkout:not(.wp-block-page) .container {
max-width: 1080px;
}
/* ── Checkout page top padding ── */
body.woocommerce-checkout .gfs-woo-wrapper {
padding-top: 56px;
padding-bottom: 80px;
}
/* ── Subtle gold shimmer on checkout load ── */
@keyframes gfsCheckoutFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.wc-block-components-checkout-step {
animation: gfsCheckoutFadeIn 0.4s ease both;
}
.wc-block-components-checkout-step:nth-child(1) { animation-delay: 0.05s; }
.wc-block-components-checkout-step:nth-child(2) { animation-delay: 0.12s; }
.wc-block-components-checkout-step:nth-child(3) { animation-delay: 0.18s; }
.wc-block-components-checkout-step:nth-child(4) { animation-delay: 0.24s; }
/* ═══════════════════════════════════════════════════════════════
GFS BLOCK CART — Premium Narrow Layout
Matches checkout page width (1080px) and premium dark forex look.
Targets WooCommerce Block Cart (wp-block-woocommerce-cart).
v7.5 — screenshot-matched redesign.
═══════════════════════════════════════════════════════════════ */
/* ── Cart page narrow wrapper (match checkout width) ── */
body.woocommerce-cart .container,
body.woocommerce-cart .gfs-woo-wrapper .container {
max-width: 1080px;
}
body.woocommerce-cart .gfs-woo-wrapper {
padding-top: 56px;
padding-bottom: 80px;
}
/* Block Cart page — outer constraint */
.wp-block-woocommerce-cart {
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* wc-block-cart IS the grid container — don't add max-width here */
/* ── Two-column grid: items left, totals right ── */
/* WC Block Cart renders as: .wc-block-cart > .wc-block-cart__main + .wc-block-cart__sidebar */
.wp-block-woocommerce-cart .wc-block-cart,
.wc-block-cart.wc-block-cart--is-loading,
.wc-block-cart {
display: grid !important;
grid-template-columns: 1fr 360px !important;
gap: 28px !important;
align-items: start !important;
}
/* Main content (left column) */
.wc-block-cart .wc-block-cart__main {
min-width: 0 !important;
}
/* Sidebar (right column) */
.wc-block-cart .wc-block-cart__sidebar {
min-width: 0 !important;
width: 100% !important;
}
/* WC Block Cart — sidebar order summary inner blocks: ensure full width */
.wc-block-cart .wc-block-cart__sidebar > * {
width: 100% !important;
min-width: 0 !important;
}
/* The actual sidebar container block */
.wp-block-woocommerce-cart-order-summary-block {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Cart totals inner sections — ensure no overflow/wrapping */
.wp-block-woocommerce-cart-order-summary-block > *,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-subtotal-block,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-cart__sidebar .wp-block-woocommerce-proceed-to-checkout-block {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Coupon panel button — prevent text wrapping vertically */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__form-toggle {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
width: 100% !important;
}
/* Coupon form inputs — full width inside narrow sidebar */
.wc-block-components-totals-coupon__form {
display: flex !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input,
.wc-block-components-totals-coupon__form input {
flex: 1 !important;
min-width: 0 !important;
width: auto !important;
}
.wc-block-components-totals-coupon__button {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
@media (max-width: 880px) {
.wp-block-woocommerce-cart .wc-block-cart,
.wc-block-cart {
grid-template-columns: 1fr !important;
}
}
/* ── Cart Items Table ── */
.wc-block-cart-items,
.wp-block-woocommerce-cart-line-items-block {
background: rgba(10, 14, 26, 0.97) !important;
border: 1px solid rgba(255, 200, 87, 0.10) !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
/* ── Table header row (PRODUCT / TOTAL) ── */
.wc-block-cart-items__header,
.wc-block-cart-items .wc-block-cart-items__header {
display: grid !important;
grid-template-columns: 1fr auto !important;
padding: 14px 24px !important;
background: rgba(255, 200, 87, 0.05) !important;
border-bottom: 1px solid rgba(255,200,87,0.12) !important;
}
.wc-block-cart-items__header-image,
.wc-block-cart-items__header span {
color: #E2E8F0 !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
font-family: 'Poppins', sans-serif !important;
}
/* ── Individual cart item row ── */
.wc-block-cart-item,
.wc-block-cart-items__row {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
gap: 20px !important;
align-items: center !important;
padding: 20px 24px !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
transition: background 0.2s !important;
}
.wc-block-cart-item:last-child,
.wc-block-cart-items__row:last-child {
border-bottom: none !important;
}
.wc-block-cart-item:hover {
background: rgba(255,200,87,0.02) !important;
}
/* ── Product image ── */
.wc-block-cart-item__image,
.wc-block-cart-item__image a,
.wc-block-cart-items__row .wc-block-cart-item__image {
width: 80px !important;
flex-shrink: 0 !important;
}
.wc-block-cart-item__image img {
width: 80px !important;
height: 80px !important;
object-fit: cover !important;
border-radius: 10px !important;
border: 1px solid rgba(255,200,87,0.15) !important;
display: block !important;
}
/* ── Product info (name + price below) ── */
.wc-block-cart-item__product {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
flex: 1 !important;
}
.wc-block-cart-item__product-name,
.wc-block-cart-item__product .wc-block-cart-item__product-name {
color: #E2E8F0 !important;
font-size: 0.97rem !important;
font-weight: 600 !important;
text-decoration: none !important;
font-family: 'Poppins', sans-serif !important;
line-height: 1.4 !important;
}
.wc-block-cart-item__product-name a {
color: #E2E8F0 !important;
text-decoration: none !important;
}
.wc-block-cart-item__product-name a:hover {
color: #FFC857 !important;
}
/* Subtotal under name */
.wc-block-cart-item__product .wc-block-cart-item__individual-price,
.wc-block-cart-item__individual-prices,
.wc-block-cart-item__prices {
color: #FFC857 !important;
font-size: 1.0rem !important;
font-weight: 700 !important;
}
/* ── Remove item link ── */
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link button,
button.wc-block-cart-item__remove-link {
color: #64748B !important;
font-size: 0.78rem !important;
text-decoration: underline !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin-top: 6px !important;
display: inline-block !important;
transition: color 0.2s !important;
width: auto !important;
}
.wc-block-cart-item__remove-link:hover,
button.wc-block-cart-item__remove-link:hover {
color: #EF4444 !important;
text-decoration: underline !important;
}
/* ── Quantity stepper ── */
.wc-block-components-quantity-selector,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
display: flex !important;
align-items: center !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 9px !important;
overflow: hidden !important;
width: fit-content !important;
margin-top: 8px !important;
}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector button {
background: transparent !important;
border: none !important;
color: #94A3B8 !important;
width: 34px !important;
height: 34px !important;
font-size: 1.1rem !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.2s, background 0.2s !important;
padding: 0 !important;
}
.wc-block-components-quantity-selector__button:hover {
background: rgba(255,200,87,0.1) !important;
color: #FFC857 !important;
}
.wc-block-components-quantity-selector__value,
.wc-block-components-quantity-selector input[type="number"] {
background: transparent !important;
border: none !important;
border-left: 1px solid rgba(255,255,255,0.07) !important;
border-right: 1px solid rgba(255,255,255,0.07) !important;
color: #E2E8F0 !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
width: 44px !important;
height: 34px !important;
text-align: center !important;
outline: none !important;
-moz-appearance: textfield !important;
padding: 0 !important;
}
.wc-block-components-quantity-selector input[type="number"]::-webkit-outer-spin-button,
.wc-block-components-quantity-selector input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
/* ── Item total price (right column) ── */
.wc-block-cart-item__total,
.wc-block-cart-items__row .wc-block-cart-item__total {
color: #E2E8F0 !important;
font-size: 1.0rem !important;
font-weight: 700 !important;
text-align: right !important;
white-space: nowrap !important;
}
.wc-block-cart-item__total .wc-block-cart-item__total-price {
color: #E2E8F0 !important;
}
/* ── CART TOTALS Sidebar ── */
.wc-block-cart__sidebar,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-order-summary {
background: rgba(8, 12, 22, 0.98) !important;
border: 1px solid rgba(255,200,87,0.12) !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
position: sticky !important;
top: 24px !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* CART TOTALS heading */
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-cart__sidebar .wc-block-components-sidebar-heading {
padding: 18px 22px !important;
background: rgba(255,200,87,0.06) !important;
border-bottom: 1px solid rgba(255,200,87,0.12) !important;
color: #E2E8F0 !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
font-family: 'Poppins', sans-serif !important;
display: block !important;
}
.wp-block-woocommerce-cart-order-summary-heading-block h2 {
color: #E2E8F0 !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
margin: 0 !important;
}
/* ── Coupon section inside totals ── */
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wc-block-cart__sidebar .wc-block-components-totals-coupon {
padding: 14px 22px !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.wc-block-components-panel__button.wc-block-components-totals-coupon__form-toggle,
.wc-block-components-totals-coupon__form-toggle {
background: transparent !important;
border: none !important;
color: #94A3B8 !important;
font-size: 0.88rem !important;
padding: 0 !important;
cursor: pointer !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
transition: color 0.2s !important;
}
.wc-block-components-totals-coupon__form-toggle:hover {
color: #FFC857 !important;
}
.wc-block-components-panel__button svg,
.wc-block-components-panel__button-icon {
color: #94A3B8 !important;
transition: color 0.2s !important;
}
.wc-block-components-panel__button:hover svg {
color: #FFC857 !important;
}
/* ── Subtotal / Estimated Total rows ── */
.wp-block-woocommerce-cart-order-summary-subtotal-block,
.wp-block-woocommerce-cart-order-summary-fee-block,
.wc-block-components-totals-item {
padding: 13px 22px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.wc-block-components-totals-item__label {
color: #94A3B8 !important;
font-size: 0.88rem !important;
font-weight: 500 !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-item .wc-block-formatted-money-amount {
color: #E2E8F0 !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
}
/* ── Estimated Total (big) ── */
.wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item {
padding: 18px 22px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
background: rgba(255,200,87,0.04) !important;
border-top: 1px solid rgba(255,200,87,0.10) !important;
border-bottom: none !important;
}
.wc-block-components-totals-footer-item__label {
color: #E2E8F0 !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
}
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
color: #FFC857 !important;
font-size: 1.4rem !important;
font-weight: 800 !important;
}
/* ── Proceed to Checkout button ── */
.wc-block-cart__submit-container,
.wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart__sidebar .wc-block-cart__submit {
padding: 18px 22px 22px !important;
background: rgba(255,200,87,0.03) !important;
border-top: 1px solid rgba(255,200,87,0.08) !important;
}
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
display: block !important;
width: 100% !important;
text-align: center !important;
background: linear-gradient(135deg, #FFC857 0%, #F59E0B 50%, #D97706 100%) !important;
color: #0A0E1A !important;
font-weight: 900 !important;
font-size: 1.0rem !important;
letter-spacing: 0.5px !important;
padding: 17px 24px !important;
border-radius: 12px !important;
border: none !important;
cursor: pointer !important;
text-decoration: none !important;
transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s !important;
box-shadow: 0 4px 20px rgba(255,200,87,0.28), 0 2px 8px rgba(0,0,0,0.3) !important;
text-transform: uppercase !important;
font-family: 'Poppins', sans-serif !important;
position: relative !important;
overflow: hidden !important;
}
.wc-block-cart__submit-button::before,
.wp-block-woocommerce-proceed-to-checkout-block a::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent) !important;
pointer-events: none !important;
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover {
opacity: 0.92 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 28px rgba(255,200,87,0.38), 0 4px 12px rgba(0,0,0,0.3) !important;
color: #0A0E1A !important;
text-decoration: none !important;
}
.wc-block-cart__submit-button:active {
transform: translateY(0) !important;
}
/* ── Cart empty state ── */
.wc-block-cart--is-empty .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2 {
color: #E2E8F0 !important;
font-size: 1.3rem !important;
font-weight: 700 !important;
}
.wc-block-cart--is-empty p,
.wp-block-woocommerce-empty-cart-block p {
color: #64748B !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wc-block-cart--is-empty .wp-block-button__link {
background: linear-gradient(135deg, #FFC857, #F59E0B) !important;
color: #0A0E1A !important;
font-weight: 700 !important;
border-radius: 10px !important;
padding: 14px 28px !important;
border: none !important;
text-decoration: none !important;
}
/* ── Cart notices ── */
.wp-block-woocommerce-cart .wc-block-components-notice-banner,
.wc-block-cart .wc-block-components-notice-banner {
background: rgba(74,222,128,0.08) !important;
border-left: 3px solid #4ADE80 !important;
border-radius: 8px !important;
color: #E2E8F0 !important;
padding: 13px 18px !important;
font-size: 0.9rem !important;
margin-bottom: 16px !important;
}
.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-error {
background: rgba(239,68,68,0.08) !important;
border-left-color: #EF4444 !important;
}
/* ── Spinner ── */
.wp-block-woocommerce-cart .wc-block-components-spinner,
.wc-block-cart .wc-block-components-spinner {
border-color: rgba(255,200,87,0.2) !important;
border-top-color: #FFC857 !important;
}
/* ── Validation error ── */
.wc-block-cart .wc-block-components-validation-error {
color: #EF4444 !important;
font-size: 0.78rem !important;
}
/* ── Staggered item animation ── */
@keyframes gfsCartItemIn {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
.wc-block-cart-item {
animation: gfsCartItemIn 0.35s ease both;
}
.wc-block-cart-item:nth-child(1) { animation-delay: 0.04s; }
.wc-block-cart-item:nth-child(2) { animation-delay: 0.10s; }
.wc-block-cart-item:nth-child(3) { animation-delay: 0.16s; }
.wc-block-cart-item:nth-child(4) { animation-delay: 0.22s; }
/* ── Responsive: stacked on mobile ── */
@media (max-width: 880px) {
body.woocommerce-cart .container {
max-width: 100% !important;
padding: 0 16px !important;
}
.wc-block-cart__sidebar,
.wp-block-woocommerce-cart-order-summary-block {
position: static !important;
margin-top: 20px !important;
}
.wc-block-cart-item {
grid-template-columns: auto 1fr !important;
}
.wc-block-cart-item__total {
grid-column: 2 !important;
}
}
/* ── Billing Address fields — managed via Checkout Field Editor Pro plugin ── */
/* Fields disabled from WooCommerce → Checkout Fields plugin UI directly. */
/* ── Easy Login WooCommerce Modal — Dark Theme Match ── */
/* Modal overlay */
.xoo-el-modal-overlay,
.xoo-el-overlay {
background: rgba(0, 0, 0, 0.75) !important;
backdrop-filter: blur(4px) !important;
}
/* Modal container / popup box */
.xoo-el-modal,
.xoo-el-container,
.xoo-el-form-container {
background: #160d2b !important;
color: #E2E8F0 !important;
border: 1px solid rgba(138, 43, 226, 0.25) !important;
border-radius: 14px !important;
box-shadow: 0 24px 64px rgba(0,0,0,0.7) !important;
}
/* Close button (X) */
.xoo-el-close,
.xoo-el-modal .xoo-el-close {
color: #94A3B8 !important;
background: rgba(255,255,255,0.06) !important;
}
.xoo-el-close:hover {
color: #E2E8F0 !important;
background: rgba(255,255,255,0.12) !important;
}
/* Tab bar (Login / Sign Up) */
.xoo-el-nav,
.xoo-el-tabs,
.xoo-el-nav-tabs,
.xoo-el-form-nav {
background: #1e1040 !important;
border-bottom: 1px solid rgba(138,43,226,0.20) !important;
}
/* Inactive tab */
.xoo-el-nav a,
.xoo-el-tabs a,
.xoo-el-nav-tabs a,
.xoo-el-nav li a,
.xoo-el-tab-link {
background: #1e1040 !important;
color: #94A3B8 !important;
border: none !important;
}
/* Active tab */
.xoo-el-nav a.active,
.xoo-el-nav li.active a,
.xoo-el-nav-tabs .active a,
.xoo-el-tab-link.active,
.xoo-el-tab-link.xoo-el-active {
background: #160d2b !important;
color: #ffffff !important;
border-bottom: 2px solid #7c3aed !important;
}
/* Input icon boxes */
.xoo-el-form-container .xoo-el-field-wrap span,
.xoo-el-modal .xoo-el-field-wrap span,
.xoo-el-form-container .xoo-el-icon-wrap,
.xoo-el-modal .xoo-el-icon-wrap {
background: #2a1650 !important;
border-color: rgba(138,43,226,0.20) !important;
color: #94A3B8 !important;
}
/* Input fields */
.xoo-el-form-container input[type="text"],
.xoo-el-form-container input[type="email"],
.xoo-el-form-container input[type="password"],
.xoo-el-modal input[type="text"],
.xoo-el-modal input[type="email"],
.xoo-el-modal input[type="password"] {
background: #1e1040 !important;
border: 1px solid rgba(138,43,226,0.25) !important;
color: #E2E8F0 !important;
border-radius: 9px !important;
}
.xoo-el-form-container input::placeholder,
.xoo-el-modal input::placeholder {
color: #64748B !important;
}
.xoo-el-form-container input:focus,
.xoo-el-modal input:focus {
border-color: rgba(124,58,237,0.6) !important;
background: rgba(124,58,237,0.06) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}
/* Labels */
.xoo-el-form-container label,
.xoo-el-modal label {
color: #94A3B8 !important;
}
/* Submit / Sign Up button — golden (unchanged) */
.xoo-el-form-container button[type="submit"],
.xoo-el-form-container input[type="submit"],
.xoo-el-modal button[type="submit"],
.xoo-el-modal input[type="submit"],
.xoo-el-btn,
.xoo-el-form-submit {
background: linear-gradient(135deg, #FFC857 0%, #F59E0B 50%, #D97706 100%) !important;
color: #0A0E1A !important;
border: none !important;
border-radius: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
box-shadow: 0 4px 16px rgba(255,200,87,0.3) !important;
}
.xoo-el-form-container button[type="submit"]:hover,
.xoo-el-modal button[type="submit"]:hover,
.xoo-el-btn:hover {
opacity: 0.88 !important;
transform: translateY(-1px) !important;
}
/* Checkbox (Terms) */
.xoo-el-form-container input[type="checkbox"],
.xoo-el-modal input[type="checkbox"] {
accent-color: #7c3aed !important;
}
.xoo-el-form-container .xoo-el-cbox-wrap,
.xoo-el-modal .xoo-el-cbox-wrap {
color: #94A3B8 !important;
}
.xoo-el-form-container .xoo-el-cbox-wrap a,
.xoo-el-modal .xoo-el-cbox-wrap a {
color: #FFC857 !important;
}
/* Links (forgot password, etc.) */
.xoo-el-form-container a,
.xoo-el-modal a {
color: #FFC857 !important;
}
.xoo-el-form-container a:hover,
.xoo-el-modal a:hover {
color: #FFD980 !important;
}
/* Error / notice messages */
.xoo-el-notice,
.xoo-el-error {
background: rgba(239,68,68,0.10) !important;
border-left: 3px solid #EF4444 !important;
color: #FCA5A5 !important;
border-radius: 6px !important;
}
.xoo-el-notice.xoo-el-success {
background: rgba(34,197,94,0.10) !important;
border-left-color: #22C55E !important;
color: #86EFAC !important;
}
/* ── My Account — Notice/Info messages inside content column ── */
/* Temporary password notice and other woocommerce-info messages */
/* must appear inside the content column (2nd grid column), */
/* not outside/below the grid layout. */
.woocommerce-account .woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce > .woocommerce-info,
.woocommerce-account .woocommerce > .woocommerce-error {
grid-column: 2 / 3 !important;
grid-row: 1 !important;
margin-bottom: 16px !important;
}
/* Push content down when notice is present */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
grid-column: 2 / 3 !important;
}
/* Mobile: full width */
@media (max-width: 768px) {
.woocommerce-account .woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce > .woocommerce-info,
.woocommerce-account .woocommerce > .woocommerce-error {
grid-column: 1 / -1 !important;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
grid-column: 1 / -1 !important;
}
}
/* ── My Account Addresses — reduce heading size ── */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account h2.woocommerce-column__title,
.woocommerce-Addresses .woocommerce-Address h2 {
font-size: 1.2rem !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
}
/* ── My Account notice — remove ::before icon box that covers text ── */
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-info::before {
display: none !important;
}
/* Remove left padding that was reserved for the icon */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
padding-left: 20px !important;
}
/* ── Order / View-Order page — reduce heading sizes ── */
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account h2.woocommerce-order-details__title,
.woocommerce-account .woocommerce-downloads__title,
.woocommerce-account h2.woocommerce-downloads__title,
.woocommerce-account .dlm-license-keys-title,
.woocommerce-account h2 {
font-size: 1.3rem !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
}
/* ═══════════════════════════════════════════════
DLM Licenses Page — Mobile Optimization
Appended only. No existing rules changed.
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
/* License title — reduce oversized h3 */
.woocommerce-account .dlm-license-single h3,
.woocommerce-account .dlm-license-key-title,
.woocommerce-account .dlm-single-license-title {
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin-bottom: 16px !important;
word-break: break-word !important;
}
/* License detail table — stack rows on mobile */
.woocommerce-account .dlm-license-details,
.woocommerce-account table.dlm-license-details {
width: 100% !important;
display: block !important;
}
.woocommerce-account .dlm-license-details tr,
.woocommerce-account table.dlm-license-details tr {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
padding: 8px 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
gap: 6px !important;
}
.woocommerce-account .dlm-license-details th,
.woocommerce-account table.dlm-license-details th {
width: 110px !important;
min-width: 110px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
color: #94A3B8 !important;
padding: 0 !important;
}
.woocommerce-account .dlm-license-details td,
.woocommerce-account table.dlm-license-details td {
flex: 1 !important;
font-size: 0.9rem !important;
padding: 0 !important;
word-break: break-all !important;
}
/* License key input — full width */
.woocommerce-account .dlm-license-details td input[type="text"],
.woocommerce-account .dlm-license-details td code {
width: 100% !important;
max-width: 100% !important;
font-size: 0.8rem !important;
padding: 6px 10px !important;
box-sizing: border-box !important;
}
/* Action buttons row — flex wrap */
.woocommerce-account .dlm-license-details .dlm-license-actions,
.woocommerce-account .dlm-license-action-buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 4px !important;
}
.woocommerce-account .dlm-license-details .dlm-license-actions a,
.woocommerce-account .dlm-license-details .dlm-license-actions button,
.woocommerce-account .dlm-license-action-buttons a,
.woocommerce-account .dlm-license-action-buttons button {
flex: 1 !important;
text-align: center !important;
min-width: 80px !important;
}
/* Remove floating home icon overlap */
.woocommerce-account .gfs-home-fab,
.woocommerce-account #gfs-home-btn {
z-index: 100 !important;
}
/* Status badge */
.woocommerce-account .dlm-license-status,
.woocommerce-account span.dlm-status {
display: inline-block !important;
font-size: 0.8rem !important;
padding: 3px 10px !important;
border-radius: 20px !important;
}
/* Colon-only label fix */
.woocommerce-account .dlm-license-details td:empty,
.woocommerce-account .dlm-license-details th:only-child {
display: none !important;
}
}
/* ── Mobile: notice text smaller + home icon not overlapping ── */
@media (max-width: 768px) {
/* Temporary password / info notice — smaller text */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
font-size: 0.85rem !important;
line-height: 1.5 !important;
padding: 12px 16px !important;
}
/* Home FAB button — keep away from content */
.gfs-home-fab,
#gfs-home-btn,
a[href*="home"].gfs-fixed-btn {
bottom: 16px !important;
right: 16px !important;
z-index: 999 !important;
}
/* Downloads table — stack on mobile */
.woocommerce-account .woocommerce-table--order-downloads,
.woocommerce-account table.woocommerce-table--order-downloads {
display: block !important;
width: 100% !important;
}
.woocommerce-account .woocommerce-table--order-downloads thead {
display: none !important;
}
.woocommerce-account .woocommerce-table--order-downloads tbody,
.woocommerce-account .woocommerce-table--order-downloads tr {
display: block !important;
width: 100% !important;
}
.woocommerce-account .woocommerce-table--order-downloads td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 8px 10px !important;
font-size: 0.88rem !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.woocommerce-account .woocommerce-table--order-downloads td::before {
content: attr(data-title) !important;
font-weight: 700 !important;
color: #94A3B8 !important;
min-width: 130px !important;
font-size: 0.82rem !important;
}
.woocommerce-account .woocommerce-table--order-downloads td a.button,
.woocommerce-account .woocommerce-table--order-downloads td .woocommerce-MyAccount-downloads-file {
width: auto !important;
padding: 8px 14px !important;
font-size: 0.82rem !important;
}
/* Order details table on mobile */
.woocommerce-account .woocommerce-table--order-details,
.woocommerce-account table.shop_table.order_details {
display: block !important;
width: 100% !important;
font-size: 0.88rem !important;
}
.woocommerce-account .woocommerce-table--order-details thead th {
font-size: 0.85rem !important;
padding: 8px 10px !important;
}
.woocommerce-account .woocommerce-table--order-details td,
.woocommerce-account .woocommerce-table--order-details th {
padding: 8px 10px !important;
font-size: 0.88rem !important;
}
/* Prevent home icon overlapping table total column */
.woocommerce-account .woocommerce-table--order-details tfoot td:last-child {
padding-right: 60px !important;
}
}
/* ═══════════════════════════════════════════════
DLM Licenses Index Page — Mobile Optimization
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Product licenses row wrapper */
.dlm-myaccount-product-licenses--row {
margin-bottom: 28px !important;
}
/* Product subtitle heading */
.dlm-myaccount-page-subtitle.product-name {
font-size: 1.0rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
word-break: break-word !important;
margin-bottom: 12px !important;
}
/* Licenses overview table — responsive card layout */
.dlm-myaccount-table.shop_table_responsive {
display: block !important;
width: 100% !important;
overflow-x: hidden !important;
}
.dlm-myaccount-table thead {
display: none !important;
}
.dlm-myaccount-table tbody,
.dlm-myaccount-table tr {
display: block !important;
width: 100% !important;
}
.dlm-myaccount-table tr {
background: rgba(13,18,32,.97) !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
margin-bottom: 12px !important;
}
.dlm-myaccount-table td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 7px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
font-size: 0.88rem !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.dlm-myaccount-table td:last-child {
border-bottom: none !important;
}
.dlm-myaccount-table td::before {
content: attr(data-title) !important;
font-weight: 700 !important;
color: #94A3B8 !important;
font-size: 0.80rem !important;
min-width: 90px !important;
flex-shrink: 0 !important;
}
/* Actions column — buttons wrap properly */
.dlm-myaccount-table td.license-key-actions {
justify-content: flex-start !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.dlm-myaccount-table td.license-key-actions a.button {
font-size: 0.82rem !important;
padding: 8px 14px !important;
}
/* License key partial — full width on mobile */
.dlm-myaccount-table .dlm-license-key-partial,
.dlm-myaccount-table code,
.dlm-myaccount-table .dlm-license-key-code {
word-break: break-all !important;
max-width: 100% !important;
font-size: 0.8rem !important;
}
}
/* ═══════════════════════════════════════════════
DLM Single License Page — Mobile Optimization
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Single license detail table */
.dlm-myaccount-table--license-details {
display: block !important;
width: 100% !important;
}
.dlm-myaccount-table--license-details tbody,
.dlm-myaccount-table--license-details tr {
display: block !important;
width: 100% !important;
}
.dlm-myaccount-table--license-details tr {
padding: 8px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 4px !important;
}
.dlm-myaccount-table--license-details tr:last-child {
border-bottom: none !important;
}
.dlm-myaccount-table--license-details th {
width: 120px !important;
min-width: 120px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
color: #94A3B8 !important;
padding: 4px 0 !important;
flex-shrink: 0 !important;
}
.dlm-myaccount-table--license-details td {
flex: 1 !important;
font-size: 0.88rem !important;
padding: 4px 0 !important;
word-break: break-word !important;
min-width: 0 !important;
}
/* License key in single view — break long keys */
.dlm-myaccount-table--license-details .dlm-license-key-partial,
.dlm-myaccount-table--license-details code,
.dlm-myaccount-table--license-details input[type="text"] {
width: 100% !important;
max-width: 100% !important;
font-size: 0.78rem !important;
word-break: break-all !important;
box-sizing: border-box !important;
}
/* View Order button */
.dlm-license-details--view-order a.button {
width: 100% !important;
text-align: center !important;
display: block !important;
}
}
/* ═══════════════════════════════════════════════
View Order Page — Order Overview Mobile Fix
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
/* Very small screens: stack overview items in single column */
.woocommerce-order-overview li {
flex: 1 1 100% !important;
}
/* Order again button — full width */
.woocommerce-order-received .woocommerce-order-overview + * .button,
.woocommerce-MyAccount-content .button.order-again {
width: 100% !important;
display: block !important;
text-align: center !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS MOBILE OPTIMIZATION — Universal Device Compatibility
Target: All WooCommerce pages (Cart, Checkout, My Account, Orders, DLM)
Devices: iPhone SE (375px), all mobile, tablet, desktop
Strategy: APPEND ONLY — zero changes to existing rules, zero style harm
Version: Mobile-Opt v1.0
═══════════════════════════════════════════════════════════════════════════ */
/* ── Global mobile base ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Prevent horizontal scroll on all WooCommerce pages */
body.woocommerce,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-received {
overflow-x: hidden !important;
}
/* Container full width on mobile */
.gfs-woo-wrapper .container,
.gfs-woo-content .container,
.container {
padding-left: 16px !important;
padding-right: 16px !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Reduce top padding on mobile */
.gfs-woo-wrapper,
.gfs-woo-content {
padding-top: 48px !important;
padding-bottom: 40px !important;
}
/* Notices — full width, readable */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
font-size: 0.88rem !important;
padding: 12px 14px !important;
word-break: break-word !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* Breadcrumbs — wrap on small screens */
.woocommerce-breadcrumb {
font-size: 0.80rem !important;
flex-wrap: wrap !important;
word-break: break-word !important;
}
}
/* ── iPhone SE & smallest devices (≤375px) ──────────────────────────────── */
@media (max-width: 375px) {
.gfs-woo-wrapper .container,
.gfs-woo-content .container,
.container {
padding-left: 12px !important;
padding-right: 12px !important;
}
.gfs-woo-wrapper,
.gfs-woo-content {
padding-top: 36px !important;
padding-bottom: 32px !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
font-size: 0.82rem !important;
padding: 10px 12px !important;
}
}
/* ═══════════════════════════════════════
CART PAGE — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* Classic cart table → card layout */
.woocommerce-cart table.cart,
.woocommerce table.shop_table {
display: block !important;
width: 100% !important;
overflow-x: hidden !important;
border-radius: 12px !important;
}
.woocommerce-cart table.cart thead,
.woocommerce table.shop_table thead {
display: none !important;
}
.woocommerce-cart table.cart tbody,
.woocommerce-cart table.cart tr,
.woocommerce table.shop_table tbody,
.woocommerce table.shop_table tr {
display: block !important;
width: 100% !important;
}
.woocommerce-cart table.cart tr {
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
padding: 14px 16px !important;
position: relative !important;
}
.woocommerce-cart table.cart td,
.woocommerce table.shop_table td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 8px 0 !important;
border-bottom: none !important;
font-size: 0.88rem !important;
gap: 10px !important;
box-sizing: border-box !important;
}
/* Product image in cart — smaller on mobile */
.woocommerce-cart table.cart td.product-thumbnail {
justify-content: flex-start !important;
}
.woocommerce-cart table.cart td.product-thumbnail img {
width: 60px !important;
height: 60px !important;
border-radius: 8px !important;
object-fit: cover !important;
}
/* Cart item name — full width */
.woocommerce-cart table.cart td.product-name {
font-size: 0.92rem !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.woocommerce-cart table.cart td.product-name a {
color: #E2E8F0 !important;
font-weight: 600 !important;
word-break: break-word !important;
}
/* Data label before each cell */
.woocommerce-cart table.cart td.product-price::before { content: "Price: "; font-weight: 700; color: #64748B; font-size: 0.80rem; }
.woocommerce-cart table.cart td.product-quantity::before { content: "Qty: "; font-weight: 700; color: #64748B; font-size: 0.80rem; }
.woocommerce-cart table.cart td.product-subtotal::before { content: "Total: "; font-weight: 700; color: #64748B; font-size: 0.80rem; }
/* Price text */
.woocommerce-cart table.cart td.product-price .amount,
.woocommerce-cart table.cart td.product-subtotal .amount {
color: #FFC857 !important;
font-weight: 700 !important;
}
/* Quantity input — touch friendly */
.woocommerce-cart table.cart input.qty,
.woocommerce input.qty {
width: 56px !important;
height: 40px !important;
text-align: center !important;
font-size: 1rem !important;
border-radius: 8px !important;
padding: 0 8px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
color: #E2E8F0 !important;
-moz-appearance: textfield !important;
}
.woocommerce-cart table.cart input.qty::-webkit-inner-spin-button,
.woocommerce-cart table.cart input.qty::-webkit-outer-spin-button {
-webkit-appearance: none !important;
}
/* Remove item button */
.woocommerce-cart table.cart .product-remove a.remove {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
font-size: 1rem !important;
}
/* Cart actions row */
.woocommerce-cart table.cart td.actions {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding: 14px 16px !important;
}
.woocommerce-cart table.cart td.actions .coupon {
flex-direction: column !important;
width: 100% !important;
}
.woocommerce-cart table.cart td.actions .coupon input#coupon_code {
width: 100% !important;
box-sizing: border-box !important;
font-size: 0.92rem !important;
padding: 12px 14px !important;
}
.woocommerce-cart table.cart td.actions .coupon .button,
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
width: 100% !important;
padding: 13px 20px !important;
font-size: 0.92rem !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* Cart totals box — full width */
.woocommerce-cart .cart-collaterals .cart_totals {
float: none !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 20px !important;
}
/* Proceed to checkout button */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
font-size: 0.95rem !important;
padding: 15px 20px !important;
}
}
@media (max-width: 375px) {
/* iPhone SE — extra tight */
.woocommerce-cart table.cart td {
font-size: 0.82rem !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
padding: 16px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
font-size: 0.88rem !important;
padding: 14px 16px !important;
letter-spacing: 0 !important;
}
}
/* ═══════════════════════════════════════
CHECKOUT PAGE — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* Checkout narrow wrapper — 100% on mobile */
.woocommerce-checkout .gfs-woo-wrapper .container,
.woocommerce-page.woocommerce-checkout .container,
body.woocommerce-checkout .container {
max-width: 100% !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
/* Two-column billing → single column */
.woocommerce-checkout .col2-set {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* Checkout section blocks */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
padding: 16px !important;
border-radius: 0 0 10px 10px !important;
box-sizing: border-box !important;
}
/* Section headings */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout h3#order_review_heading {
font-size: 1rem !important;
padding: 12px 16px !important;
}
/* Form inputs — touch friendly */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
padding: 13px 14px !important;
font-size: 16px !important; /* Prevent iOS auto-zoom */
border-radius: 9px !important;
}
/* Payment section */
#payment {
padding: 16px !important;
box-sizing: border-box !important;
}
#payment ul.payment_methods li label {
font-size: 0.92rem !important;
}
/* Place order button */
#place_order,
.woocommerce #payment #place_order {
font-size: 0.98rem !important;
padding: 15px 20px !important;
letter-spacing: 0.2px !important;
}
/* Order review table on checkout */
.woocommerce-checkout #order_review table.shop_table {
display: block !important;
width: 100% !important;
overflow-x: hidden !important;
}
.woocommerce-checkout #order_review table.shop_table thead {
display: none !important;
}
.woocommerce-checkout #order_review table.shop_table tbody tr,
.woocommerce-checkout #order_review table.shop_table tfoot tr {
display: block !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 10px 0 !important;
font-size: 0.88rem !important;
border: none !important;
}
/* Order total row */
.woocommerce-checkout #order_review table.shop_table .order-total .amount {
font-size: 1.1rem !important;
}
/* Privacy & terms text */
.woocommerce-checkout .woocommerce-privacy-policy-text {
font-size: 0.80rem !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
font-size: 0.85rem !important;
}
}
@media (max-width: 375px) {
/* iPhone SE checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
font-size: 16px !important;
padding: 12px !important;
}
#place_order,
.woocommerce #payment #place_order {
font-size: 0.92rem !important;
padding: 14px 16px !important;
}
#payment {
padding: 14px !important;
}
}
/* ═══════════════════════════════════════
WC BLOCK CHECKOUT — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* Block checkout wrapper */
.wp-block-woocommerce-checkout,
.wc-block-checkout,
.wc-block-checkout__main {
max-width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Checkout steps — comfortable padding on mobile */
.wc-block-components-checkout-step {
padding: 18px 16px !important;
border-radius: 12px !important;
box-sizing: border-box !important;
}
/* Step heading text — smaller */
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading {
font-size: 0.88rem !important;
}
/* Contact fields section */
.wc-block-checkout__contact-fields,
.wc-block-components-checkout-step.wc-block-checkout__contact-fields {
padding: 18px 16px !important;
border-radius: 12px !important;
box-sizing: border-box !important;
}
/* Inputs — prevent iOS zoom (font-size must be ≥16px) */
.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select select,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select,
.wc-block-checkout textarea {
font-size: 16px !important;
padding: 12px 14px !important;
border-radius: 9px !important;
-webkit-appearance: none !important;
}
/* Sidebar order summary — static (not sticky) on mobile */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
position: static !important;
margin-top: 20px !important;
border-radius: 12px !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* Order summary items */
.wc-block-components-order-summary-item {
padding: 12px 16px !important;
gap: 10px !important;
}
.wc-block-components-order-summary-item__full-name {
font-size: 0.85rem !important;
}
/* Totals rows */
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
padding: 10px 16px !important;
}
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
font-size: 1.1rem !important;
}
/* Coupon section */
.wc-block-components-totals-coupon,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
padding: 12px 16px !important;
}
.wc-block-components-totals-coupon__form {
flex-direction: column !important;
gap: 8px !important;
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input,
.wc-block-components-totals-coupon__form input {
width: 100% !important;
}
.wc-block-components-totals-coupon__button {
width: 100% !important;
text-align: center !important;
}
/* Place order button — match checkout button style */
.wc-block-components-checkout-place-order-button {
background: linear-gradient(135deg, #FFC857, #F59E0B) !important;
color: #0A0E1A !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
padding: 16px 20px !important;
letter-spacing: 0.2px !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Place order section */
.wc-block-checkout__place-order {
padding: 16px !important;
}
/* Payment block */
.wp-block-woocommerce-checkout-payment-block {
padding: 16px !important;
border-radius: 12px !important;
}
/* Radio payment options — fix label cut-off by radio button */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method-label {
font-size: 0.88rem !important;
}
.wc-block-components-radio-control__option {
display: flex !important;
align-items: center !important;
gap: 0 !important;
padding: 10px 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
width: 100% !important;
}
.wc-block-components-radio-control__option-layout {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: 0 !important;
}
.wc-block-components-radio-control__option-layout input[type="radio"] {
flex-shrink: 0 !important;
margin: 0 !important;
width: 18px !important;
height: 18px !important;
position: relative !important;
left: auto !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
flex: 1 !important;
min-width: 0 !important;
word-break: break-word !important;
padding-left: 0 !important;
margin-left: 0 !important;
display: block !important;
}
/* Place Order button — full width, centered, match checkout style */
.wc-block-components-checkout-place-order-button {
background: linear-gradient(135deg, #FFC857, #F59E0B) !important;
color: #0A0E1A !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
padding: 16px 20px !important;
letter-spacing: 0.2px !important;
}
.wc-block-components-checkout-place-order-button span,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
color: #0A0E1A !important;
background: transparent !important;
}
.wc-block-checkout__place-order {
padding: 16px !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* Privacy/terms */
.wc-block-checkout__policies,
.wc-block-checkout__terms {
font-size: 0.75rem !important;
padding: 0 4px !important;
}
}
@media (max-width: 375px) {
/* iPhone SE block checkout */
.wc-block-components-checkout-step {
padding: 14px 12px !important;
}
.wc-block-components-checkout-place-order-button {
font-size: 0.88rem !important;
padding: 14px 16px !important;
}
.wc-block-components-totals-footer-item {
padding: 14px 12px !important;
}
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
font-size: 1.05rem !important;
}
.wc-block-checkout__place-order {
padding: 12px !important;
}
}
/* ═══════════════════════════════════════
BLOCK CART — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 880px) {
/* Block cart → single column */
.wp-block-woocommerce-cart .wc-block-cart,
.wc-block-cart {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* Sidebar not sticky */
.wc-block-cart__sidebar,
.wp-block-woocommerce-cart-order-summary-block {
position: static !important;
width: 100% !important;
margin-top: 0 !important;
}
}
@media (max-width: 768px) {
/* Cart page wrapper */
body.woocommerce-cart .container,
body.woocommerce-cart .gfs-woo-wrapper .container {
max-width: 100% !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
/* Cart items table */
.wc-block-cart-items,
.wp-block-woocommerce-cart-line-items-block {
border-radius: 12px !important;
overflow: hidden !important;
}
/* Hide PRODUCT/TOTAL header on mobile — no space for it */
.wc-block-cart-items__header,
.wc-block-cart-items .wc-block-cart-items__header {
display: none !important;
}
/* Cart item row — compact on mobile */
.wc-block-cart-item,
.wc-block-cart-items__row {
grid-template-columns: 72px 1fr !important;
grid-template-rows: auto auto !important;
gap: 12px !important;
padding: 14px 16px !important;
align-items: start !important;
}
/* Product image — column 1, row 1 */
.wc-block-cart-item__image,
.wc-block-cart-item__image a {
width: 72px !important;
grid-column: 1 !important;
grid-row: 1 !important;
}
.wc-block-cart-item__image img {
width: 72px !important;
height: 72px !important;
border-radius: 9px !important;
}
/* Product info — column 2, row 1 */
.wc-block-cart-item__product {
grid-column: 2 !important;
grid-row: 1 !important;
min-width: 0 !important;
}
/* Total price — column 2, row 2 (below product info, no overlap) */
.wc-block-cart-item__total {
grid-column: 2 !important;
grid-row: 2 !important;
text-align: left !important;
font-size: 0.92rem !important;
padding-left: 0 !important;
}
/* Product name */
.wc-block-cart-item__product-name,
.wc-block-cart-item__product .wc-block-cart-item__product-name {
font-size: 0.88rem !important;
}
/* Price display */
.wc-block-cart-item__individual-prices,
.wc-block-cart-item__prices {
font-size: 0.92rem !important;
}
/* Quantity stepper — comfortable touch targets */
.wc-block-components-quantity-selector {
margin-top: 8px !important;
}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector button {
width: 38px !important;
height: 38px !important;
font-size: 1.1rem !important;
}
.wc-block-components-quantity-selector__value,
.wc-block-components-quantity-selector input[type="number"] {
width: 40px !important;
height: 38px !important;
font-size: 0.92rem !important;
}
/* Remove link */
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link button {
font-size: 0.78rem !important;
margin-top: 6px !important;
}
/* Cart totals sidebar */
.wc-block-components-order-summary,
.wp-block-woocommerce-cart-order-summary-block {
box-sizing: border-box !important;
}
/* Coupon form — stack vertically */
.wc-block-components-totals-coupon__form {
flex-direction: column !important;
gap: 8px !important;
}
.wc-block-components-totals-coupon__button {
width: 100% !important;
text-align: center !important;
}
/* Proceed to checkout button */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
font-size: 0.95rem !important;
padding: 15px 20px !important;
letter-spacing: 0.2px !important;
}
/* Cart footer section */
.wc-block-cart__submit-container,
.wp-block-woocommerce-proceed-to-checkout-block {
padding: 16px !important;
}
}
@media (max-width: 375px) {
.wc-block-cart-item,
.wc-block-cart-items__row {
grid-template-columns: 64px 1fr !important;
padding: 12px !important;
gap: 10px !important;
}
.wc-block-cart-item__image img {
width: 64px !important;
height: 64px !important;
}
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
font-size: 0.88rem !important;
padding: 14px 16px !important;
}
}
/* ═══════════════════════════════════════
MY ACCOUNT — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* My account layout — single column */
.woocommerce-account .woocommerce {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* Nav menu — horizontal scrollable tabs */
.woocommerce-account .woocommerce-MyAccount-navigation {
padding: 12px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
margin-bottom: 20px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
overflow-x: auto !important;
padding-bottom: 4px !important;
-webkit-overflow-scrolling: touch !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
flex-shrink: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
white-space: nowrap !important;
font-size: 0.82rem !important;
padding: 8px 12px !important;
display: inline-block !important;
border-radius: 8px !important;
}
/* My account content */
.woocommerce-account .woocommerce-MyAccount-content {
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
/* Orders table — responsive card */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table {
display: block !important;
width: 100% !important;
overflow-x: hidden !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table thead {
display: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr {
display: block !important;
width: 100% !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr {
background: rgba(13,18,32,.97) !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
margin-bottom: 12px !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 7px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
font-size: 0.88rem !important;
gap: 8px !important;
flex-wrap: nowrap !important;
box-sizing: border-box !important;
width: 100% !important;
overflow: hidden !important;
text-align: right !important;
}
/* Label (Date, Status, Total, Actions) */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td::before {
content: attr(data-title) !important;
font-weight: 700 !important;
color: #94A3B8 !important;
font-size: 0.80rem !important;
min-width: 70px !important;
flex-shrink: 0 !important;
}
/* Total cell — amount + "for X item" grouped right */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
flex-wrap: nowrap !important;
align-items: center !important;
}
/* Group amount + "for X item" together on the right side */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total .amount,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total small,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount + * {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* "for X items" small text */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total small,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount + * {
font-size: 0.78rem !important;
color: #94A3B8 !important;
margin-left: 4px !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td:last-child {
border-bottom: none !important;
}
/* View order button in table */
.woocommerce-account .woocommerce-MyAccount-content table td a.button,
.woocommerce-account .woocommerce-MyAccount-content table td .button {
font-size: 0.80rem !important;
padding: 7px 12px !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* Login / Register forms */
.woocommerce-account form.login,
.woocommerce-account form.register {
padding: 20px 16px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.woocommerce-account form.login h2,
.woocommerce-account form.register h2 {
font-size: 1.15rem !important;
}
/* Login/register inputs */
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
font-size: 16px !important; /* Prevent iOS auto-zoom */
padding: 12px 14px !important;
box-sizing: border-box !important;
}
}
@media (max-width: 375px) {
/* iPhone SE My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
font-size: 0.78rem !important;
padding: 7px 10px !important;
}
.woocommerce-account form.login,
.woocommerce-account form.register {
padding: 16px 12px !important;
}
}
/* ═══════════════════════════════════════
ORDER RECEIVED / THANK YOU PAGE
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* Order overview strip — 2 cols */
.woocommerce-order-overview {
flex-wrap: wrap !important;
gap: 0 !important;
padding: 12px 16px !important;
}
/* Each li — label + value on same row, space-between */
.woocommerce-order-overview li {
flex: 1 1 100% !important;
border-right: none !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
padding: 7px 0 !important;
font-size: 0.78rem !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #94A3B8 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.woocommerce-order-overview li:last-child {
border-bottom: none !important;
}
.woocommerce-order-overview strong {
font-size: 0.85rem !important;
word-break: break-word !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
display: inline !important;
margin-top: 0 !important;
color: #E2E8F0 !important;
text-align: right !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Order details table — card layout */
.woocommerce-order-received .woocommerce-table--order-details,
table.woocommerce-table.order_details {
display: block !important;
width: 100% !important;
font-size: 0.85rem !important;
}
.woocommerce-order-received .woocommerce-table--order-details thead {
display: none !important;
}
/* tbody — product name left, price right, no overlap */
.woocommerce-order-received .woocommerce-table--order-details tbody,
table.woocommerce-table.order_details tbody {
display: block !important;
width: 100% !important;
}
.woocommerce-order-received .woocommerce-table--order-details tbody tr,
table.woocommerce-table.order_details tbody tr {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
padding: 10px 0 !important;
flex-wrap: nowrap !important;
width: 100% !important;
box-sizing: border-box !important;
}
.woocommerce-order-received .woocommerce-table--order-details tbody td.product-name,
table.woocommerce-table.order_details tbody td.product-name {
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
word-break: break-word !important;
padding: 0 !important;
border: none !important;
font-size: 0.85rem !important;
text-align: left !important;
}
.woocommerce-order-received .woocommerce-table--order-details tbody td.product-total,
table.woocommerce-table.order_details tbody td.product-total {
display: block !important;
flex: 0 0 auto !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
padding: 0 !important;
border: none !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
color: #FFC857 !important;
text-align: right !important;
margin-left: auto !important;
}
/* tfoot rows (Subtotal, Total, Payment) — label left, value right */
.woocommerce-order-received .woocommerce-table--order-details tfoot tr,
table.woocommerce-table.order_details tfoot tr {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
padding: 8px 0 !important;
flex-wrap: nowrap !important;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child,
table.woocommerce-table.order_details tfoot tr:last-child {
border-bottom: none !important;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot th,
table.woocommerce-table.order_details tfoot th {
display: block !important;
flex-shrink: 0 !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
color: #64748B !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
padding: 0 !important;
border: none !important;
background: none !important;
text-align: left !important;
white-space: nowrap !important;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot td,
table.woocommerce-table.order_details tfoot td {
display: block !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
color: #E2E8F0 !important;
padding: 0 !important;
border: none !important;
text-align: right !important;
flex: 1 !important;
min-width: 0 !important;
word-break: break-word !important;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot .order-total td,
table.woocommerce-table.order_details tfoot .order-total td {
color: #FFC857 !important;
font-weight: 800 !important;
}
/* Order notice */
.woocommerce-order .woocommerce-notice {
padding: 12px 14px !important;
font-size: 0.80rem !important;
border-radius: 10px !important;
line-height: 1.5 !important;
}
/* Order received paragraph text */
.woocommerce-order-received p,
.woocommerce-order-received .woocommerce-order p {
font-size: 0.82rem !important;
}
/* Order heading text */
.woocommerce-order-received h2 {
font-size: 1.0rem !important;
margin-bottom: 10px !important;
}
}
@media (max-width: 375px) {
.woocommerce-order-overview li {
flex: 1 1 100% !important;
font-size: 0.80rem !important;
}
.woocommerce-order-overview strong {
font-size: 0.85rem !important;
}
/* Notice & paragraph text */
.woocommerce-order .woocommerce-notice {
font-size: 0.76rem !important;
padding: 10px 12px !important;
}
.woocommerce-order-received p,
.woocommerce-order-received .woocommerce-order p {
font-size: 0.78rem !important;
}
/* Order details table even smaller on SE */
.woocommerce-order-received .woocommerce-table--order-details,
table.woocommerce-table.order_details {
font-size: 0.78rem !important;
}
.woocommerce-order-received .woocommerce-table--order-details tbody td.product-name,
table.woocommerce-table.order_details tbody td.product-name {
font-size: 0.78rem !important;
}
.woocommerce-order-received .woocommerce-table--order-details tbody td.product-total,
table.woocommerce-table.order_details tbody td.product-total {
font-size: 0.80rem !important;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot th,
table.woocommerce-table.order_details tfoot th {
font-size: 0.70rem !important;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot td,
table.woocommerce-table.order_details tfoot td {
font-size: 0.80rem !important;
}
}
/* ═══════════════════════════════════════
PRODUCT PAGE — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* Single product — stack image above info */
.woocommerce div.product {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* Product title */
.woocommerce div.product .product_title {
font-size: 1.4rem !important;
}
/* Price */
.woocommerce div.product p.price {
font-size: 1.4rem !important;
}
/* Add to cart button */
.woocommerce div.product .single_add_to_cart_button {
width: 100% !important;
padding: 14px 20px !important;
font-size: 0.95rem !important;
box-sizing: border-box !important;
}
}
/* ═══════════════════════════════════════
CART POPUP MODAL — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* Modal — bottom sheet style on mobile */
#gfs-cart-modal {
width: 100% !important;
max-width: 100% !important;
max-height: 90vh !important;
border-radius: 20px 20px 0 0 !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
transform: none !important;
animation: gfsModalInMobile .3s cubic-bezier(.34,1.1,.64,1) forwards !important;
}
#gfs-cart-modal.gfs-modal-open {
transform: translateY(0) !important;
}
@keyframes gfsModalInMobile {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
/* Modal header */
#gfs-cart-modal .gfs-modal-header {
padding: 16px 18px 14px !important;
}
#gfs-cart-modal .gfs-modal-header h3 {
font-size: 0.88rem !important;
}
/* Cart items in modal */
#gfs-cart-modal .gfs-modal-items {
padding: 12px 16px !important;
}
#gfs-cart-modal .gfs-cart-item {
gap: 12px !important;
padding: 12px 14px !important;
}
#gfs-cart-modal .gfs-cart-item-img {
width: 52px !important;
height: 52px !important;
}
#gfs-cart-modal .gfs-cart-item-name {
font-size: 0.85rem !important;
}
/* Checkout & continue buttons */
#gfs-cart-modal .gfs-modal-actions {
padding: 12px 16px 20px !important;
}
#gfs-cart-modal .gfs-btn-checkout {
font-size: 0.80rem !important;
padding: 11px 16px !important;
}
/* Total row */
#gfs-cart-modal .gfs-modal-total {
padding: 12px 18px !important;
}
#gfs-cart-modal .gfs-modal-total-amount {
font-size: 1.1rem !important;
}
/* Toast notification */
#gfs-cart-toast {
bottom: 16px !important;
right: 12px !important;
left: 12px !important;
font-size: 0.85rem !important;
padding: 12px 16px !important;
border-radius: 10px !important;
}
}
@media (max-width: 375px) {
#gfs-cart-modal .gfs-cart-item-img {
width: 46px !important;
height: 46px !important;
}
#gfs-cart-modal .gfs-btn-checkout {
font-size: 0.75rem !important;
padding: 10px 14px !important;
}
}
/* ═══════════════════════════════════════
GFS LICENSE BOX — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 768px) {
.gfs-license-box {
padding: 18px 16px !important;
border-radius: 10px !important;
margin: 20px 0 !important;
box-sizing: border-box !important;
}
.gfs-license-box h3 {
font-size: 1.05rem !important;
}
.gfs-license-box p {
font-size: 0.88rem !important;
}
/* License key display — scrollable on mobile */
.gfs-license-key {
padding: 12px 14px !important;
border-radius: 8px !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.gfs-license-key code,
.gfs-license-key .gfs-license-key__code {
font-size: 0.82rem !important;
letter-spacing: 0.5px !important;
word-break: break-all !important;
min-width: 0 !important;
}
.gfs-license-key .gfs-license-key__hint {
font-size: 0.72rem !important;
white-space: nowrap !important;
}
}
@media (max-width: 375px) {
.gfs-license-box {
padding: 14px 12px !important;
}
.gfs-license-key code,
.gfs-license-key .gfs-license-key__code {
font-size: 0.75rem !important;
letter-spacing: 0 !important;
}
}
/* ═══════════════════════════════════════
EASY LOGIN MODAL — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 600px) {
/* Popup — fills screen edge-to-edge on small phones */
.xoo-el-container:not(.xoo-el-style-slider) .xoo-el-inmodal {
max-width: 96vw !important;
border-radius: 14px !important;
box-sizing: border-box !important;
}
.xoo-el-main {
padding: 18px 14px !important;
}
/* OTP inputs — full row */
.xoo-el-otp-wrap,
.xoo-el-verify {
display: flex !important;
gap: 6px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.xoo-el-otp-input,
.xoo-el-otp-wrap input,
.xoo-el-verify input,
input[class*="otp"],
input[class*="digit"],
.xoo-el-form-popup input[maxlength="1"] {
width: 40px !important;
height: 40px !important;
font-size: 1rem !important;
}
/* Login inputs */
.xoo-el-form-container input[type="text"],
.xoo-el-form-container input[type="email"],
.xoo-el-form-container input[type="password"] {
font-size: 16px !important;
padding: 12px 12px !important;
box-sizing: border-box !important;
}
/* Submit button */
.xoo-el-form-container button[type="submit"],
.xoo-el-form-container input[type="submit"] {
width: 100% !important;
padding: 13px 20px !important;
font-size: 0.92rem !important;
}
/* Tab links */
.xoo-el-nav a,
.xoo-el-tabs a,
.xoo-el-tab-link {
font-size: 0.85rem !important;
padding: 10px 12px !important;
}
}
@media (max-width: 375px) {
.xoo-el-otp-input,
.xoo-el-form-popup input[maxlength="1"] {
width: 36px !important;
height: 36px !important;
font-size: 0.95rem !important;
}
.xoo-el-main {
padding: 14px 12px !important;
}
}
/* ═══════════════════════════════════════
GENERAL PAGE — Mobile Optimization
═══════════════════════════════════════ */
@media (max-width: 768px) {
.gfs-page-wrapper {
padding: 48px 0 40px !important;
}
.gfs-page-title {
font-size: 1.5rem !important;
line-height: 1.3 !important;
}
.gfs-page-body {
font-size: 0.92rem !important;
line-height: 1.7 !important;
}
}
/* ═══════════════════════════════════════
CART COUNT BADGE — Mobile alignment
═══════════════════════════════════════ */
@media (max-width: 768px) {
.gfs-cart-item a {
position: relative !important;
}
.gfs-cart-count {
font-size: 0.65rem !important;
min-width: 16px !important;
height: 16px !important;
}
}
/* ═══════════════════════════════════════
LANDSCAPE PHONE — Special handling
═══════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
/* Modals — scrollable in landscape */
#gfs-cart-modal {
max-height: 80vh !important;
overflow-y: auto !important;
top: 50% !important;
bottom: auto !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
border-radius: 14px !important;
width: min(520px, 90vw) !important;
}
.xoo-el-container:not(.xoo-el-style-slider) .xoo-el-inmodal {
max-height: 80vh !important;
overflow-y: auto !important;
}
/* WC block checkout sidebar — static in landscape */
.wc-block-checkout__sidebar {
position: static !important;
}
}
/* ═══════════════════════════════════════
ACCESSIBILITY — Touch targets minimum
═══════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
/* All interactive elements — 44px minimum tap target */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
#place_order,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-totals-coupon__button {
min-height: 44px !important;
}
/* Quantity +/- buttons */
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector button,
#gfs-cart-modal .gfs-qty-btn,
#gfs-cart-modal .gfs-remove-btn {
min-width: 44px !important;
min-height: 44px !important;
}
/* Nav links */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
min-height: 40px !important;
display: flex !important;
align-items: center !important;
}
}
/* ═══════════════════════════════════════
PREVENT TEXT OVERFLOW — Global mobile
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* All WooCommerce pages — prevent text overflow */
.woocommerce-page *,
.woocommerce-cart *,
.woocommerce-checkout *,
.woocommerce-account *,
.woocommerce-order-received * {
max-width: 100% !important;
word-wrap: break-word !important;
}
/* But don't constrain images and interactive elements */
.woocommerce-page img,
.woocommerce-page button,
.woocommerce-page input,
.woocommerce-page select {
max-width: 100% !important;
}
/* Tables — no fixed widths */
.woocommerce table {
table-layout: auto !important;
}
/* Amounts — don't break numbers */
.woocommerce .amount,
.woocommerce .price {
white-space: nowrap !important;
word-wrap: normal !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS MOBILE TEXT SIZE FIX — v1.1
Screenshot-based fixes: Oversized headings, button text, scroll-btn overlap
Devices: iPhone SE (375px) and all mobile screens
Strategy: APPEND ONLY — no existing rules changed
═══════════════════════════════════════════════════════════════════════════ */
/* ── Block Checkout: "ORDER SUMMARY", "PAYMENT OPTIONS", section headings ── */
@media (max-width: 768px) {
/* ── ORDER SUMMARY heading (sidebar) ── */
.wc-block-components-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
.wc-block-components-panel__button,
.wp-block-woocommerce-cart-order-summary-heading-block,
.wp-block-woocommerce-cart-order-summary-heading-block h2,
.wc-block-cart__sidebar .wc-block-components-sidebar-heading {
font-size: 0.78rem !important;
letter-spacing: 0.08em !important;
padding: 14px 18px !important;
}
/* ── Checkout step headings: "CONTACT INFORMATION", "BILLING ADDRESS", "PAYMENT OPTIONS" ── */
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading,
.wc-block-components-checkout-step__heading-content {
font-size: 0.82rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
}
/* Step heading text inside span/div */
.wc-block-components-checkout-step .wc-block-components-checkout-step__heading .wc-block-components-checkout-step__heading-content {
font-size: 0.82rem !important;
}
/* ── "PLACE ORDER" button — text size ── */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order .wc-block-components-checkout-place-order-button {
font-size: 0.9rem !important;
letter-spacing: 0.03em !important;
padding: 15px 20px !important;
}
.wc-block-components-checkout-place-order-button span,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
font-size: 0.9rem !important;
}
/* ── Classic checkout "PLACE ORDER" button ── */
#place_order,
.woocommerce #payment #place_order {
font-size: 0.9rem !important;
letter-spacing: 0.03em !important;
}
/* ── "PROCEED TO CHECKOUT" button ── */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
font-size: 0.88rem !important;
letter-spacing: 0.03em !important;
}
/* ── Order summary item product name — prevent long wrap ── */
.wc-block-components-order-summary-item__full-name {
font-size: 0.82rem !important;
line-height: 1.4 !important;
word-break: break-word !important;
}
/* ── Order summary item price ── */
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__individual-prices {
font-size: 0.82rem !important;
white-space: nowrap !important;
}
/* ── Order summary item — layout fix for price not wrapping ── */
.wc-block-components-order-summary-item {
gap: 10px !important;
align-items: flex-start !important;
}
/* ── Subtotal / Total labels ── */
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item__label {
font-size: 0.82rem !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
font-size: 1.0rem !important;
}
/* ── "ADD COUPONS" toggle text ── */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__form-toggle {
font-size: 0.82rem !important;
}
/* ── Payment method labels ── */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method-label,
#payment ul.payment_methods li label {
font-size: 0.88rem !important;
}
/* ── Payment method description ── */
.wc-block-components-radio-control__option-description,
#payment .payment_box p {
font-size: 0.80rem !important;
line-height: 1.55 !important;
}
/* ── "ADD A NOTE TO YOUR ORDER" checkbox label ── */
.wc-block-checkout .wc-block-components-checkbox label,
.wc-block-checkout .wc-block-checkout__add-note label,
.wc-block-checkout__create-account label {
font-size: 0.82rem !important;
}
/* ── Privacy / Terms text ── */
.wc-block-checkout__policies,
.wc-block-checkout__terms,
.woocommerce-checkout .woocommerce-privacy-policy-text {
font-size: 0.75rem !important;
line-height: 1.5 !important;
}
/* ── "LOG IN" link next to heading ── */
.wc-block-checkout .wc-block-checkout__log-in-notice,
.wc-block-checkout .wc-block-checkout__log-in-notice button,
.wc-block-checkout .wc-block-checkout__log-in-notice a {
font-size: 0.78rem !important;
}
/* ── "You are currently checking out as a guest" ── */
.wc-block-checkout .wc-block-checkout__contact-fields p,
.wc-block-checkout p {
font-size: 0.82rem !important;
}
/* ── Classic checkout h3 section headings ── */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout h3#order_review_heading,
#order_review_heading,
.woocommerce h3 {
font-size: 0.95rem !important;
letter-spacing: 0.02em !important;
padding: 12px 14px !important;
}
/* ── Cart / Order table: "ORDER SUMMARY" heading on classic ── */
.woocommerce-checkout #order_review h3,
.woocommerce-cart .cart_totals h2,
.cart_totals h2 {
font-size: 1.0rem !important;
}
}
/* ── iPhone SE (375px) — even tighter ── */
@media (max-width: 375px) {
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading,
.wc-block-components-checkout-step__heading-content {
font-size: 0.75rem !important;
letter-spacing: 0.02em !important;
}
.wc-block-components-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
.wc-block-components-panel__button {
font-size: 0.72rem !important;
padding: 12px 14px !important;
}
.wc-block-components-checkout-place-order-button,
#place_order {
font-size: 0.84rem !important;
padding: 13px 16px !important;
letter-spacing: 0.01em !important;
}
.wc-block-components-order-summary-item__full-name {
font-size: 0.78rem !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item__label {
font-size: 0.78rem !important;
}
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
font-size: 0.95rem !important;
}
/* Classic checkout sections */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout h3#order_review_heading,
#order_review_heading, .woocommerce h3 {
font-size: 0.85rem !important;
padding: 10px 12px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
SCROLL-TO-TOP BUTTON — Fix overlap with Total price on mobile
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Shrink the button on mobile so it doesn't cover content */
#gfs-scroll-top {
width: 44px !important;
height: 44px !important;
bottom: 20px !important;
right: 16px !important;
}
#gfs-scroll-top svg {
width: 18px !important;
height: 18px !important;
}
/* Progress ring — match smaller button */
#gfs-stt-ring {
width: 56px !important;
height: 56px !important;
bottom: 14px !important;
right: 10px !important;
}
}
@media (max-width: 375px) {
/* iPhone SE — even more compact */
#gfs-scroll-top {
width: 40px !important;
height: 40px !important;
bottom: 16px !important;
right: 12px !important;
box-shadow: 0 3px 14px rgba(201,168,76,0.35) !important;
}
#gfs-scroll-top svg {
width: 16px !important;
height: 16px !important;
}
#gfs-stt-ring {
width: 50px !important;
height: 50px !important;
bottom: 11px !important;
right: 7px !important;
}
/* Ensure PLACE ORDER button is not hidden behind scroll button */
.wc-block-checkout__place-order,
.woocommerce #payment #place_order,
#place_order {
margin-bottom: 20px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
INPUT FIELD LABELS — Mobile readable
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Block checkout input labels: "EMAIL ADDRESS", "FIRST NAME" etc */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label,
.wc-block-checkout label {
font-size: 0.70rem !important;
letter-spacing: 0.05em !important;
}
/* Input placeholder text */
.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder {
font-size: 0.88rem !important;
}
/* Input text itself */
.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select {
font-size: 16px !important; /* iOS: prevent zoom */
padding: 11px 12px !important;
}
}
@media (max-width: 375px) {
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-checkout label {
font-size: 0.65rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS MOBILE TEXT SIZE FIX — v1.2
User request: Make headings/labels SMALLER on mobile.
Targets (mobile only): Contact Information, Billing Address,
Payment Options, Direct Bank Transfer, NOWPayments,
Add a note to your order, Add Coupons.
Desktop untouched. Append-only.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ══════════════════════════════════════════════
SECTION HEADINGS
Contact Information / Billing Address /
Payment Options — ALL uppercase step headings
══════════════════════════════════════════════ */
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step .wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step .wc-block-components-checkout-step__heading-content,
/* every inner text node wrapper */
.wc-block-components-checkout-step__heading > *,
.wc-block-components-checkout-step__heading span,
.wc-block-components-checkout-step__heading div {
font-size: 0.72rem !important;
letter-spacing: 0.06em !important;
font-weight: 700 !important;
text-transform: uppercase !important;
line-height: 1.3 !important;
}
/* ══════════════════════════════════════════════
PAYMENT METHOD LABELS
"Direct Bank Transfer" / "NOWPayments"
══════════════════════════════════════════════ */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method-label,
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__option-layout label,
/* classic WC payment labels */
#payment ul.payment_methods li label,
#payment ul.payment_methods li label span {
font-size: 0.80rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
/* Payment method description (bank transfer instructions) */
.wc-block-components-radio-control__option-description,
.wc-block-components-radio-control__option-description p,
#payment .payment_box,
#payment .payment_box p {
font-size: 0.74rem !important;
line-height: 1.55 !important;
color: #94A3B8 !important;
}
/* ══════════════════════════════════════════════
CHECKBOX LABELS
"Add a note to your order" /
"Create an account with…"
══════════════════════════════════════════════ */
.wc-block-checkout .wc-block-components-checkbox label,
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-checkout__add-note label,
.wc-block-checkout .wc-block-checkout__add-note .wc-block-components-checkbox label,
.wc-block-checkout__create-account label,
.wc-block-checkout__create-account .wc-block-components-checkbox label,
/* any checkbox label inside checkout */
.wc-block-checkout input[type="checkbox"] + label,
.wc-block-checkout input[type="checkbox"] ~ label,
.wc-block-components-checkbox__label {
font-size: 0.76rem !important;
letter-spacing: 0.01em !important;
line-height: 1.4 !important;
}
/* ══════════════════════════════════════════════
"ADD COUPONS" toggle button text
══════════════════════════════════════════════ */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__form-toggle,
.wc-block-components-panel__button-text,
.wc-block-components-panel__button > span,
.wc-block-components-panel__button > div,
/* cart sidebar coupon toggle */
.wc-block-cart__sidebar .wc-block-components-panel__button,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button {
font-size: 0.76rem !important;
letter-spacing: 0.03em !important;
font-weight: 600 !important;
}
/* ══════════════════════════════════════════════
ORDER SUMMARY heading (sidebar / panel title)
══════════════════════════════════════════════ */
.wc-block-components-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
.wp-block-woocommerce-cart-order-summary-heading-block,
.wp-block-woocommerce-cart-order-summary-heading-block h2,
.wc-block-cart__sidebar .wc-block-components-sidebar-heading,
.wc-block-components-order-summary__toggle,
.wc-block-components-order-summary__toggle-text {
font-size: 0.68rem !important;
letter-spacing: 0.10em !important;
font-weight: 800 !important;
text-transform: uppercase !important;
padding: 13px 16px !important;
}
/* ══════════════════════════════════════════════
INPUT FIELD LABELS
"Email Address" / "First Name" / "Country/Region"
══════════════════════════════════════════════ */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label,
.wc-block-checkout label:not(.wc-block-components-checkbox label):not(.wc-block-components-radio-control__label) {
font-size: 0.64rem !important;
letter-spacing: 0.07em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
/* ══════════════════════════════════════════════
"You are currently checking out as a guest"
"LOG IN" link
══════════════════════════════════════════════ */
.wc-block-checkout .wc-block-checkout__contact-fields p,
.wc-block-checkout .wc-block-checkout__log-in-notice,
.wc-block-checkout .wc-block-checkout__log-in-notice button,
.wc-block-checkout .wc-block-checkout__log-in-notice a {
font-size: 0.74rem !important;
line-height: 1.5 !important;
}
/* ══════════════════════════════════════════════
SUBTOTAL / TOTAL LABELS
══════════════════════════════════════════════ */
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item__label {
font-size: 0.76rem !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
font-size: 0.92rem !important;
}
/* ══════════════════════════════════════════════
PLACE ORDER / PROCEED TO CHECKOUT buttons
══════════════════════════════════════════════ */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button span,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
font-size: 0.84rem !important;
letter-spacing: 0.04em !important;
}
/* Classic WC */
#place_order,
.woocommerce #payment #place_order {
font-size: 0.84rem !important;
letter-spacing: 0.04em !important;
}
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
font-size: 0.82rem !important;
letter-spacing: 0.03em !important;
}
/* ══════════════════════════════════════════════
PRIVACY / TERMS
══════════════════════════════════════════════ */
.wc-block-checkout__policies,
.wc-block-checkout__terms,
.woocommerce-checkout .woocommerce-privacy-policy-text {
font-size: 0.70rem !important;
line-height: 1.5 !important;
}
}
/* ══════════════════════════════════════════════
iPhone SE (375px) — Tightest
══════════════════════════════════════════════ */
@media (max-width: 375px) {
/* Section headings */
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__heading > *,
.wc-block-components-checkout-step__heading span {
font-size: 0.66rem !important;
letter-spacing: 0.05em !important;
}
/* Payment labels */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method-label,
.wc-block-components-radio-control__label,
#payment ul.payment_methods li label {
font-size: 0.74rem !important;
}
/* Payment description */
.wc-block-components-radio-control__option-description,
#payment .payment_box p {
font-size: 0.68rem !important;
}
/* Checkbox labels */
.wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-components-checkbox label,
.wc-block-checkout__create-account label {
font-size: 0.70rem !important;
}
/* Coupon toggle */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__form-toggle {
font-size: 0.70rem !important;
padding: 11px 14px !important;
}
/* Order summary heading */
.wc-block-components-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
.wp-block-woocommerce-cart-order-summary-heading-block h2 {
font-size: 0.62rem !important;
padding: 11px 14px !important;
}
/* Input labels */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-checkout label:not(.wc-block-components-checkbox label):not(.wc-block-components-radio-control__label) {
font-size: 0.58rem !important;
letter-spacing: 0.06em !important;
}
/* Subtotal/Total */
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item__label {
font-size: 0.70rem !important;
}
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
font-size: 0.88rem !important;
}
/* Buttons */
.wc-block-components-checkout-place-order-button,
#place_order {
font-size: 0.78rem !important;
letter-spacing: 0.03em !important;
padding: 13px 14px !important;
}
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
font-size: 0.76rem !important;
}
/* Privacy/terms */
.wc-block-checkout__policies,
.wc-block-checkout__terms {
font-size: 0.64rem !important;
}
/* Guest notice */
.wc-block-checkout .wc-block-checkout__contact-fields p,
.wc-block-checkout .wc-block-checkout__log-in-notice {
font-size: 0.68rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS ORDER SUMMARY PANEL — Space Fix v1.3
"Order summary" ↔ "$999.00 ✓" gap too wide on mobile.
Use gap instead of space-between to keep them close together.
Mobile only. Desktop unchanged.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* The collapsed "Order summary $999.00 ✓" toggle bar */
.wc-block-components-order-summary__toggle,
.wc-block-components-order-summary__toggle-button,
.wc-block-components-panel__button.wc-block-components-order-summary__toggle,
/* WC checkout sidebar panel toggle */
.wc-block-checkout__sidebar .wc-block-components-panel__button,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
/* WC cart sidebar panel toggle */
.wc-block-cart__sidebar .wc-block-components-panel__button,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button {
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
}
/* Push the price/chevron icon to the right but not too far */
.wc-block-components-panel__button .wc-block-components-panel__button-icon,
.wc-block-components-panel__button svg:last-child,
.wc-block-components-order-summary__toggle .wc-block-formatted-money-amount,
.wc-block-components-order-summary__toggle-text ~ *,
/* price + chevron wrapper */
.wc-block-components-panel__button > span:last-child,
.wc-block-components-panel__button > div:last-child {
margin-left: auto !important;
flex-shrink: 0 !important;
}
/* The text "Order summary" — don't let it stretch */
.wc-block-components-panel__button > span:first-child,
.wc-block-components-panel__button > div:first-child,
.wc-block-components-order-summary__toggle-text {
flex: 0 1 auto !important;
white-space: nowrap !important;
}
/* General panel buttons (Add Coupons etc) — same treatment */
.wc-block-components-panel__button {
justify-content: flex-start !important;
gap: 10px !important;
}
.wc-block-components-panel__button-icon {
margin-left: auto !important;
flex-shrink: 0 !important;
}
}
@media (max-width: 375px) {
.wc-block-checkout__sidebar .wc-block-components-panel__button,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
.wc-block-cart__sidebar .wc-block-components-panel__button,
.wc-block-components-panel__button {
gap: 8px !important;
padding: 11px 14px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS FOOTER — Risk Disclosure Text Size Fix v1.4
Shrink footer Risk Disclosure paragraph on mobile only.
Desktop (inline style 0.85rem) unchanged.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Risk Disclosure paragraph — the with inline style="font-size:0.85rem" */
.footer-bottom p[style*="font-size"] {
font-size: 0.68rem !important;
line-height: 1.55 !important;
margin-top: 14px !important;
text-align: left !important;
}
/* Risk Disclosure bold title */
.footer-bottom p[style*="font-size"] strong {
font-size: 0.70rem !important;
}
/* All footer-bottom text — general reduction */
.footer-bottom {
font-size: 0.72rem !important;
}
/* Footer links */
.footer-bottom-link,
.footer-bottom a {
font-size: 0.70rem !important;
}
/* Copyright line */
.footer-bottom p:first-child {
font-size: 0.70rem !important;
}
}
@media (max-width: 375px) {
/* iPhone SE — tightest */
.footer-bottom p[style*="font-size"] {
font-size: 0.60rem !important;
line-height: 1.5 !important;
margin-top: 10px !important;
}
.footer-bottom p[style*="font-size"] strong {
font-size: 0.62rem !important;
}
.footer-bottom {
font-size: 0.64rem !important;
}
.footer-bottom-link,
.footer-bottom a {
font-size: 0.62rem !important;
}
.footer-bottom p:first-child {
font-size: 0.62rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS HERO BUTTONS — Mobile Width Fix v1.5
Reduce width of:
1. 🚀 GET INSTANT ACCESS (.btn.btn-accent)
2. 📊 VIEW LIVE ACCOUNT (.btn.btn-outline)
3. Join Official Telegram (.telegram-channel-btn)
Desktop: unchanged. Mobile only.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Hero CTA group — center buttons, limit width ── */
.hero-cta-group {
align-items: center !important;
justify-content: center !important;
}
/* Override existing width:100% on hero buttons */
.hero-cta-group .btn,
.hero-cta-group .btn-accent,
.hero-cta-group .btn-outline {
width: auto !important;
min-width: 220px !important;
max-width: 320px !important;
padding: 13px 24px !important;
font-size: 0.85rem !important;
letter-spacing: 0.04em !important;
text-align: center !important;
display: block !important;
}
/* ── Telegram button — limit width ── */
.telegram-btn-wrap {
justify-content: center !important;
}
.telegram-channel-btn {
width: auto !important;
min-width: 220px !important;
max-width: 320px !important;
justify-content: center !important;
padding: 13px 22px !important;
font-size: 0.85rem !important;
}
}
/* ── iPhone SE (375px) — compact ── */
@media (max-width: 375px) {
.hero-cta-group .btn,
.hero-cta-group .btn-accent,
.hero-cta-group .btn-outline {
min-width: 200px !important;
max-width: 290px !important;
padding: 12px 20px !important;
font-size: 0.80rem !important;
letter-spacing: 0.03em !important;
}
.telegram-channel-btn {
min-width: 200px !important;
max-width: 290px !important;
padding: 12px 18px !important;
font-size: 0.80rem !important;
gap: 8px !important;
}
.telegram-free-badge {
font-size: 0.60rem !important;
padding: 2px 8px !important;
}
}
/* ── iPhone Pro / Pixel (376–430px) ── */
@media (min-width: 376px) and (max-width: 430px) {
.hero-cta-group .btn,
.hero-cta-group .btn-accent,
.hero-cta-group .btn-outline {
min-width: 210px !important;
max-width: 300px !important;
padding: 13px 22px !important;
font-size: 0.83rem !important;
}
.telegram-channel-btn {
min-width: 210px !important;
max-width: 300px !important;
font-size: 0.83rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS MY ACCOUNT NAVIGATION — Vertical Card Layout v1.6
Mobile: Show nav as vertical card list (Dashboard/Orders/Licenses/Downloads/Log out)
Replaces previous horizontal scroll approach.
Desktop: unchanged (sidebar grid layout).
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Nav container — vertical card ── */
.woocommerce-account .woocommerce-MyAccount-navigation {
background: rgba(13,18,32,0.97) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 12px !important;
padding: 8px !important;
margin-bottom: 20px !important;
overflow: visible !important;
overflow-x: unset !important;
-webkit-overflow-scrolling: unset !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ── Nav list — vertical stack ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 4px !important;
overflow: visible !important;
overflow-x: unset !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
width: 100% !important;
-webkit-overflow-scrolling: unset !important;
}
/* ── Each nav item ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
flex-shrink: unset !important;
width: 100% !important;
display: block !important;
}
/* ── Nav link — full width block ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 13px 16px !important;
border-radius: 8px !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
color: #94A3B8 !important;
text-decoration: none !important;
white-space: normal !important;
transition: background 0.2s, color 0.2s !important;
letter-spacing: 0.01em !important;
}
/* ── Active item ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
background: rgba(255,200,87,0.12) !important;
color: #FFC857 !important;
font-weight: 700 !important;
}
/* ── Hover ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
background: rgba(255,200,87,0.08) !important;
color: #FFC857 !important;
}
/* ── Progress bar (woocommerce sometimes renders one) — hide on mobile ── */
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-progress-tracker,
.woocommerce-account .woocommerce-MyAccount-navigation progress {
display: none !important;
}
/* ── Account layout — stack nav above content ── */
.woocommerce-account .woocommerce {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* ── Notices — full width in stacked layout ── */
.woocommerce-account .woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce > .woocommerce-info,
.woocommerce-account .woocommerce > .woocommerce-error {
grid-column: 1 / -1 !important;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
grid-column: 1 / -1 !important;
}
}
/* ── iPhone SE (375px) ── */
@media (max-width: 375px) {
.woocommerce-account .woocommerce-MyAccount-navigation {
padding: 6px !important;
border-radius: 10px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
gap: 3px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
padding: 12px 14px !important;
font-size: 0.86rem !important;
}
}
/* ── iPhone Pro / Pixel (376–430px) ── */
@media (min-width: 376px) and (max-width: 430px) {
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
padding: 13px 15px !important;
font-size: 0.90rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS NOTICE ICON FIX — v1.7
WooCommerce default CSS adds a ::before pseudo-element (red/blue dot icon)
on .woocommerce-error / .woocommerce-info / .woocommerce-message notices.
This icon overlaps the first characters of the notice text ("Inv" cut off).
Fix: hide ::before icon globally + remove the reserved left padding.
No theme styles changed. Append only.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hide ::before icon on ALL WooCommerce notices (global, all pages) ── */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before,
ul.woocommerce-error::before,
ul.woocommerce-info::before,
ul.woocommerce-message::before {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
position: static !important;
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── Remove padding-left that WC reserves for the icon ── */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
ul.woocommerce-error,
ul.woocommerce-info,
ul.woocommerce-message {
padding-left: 20px !important;
}
/* ── Ensure notice text starts from the left properly ── */
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
padding-left: 0 !important;
margin-left: 0 !important;
list-style: none !important;
}
/* ── Also fix any WC notice that uses .woocommerce-notices-wrapper ── */
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-message::before {
display: none !important;
content: none !important;
}
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message {
padding-left: 20px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS NOTICE ICON FIX — v1.8 (STRONG OVERRIDE)
WooCommerce core CSS uses high-specificity selectors for ::before icon.
This block uses maximum specificity to ensure the red dot is hidden.
Both mobile AND desktop. Append only.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Nuclear ::before removal — all pages, all devices ── */
html body .woocommerce-error::before,
html body .woocommerce-info::before,
html body .woocommerce-message::before,
html body ul.woocommerce-error::before,
html body ul.woocommerce-info::before,
html body ul.woocommerce-message::before,
html body .woocommerce ul.woocommerce-error::before,
html body .woocommerce ul.woocommerce-info::before,
html body .woocommerce ul.woocommerce-message::before,
html body .woocommerce-page ul.woocommerce-error::before,
html body .woocommerce-page ul.woocommerce-info::before,
html body .woocommerce-page ul.woocommerce-message::before,
html body .woocommerce-notices-wrapper ul.woocommerce-error::before,
html body .woocommerce-notices-wrapper .woocommerce-info::before,
html body .woocommerce-notices-wrapper .woocommerce-message::before,
html body .woocommerce-account .woocommerce-error::before,
html body .woocommerce-account .woocommerce-info::before,
html body .woocommerce-account .woocommerce-message::before {
display: none !important;
content: "" !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: none !important;
position: static !important;
float: none !important;
font-size: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* ── Reset left padding on all notices (mobile + desktop) ── */
html body .woocommerce-error,
html body .woocommerce-info,
html body .woocommerce-message,
html body ul.woocommerce-error,
html body ul.woocommerce-info,
html body ul.woocommerce-message,
html body .woocommerce ul.woocommerce-error,
html body .woocommerce ul.woocommerce-info,
html body .woocommerce ul.woocommerce-message,
html body .woocommerce-page ul.woocommerce-error,
html body .woocommerce-page ul.woocommerce-info,
html body .woocommerce-page ul.woocommerce-message,
html body .woocommerce-notices-wrapper .woocommerce-error,
html body .woocommerce-notices-wrapper .woocommerce-info,
html body .woocommerce-notices-wrapper .woocommerce-message {
padding-left: 20px !important;
}
/* ── Notice list items — no extra indent ── */
html body .woocommerce-error li,
html body .woocommerce-info li,
html body .woocommerce-message li,
html body ul.woocommerce-error li,
html body ul.woocommerce-info li,
html body ul.woocommerce-message li {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS MY ACCOUNT — "Browse products" Button Size Fix v1.9
Shrink the Browse products button on mobile (Downloads empty state).
Desktop unchanged. Append only.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Browse products / any standalone .button inside MyAccount content */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content input.button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
font-size: 0.82rem !important;
padding: 10px 18px !important;
border-radius: 8px !important;
width: auto !important;
max-width: 220px !important;
display: inline-block !important;
text-align: center !important;
letter-spacing: 0.02em !important;
font-weight: 700 !important;
}
/* "No downloads available yet." text */
.woocommerce-account .woocommerce-MyAccount-content p {
font-size: 0.85rem !important;
}
}
@media (max-width: 375px) {
/* iPhone SE */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content a.button {
font-size: 0.76rem !important;
padding: 9px 16px !important;
max-width: 200px !important;
}
.woocommerce-account .woocommerce-MyAccount-content p {
font-size: 0.80rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS DLM LICENSE — Parentheses Hide Fix v2.0
DLM plugin renders Status and Expires cells as:
(Delivered) |
The ( ) are bare text nodes — CSS cannot target text nodes directly.
Fix: font-size:0 on td hides text nodes, then reset font-size on child elements.
Mobile AND Desktop. Theme files unchanged. Append only.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hide parenthesis text nodes via font-size:0 trick ── */
td.dlm-inline-child,
.woocommerce-account td.dlm-inline-child,
.woocommerce-account .dlm-myaccount-table td.dlm-inline-child,
.woocommerce-account table.dlm-myaccount-table--license-details td.dlm-inline-child {
font-size: 0 !important;
line-height: 0 !important;
}
/* ── Restore font-size for actual content inside ── */
td.dlm-inline-child *,
td.dlm-inline-child span,
td.dlm-inline-child a,
td.dlm-inline-child p,
td.dlm-inline-child div,
td.dlm-inline-child .dlm-status,
td.dlm-inline-child .dlm-license-status-badge,
td.dlm-inline-child .dlm-expires,
td.dlm-inline-child .dlm-date,
.woocommerce-account td.dlm-inline-child *,
.woocommerce-account td.dlm-inline-child span,
.woocommerce-account td.dlm-inline-child a {
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
/* ── Mobile: slightly smaller ── */
@media (max-width: 768px) {
td.dlm-inline-child *,
td.dlm-inline-child span,
.woocommerce-account td.dlm-inline-child * {
font-size: 0.85rem !important;
}
}
@media (max-width: 375px) {
td.dlm-inline-child *,
td.dlm-inline-child span,
.woocommerce-account td.dlm-inline-child * {
font-size: 0.80rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS ORDER SUMMARY — Product Name Text Size Fix v2.1
"Golden Forex Scalping – 06 Month License" text too large on mobile.
Also fixes sub-price "$999.00" below name, total price, item layout.
Mobile only. Desktop unchanged.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Product name — smaller, tighter wrap ── */
.wc-block-components-order-summary-item__full-name,
.wc-block-components-order-summary-item__full-name a,
.wc-block-components-order-summary-item .wc-block-components-order-summary-item__full-name {
font-size: 0.70rem !important;
line-height: 1.35 !important;
font-weight: 600 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
/* ── Sub-price below product name ("$999.00" in grey) ── */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__individual-prices *,
.wc-block-components-order-summary-item__description * {
font-size: 0.65rem !important;
line-height: 1.3 !important;
}
/* ── Total price (right side "$999.00") ── */
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price * {
font-size: 0.72rem !important;
white-space: nowrap !important;
font-weight: 700 !important;
}
/* ── Item row layout — tighter gap ── */
.wc-block-components-order-summary-item {
padding: 10px 14px !important;
gap: 8px !important;
align-items: flex-start !important;
}
/* ── Product image — smaller on mobile ── */
.wc-block-components-order-summary-item__image {
width: 48px !important;
height: 48px !important;
flex-shrink: 0 !important;
}
.wc-block-components-order-summary-item__image img {
width: 48px !important;
height: 48px !important;
object-fit: cover !important;
}
/* ── Item quantity badge ── */
.wc-block-components-order-summary-item__quantity {
width: 18px !important;
height: 18px !important;
font-size: 0.60rem !important;
}
}
/* ── iPhone SE (375px) ── */
@media (max-width: 375px) {
.wc-block-components-order-summary-item__full-name,
.wc-block-components-order-summary-item__full-name a {
font-size: 0.64rem !important;
line-height: 1.3 !important;
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__description {
font-size: 0.60rem !important;
}
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price * {
font-size: 0.66rem !important;
}
.wc-block-components-order-summary-item {
padding: 9px 12px !important;
gap: 6px !important;
}
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img {
width: 42px !important;
height: 42px !important;
}
.wc-block-components-order-summary-item__quantity {
width: 16px !important;
height: 16px !important;
font-size: 0.55rem !important;
}
}
/* ── iPhone Pro / Pixel (376–430px) ── */
@media (min-width: 376px) and (max-width: 430px) {
.wc-block-components-order-summary-item__full-name,
.wc-block-components-order-summary-item__full-name a {
font-size: 0.67rem !important;
}
.wc-block-components-order-summary-item__individual-prices {
font-size: 0.62rem !important;
}
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price * {
font-size: 0.69rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS PAYMENT SECTION — Text Size Fix v2.2
Targets: Payment Options heading, Direct Bank Transfer label + description,
NOWPayments label, Add a note to your order label.
Mobile only. Desktop unchanged.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── "PAYMENT OPTIONS" step heading ── */
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__heading span,
.wc-block-components-checkout-step__heading div {
font-size: 0.62rem !important;
letter-spacing: 0.06em !important;
}
/* ── "DIRECT BANK TRANSFER" / "NOWPAYMENTS" radio labels ── */
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label,
.wc-block-components-radio-control__option label,
.wc-block-components-radio-control__option-layout label,
#payment ul.payment_methods li label {
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
/* ── Bank transfer description paragraph ── */
.wc-block-components-radio-control__option-description,
.wc-block-components-radio-control__option-description p,
.wc-block-components-radio-control__option-description *,
#payment .payment_box,
#payment .payment_box p {
font-size: 0.62rem !important;
line-height: 1.5 !important;
color: #94A3B8 !important;
}
/* ── "ADD A NOTE TO YOUR ORDER" checkbox label ── */
.wc-block-checkout .wc-block-components-checkbox label,
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__label,
.wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-checkout__add-note label,
.wc-block-checkout__create-account label,
.wc-block-checkout input[type="checkbox"] + label,
.wc-block-checkout input[type="checkbox"] ~ label {
font-size: 0.64rem !important;
letter-spacing: 0.01em !important;
line-height: 1.4 !important;
}
/* ── Payment block wrapper — tighter padding ── */
.wp-block-woocommerce-checkout-payment-block {
padding: 14px 16px !important;
}
/* ── Radio option row — tighter spacing ── */
.wc-block-components-radio-control__option {
padding: 8px 0 !important;
gap: 8px !important;
}
}
/* ── iPhone SE (375px) ── */
@media (max-width: 375px) {
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__heading span {
font-size: 0.56rem !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label,
#payment ul.payment_methods li label {
font-size: 0.66rem !important;
}
.wc-block-components-radio-control__option-description,
.wc-block-components-radio-control__option-description p,
#payment .payment_box p {
font-size: 0.57rem !important;
line-height: 1.45 !important;
}
.wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-components-checkbox label,
.wc-block-checkout__create-account label {
font-size: 0.58rem !important;
}
.wp-block-woocommerce-checkout-payment-block {
padding: 12px 14px !important;
}
}
/* ── iPhone Pro / Pixel (376–430px) ── */
@media (min-width: 376px) and (max-width: 430px) {
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading span {
font-size: 0.59rem !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
font-size: 0.69rem !important;
}
.wc-block-components-radio-control__option-description,
.wc-block-components-radio-control__option-description p {
font-size: 0.60rem !important;
}
.wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-components-checkbox label {
font-size: 0.61rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS CHECKOUT PAGE — Complete Mobile Text Optimization v2.3
Targets ALL text elements on /checkout/ page.
Mobile only. Desktop unchanged. Append only.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ══ STEP HEADINGS (Contact Information / Billing Address / Payment Options) ══ */
.wc-block-components-checkout-step__heading,
.wc-block-checkout__step-heading,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__heading *,
.wc-block-components-checkout-step__title {
font-size: 0.60rem !important;
letter-spacing: 0.07em !important;
font-weight: 700 !important;
text-transform: uppercase !important;
line-height: 1.3 !important;
}
/* ══ STEP NUMBER BADGE ══ */
.wc-block-components-checkout-step__index {
font-size: 0.60rem !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
}
/* ══ INPUT FIELD LABELS (Email Address / First Name / Country) ══ */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label,
.wc-block-checkout label:not(.wc-block-components-checkbox label):not(.wc-block-components-radio-control__label) {
font-size: 0.58rem !important;
letter-spacing: 0.07em !important;
font-weight: 600 !important;
margin-bottom: 4px !important;
}
/* ══ INPUT FIELD TEXT (typed text inside inputs) ══ */
.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select select,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select,
.wc-block-checkout textarea {
font-size: 16px !important; /* keep 16px to prevent iOS zoom */
padding: 10px 12px !important;
}
/* ══ "You are currently checking out as a guest." ══ */
.wc-block-checkout .wc-block-checkout__contact-fields > p,
.wc-block-checkout .wc-block-checkout__contact-fields p,
.wc-block-checkout p:not(.wc-block-components-order-summary-item__individual-prices) {
font-size: 0.62rem !important;
line-height: 1.5 !important;
}
/* ══ "LOG IN" link ══ */
.wc-block-checkout .wc-block-checkout__log-in-notice,
.wc-block-checkout .wc-block-checkout__log-in-notice *,
.wc-block-checkout .wc-block-checkout__log-in-notice a,
.wc-block-checkout .wc-block-checkout__log-in-notice button {
font-size: 0.62rem !important;
}
/* ══ "CREATE AN ACCOUNT WITH..." checkbox label ══ */
.wc-block-checkout__create-account label,
.wc-block-checkout__create-account .wc-block-components-checkbox label,
.wc-block-checkout__create-account .wc-block-components-checkbox__label {
font-size: 0.62rem !important;
}
/* ══ PAYMENT METHOD LABELS (Direct Bank Transfer / NOWPayments) ══ */
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label,
.wc-block-components-radio-control__option-layout label,
#payment ul.payment_methods li label {
font-size: 0.68rem !important;
font-weight: 600 !important;
}
/* ══ PAYMENT METHOD DESCRIPTION ══ */
.wc-block-components-radio-control__option-description,
.wc-block-components-radio-control__option-description *,
#payment .payment_box,
#payment .payment_box p {
font-size: 0.58rem !important;
line-height: 1.5 !important;
}
/* ══ "ADD A NOTE TO YOUR ORDER" label ══ */
.wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-components-checkbox label,
.wc-block-checkout .wc-block-checkout__add-note label,
.wc-block-checkout input[type="checkbox"] + label,
.wc-block-checkout input[type="checkbox"] ~ label {
font-size: 0.62rem !important;
line-height: 1.4 !important;
}
/* ══ PRIVACY / TERMS text ══ */
.wc-block-checkout__policies,
.wc-block-checkout__terms,
.wc-block-checkout__policies *,
.woocommerce-checkout .woocommerce-privacy-policy-text {
font-size: 0.58rem !important;
line-height: 1.5 !important;
}
/* ══ "By proceeding..." terms text ══ */
.wc-block-checkout .wc-block-checkout__terms-and-conditions-checkbox *,
.wc-block-checkout .wc-block-checkout__terms p {
font-size: 0.58rem !important;
}
/* ══ ORDER SUMMARY HEADING ══ */
.wc-block-components-order-summary__title,
.wc-block-components-order-summary__toggle,
.wc-block-components-order-summary__toggle *,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
.wp-block-woocommerce-cart-order-summary-heading-block h2 {
font-size: 0.60rem !important;
letter-spacing: 0.10em !important;
padding: 12px 14px !important;
}
/* ══ PRODUCT NAME in order summary ══ */
.wc-block-components-order-summary-item__full-name,
.wc-block-components-order-summary-item__full-name * {
font-size: 0.62rem !important;
line-height: 1.35 !important;
font-weight: 600 !important;
}
/* ══ PRODUCT SUB-PRICE in order summary ══ */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__individual-prices * {
font-size: 0.58rem !important;
}
/* ══ PRODUCT TOTAL PRICE in order summary ══ */
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price * {
font-size: 0.64rem !important;
font-weight: 700 !important;
}
/* ══ ADD COUPONS toggle ══ */
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__form-toggle,
.wc-block-components-panel__button * {
font-size: 0.62rem !important;
letter-spacing: 0.03em !important;
}
/* ══ SUBTOTAL / TOTAL labels ══ */
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item__label {
font-size: 0.64rem !important;
}
/* ══ SUBTOTAL / TOTAL values ══ */
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__value *,
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item__value *,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
font-size: 0.80rem !important;
}
/* ══ PLACE ORDER button ══ */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button span,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
#place_order,
.woocommerce #payment #place_order {
font-size: 0.80rem !important;
letter-spacing: 0.04em !important;
padding: 14px 18px !important;
}
/* ══ VALIDATION ERROR messages ══ */
.wc-block-components-validation-error,
.wc-block-components-validation-error * {
font-size: 0.58rem !important;
}
/* ══ NOTICE BANNERS ══ */
.wc-block-checkout .wc-block-components-notice-banner,
.wc-block-checkout .wc-block-components-notice-banner * {
font-size: 0.65rem !important;
line-height: 1.5 !important;
}
/* ══ CHECKOUT STEP — tighter padding ══ */
.wc-block-components-checkout-step {
padding: 14px 14px !important;
}
.wc-block-checkout__contact-fields,
.wc-block-components-checkout-step.wc-block-checkout__contact-fields {
padding: 14px 14px !important;
}
/* ══ PAYMENT BLOCK — tighter ══ */
.wp-block-woocommerce-checkout-payment-block {
padding: 12px 14px !important;
}
/* ══ ORDER SUMMARY items ══ */
.wc-block-components-order-summary-item {
padding: 9px 12px !important;
gap: 7px !important;
}
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img {
width: 44px !important;
height: 44px !important;
}
/* ══ TOTALS rows ══ */
.wc-block-components-totals-item {
padding: 8px 14px !important;
}
.wc-block-components-totals-footer-item {
padding: 12px 14px !important;
}
/* ══ PLACE ORDER section ══ */
.wc-block-checkout__place-order {
padding: 12px 14px !important;
}
/* ══ Classic WC checkout headings ══ */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout h3#order_review_heading,
#order_review_heading,
.woocommerce h3 {
font-size: 0.72rem !important;
padding: 10px 12px !important;
letter-spacing: 0.04em !important;
}
}
/* ══════════════════════════════════════
iPhone SE (375px) — Tightest
══════════════════════════════════════ */
@media (max-width: 375px) {
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading * {
font-size: 0.54rem !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-checkout label:not(.wc-block-components-checkbox label):not(.wc-block-components-radio-control__label) {
font-size: 0.52rem !important;
}
.wc-block-checkout p,
.wc-block-checkout .wc-block-checkout__contact-fields p,
.wc-block-checkout .wc-block-checkout__log-in-notice,
.wc-block-checkout .wc-block-checkout__log-in-notice * {
font-size: 0.56rem !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
font-size: 0.62rem !important;
}
.wc-block-components-radio-control__option-description,
.wc-block-components-radio-control__option-description * {
font-size: 0.52rem !important;
}
.wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-components-checkbox label {
font-size: 0.56rem !important;
}
.wc-block-checkout__policies,
.wc-block-checkout__terms,
.wc-block-checkout__policies * {
font-size: 0.52rem !important;
}
.wc-block-components-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
.wc-block-components-panel__button {
font-size: 0.54rem !important;
padding: 10px 12px !important;
}
.wc-block-components-order-summary-item__full-name,
.wc-block-components-order-summary-item__full-name * {
font-size: 0.56rem !important;
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__individual-prices * {
font-size: 0.52rem !important;
}
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price * {
font-size: 0.58rem !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item__label {
font-size: 0.58rem !important;
}
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
font-size: 0.74rem !important;
}
.wc-block-components-checkout-place-order-button,
#place_order {
font-size: 0.74rem !important;
padding: 13px 14px !important;
}
.wc-block-components-checkout-step {
padding: 12px 12px !important;
}
.wc-block-components-totals-item {
padding: 7px 12px !important;
}
.wc-block-components-totals-footer-item {
padding: 10px 12px !important;
}
.wc-block-checkout__place-order {
padding: 10px 12px !important;
}
}
/* ══ iPhone Pro / Pixel (376-430px) ══ */
@media (min-width: 376px) and (max-width: 430px) {
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading * {
font-size: 0.57rem !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label {
font-size: 0.55rem !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
font-size: 0.65rem !important;
}
.wc-block-components-radio-control__option-description,
.wc-block-components-radio-control__option-description * {
font-size: 0.55rem !important;
}
.wc-block-components-checkbox__label,
.wc-block-checkout .wc-block-components-checkbox label {
font-size: 0.59rem !important;
}
.wc-block-checkout__policies,
.wc-block-checkout__terms {
font-size: 0.55rem !important;
}
.wc-block-components-order-summary-item__full-name * {
font-size: 0.59rem !important;
}
.wc-block-components-totals-footer-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
font-size: 0.77rem !important;
}
.wc-block-components-checkout-place-order-button {
font-size: 0.77rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GFS CART MODAL — Qty & Remove Button Size Fix v2.4
- / + buttons and × remove button too large on mobile AND desktop.
Override the 44px min-height accessibility rule (set in previous mobile block)
since these are inside a compact modal, not standalone page buttons.
Mobile + Desktop both fixed. Append only.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Desktop + Mobile both — compact cart modal buttons ── */
#gfs-cart-modal .gfs-qty-btn {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
font-size: 0.75rem !important;
border-radius: 5px !important;
line-height: 1 !important;
padding: 0 !important;
}
#gfs-cart-modal .gfs-remove-btn {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
font-size: 0.70rem !important;
border-radius: 5px !important;
line-height: 1 !important;
padding: 0 !important;
margin-left: 3px !important;
}
#gfs-cart-modal .gfs-cart-item-controls {
gap: 3px !important;
}
/* Qty number display */
#gfs-cart-modal .gfs-cart-item-qty {
font-size: 0.75rem !important;
padding: 3px 8px !important;
min-width: 22px !important;
text-align: center !important;
}
/* ── Mobile — even more compact ── */
@media (max-width: 768px) {
#gfs-cart-modal .gfs-qty-btn {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
font-size: 0.70rem !important;
}
#gfs-cart-modal .gfs-remove-btn {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
font-size: 0.65rem !important;
}
#gfs-cart-modal .gfs-cart-item-qty {
font-size: 0.70rem !important;
padding: 2px 7px !important;
}
#gfs-cart-modal .gfs-cart-item-controls {
gap: 2px !important;
}
}
/* ── iPhone SE ── */
@media (max-width: 375px) {
#gfs-cart-modal .gfs-qty-btn {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
font-size: 0.65rem !important;
}
#gfs-cart-modal .gfs-remove-btn {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
font-size: 0.60rem !important;
}
#gfs-cart-modal .gfs-cart-item-qty {
font-size: 0.65rem !important;
padding: 2px 6px !important;
}
}
/* ═══════════════════════════════════════════════════════════
GFS Member Welcome Panel — Dashboard layout fix
═══════════════════════════════════════════════════════════ */
/* Welcome panel inside content column — hide any old render */
.woocommerce-account .woocommerce-MyAccount-content .gfs-member-welcome-panel {
display: none !important;
}
/* Old above-nav class — no longer used, hide if present */
.gfs-welcome-above-nav {
display: none !important;
}
/* ── Welcome panel full-width styles ── */
.gfs-welcome-fullwidth {
background: linear-gradient(135deg, #0D1428 0%, #111C35 100%);
border: 1px solid rgba(245,158,11,.2);
border-radius: 18px;
padding: 32px 28px 28px;
text-align: center;
box-sizing: border-box;
}
/* Nav wrapper styling (replaces direct nav targeting) */
.woocommerce-account .woocommerce-MyAccount-navigation-wrapper {
background: rgba(13,18,32,.97);
border-radius: 12px;
padding: 20px;
}
.woocommerce-account .woocommerce-MyAccount-navigation-wrapper .woocommerce-MyAccount-navigation {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════
DLM — New Activation Modal (jQuery UI Dialog) — Theme Override
═══════════════════════════════════════════════════════════════════ */
/* Overlay backdrop */
.ui-widget-overlay {
background: rgba(6, 9, 20, 0.75) !important;
opacity: 1 !important;
}
/* Dialog container */
.ui-dialog {
background: #151B3B !important;
border: 1px solid rgba(245, 158, 11, 0.25) !important;
border-radius: 14px !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(59, 130, 246, 0.1) !important;
padding: 0 !important;
overflow: hidden !important;
color: #E2E8F0 !important;
font-family: var(--font-primary, 'Inter', sans-serif) !important;
}
/* Top gradient accent line */
.ui-dialog::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(245,158,11,0.7), rgba(59,130,246,0.7), transparent);
pointer-events: none;
z-index: 1;
}
/* Title bar */
.ui-dialog .ui-dialog-titlebar {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
padding: 20px 24px 16px !important;
border-radius: 0 !important;
}
/* Title text */
.ui-dialog .ui-dialog-title {
color: var(--color-accent, #F59E0B) !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
}
/* Close button (×) */
.ui-dialog .ui-dialog-titlebar-close {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
color: #94A3B8 !important;
width: 30px !important;
height: 30px !important;
top: 50% !important;
transform: translateY(-50%) !important;
right: 20px !important;
transition: background 0.2s, color 0.2s !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
background: rgba(245, 158, 11, 0.15) !important;
border-color: rgba(245, 158, 11, 0.4) !important;
color: #F59E0B !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
background-image: none !important;
text-indent: 0 !important;
font-size: 1rem !important;
color: inherit !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
content: '✕' !important;
font-size: 0.85rem !important;
color: currentColor !important;
}
/* Dialog body */
.ui-dialog .ui-dialog-content {
background: transparent !important;
color: #E2E8F0 !important;
padding: 24px !important;
}
/* Labels */
.ui-dialog .ui-dialog-content label {
color: #94A3B8 !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
display: block !important;
}
/* Text inputs inside dialog */
.ui-dialog .ui-dialog-content input[type="text"],
.ui-dialog .ui-dialog-content input[type="email"],
.ui-dialog .ui-dialog-content input[type="number"],
.ui-dialog .ui-dialog-content input {
background: rgba(10, 14, 39, 0.7) !important;
border: 1px solid rgba(59, 130, 246, 0.25) !important;
border-radius: 8px !important;
color: #ffffff !important;
padding: 10px 14px !important;
font-size: 0.95rem !important;
width: 100% !important;
box-sizing: border-box !important;
transition: border-color 0.2s !important;
outline: none !important;
}
.ui-dialog .ui-dialog-content input[type="text"]:focus,
.ui-dialog .ui-dialog-content input:focus {
border-color: rgba(245, 158, 11, 0.5) !important;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08) !important;
}
/* Button bar */
.ui-dialog .ui-dialog-buttonpane {
background: transparent !important;
border: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
padding: 16px 24px 20px !important;
margin: 0 !important;
}
/* All buttons in dialog */
.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-dialog-content button,
.ui-dialog .ui-button {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
border: none !important;
border-radius: 8px !important;
color: #0A0E27 !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
padding: 10px 22px !important;
cursor: pointer !important;
letter-spacing: 0.3px !important;
transition: opacity 0.2s, transform 0.15s !important;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
}
.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-content button:hover,
.ui-dialog .ui-button:hover {
opacity: 0.9 !important;
transform: translateY(-1px) !important;
}
/* DLM specific: + Activate button on license page */
.dlm-button,
a.dlm-button,
button.dlm-button,
.woocommerce-account .dlm-license-action-buttons .dlm-button,
.woocommerce-account .dlm-license-actions .dlm-button {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
color: #0A0E27 !important;
border: none !important;
border-radius: 8px !important;
font-weight: 700 !important;
padding: 9px 18px !important;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
transition: opacity 0.2s, transform 0.15s !important;
text-decoration: none !important;
cursor: pointer !important;
}
.dlm-button:hover,
a.dlm-button:hover,
button.dlm-button:hover {
opacity: 0.9 !important;
transform: translateY(-1px) !important;
color: #0A0E27 !important;
}
/* ═══════════════════════════════════════════════════════════════════
GFS MY ACCOUNT — Nav sidebar overflow fix
═══════════════════════════════════════════════════════════════════ */
/* Prevent nav from being clipped */
.woocommerce-account .woocommerce-MyAccount-navigation-wrapper {
min-width: 0 !important;
overflow: visible !important;
}
/* Nav items — prevent wrapping/truncation on desktop */
@media (min-width: 769px) {
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
white-space: nowrap !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
GFS — My Account Navigation: Remove all borders
Hides the nav card border without affecting any other styling.
═══════════════════════════════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation {
border: none !important;
outline: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
border: none !important;
border-bottom: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
outline: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
border: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
GFS — Downloads Page Table: Horizontal scroll on narrow screens
Fixes text wrapping / column squeeze on mobile & narrow viewports.
═══════════════════════════════════════════════════════════════════ */
/* Wrap the downloads table in a scrollable container */
.woocommerce-account .woocommerce-MyAccount-downloads .woocommerce-table--order-downloads,
.woocommerce-account .woocommerce-downloads .woocommerce-table--order-downloads,
.woocommerce-account table.woocommerce-table--order-downloads {
display: table !important;
width: 100% !important;
min-width: 480px !important;
table-layout: auto !important;
}
/* Scrollable wrapper — target the content area */
@media (max-width: 900px) {
.woocommerce-account .woocommerce-MyAccount-content {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Override stacked layout for downloads page — use scroll instead */
.woocommerce-account .woocommerce-table--order-downloads,
.woocommerce-account table.woocommerce-table--order-downloads {
display: table !important;
width: 100% !important;
min-width: 480px !important;
}
.woocommerce-account .woocommerce-table--order-downloads thead {
display: table-header-group !important;
}
.woocommerce-account .woocommerce-table--order-downloads tbody,
.woocommerce-account .woocommerce-table--order-downloads tr {
display: table-row !important;
width: auto !important;
}
.woocommerce-account .woocommerce-table--order-downloads th,
.woocommerce-account .woocommerce-table--order-downloads td {
display: table-cell !important;
padding: 10px 12px !important;
font-size: 0.85rem !important;
white-space: nowrap !important;
vertical-align: middle !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
/* Remove the ::before label hack (not needed in scroll mode) */
.woocommerce-account .woocommerce-table--order-downloads td::before {
content: none !important;
display: none !important;
}
/* Allow product name to wrap (it's usually longer) */
.woocommerce-account .woocommerce-table--order-downloads td.woocommerce-table__product-name,
.woocommerce-account .woocommerce-table--order-downloads td:first-child {
white-space: normal !important;
min-width: 120px !important;
}
/* Download button */
.woocommerce-account .woocommerce-table--order-downloads td a.button,
.woocommerce-account .woocommerce-table--order-downloads td .woocommerce-MyAccount-downloads-file {
white-space: nowrap !important;
padding: 6px 12px !important;
font-size: 0.82rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
GFS — My Account: Mobile Text Size Optimization
All My Account pages — welcome panel, nav, tables, headings,
buttons, orders, licenses, downloads, addresses, account details.
Only font-size / spacing adjusted. No layout or color changes.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Welcome Panel ── */
.gfs-member-welcome-title {
font-size: 1.0rem !important;
letter-spacing: -0.2px !important;
}
.gfs-member-welcome-sub {
font-size: 0.75rem !important;
margin-bottom: 16px !important;
line-height: 1.5 !important;
}
.gfs-member-ql-label {
font-size: 0.72rem !important;
}
.gfs-member-ql-desc {
font-size: 0.62rem !important;
}
/* ── Navigation Sidebar ── */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
font-size: 0.85rem !important;
padding: 9px 12px !important;
}
/* ── Content Area Headings ── */
.woocommerce-account .woocommerce-MyAccount-content h2 {
font-size: 1.05rem !important;
margin-bottom: 12px !important;
}
.woocommerce-account .woocommerce-MyAccount-content h3 {
font-size: 0.95rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content p {
font-size: 0.82rem !important;
line-height: 1.55 !important;
}
/* ── All Account Tables (Orders, Licenses, Downloads, etc.) ── */
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
font-size: 0.78rem !important;
padding: 8px 10px !important;
}
/* ── Orders Table ── */
.woocommerce-account .woocommerce-orders-table__cell,
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
font-size: 0.78rem !important;
padding: 8px 10px !important;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a,
.woocommerce-account .woocommerce-orders-table__cell-order-status {
font-size: 0.76rem !important;
}
/* ── Buttons (View Order, Download, etc.) ── */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-button {
font-size: 0.78rem !important;
padding: 7px 12px !important;
}
/* ── Licenses Page ── */
.woocommerce-account .dlm-license-keys-title,
.woocommerce-account .dlm-myaccount-table th,
.woocommerce-account .dlm-myaccount-table td {
font-size: 0.78rem !important;
padding: 8px 10px !important;
}
.woocommerce-account .dlm-license-key-title,
.woocommerce-account .dlm-single-license-title {
font-size: 0.95rem !important;
}
/* ── Downloads Page ── */
.woocommerce-account .woocommerce-table--order-downloads th,
.woocommerce-account .woocommerce-table--order-downloads td {
font-size: 0.76rem !important;
padding: 7px 9px !important;
}
.woocommerce-account .woocommerce-MyAccount-downloads-file a {
font-size: 0.76rem !important;
}
/* ── Addresses Page ── */
.woocommerce-account .woocommerce-Address address,
.woocommerce-account .woocommerce-Addresses address {
font-size: 0.8rem !important;
line-height: 1.6 !important;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-column__title {
font-size: 0.92rem !important;
}
.woocommerce-account .woocommerce-Address a,
.woocommerce-account .woocommerce-Addresses a {
font-size: 0.78rem !important;
}
/* ── Account Details (Edit Account) ── */
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-form-row label {
font-size: 0.78rem !important;
}
.woocommerce-account .woocommerce-EditAccountForm input,
.woocommerce-account .woocommerce-form-row input {
font-size: 0.84rem !important;
padding: 9px 12px !important;
}
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form__label-for-checkbox span,
.woocommerce-account .woocommerce-EditAccountForm p.form-row {
font-size: 0.78rem !important;
}
/* ── Dashboard greeting / messages ── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
font-size: 0.82rem !important;
padding: 10px 14px !important;
}
/* ── Order detail page ── */
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-customer-details h2 {
font-size: 0.95rem !important;
}
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td {
font-size: 0.78rem !important;
padding: 7px 9px !important;
}
/* ── Order overview (status bar) ── */
.woocommerce-account .woocommerce-order-overview li {
font-size: 0.72rem !important;
padding: 0 10px !important;
}
.woocommerce-account .woocommerce-order-overview strong {
font-size: 0.82rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
GFS — Account Details: Remove fieldset white border
═══════════════════════════════════════════════════════════════════ */
.woocommerce-account fieldset,
.woocommerce-account .woocommerce-MyAccount-content fieldset {
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 10px !important;
padding: 16px !important;
margin: 16px 0 !important;
background: transparent !important;
}
.woocommerce-account fieldset legend,
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
color: var(--color-text-secondary, #94A3B8) !important;
font-size: 0.82rem !important;
padding: 0 8px !important;
background: var(--color-bg-dark, #0A0E27) !important;
}
/* ═══════════════════════════════════════════════════════════════════
GFS — Welcome Panel: Mobile clip fix
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.woocommerce-account .woocommerce {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.gfs-welcome-fullwidth {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: hidden !important;
}
.gfs-woo-wrapper .container {
overflow: visible !important;
}
body.woocommerce-account {
overflow-x: hidden !important;
}
}