/* style/blog-mobile-app-guide.css */

/* Custom Colors */
:root {
    --page-bg: #08160F;
    --card-bg: #11271B;
    --text-main: #F2FFF6;
    --text-secondary: #A7D9B8;
    --button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
    --border-color: #2E7A4E;
    --glow-color: #57E38D;
    --gold-color: #F2C14E;
    --divider-color: #1E3A2A;
    --deep-green: #0A4B2C;
}

.page-blog-mobile-app-guide {
    background-color: var(--page-bg);
    color: var(--text-main);
    font-family: Arial, sans-serif;
    line-height: 1.6;
    font-size: 1rem;
}

/* Base container styles */
.page-blog-mobile-app-guide__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.page-blog-mobile-app-guide__container--flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

/* Section styling */
.page-blog-mobile-app-guide__section {
    padding: 60px 0;
    text-align: center;
}

.page-blog-mobile-app-guide__section-title {
    font-size: clamp(1.8rem, 2.5vw, 2.5rem); /* Using clamp for H1/H2 as per rule */
    color: var(--text-main);
    margin-bottom: 20px;
    font-weight: bold;
    line-height: 1.2;
}

.page-blog-mobile-app-guide__section-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto 40px auto;
}

/* Hero Section */
.page-blog-mobile-app-guide__hero-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column; /* Enforce image on top, text below */
    align-items: center;
    padding-top: 10px; /* Small top padding, body handles header offset */
    padding-bottom: 60px;
    overflow: hidden;
}

.page-blog-mobile-app-guide__hero-image-wrapper {
    width: 100%;
    max-width: 100%; /* Ensure it takes full width */
    overflow: hidden;
}

.page-blog-mobile-app-guide__hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.page-blog-mobile-app-guide__hero-content {
    max-width: 900px;
    margin-top: 40px;
    text-align: center;
    padding: 0 20px;
}

.page-blog-mobile-app-guide__main-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem); /* Using clamp for H1 */
    color: var(--text-main);
    margin-bottom: 20px;
    font-weight: bold;
    line-height: 1.2;
}

.page-blog-mobile-app-guide__hero-description {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

/* Buttons */
.page-blog-mobile-app-guide__cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    width: 100%; /* For responsive button container */
    max-width: 100%; /* For responsive button container */
    box-sizing: border-box;
    overflow: hidden;
}

.page-blog-mobile-app-guide__cta-buttons--centered {
    margin-top: 50px;
}

.page-blog-mobile-app-guide__btn-primary,
.page-blog-mobile-app-guide__btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    box-sizing: border-box; /* Ensure padding is included in width */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Allow text to break words */
    max-width: 100%; /* Ensure button does not overflow */
}

.page-blog-mobile-app-guide__btn-primary {
    background: var(--button-gradient);
    color: var(--text-main);
    box-shadow: 0 0 15px rgba(87, 227, 141, 0.4); /* Glow effect */
}

.page-blog-mobile-app-guide__btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(87, 227, 141, 0.6);
}

.page-blog-mobile-app-guide__btn-secondary {
    background: transparent;
    color: var(--glow-color);
    border: 2px solid var(--glow-color);
}

.page-blog-mobile-app-guide__btn-secondary:hover {
    background: rgba(87, 227, 141, 0.1);
    color: var(--text-main);
    transform: translateY(-2px);
}

/* Grid for benefits section */
.page-blog-mobile-app-guide__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    text-align: left;
}

.page-blog-mobile-app-guide__card {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: var(--text-main); /* Ensure text is main color */
}

.page-blog-mobile-app-guide__card-title {
    font-size: 1.4rem;
    color: var(--text-main);
    margin-bottom: 15px;
    font-weight: bold;
}

.page-blog-mobile-app-guide__card-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

.page-blog-mobile-app-guide__image-full {
    width: 100%;
    height: auto;
    display: block;
    margin: 50px auto 0 auto;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

/* Download Guide Steps */
.page-blog-mobile-app-guide__step-by-step {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
    text-align: left;
}

.page-blog-mobile-app-guide__step-item {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-blog-mobile-app-guide__step-title {
    font-size: 1.3rem;
    color: var(--glow-color);
    margin-bottom: 10px;
    font-weight: bold;
}

.page-blog-mobile-app-guide__step-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* App Features */
.page-blog-mobile-app-guide__app-features .page-blog-mobile-app-guide__section-description {
    margin-bottom: 60px;
}

.page-blog-mobile-app-guide__feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.page-blog-mobile-app-guide__feature-item {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.page-blog-mobile-app-guide__feature-icon {
    width: 100%; /* Ensure it's not a small icon, use full width of slot */
    max-width: 250px; /* Example max-width for feature icon within card */
    height: auto;
    object-fit: contain;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid var(--divider-color);
}

.page-blog-mobile-app-guide__feature-title {
    font-size: 1.3rem;
    color: var(--text-main);
    margin-bottom: 10px;
    font-weight: bold;
}

.page-blog-mobile-app-guide__feature-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Games on App */
.page-blog-mobile-app-guide__game-list {
    list-style: none;
    padding: 0;
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.page-blog-mobile-app-guide__game-item {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.page-blog-mobile-app-guide__game-link {
    display: block;
    padding: 25px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s ease;
}

.page-blog-mobile-app-guide__game-link:hover {
    background-color: rgba(var(--glow-color), 0.05);
}

.page-blog-mobile-app-guide__game-title {
    font-size: 1.3rem;
    color: var(--text-main);
    margin-bottom: 10px;
    font-weight: bold;
}

.page-blog-mobile-app-guide__game-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* FAQ Section */
.page-blog-mobile-app-guide__faq-list {
    max-width: 900px;
    margin: 40px auto 0 auto;
    text-align: left;
}

.page-blog-mobile-app-guide__faq-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.page-blog-mobile-app-guide__faq-item[open] {
    background-color: var(--deep-green);
    border-color: var(--glow-color);
}

.page-blog-mobile-app-guide__faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--text-main);
    cursor: pointer;
    background-color: transparent;
    border-bottom: 1px solid var(--divider-color);
    list-style: none; /* Remove default marker */
}

.page-blog-mobile-app-guide__faq-question::-webkit-details-marker {
    display: none; /* Remove default marker for WebKit */
}

.page-blog-mobile-app-guide__faq-item[open] .page-blog-mobile-app-guide__faq-question {
    border-bottom-color: var(--glow-color);
}

.page-blog-mobile-app-guide__faq-qtext {
    flex-grow: 1;
    margin-right: 15px;
}

.page-blog-mobile-app-guide__faq-toggle {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.page-blog-mobile-app-guide__faq-item[open] .page-blog-mobile-app-guide__faq-toggle {
    transform: rotate(45deg); /* Rotate plus to cross */
}

.page-blog-mobile-app-guide__faq-answer {
    padding: 20px 25px 25px 25px;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Final CTA Section */
.page-blog-mobile-app-guide__final-cta {
    background-color: var(--deep-green);
    padding: 80px 0;
}

.page-blog-mobile-app-guide__cta-content {
    text-align: left;
    flex: 1;
}

.page-blog-mobile-app-guide__cta-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    color: var(--text-main);
    margin-bottom: 15px;
    font-weight: bold;
}

.page-blog-mobile-app-guide__cta-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .page-blog-mobile-app-guide__container--flex {
        flex-direction: column;
        text-align: center;
    }
    .page-blog-mobile-app-guide__cta-content {
        text-align: center;
        margin-bottom: 30px;
    }
    .page-blog-mobile-app-guide__cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .page-blog-mobile-app-guide__btn-primary,
    .page-blog-mobile-app-guide__btn-secondary {
        width: 100%;
        max-width: 400px; /* Limit button width on tablet */
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .page-blog-mobile-app-guide__section {
        padding: 40px 0;
    }
    .page-blog-mobile-app-guide__hero-section {
        padding-bottom: 40px;
    }
    .page-blog-mobile-app-guide__main-title {
        font-size: 2rem;
    }
    .page-blog-mobile-app-guide__hero-description {
        font-size: 1rem;
    }
    .page-blog-mobile-app-guide__section-title {
        font-size: 1.8rem;
    }
    .page-blog-mobile-app-guide__section-description {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    /* Images responsive */
    .page-blog-mobile-app-guide img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    .page-blog-mobile-app-guide__section,
    .page-blog-mobile-app-guide__card,
    .page-blog-mobile-app-guide__container,
    .page-blog-mobile-app-guide__hero-image-wrapper,
    .page-blog-mobile-app-guide__cta-buttons,
    .page-blog-mobile-app-guide__feature-item,
    .page-blog-mobile-app-guide__step-item,
    .page-blog-mobile-app-guide__game-item {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    .page-blog-mobile-app-guide__hero-section {
        padding-top: 10px !important; /* body already handles --header-offset */
    }

    /* Buttons responsive */
    .page-blog-mobile-app-guide__btn-primary,
    .page-blog-mobile-app-guide__btn-secondary,
    .page-blog-mobile-app-guide a[class*="button"],
    .page-blog-mobile-app-guide a[class*="btn"] {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 10px; /* Add space between stacked buttons */
    }
    .page-blog-mobile-app-guide__cta-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    .page-blog-mobile-app-guide__cta-buttons--centered .page-blog-mobile-app-guide__btn-primary,
    .page-blog-mobile-app-guide__cta-buttons--centered .page-blog-mobile-app-guide__btn-secondary {
        max-width: 100% !important; /* Ensure buttons in centered group also take full width */
    }

    /* FAQ responsive */
    .page-blog-mobile-app-guide__faq-question {
        font-size: 1rem;
        padding: 15px 20px;
    }
    .page-blog-mobile-app-guide__faq-answer {
        padding: 15px 20px 20px 20px;
        font-size: 0.95rem;
    }
}

/* Ensure no filter on images */
.page-blog-mobile-app-guide img {
    filter: none !important;
}

/* Content area image size check (min 200px) */
/* This rule is designed to ensure images within the content area are not styled to be too small.
   It applies to any image within the main content, regardless of its specific class. */
.page-blog-mobile-app-guide img {
    min-width: 200px;
    min-height: 200px;
}

/* Override for specific smaller images if they exist and are allowed (e.g., logo, social icons in shared)
   However, the prompt strictly forbids small icons in content, so this is a general safeguard for shared elements.
   For this specific page, all images must be >= 200px. */
.shared-header__logo img,
.shared-footer__social-icon img,
.shared-footer__payment-icon img {
    min-width: unset;
    min-height: unset;
}