/* =====================================================================
   ClickFunded tenant stylesheet
   ---------------------------------------------------------------------
   Migrated from WPCode snippets on checkout.clickfunded.com. Each block
   is headed with the original snippet ID so it can be traced back.
   Plain CSS, not part of the Tailwind build. Loaded on every front-end
   page after checkout.css (see class-yourpropfirm-tenant-clickfunded.php).
   ===================================================================== */


/* #99 Auto Capitalize Each Words Headers
   -------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.section-heading,
.repurchase-card-label,
.section-subheading {
    text-transform: capitalize !important;
}


/* #101 Adjustment Fonts to Inter
   -------------------------------------------------------------------- */
/* JANGAN tambahkan *:before / *:after ke selector di bawah.
   font-family itu diwariskan, jadi pseudo-element teks sudah otomatis
   ikut Inter dari elemen induknya -- menyertakannya tidak menambah apa pun.
   Sebaliknya, *:before/*:after dengan !important akan menimpa font ikon
   "Font Awesome 5 Free" milik Storefront. Glyph Font Awesome berada di
   Private Use Area (mis. U+F110 spinner, U+F00C centang) yang tidak ada
   di Inter, sehingga ikon berubah jadi kotak tofu: spinner .blockUI::before
   saat loading/klik Next, centang notifikasi coupon, dan ikon admin bar. */
html, body, * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}


/* #112 Hide Theme Mode Toggle & add-ons charge
   -------------------------------------------------------------------- */
#theme-toggle {
    display: none !important;
}
.available-addons .addon-price-desc {
    display: none !important;
}


/* #119 Adjust border color
   -------------------------------------------------------------------- */
/* Category buttons & account size buttons */
.category-option-content {
    border-color: var(--border-standby) !important;
}

/* Preserve checked/active state */
.category-option input[type="radio"]:checked + .category-option-content {
    border-color: transparent !important;
}

/* Same treatment for the native product radio buttons (replaces #107) */
.woocommerce-product-selection .product-option .product-option-content {
    border-color: var(--border-standby) !important;
}
.woocommerce-product-selection .product-option input[type="radio"]:checked + .product-option-content {
    border-color: transparent !important;
}

/* Subcategory & account size dropdowns */
select.product-dropdown,
.product-dropdown-wrapper select {
    border-color: var(--border-standby) !important;
}


/* #121 Order Summary element order
   -------------------------------------------------------------------- */
.product-selection-content {
    display: flex;
    flex-direction: column;
}

/* Plugin YourPropFirm mengubah markup .order-summary:
   - ab8f73d (2026-08-21, YPF-743) menghapus wrapper
     .payment-section -> sekarang #payment.woocommerce-checkout-payment
   - 2bdac6b (2026-08-28) membungkus .order-review-section
     di dalam .ypf-order-review-wrap

   Aturan di bawah memakai child selector (>) supaya hanya
   flex item langsung yang diatur, plus base order:8 agar
   elemen baru dari update plugin berikutnya jatuh ke bawah,
   bukan melompat ke atas. */
.order-summary.checkout-card {
    display: flex !important;
    flex-direction: column !important;
}

/* Default aman untuk elemen yang belum dikenal */
.order-summary.checkout-card > * { order: 8; }

.order-summary > .section-heading                { order: 1 !important; }
.order-summary > .coupon-section                 { order: 2 !important; }
.order-summary > .ypf-order-review-wrap          { order: 3 !important; }
.order-summary > .woocommerce-checkout-payment   { order: 4 !important; }
/* #ypf-payment-badge (#124) now renders inside #payment, after the gateway list. */
.order-summary > .terms-conditions-section       { order: 6 !important; }
.order-summary > .place-order-section            { order: 7 !important; }


/* #134 Adjust TnC color link to primary color
   -------------------------------------------------------------------- */
.order-summary .woocommerce-terms-and-conditions-wrapper a:is([class=dark] *) {
  color: rgb(250, 146, 0);
}


/* #138 Category options layout (static part; the --ypf-btn-* variables
   and selected-state rules are printed inline by print_button_sync_css)
   -------------------------------------------------------------------- */
/* 1. Layout Grid 2 Kolom (Sama dengan Account) */
.category-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 15px 0 !important;
    box-sizing: border-box !important;
}

.category-option {
    width: 100% !important;
    min-width: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}

/* 2. Unselected State (Abu-abu Redup agar tidak Putih) */
.category-option .category-option-content {
    background: transparent !important;
    border: 1px solid #3f3f46 !important; /* Zinc-700 */
    color: #a1a1aa !important;
    border-radius: var(--ypf-btn-radius) !important;
    padding: 12px 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

/* 4. Utilities & Interaction */
.category-option input[type='radio'] { display: none !important; }
.category-option .category-option-content:hover { border-color: #71717a !important; color: #fff !important; }


/* #144 Input Field Border Adjustment
   -------------------------------------------------------------------- */
/* 1. INPUT FIELDS, TEXTAREA, & COUPON FIELD + LANG SELECT (Base Styles) */
.woocommerce-billing-fields__field-wrapper input[type="text"],
.woocommerce-billing-fields__field-wrapper input[type="email"],
.woocommerce-billing-fields__field-wrapper input[type="tel"],
.woocommerce-billing-fields__field-wrapper input[type="url"],
.woocommerce-billing-fields__field-wrapper input[type="password"],
.woocommerce-billing-fields__field-wrapper textarea,
.woocommerce-input-wrapper input,
input#coupon_code.coupon-input,
#payment_method_select,
select.yourpropfirm-lang-select,
select.product-dropdown.ypf-subcategory-dropdown {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 0 16px !important;
    height: 44px !important;
    font-size: 14px !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Border saat field di-select/focus */
.woocommerce-billing-fields__field-wrapper input:focus,
.woocommerce-billing-fields__field-wrapper textarea:focus,
.woocommerce-input-wrapper input:focus,
input#coupon_code.coupon-input:focus,
#payment_method_select:focus,
select.yourpropfirm-lang-select:focus,
select.product-dropdown.ypf-subcategory-dropdown:focus {
    border-color: rgba(250, 146, 0, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(250, 146, 0, 0.2) !important;
}

/* 2. DROPDOWN OPTION */
.product-dropdown-wrapper.ypf-subcategory-dropdown-wrapper {
    border: none !important;
    padding: 0 !important;
}

select.product-dropdown.ypf-subcategory-dropdown,
select.yourpropfirm-lang-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    cursor: pointer;
}

select.yourpropfirm-lang-select option {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* 3. SELECT2 FOCUS STYLES */
.select2-container--default .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    transition: border-color 0.2s ease-in-out !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(250, 146, 0, 0.7) !important;
}

/* 4. AVAILABLE ADD-ONS — border item + checkmark saat checked */
.available-addons > div:has(input[type="checkbox"]:checked),
.available-addons .addon-option:has(input[type="checkbox"]:checked),
.available-addons > div:has(input[type="radio"]:checked),
.available-addons .addon-option:has(input[type="radio"]:checked),
.dark .available-addons > div:has(input[type="checkbox"]:checked),
.dark .available-addons .addon-option:has(input[type="checkbox"]:checked),
.dark .available-addons > div:has(input[type="radio"]:checked),
.dark .available-addons .addon-option:has(input[type="radio"]:checked) {
    border-color: rgba(250, 146, 0, 0.7) !important;
    background-color: rgba(250, 146, 0, 0.08) !important;
}

.available-addons input[type="checkbox"]:checked,
.available-addons .addon-item input[type="checkbox"]:checked,
.dark .available-addons input[type="checkbox"]:checked {
    /* background transparent agar bagian tengah bening */
    background-color: transparent !important;
    border-color: rgba(250, 146, 0, 0.7) !important;
    accent-color: rgba(250, 146, 0, 0.9) !important;
}


/* #145 Remove Glow Background
   -------------------------------------------------------------------- */
.checkout-container .background-placement.background-bottom-left {
  display: none;
}

.checkout-container .background-placement.background-top-right {
  display: none;
}


/* #241 Padding & Margin Payment Logo
   -------------------------------------------------------------------- */
/* The original -20px margins compensated the gap between flex siblings in
   .order-summary. The badge now renders inside #payment (PHP #124), where
   negative margins would pull it over the gateway description box. */
#ypf-payment-badge {
  margin: 12px 0 0;
  padding: 0;
}


/* #242 Adjust apply button color
   -------------------------------------------------------------------- */
.btn-outline:is([class=dark] *) {
  background: linear-gradient(rgb(251, 146, 60), rgb(234, 88, 12));
  border: 1px solid rgba(250, 146, 0, 0.7);
  box-shadow: rgba(250, 146, 0, 0.7) 0px 0px 25px inset, rgba(250, 146, 0, 0.4) 0px 0px 20px;
  color: rgb(255, 255, 255);
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  background-image: linear-gradient(rgba(250, 146, 0, 0.25), rgba(250, 146, 0, 0.25));
  background-color: transparent;
}


/* #246 Thank you page button adjustment — Continue to Dashboard glow
   -------------------------------------------------------------------- */
.woocommerce-order-received .yourpropfirm-dashboard .yourpropfirm-dashboard-button a.button {
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(251, 146, 60, 0.85) 150%
    ) !important;
    background-color: transparent !important;
    border: 1px solid rgba(245, 158, 11, 0.7) !important;
    box-shadow:
        rgba(251, 146, 60, 0.7) 0px 8px 25px 0px inset,
        rgba(251, 146, 60, 0.5) 0px 0px 25px 0px !important;
    color: rgb(255, 255, 255) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.woocommerce-order-received .yourpropfirm-dashboard .yourpropfirm-dashboard-button a.button:hover {
    border-color: rgba(245, 158, 11, 0.95) !important;
    box-shadow:
        rgba(251, 146, 60, 0.85) 0px 8px 30px 0px inset,
        rgba(251, 146, 60, 0.7) 0px 0px 35px 0px !important;
}


/* #279 Dark order processing overlay (Xoala)
   -------------------------------------------------------------------- */
/* Gelapkan blockUI overlay saat redirect ke Xoala */
.woocommerce-checkout .blockUI.blockOverlay {
    background: #0d0d0d !important;
    opacity: 1 !important;
}

/* Loader overlay milik sendiri.
   WooCommerce memblokir form dengan $form.block({message: null}), sehingga
   jQuery blockUI membuat .blockMsg tapi tidak pernah menampilkannya
   (display:none, tanpa CSS posisi). Jadi logo tidak bisa disisipkan ke
   .blockMsg -- dipakai elemen #xoala-loader sendiri. */
#xoala-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d0d0d;
}

#xoala-loader .xoala-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    text-align: center;
}

#xoala-loader .xoala-logo {
    display: block;
    height: 48px;
    width: auto;
    animation: none !important;
    transform: none !important;
}

#xoala-loader .xoala-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: #fa9200;
    border-radius: 50%;
    animation: xoala-spin 0.8s linear infinite;
}

#xoala-loader .xoala-loader-text {
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}

@keyframes xoala-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #xoala-loader .xoala-spinner {
        animation-duration: 2.4s;
    }
}


/* #339 Hide coupon field for reset and activation products
   -------------------------------------------------------------------- */
/* Sembunyikan seluruh section kupon */
.yourpropfirm-has-reset-product .coupon-section,
.yourpropfirm-has-activation-product .coupon-section {
    display: none !important;
}
/* Sembunyikan kartu info Account saat menampilkan produk activation */
.yourpropfirm-has-activation-product .repurchase-grid .repurchase-card:last-child {
    display: none !important;
}


/* #7857 Fix Order Summary Skeleton Loader (.ypf-loading-shimmer)
   -------------------------------------------------------------------- */
/* Bawaan plugin memakai --yourpropfirm-primary (#fa9200) sebagai warna
   dasar gradient, sehingga saat loading yang muncul balok oranye pekat
   di baris Total -- terlihat seperti glitch, bukan skeleton loader.

   Catatan: properti background shorthand me-reset background-size,
   jadi background-size harus dideklarasikan ULANG setelahnya supaya
   animasi keyframes ypf-shimmer tetap berjalan. */
.ypf-loading-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.07) 25%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.07) 75%
    ) !important;
    background-size: 200% 100% !important;
    border-radius: 6px !important;
}

html:not(.dark) .ypf-loading-shimmer {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.07) 25%,
        rgba(0, 0, 0, 0.16) 50%,
        rgba(0, 0, 0, 0.07) 75%
    ) !important;
    background-size: 200% 100% !important;
}

@media (prefers-reduced-motion: reduce) {
    .ypf-loading-shimmer {
        animation-duration: 2.4s !important;
    }
}


/* #23237 Adjust Variant Button — samakan tombol "Option" dengan
   tombol Evaluation / Account
   -------------------------------------------------------------------- */
/* Grid 2 kolom, sama seperti .category-options */
.woocommerce-product-variants .variant-attribute-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 15px 0 !important;
  box-sizing: border-box !important;
}

.woocommerce-product-variants .variant-attribute-option {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* State normal (tidak dipilih) */
.woocommerce-product-variants .variant-attribute-option .variant-attribute-label {
  background: transparent !important;
  border: 1px solid rgb(63, 63, 70) !important;
  color: rgb(161, 161, 170) !important;
  border-radius: var(--ypf-btn-radius) !important;
  padding: 12px 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

/* Hover */
.woocommerce-product-variants .variant-attribute-option .variant-attribute-label:hover {
  border-color: rgb(113, 113, 122) !important;
  color: #fff !important;
}

/* State dipilih — pakai variabel yang sama dengan tombol lain */
.woocommerce-product-variants .variant-attribute-option input[type="radio"]:checked + .variant-attribute-label {
  background: var(--ypf-btn-bg) !important;
  border: var(--ypf-btn-border) !important;
  box-shadow: var(--ypf-btn-shadow) !important;
  color: #fff !important;
}

.woocommerce-product-variants .variant-attribute-option input[type="radio"]:checked + .variant-attribute-label:hover {
  filter: brightness(1.1) !important;
}


/* #23270 Adjust Order Review
   -------------------------------------------------------------------- */
.ypf-row-category-level.ypf-category-level-0.ypf-category-evaluation,
.order-row.ypf-row-variant-option.ypf-variant-option-option,
.order-row.ypf-row-variant-option.ypf-variant-option-activation {
	display: none !important;
}

html .repurchase-grid .repurchase-card:nth-child(2) {
	display: none;
}
/* The "Account Size" label on card 1 is set server-side (gettext, PHP #100). */


/* #24146 Instant Funded: hide coupon section
   (body.ypf-instant-funded is set server-side and toggled by JS)
   -------------------------------------------------------------------- */
body.ypf-instant-funded .coupon-section {
  display: none !important;
}


/* #24900 Option & Activation tooltips
   -------------------------------------------------------------------- */
.cf-tip-glue { white-space: nowrap; }
/* Category buttons are nowrap flex; let a label with an icon wrap on
   narrow screens and keep every button in the row the same height. */
.category-option-content .cf-tip-text { white-space: normal; }
.category-options:has(.cf-tip-icon) .category-option-content {
  height: 100%;
  box-sizing: border-box;
}
.cf-tip-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  opacity: .6;
  cursor: help;
  transition: opacity .15s ease;
}
.cf-tip-icon:hover,
.cf-tip-icon:focus-visible { opacity: 1; outline: none; }
.cf-tip-icon svg { width: 14px; height: 14px; display: block; }
#cf-tip-bubble {
  position: fixed;
  z-index: 99999;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color: #e4e4e7;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
#cf-tip-bubble.is-open { opacity: 1; }


/* YPF-1605 Checkout tags (rows from the "ClickFunded Checkout" settings
   page, injected by the #24900 JS module). Same pill as the tags on
   clickfunded.com #choose-your-evaluation.
   -------------------------------------------------------------------- */
.woocommerce-product-variants .variant-attribute-option,
.woocommerce-product-selection .category-option {
  position: relative;
}
.cf-tag {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.cf-tag--blue {
  background: rgba(59, 130, 246, .9);
  box-shadow: 0 0 8px 2px rgba(59, 130, 246, .4);
}
.cf-tag--green {
  background: rgba(16, 185, 129, .9);
  box-shadow: 0 0 8px 2px rgba(16, 185, 129, .4);
}
.cf-tag--red {
  background: rgba(239, 68, 68, .9);
  box-shadow: 0 0 8px 2px rgba(239, 68, 68, .4);
}
.cf-tag--orange {
  background: linear-gradient(to right, #F6BB5C, #F68B2E);
  box-shadow: 0 0 10px 2px rgba(246, 139, 46, .4);
}
/* Add-on rows are full-width cards: keep the tag inline after the label. */
.available-addons .cf-tag {
  position: static;
  display: inline-block;
  transform: none;
  margin-left: 8px;
  vertical-align: middle;
}


/* Customizer → Additional CSS (wp_get_custom_css) on checkout.clickfunded.com
   The order-summary flex-order rules it also contained duplicate #121
   above and were dropped.
   -------------------------------------------------------------------- */
/* Pastikan warna link di checkbox terms selalu primary */
html.dark .woocommerce-terms-and-conditions-checkbox-text a.terms-link,
html .woocommerce-terms-and-conditions-checkbox-text a.terms-link {
    color: #fa9200 !important;
    --tw-text-opacity: 1 !important;
    text-decoration: underline !important;
}

/* Mouse glow (markup: PHP #140, movement: JS #143) */
.mouse-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    pointer-events: none; /* agar tombol di bawah tetap bisa diklik */
    z-index: 9999;
    opacity: 0.3;
    mix-blend-mode: screen; /* efek cahaya pada background gelap */
    will-change: transform;
    transform: translate(-50%, -50%); /* titik tengah gambar tepat di kursor */
    transition: opacity 0.5s ease;
}

.mouse-glow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Sembunyikan di perangkat mobile */
@media (max-width: 768px) {
    .mouse-glow { display: none; }
}

html .affiliate-info-message {
	display: none !important;
}
/* The ::after badge fallback was dropped: #ypf-payment-badge is now
   rendered server-side inside #payment (PHP #124). */


/* #124 Payment badge (rendered by PHP inside #payment)
   -------------------------------------------------------------------- */
#ypf-payment-badge {
  width: 100%;
}
#ypf-payment-badge img {
  width: 100%;
  height: auto;
  display: block;
}


/* #107 → native "Display Product as Radio" (forced in PHP).
   Restyle the plugin's .product-option to match .category-option.
   -------------------------------------------------------------------- */
.woocommerce-product-selection .product-radio-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 15px 0 !important;
  box-sizing: border-box !important;
}

.woocommerce-product-selection .product-option {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}

.woocommerce-product-selection .product-option .product-option-content {
  background: transparent !important;
  border: 1px solid #3f3f46 !important;
  color: #a1a1aa !important;
  border-radius: var(--ypf-btn-radius) !important;
  padding: 12px 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: none !important;
}

.woocommerce-product-selection .product-option .product-option-content:hover {
  border-color: #71717a !important;
  color: #fff !important;
}

/* Label inherits the button colour (plugin default paints it primary). */
.woocommerce-product-selection .product-option .product-option-name,
.woocommerce-product-selection .product-option input[type="radio"]:checked + .product-option-content .product-option-name {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* The old buttons showed the label only. */
.woocommerce-product-selection .product-option .product-option-price-badge,
.woocommerce-product-selection .product-option .product-option-popular-badge {
  display: none !important;
}