/* UI/UX audit fixes — 1405/07/11 */

/* 1. "قیمت لحظه ای" sidebar: no fixed height (empty space under the last coin) */
#moment-value-of-coins { height: auto !important; min-height: 0 !important; }

/* 2. Article infographics keep their own proportions (were forced to 750×900) */
#post-content img[class*="wp-image-"],
.post-content img[class*="wp-image-"],
.content-with-see-more .content img[class*="wp-image-"] { height: auto !important; max-height: none !important; object-fit: contain; }

/* 3. Empty "حجم ۲۴H" column is hidden until it has data (class set by ux-fixes.js) */
html.xp-novol .col-volume { display: none !important; }

/* 6. Chart: info column in two columns, so the block is ~520px instead of ~660px */
@media (min-width: 1025px) {
  #chart-root .xpc11-wrap { grid-template-columns: 340px minmax(0, 1fr) !important; }
  #chart-root .xpc11-info { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start; }
  #chart-root .xpc11-coin, #chart-root .xpc11-price, #chart-root .xpc11-sec-lbl,
  #chart-root .xpc11-about, #chart-root .xpc11-unit { grid-column: 1 / -1; }
  #chart-root .xpc11-changes { grid-column: 1; grid-row: 4; margin-bottom: 0 !important; }
  #chart-root .xpc11-hl { grid-column: 2; grid-row: 4; padding-top: 0 !important; border-top: 0 !important; }
  #chart-root .xpc11-about { margin-top: 14px; }
}

/* 7. Table of contents on phones/tablets: first 4 headings, the rest on tap */
@media (max-width: 1024px) {
  .toc-sidebar.xp-toc:not(.xp-open) .xp-toc-extra { display: none !important; }
  .toc-sidebar.xp-toc:not(.xp-open) #sidebar-scrool { max-height: none !important; }
  .toc-sidebar.xp-toc .xp-toc-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #DCEBFF; border-radius: 12px; background: #F5FAFF; color: #0072E0; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .toc-sidebar.xp-toc .xp-toc-btn svg { transition: transform .25s ease; }
  .toc-sidebar.xp-toc.xp-open .xp-toc-btn svg { transform: rotate(180deg); }
}
.xp-toc-btn { display: none; }

/* 8. "مشاهده بیشتر": infographics at a readable size instead of full 1248px width */
.content-with-see-more > .content img { max-width: min(100%, 720px) !important; height: auto !important; display: block; margin-inline: auto; }

/* 9. Floating chat button no longer covers the last line of the page */
.copy-right-box { padding-bottom: 76px !important; }

/* 10. Résumé upload field (Gravity Forms) */
.xp-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xp-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.xp-file .xp-file-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 1px dashed #8CC2FF; background: #F3F9FF; color: #0072E0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.xp-file .xp-file-btn:hover { background: #E8F3FF; }
.xp-file .xp-file-name { color: #5B6475; font-size: 13px; overflow-wrap: anywhere; }

/* 11. Coin page hero: text vertically centred next to the calculator */
@media (min-width: 1025px) {
  .coins-main-info { align-items: center !important; }
}

/* 12. Airdrop artwork fades out instead of being cut off */
.gift-img img { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }

/* 13. Form fields that were almost invisible */
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel],
.gform_wrapper input[type=number], .gform_wrapper textarea, .gform_wrapper select {
  border: 1px solid #D5E1F0 !important; background: #FAFCFF !important; transition: border-color .2s, box-shadow .2s;
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus {
  border-color: #0086FF !important; box-shadow: 0 0 0 3px rgba(0, 134, 255, .14) !important; outline: none !important;
}

/* 14. Contrast */
.reading-time span { color: #0E7A5D !important; }
.score span { color: #A35F00 !important; }
.essential-poins-in-auth h4.title { color: #A35F00 !important; }
.change.xpay-price.positive, .change-info.positive, .mobile-change-percent.positive, .change-percent.positive,
.crr-box .value .positive, .crr-lists .positive, #moment-value-of-coins .positive { color: #007A3D !important; }
.change.xpay-price.negative, .change-info.negative, .mobile-change-percent.negative, .change-percent.negative,
.crr-box .value .negative, .crr-lists .negative, #moment-value-of-coins .negative { color: #C42B1C !important; }
.sub-label, .xpc11-csym, .xpc11-hll, .xpc11-cl { color: #5F6B7D !important; }
.uusd-price-live { color: #0E7A3D !important; }
li.tab-link:not(.tab-link-active) { color: #4B5563; }

/* 15. Footer coin links: tidy columns of short names */
.xpay-coin-links-footer .xp-coin-links { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 16px !important; font-size: 13px !important; }
.xpay-coin-links-footer .xp-coin-links a { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; color: #3D4B63 !important; }
.xpay-coin-links-footer .xp-coin-links a:hover { color: #0086FF !important; }
@media (max-width: 600px) { .xpay-coin-links-footer .xp-coin-links { grid-template-columns: 1fr 1fr; } }

/* 16. Comments: "show more" button */
.xp-cm-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 8px 0 4px; padding: 12px; border: 1px solid #DCEBFF; border-radius: 14px; background: #F5FAFF; color: #0072E0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.xp-cm-more:hover { background: #EAF4FF; }
ul.comment-list > li.xp-cm-hidden { display: none !important; }

/* 5. Tablet (601–1024px): price cards fill their slide, larger hero artwork */
@media (min-width: 601px) and (max-width: 1024px) {
  #currencies-status-box .slide-content { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .main-section-img { max-width: 440px !important; width: 100%; margin-inline: auto; }
  .main-section-img img { width: 100%; height: auto; }
}

/* 17. Section spacing: theme stacks 120px margin + 120px padding (≈240px gaps) */
@media (min-width: 1025px) {
  .blog-main-section, .Digital-currency-news, .application-info, .needed-docs,
  .advantages-of-trading-in-xpay, .app-banner { margin-bottom: 64px !important; }
}

/* 18. App + referral banners: sharp CSS band, artwork never cropped or stretched */
section.app-banner, section.call-to-login { position: relative; overflow: hidden; isolation: isolate; }
section.app-banner > img.app-banner-image, section.call-to-login > img.sign-in-image { display: none !important; }
section.app-banner::before, section.call-to-login::before {
  content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: 36px; bottom: 36px;
  background:
    radial-gradient(circle at 12% 120%, rgba(255,255,255,.12) 0 120px, transparent 121px),
    radial-gradient(circle at 92% -20%, rgba(255,255,255,.10) 0 150px, transparent 151px),
    radial-gradient(circle at 70% 110%, rgba(255,255,255,.07) 0 90px, transparent 91px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320'%3E%3Cpath d='M70 60l3.5 10.5 10.5 3.5-10.5 3.5-3.5 10.5-3.5-10.5-10.5-3.5 10.5-3.5z' fill='%23fff' opacity='.5'/%3E%3Cpath d='M330 230l2.5 7.5 7.5 2.5-7.5 2.5-2.5 7.5-2.5-7.5-7.5-2.5 7.5-2.5z' fill='%237FE7FF' opacity='.65'/%3E%3Ccircle cx='470' cy='90' r='2' fill='%23fff' opacity='.45'/%3E%3Ccircle cx='190' cy='260' r='1.6' fill='%23fff' opacity='.35'/%3E%3C/svg%3E"),
    linear-gradient(120deg, #1C8CFF 0%, #0A6CF0 55%, #0656D6 100%);
}
section.app-banner::before, section.call-to-login::before,
section.app-banner::after, section.call-to-login::after { box-shadow: none !important; filter: none !important; border: 0 !important; transform: none !important; opacity: 1; }
section.app-banner::after, section.call-to-login::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: contain;
}
/* app: phone on the left, text stays on the right */
section.app-banner::after {
  background-image: url(../img/banners/app-phone.webp);
  width: 300px; height: 352px; bottom: 6px; left: max(16px, calc(50% - 600px)); background-position: center bottom;
}
/* referral: artwork on both sides of the centred text */
section.call-to-login::after {
  inset: 0; background-image: url(../img/banners/ref-left.webp), url(../img/banners/ref-right.webp);
  background-size: clamp(120px, calc((100% - 660px) / 2 - 40px), 300px) auto, clamp(120px, calc((100% - 660px) / 2 - 40px), 300px) auto;
  background-position: max(16px, calc(50% - 600px)) center, min(calc(100% - 16px), calc(50% + 600px)) center;
}
@media (max-width: 1024px) {
  section.app-banner::after { width: 230px; height: 270px; left: 16px; }
}
@media (max-width: 768px) {
  section.app-banner::before, section.call-to-login::before { top: 0; bottom: 0; }
  section.app-banner { height: auto !important; min-height: 370px; padding-top: 168px !important; padding-bottom: 32px !important; }
  section.app-banner::after { width: 128px; height: 150px; left: 50%; margin-left: -64px; top: 14px; bottom: auto; }
  section.call-to-login { height: auto !important; min-height: 370px; padding-top: 104px !important; padding-bottom: 104px !important; }
  section.call-to-login::after { background-size: 88px auto, 88px auto; background-position: 14px 12px, calc(100% - 14px) calc(100% - 12px); }
}