/* Campaign Page Responsive Styles */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;700&display=swap');

/* Base Styles */
.campaign-page-active {
    font-family: 'Noto Sans HK', 'Readex Pro', sans-serif;
    background-color: #ffffff;
    color: #333;
    line-height: 1.5;
}

/* Font Styling Rules */
/* Apply Readex Pro to English text and numbers while preserving Chinese characters */
.campaign-container {
    font-family: 'Noto Sans HK', sans-serif;
}

/* Target English text and numbers specifically */
.campaign-container h1,
.campaign-container h2,
.campaign-container h3,
.campaign-container p,
.campaign-container span,
.campaign-container div,
.campaign-container label,
.campaign-container button {
    font-family: 'Noto Sans HK', sans-serif;
}

/* Apply Readex Pro to English text using font-family fallback */
.campaign-container h1:lang(en),
.campaign-container h2:lang(en),
.campaign-container h3:lang(en),
.campaign-container p:lang(en),
.campaign-container span:lang(en),
.campaign-container div:lang(en),
.campaign-container label:lang(en),
.campaign-container button:lang(en) {
    font-family: 'Readex Pro', 'Noto Sans HK', sans-serif;
}

/* Specific targeting for English content sections */
.english-section h1,
.english-section h2,
.english-section h3,
.english-section p,
.english-section span,
.english-section div,
.english-section label,
.english-section button {
    font-family: 'Readex Pro', 'Noto Sans HK', sans-serif;
}

/* Target numbers specifically */
.campaign-container .highlight,
.campaign-container .code,
.campaign-container .validity,
.campaign-container .license-text,
.campaign-container .step,
.campaign-container .note-list li,
.campaign-container .image-counter {
    font-family: 'Readex Pro', 'Noto Sans HK', sans-serif;
}

/* Mobile-specific English text */
.english {
    font-family: 'Readex Pro', sans-serif;
}

/* Chinese text preservation */
.chinese {
    font-family: 'Noto Sans HK', sans-serif;
}

.campaign-body {
    margin: 0px;
    height: 100%;
}

/* Main Campaign Container - Fully Responsive */
.campaign-container {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Tablet Styles - 550px and above */
@media (min-width: 550px) {
    .campaign-container {
        max-width: none;
    }

}

/* Responsive Visibility Classes */
.mobile-only {
    display: block;
}

.tablet-only {
    display: none;
}

@media (min-width: 550px) {
    .mobile-only {
        display: none !important;
    }

    .tablet-only {
        display: block !important;
    }
}

/* ===== MOBILE ONLY ELEMENTS (under 550px) ===== */

.chinese {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    font-size: 12px;
    /* line-height: 1.5; */
    color: #404040;
}

.english {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 400;
    font-size: 12px;
    /* line-height: 1.17; */
    color: #374151;
}

/* Download Header - Mobile Only */
.download-header {
    height: 71px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.download-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 92.27vw;
    /* ~346px at 375px, but scales */
}

.app-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-download {
    margin: 0;
}

.download-btn-campaign {
    background-color: #02432c;
    border-radius: 100px;
    width: 118px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.download-btn-campaign:hover {
    background-color: #035d3b;
}

.btn-text {
    color: #3ff693;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    font-family: 'Readex Pro', sans-serif;
}

/* Logo Header - Mobile Only */
.logo-header {
    height: 72px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    position: relative;
}

.carbon-wallet-logo {
    margin-left: 16px;
    width: 52.53vw;
    height: 6.21vw;
}

.carbon-wallet-logo-png {
    width: 52.53vw;
    height: 6.21vw;
}

.carbon-wallet-logo svg {
    width: 100%;
    height: 100%;
}

/* Separator Line */
.separator-line {
    height: 1px;
    background-color: #DFDFDF;
    width: 100%;
}

/* ===== TABLET ONLY ELEMENTS (550px and above) ===== */

/* Tablet Header */
.tablet-header {
    background-color: #ffffff;
    padding: 0;
}

.tablet-download-section {
    height: 71px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    max-width: none;
}

.tablet-app-info {
    display: flex;
    align-items: center;
    gap: 1.61vw;
    /* Responsive gap */
    flex: 1;
}

.tablet-app-icon {
    width: 6.18vw;
    /* Responsive size */
    height: 6.18vw;
    border-radius: 1.38vw;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    min-width: 46px;
    /* Minimum size */
    min-height: 46px;
}

.tablet-app-text {
    font-size: 2.42vw;
    /* Responsive text */
    line-height: 1.2;
    color: #374151;
}

.tablet-chinese {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    margin-right: 0.54vw;
    font-size: 2vw;
}

.tablet-english {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 400;
    margin-right: 0.54vw;
    font-size: 2vw;
}

.tablet-subtitle {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    font-size: 1.8vw;
}

@media (min-width: 550px) and (max-width: 999px) {
    .tablet-chinese,
    .tablet-english {
        font-size: 20px; /* Larger minimum size for medium screens */
    }
    
    .tablet-subtitle {
        font-size: 18px; /* Larger minimum size for medium screens */
    }
}

@media (min-width: 1000px) and (max-width: 1169px) {
    .tablet-chinese,
    .tablet-english {
        font-size: 22px; /* Larger medium size for larger screens */
    }
    
    .tablet-subtitle {
        font-size: 20px; /* Larger medium size for larger screens */
    }
}

@media (min-width: 1170px) {
    .tablet-app-text {
        font-size: 2.42vw;
    }
    
    .tablet-chinese,
    .tablet-english {
        font-size: 26px; /* Larger maximum size for very wide screens */
    }
    
    .tablet-subtitle {
        font-size: 22px; /* Larger maximum size for very wide screens */
    }
}

.tablet-download-btn {
    background-color: #02432c;
    border-radius: 100px;
    padding: 0 27px;
    height: 44px;
    min-width: 160px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tablet-download-btn:hover {
    background-color: #035d3b;
}

.tablet-btn-text {
    color: #3ff693;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    font-family: 'Readex Pro', sans-serif;
}

.tablet-separator-line {
    height: 1px;
    background-color: #DFDFDF;
    width: 100%;
}

.tablet-logo-section {
    height: 71px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 0 0 4vw;
}

.tablet-carbon-wallet-logo {
    width: 26.48vw;
    /* Responsive logo size */
    height: 3.13vw;
    min-width: 140px;
    /* Minimum logo size */
    min-height: 17px;
}

.tablet-carbon-wallet-logo svg {
    width: 100%;
    height: 100%;
}

/* ===== SHARED ELEMENTS - RESPONSIVE ===== */



/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100vw;
    aspect-ratio: 2700 / 1800;
}

/* Slider Container */
.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    max-width: 100vw;
    max-height: 100vh;
}

.slider-track {
    display: flex !important;
    flex-direction: row !important;
    width: 200% !important;
    height: 100%;
    transition: transform 0.3s ease-out;
    cursor: grab;
    user-select: none;
    position: relative;
}

.slide {
    width: 50% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    flex-basis: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    position: relative;
}

@media (min-width: 550px) {
    .hero-section {
        /* Maintains 2700x1800 aspect ratio on all screen sizes */
        width: 100%;
        height: auto;
        max-width: 100vw;
    }
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 2700 / 1800;
}

.image-counter {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-family: 'Readex Pro', sans-serif;
    font-size: 12px;
    line-height: 1.17;
    padding: 4px 12px;
    border-radius: 100px;
    z-index: 10;
}

@media (min-width: 550px) {
    .image-counter {
        bottom: 16px;
        right: 16px;
        font-size: 12px;
        line-height: 1.17;
        padding: 4px 12px;
    }
}

/* Main Content */
.main-content {
    padding: 5.33vw 4.27vw;
    /* ~20px 16px at 375px */
    display: flex;
    flex-direction: column;
    gap: 5.33vw;
    /* ~20px at 375px */
}

@media (min-width: 550px) {
    .main-content {
        padding: 5.38vw 4.3vw;
        /* Responsive padding for tablet */
        gap: 5.38vw;
        max-width: 91.4vw;
        /* ~680px at 744px tablet */
        margin: 0 auto;
        min-padding: 24px;
    }
}

/* Campaign Title */
.campaign-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 550px) {
    .campaign-title {
        gap: 16px;
    }
}

.title-content h1 {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #02432c;
    margin: 0;
}

@media (min-width: 550px) {
    .title-content h1 {
        font-size: 3.23vw;
        /* ~24px at 744px tablet */
    }
}

.title-content .highlight {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 700;
}

.validity {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.29;
    color: #878787;
    margin-top: 8px;
}

@media (min-width: 550px) {
    .validity {
        font-size: 2.69vw;
        /* ~20px at 744px tablet */
        line-height: 2;
    }
}

.validity span {
    font-family: 'Readex Pro', sans-serif;
}

/* Promotion Box */
.promotion-box {
    position: relative;
    background-color: #fffcf5;
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    min-height: 128px;
}

@media (min-width: 550px) {
    .promotion-box {
        border-radius: 3.23vw;
        /* ~24px at 744px tablet */
        padding: 4.3vw 3.23vw;
        /* ~32px 24px at 744px */
        gap: 2.15vw;
        /* ~16px at 744px */
        min-height: 35.35vw;
        /* ~263px at 744px */
    }
}

.promotion-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (min-width: 550px) {
    .promotion-text {
        gap: 1.08vw;
        /* ~8px at 744px tablet */
    }
}

.promotion-text p {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    color: #374151;
    margin-bottom: 0;
    margin-top: 0;
}

@media (min-width: 550px) {
    .promotion-text p {
        font-size: 3.23vw;
        /* ~24px at 744px tablet */
        line-height: 1.67;
    }
}

.promotion-text .code {
    font-family: 'Readex Pro', sans-serif;
}

.promotion-text .step {
    white-space: pre-wrap;
}

.scroll-notice {
    margin: 0;
}

/* Details Section */
.details-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 550px) {
    .details-section {
        gap: 5.38vw;
        /* ~40px at 744px tablet */
    }
}

.details-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (min-width: 550px) {
    .details-header {
        height: 100px;
        gap: 3.23vw;
    }
}

.green-bar {
    width: 1.07vw;
    /* ~4px at 375px */
    height: 5.33vw;
    /* ~20px at 375px */
    background-color: #3ff693;
    border-radius: 100px;
    flex-shrink: 0;
    min-width: 3px;
    min-height: 16px;
}

@media (min-width: 550px) {
    .green-bar {
        width: 1.08vw;
        /* ~8px at 744px */
        height: 5.38vw;
        /* ~40px at 744px */
        min-width: 6px;
        min-height: 30px;
    }
}

.details-header h2 {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    font-size: 4.8vw;
    /* ~18px at 375px */
    line-height: normal;
    color: #02432c;
    margin: 0;
}

@media (min-width: 550px) {
    .details-header h2 {
        font-size: 3.23vw;
        /* ~24px at 744px */
    }
}

.details-content {
    display: flex;
    flex-direction: column;
    gap: 3.2vw;
    /* ~12px at 375px */
    width: 100%;
}

@media (min-width: 550px) {
    .details-content {
        gap: 3.23vw;
        /* ~24px at 744px */
    }
}

.details-content p {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    font-size: 3.73vw;
    /* ~14px at 375px */
    line-height: 1.43;
    color: #374151;
    margin-bottom: 0;
    margin-top: 0;
}

@media (min-width: 550px) {
    .details-content p {
        font-size: 2.69vw;
        /* ~20px at 744px */
        line-height: 2;
    }
}

.details-content h3 {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    color: #374151;
    margin-bottom: 4px;
    margin-top: 24px;
}

@media (min-width: 550px) {
    .details-content h3 {
        font-size: 3.23vw;
        /* ~24px at 744px */
        line-height: 1.67;
    }
}

.details-content span {
    font-family: 'Readex Pro', sans-serif;
}

.step {
    white-space: pre-wrap;
}

.separator-line-gray-2 {
    height: auto;
    background-color: #DFDFDF;
    border-radius: 30px;
    width: 6px;
    margin: 0;
    margin-right: 12px;
    min-height: 2px;
    min-width: 4px;
    align-self: stretch;
    flex-shrink: 0;
    display: block;
    position: relative;
   
}

.separator-line-gray {
    height: 3px;
    width: 6.4vw;
    /* ~24px at 375px */
    background-color: #DFDFDF;
    border-radius: 1.5px;
    transform: rotate(90deg);
    margin: 0;
    margin-left: -8px;
    min-height: 2px;
    min-width: 20px;
}

@media (min-width: 550px) {
    .separator-line-gray {
        height: 0.81vw;
        /* ~6px at 744px */
        border-radius: 0.4vw;
        /* ~3px at 744px */
        width: 6.45vw;
        /* ~48px at 744px */
        margin: 3.23vw 0;
        /* ~24px 0 at 744px */
        min-height: 4px;
        min-width: 32px;
    }
    
   
}

.license-text {
    font-size: 3.73vw;
    /* ~14px at 375px */
    line-height: 1.43;
}

@media (min-width: 550px) {
    .license-text {
        font-size: 2.69vw;
        /* ~20px at 744px */
        line-height: 2;
    }
}

.row-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}


/* Link styling */
.link-text {
    color: #076980;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-decoration-style: solid;
    text-underline-position: from-font;
}

.link-text:hover {
    color: #054a5b;
}

/* Note list styling */
.note-list {
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    color: #404040;
}

@media (min-width: 550px) {
    .note-list {
        margin-left: 4.03vw;
        /* ~30px at 744px */
    }
}

.note-list li {
    /* margin-bottom: 3.2vw; */
    /* ~12px at 375px */
    font-size: 3.73vw;
    /* ~14px at 375px */
    line-height: 1.43;
}

@media (min-width: 550px) {
    .note-list li {
        /* ~24px at 744px */
        font-size: 2.69vw;
        /* ~20px at 744px */
        line-height: 2;
    }
}

/* Scroll notice */
.scroll-notice {
    margin: 0;
}

@media (min-width: 550px) {
    .scroll-notice {
        /* margin: 5.38vw 0; */
        /* ~40px 0 at 744px */
        /* padding: 4.3vw; */
    }
}

.scroll-notice p {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.29;
    color: #878787;
    margin: 0;
}

@media (min-width: 550px) {
    .scroll-notice p {
        font-size: 20px;
        line-height: 1.25;
    }
}

/* Content separator between Chinese and English */
.content-separator {
    height: 1px;
    background-color: #DFDFDF;
    width: 85%;
    margin: 0;
    padding: 0 2vw;
    justify-self: center;
}

@media (min-width: 550px) {
    .content-separator {
        height: 2px;
        margin: 5.38vw 0;
        /* ~40px 0 at 744px */
    }
}

.end-separator {
    margin-bottom: 40px;
}

/* English Section */
.english-section {
    min-height: auto;
}

.english-section .title-content h1 {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #02432c;
    margin: 0;
}

@media (min-width: 550px) {
    .english-section .title-content h1 {
        font-size: 3.23vw;
        /* ~24px at 744px */
        line-height: 1.67;
    }
}

.english-section .details-header h2 {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 700;
    font-size: 4.8vw;
    /* ~18px at 375px */
    line-height: normal;
    color: #02432c;
    margin: 0;
}

@media (min-width: 550px) {
    .english-section .details-header h2 {
        font-size: 3.23vw;
        /* ~24px at 744px */
    }
}

.english-section .details-content p,
.english-section .promotion-text p {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.43;
    color: #374151;
    margin-bottom: 0;
    margin-top: 0;
}

@media (min-width: 550px) {

    .english-section .details-content p,
    .english-section .promotion-text p {
        font-size: 2.69vw;
        /* ~20px at 744px */
        line-height: 2;
    }
}

.english-section .details-content h3 {
    font-family: 'Readex Pro', sans-serif;
    font-weight: 600;
    margin-top: 12px;
}

@media (min-width: 550px) {
    .english-section .details-content h3 {
        font-size: 3.23vw;
        /* ~24px at 744px */
        line-height: 1.67;
    }
}

.english-section .validity {
    font-family: 'Readex Pro', sans-serif;
}

.english-section .license-text {
    font-family: 'Readex Pro', sans-serif;
    font-size: 3.73vw;
    /* ~14px at 375px */
    line-height: 1.43;
}

@media (min-width: 550px) {
    .english-section .license-text {
        font-size: 2.69vw;
        /* ~20px at 744px */
        line-height: 2;
    }
}

.english-section .note-list li {
    font-family: 'Readex Pro', sans-serif;
    font-size: 3.73vw;
    /* ~14px at 375px */
    line-height: 1.43;
}

@media (min-width: 550px) {
    .english-section .note-list li {
        font-size: 2.69vw;
        /* ~20px at 744px */
        line-height: 2;
    }
}

/* Loading state */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-family: 'Noto Sans HK', Arial, sans-serif;
    color: #666;
    background-color: #ffffff;
}

/* Extra small devices */
@media (max-width: 320px) {
    .campaign-container {
        padding: 0 2vw;
    }

    .main-content {
        padding: 4vw 3vw;
        gap: 4vw;
    }
}

/* Large tablets and small desktops */
@media (min-width: 900px) {
    .campaign-container {
        max-width: 900px;
        margin: 0 auto;
    }
}