/*
 * HUD Store Styles
 * Styles for HUD Store pages (ID 4640 and child pages)
 */

.mobile-linebreak {
    display: none;
}

/* Add to Cart Button */
a.add-to-cart,
a.button.add-to-cart {
    background-color: #10b981 !important;
    border-radius: 15px;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 12px 24px;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

a.add-to-cart:hover,
a.add-to-cart:active,
a.button.add-to-cart:hover,
a.button.add-to-cart:active {
    background-color: #059669 !important;
    color: #fff !important;
}

/* Compatible with Hand2Note 4 Badge */
.h2n4-approved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #10b981;
    margin: 0.5rem 0;
    font-weight: 500;
}

.h2n4-approved a {
    color: #10b981;
    text-decoration: underline;
    text-decoration-color: #10b981;
    text-underline-offset: 2px;
}

.h2n4-approved a:hover {
    color: #059669;
    text-decoration-color: #059669;
}

/* License Info - Unlimited lifetime license */
.store-license-info {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0.25rem 0;
    font-style: italic;
    display: inline-block;
}

/* Store Game Type Buttons - Quick jump navigation */
.store-gametype-buttons {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.store-gametype-buttons p {
    margin: 0 0 0.75rem 0 !important;
    color: #374151 !important;
    font-size: 0.95rem;
    font-weight: 500;
}

.store-gametype-buttons span {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

a.store_gametype_link {
    background: #fff !important;
    color: #374151;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600 !important;
    text-decoration: none;
    border: 2px solid #e5e7eb;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
    font-size: 0.9rem;
}

a.store_gametype_link:hover,
a.store_gametype_link:active {
    background: #10b981 !important;
    color: #fff !important;
    border-color: #10b981;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}

/* Favorite HUD Mark Icon - Fix blur/oversize issue */
img.favorite-hud-mark {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    margin-left: -8px;
    margin-right: -6px;
    display: inline-block !important;
    vertical-align: middle;
    object-fit: contain !important;
    object-position: center;
    position: relative;
    z-index: 1;
}

/* Dark Theme Info Block - Light theme styles for info blocks */
.dark-theme-info-block:not(.store-gametype-buttons) {
    background: #f9fafb !important;
    border-left: 3px solid #d1d5db !important;
    border-radius: 8px;
    padding: 1.5rem 1.75rem !important;
    margin: 1.5rem 0;
    line-height: 1.7;
}

.dark-theme-info-block:not(.store-gametype-buttons) p {
    color: #374151 !important;
    font-size: 1rem;
    margin: 0 !important;
    line-height: 1.7;
}

.dark-theme-info-block:not(.store-gametype-buttons) a {
    color: #0D9488 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    font-weight: 500;
}

.dark-theme-info-block:not(.store-gametype-buttons) a:hover {
    color: #0F766E !important;
    border-bottom-color: #0D9488;
}

.dark-theme-info-block:not(.store-gametype-buttons) b {
    color: #dc2626 !important;
    font-weight: 600;
}

/* FAQ Section - Fix text colors (override inline styles) */
h2[id^="faq-"] {
    color: #1f2937 !important;
    font-weight: 600;
}

h2[id^="faq-"] ~ h3 {
    color: #374151 !important;
    font-weight: 600;
}

h2[id^="faq-"] ~ p {
    color: #4b5563 !important;
    line-height: 1.7;
}

/* Also target elements after #faq anchor */
#faq ~ h2[id^="faq-"] {
    color: #1f2937 !important;
}

#faq ~ h3 {
    color: #374151 !important;
}

#faq ~ p {
    color: #4b5563 !important;
}

#faq ~ a {
    color: #0D9488 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

#faq ~ a:hover {
    color: #0F766E !important;
    border-bottom-color: #0D9488;
}

h2[id^="faq-"] ~ a {
    color: #0D9488 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

h2[id^="faq-"] ~ a:hover {
    color: #0F766E !important;
    border-bottom-color: #0D9488;
}

/* Sync link styles across HUD Store pages */
.article-body a:not(.button, .add-to-cart, .store_gametype_link, .article-action-link) {
    color: #0D9488 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.article-body a:not(.button, .add-to-cart, .store_gametype_link, .article-action-link):hover {
    color: #0F766E !important;
    border-bottom-color: #0D9488;
}

/* Advertisement blocks - Freebetrange, GTO Wizard, Telegram Channel */
.wp-block-columns {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 2rem !important;
    margin: 2rem 0 !important;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.wp-block-columns .wp-block-column {
    flex: 1;
}

.wp-block-columns .wp-block-column h3 {
    color: #1f2937 !important;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0 !important;
    line-height: 1.4;
}

.wp-block-columns .wp-block-column p {
    color: #4b5563 !important;
    font-size: 1rem !important;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.wp-block-columns .wp-block-column ul {
    color: #4b5563 !important;
    font-size: 1rem !important;
    line-height: 1.7;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.wp-block-columns .wp-block-column ul li {
    margin-bottom: 0.5rem;
}

.wp-block-columns .wp-block-column a:not(.article-action-link) {
    color: #0D9488 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    font-weight: 500;
}

.wp-block-columns .wp-block-column a:not(.article-action-link):hover {
    color: #0F766E !important;
    border-bottom-color: #0D9488;
}

.wp-block-columns .wp-block-column a b {
    font-weight: 600;
}

/* Fix icon alignment in links - override general .article-body img margin */
.wp-block-columns .wp-block-column a img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
    display: inline-block;
}

.wp-block-columns .wp-block-column .article-action-link {
    color: #fff !important;
    margin-top: 1rem;
    display: inline-block;
    border-radius: 8px;
    padding: 0.875rem 2rem;
    font-size: 1rem !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-columns .wp-block-column .article-action-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


/* Responsive */
@media (max-width: 768px) {
    a.add-to-cart {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
    
    img.favorite-hud-mark {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }
    
    .store-gametype-buttons {
        padding: 1.25rem;
        margin: 1.5rem 0;
    }
    
    .store-gametype-buttons p {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    a.store_gametype_link {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    /* Advertisement blocks mobile */
    .wp-block-columns {
        flex-direction: column;
        padding: 1.5rem !important;
        gap: 1.5rem;
    }
    
    .wp-block-columns .wp-block-column h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem !important;
    }
    
    .wp-block-columns .wp-block-column p,
    .wp-block-columns .wp-block-column ul {
        font-size: 0.95rem !important;
    }
}

/* ===== Dark theme ownership (migrated from overrides) ===== */
:root[data-theme="dark"] .store-gametype-buttons,
:root[data-theme="dark"] .dark-theme-info-block:not(.store-gametype-buttons),
:root[data-theme="dark"] .wp-block-columns {
    background: var(--bg-light) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] a.store_gametype_link {
    background: var(--bg-lighter) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .store-gametype-buttons p,
:root[data-theme="dark"] .dark-theme-info-block:not(.store-gametype-buttons) p,
:root[data-theme="dark"] h2[id^="faq-"],
:root[data-theme="dark"] h2[id^="faq-"] ~ h3,
:root[data-theme="dark"] h2[id^="faq-"] ~ p,
:root[data-theme="dark"] #faq ~ h3,
:root[data-theme="dark"] #faq ~ p {
    color: var(--text-gray) !important;
}

:root[data-theme="dark"] .h2n4-approved,
:root[data-theme="dark"] .h2n4-approved a {
    color: #34D399 !important;
    text-decoration-color: #34D399 !important;
}

:root[data-theme="dark"] .h2n4-approved a:hover {
    color: #6EE7B7 !important;
    text-decoration-color: #6EE7B7 !important;
}

:root[data-theme="dark"] .store-license-info {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] a.store_gametype_link:hover,
:root[data-theme="dark"] a.store_gametype_link:active {
    background: #1BAA98 !important;
    color: #F3F6F4 !important;
    border-color: #22C6AE !important;
    box-shadow: 0 4px 12px rgba(34, 198, 174, 0.24) !important;
}

:root[data-theme="dark"] .dark-theme-info-block:not(.store-gametype-buttons) b {
    color: #F87171 !important;
}

:root[data-theme="dark"] h2[id^="faq-"] {
    color: var(--text-dark) !important;
}

:root[data-theme="dark"] h2[id^="faq-"] ~ h3,
:root[data-theme="dark"] #faq ~ h3 {
    color: #D2DBD7 !important;
}

:root[data-theme="dark"] h2[id^="faq-"] ~ a,
:root[data-theme="dark"] #faq ~ a,
:root[data-theme="dark"] .article-body a:not(.button, .add-to-cart, .store_gametype_link, .article-action-link) {
    color: #45D3BE !important;
    border-bottom-color: transparent !important;
}

:root[data-theme="dark"] h2[id^="faq-"] ~ a:hover,
:root[data-theme="dark"] #faq ~ a:hover,
:root[data-theme="dark"] .article-body a:not(.button, .add-to-cart, .store_gametype_link, .article-action-link):hover {
    color: #7CE9D6 !important;
    border-bottom-color: rgba(124, 233, 214, 0.55) !important;
}

:root[data-theme="dark"] .wp-block-columns .wp-block-column h3 {
    color: var(--text-dark) !important;
}

:root[data-theme="dark"] .wp-block-columns .wp-block-column p,
:root[data-theme="dark"] .wp-block-columns .wp-block-column ul,
:root[data-theme="dark"] .wp-block-columns .wp-block-column ul li {
    color: var(--text-gray) !important;
}

:root[data-theme="dark"] .wp-block-columns .wp-block-column .article-action-link {
    color: #F8FAFC !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

/* HUD Store page hardcoded/inline light styles cleanup */
:root[data-theme="dark"] .post-4640 .article-body .store-gametype-buttons,
:root[data-theme="dark"] .post-4640 .article-body .dark-theme-info-block:not(.store-gametype-buttons),
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns {
    background: var(--bg-light) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .post-4640 .article-body .dark-theme-info-block:not(.store-gametype-buttons) p,
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns .wp-block-column p,
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns .wp-block-column ul,
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns .wp-block-column ul li {
    color: var(--text-gray) !important;
}

:root[data-theme="dark"] .post-4640 .article-body .dark-theme-info-block:not(.store-gametype-buttons) a,
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns .wp-block-column a:not(.article-action-link) {
    color: var(--text-accent) !important;
}

:root[data-theme="dark"] .post-4640 .article-body .responsive-tabs .responsive-tabs__list {
    background: transparent !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .post-4640 .article-body .responsive-tabs .responsive-tabs__list__item {
    background: var(--bg-lighter) !important;
    color: var(--text-gray) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .post-4640 .article-body .responsive-tabs .responsive-tabs__list__item:hover,
:root[data-theme="dark"] .post-4640 .article-body .responsive-tabs .responsive-tabs__list__item--active,
:root[data-theme="dark"] .post-4640 .article-body .responsive-tabs .responsive-tabs__list__item--active:hover {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .post-4640 .article-body .responsive-tabs h2.tabtitle,
:root[data-theme="dark"] .post-4640 .article-body .responsive-tabs .responsive-tabs__panel {
    background: var(--bg-light) !important;
    color: var(--text-gray) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .post-4640 .article-body a.button:not(.add-to-cart):not(.article-action-link) {
    background: linear-gradient(135deg, #0F766E 0%, #115E59 100%) !important;
    border-color: rgba(94, 234, 212, 0.34) !important;
    color: #FFFFFF !important;
}

:root[data-theme="dark"] .post-4640 .article-body a.button:not(.add-to-cart):not(.article-action-link):hover {
    background: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%) !important;
}

:root[data-theme="dark"] .post-4640 .article-body .secure-payment {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .post-4640 .article-body a.article-action-link,
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns .wp-block-column .article-action-link {
    background: linear-gradient(135deg, #0F766E 0%, #115E59 100%) !important;
    border: 1px solid rgba(94, 234, 212, 0.34) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

:root[data-theme="dark"] .post-4640 .article-body a.article-action-link:hover,
:root[data-theme="dark"] .post-4640 .article-body a.article-action-link:focus,
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns .wp-block-column .article-action-link:hover,
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns .wp-block-column .article-action-link:focus {
    background: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%) !important;
    border-color: rgba(110, 231, 207, 0.46) !important;
    color: #FFFFFF !important;
}

:root[data-theme="dark"] .post-4640 .article-body a.article-action-link:active,
:root[data-theme="dark"] .post-4640 .article-body .wp-block-columns .wp-block-column .article-action-link:active {
    background: linear-gradient(135deg, #0F766E 0%, #0B5A54 100%) !important;
}