/* 
Mobile Pages - Token Purchasing
Token purchasing page optimization and compact mobile styles
*/

/* ===== TOKEN PURCHASING PAGE MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Pricing page main container mobile optimization */
    .pricing-container {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Pricing header mobile optimization */
    .pricing-header {
        text-align: center !important;
        padding: var(--hh-space-xl) 0 var(--hh-space-lg) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .pricing-header h1 {
        font-size: var(--hh-type-h1-size) !important;
        line-height: var(--hh-type-h1-lh) !important;
        margin-bottom: var(--hh-space-md) !important;
        color: var(--hh-color-text-primary) !important;
    }
    
    .pricing-header p {
        font-size: var(--hh-type-body-size) !important;
        line-height: var(--hh-type-body-lh) !important;
        color: var(--hh-color-text-secondary) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    /* Pricing grid mobile optimization */
    .pricing-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--hh-space-lg) !important;
        max-width: none !important;
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    /* Pricing card mobile optimization */
    .pricing-card {
        background: var(--hh-color-base-white) !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-lg) !important;
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        position: relative !important;
        box-shadow: var(--hh-shadow-md) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    .pricing-card.popular {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: none !important; /* Remove desktop scale effect on mobile */
    }
    
    .pricing-card.current-plan {
        border-color: var(--hh-color-brand-sage) !important;
        background: rgba(129, 178, 154, 0.05) !important;
    }
    
    /* Popular badge mobile optimization */
    .popular-badge {
        position: absolute !important;
        top: -12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        padding: var(--hh-space-xs) var(--hh-space-md) !important;
        border-radius: var(--hh-radius-full) !important;
        font-size: var(--hh-type-small-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        white-space: nowrap !important;
        box-shadow: var(--hh-shadow-sm) !important;
    }
    
    /* Plan header mobile optimization */
    .plan-header {
        text-align: center !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .plan-name {
        font-size: var(--hh-type-h2-size) !important;
        font-weight: var(--hh-type-h2-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-bottom: var(--hh-space-sm) !important;
    }
    
    .plan-description {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    /* Plan pricing mobile optimization */
    .plan-price {
        text-align: center !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .price-amount {
        font-size: 48px !important; /* Large, readable price */
        font-weight: var(--hh-type-h1-weight) !important;
        color: var(--hh-color-brand-primary) !important;
        line-height: 1 !important;
        margin-bottom: var(--hh-space-xs) !important;
    }
    
    .price-currency {
        font-size: var(--hh-type-h3-size) !important;
        vertical-align: top !important;
    }
    
    .price-period {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    .tokens-included {
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-primary) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        margin-top: var(--hh-space-sm) !important;
    }
    
    /* Plan features mobile optimization */
    .plan-features {
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    .plan-features ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .plan-features li {
        padding: var(--hh-space-sm) 0 !important;
        font-size: var(--hh-type-body-size) !important;
        color: var(--hh-color-text-primary) !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: var(--hh-space-sm) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .plan-features li:last-child {
        border-bottom: none !important;
    }
    
    .plan-features li::before {
        content: "✓" !important;
        color: var(--hh-color-brand-sage) !important;
        font-weight: bold !important;
        font-size: var(--hh-type-lg-size) !important;
        flex-shrink: 0 !important;
    }
    
    /* Purchase button mobile optimization */
    .purchase-btn {
        width: 100% !important;
        padding: var(--hh-space-lg) var(--hh-space-xl) !important;
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 56px !important; /* Generous touch target */
        border-radius: var(--hh-radius-md) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .purchase-btn:not(.current-plan) {
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .purchase-btn:not(.current-plan):hover {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-1px) !important;
    }
    
    .purchase-btn:not(.current-plan):active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    .purchase-btn.current-plan {
        background: var(--hh-color-brand-sage) !important;
        color: var(--hh-color-text-inverse) !important;
        cursor: not-allowed !important;
        opacity: 0.8 !important;
    }
    
    .purchase-btn:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
    
    /* Loading state for purchase buttons */
    .purchase-btn.loading {
        opacity: 0.7 !important;
        pointer-events: none !important;
    }
    
    .purchase-btn.loading::after {
        content: "" !important;
        width: 20px !important;
        height: 20px !important;
        border: 2px solid transparent !important;
        border-top: 2px solid currentColor !important;
        border-radius: 50% !important;
        animation: spin 1s linear infinite !important;
        margin-left: var(--hh-space-sm) !important;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* FAQ section mobile optimization */
    .faq-section {
        margin-top: var(--hh-space-2xl) !important;
        padding: var(--hh-space-xl) 0 !important;
        border-top: 1px solid var(--hh-color-borders-default) !important;
    }
    
    .faq-title {
        text-align: center !important;
        font-size: var(--hh-type-h2-size) !important;
        font-weight: var(--hh-type-h2-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin-bottom: var(--hh-space-xl) !important;
    }
    
    .faq-item {
        border: 1px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-md) !important;
        overflow: hidden !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .faq-question {
        width: 100% !important;
        padding: var(--hh-space-lg) var(--hh-space-lg) !important;
        background: none !important;
        border: none !important;
        text-align: left !important;
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-h4-weight) !important;
        color: var(--hh-color-text-primary) !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 60px !important; /* Touch target compliance */
        touch-action: manipulation !important;
        transition: all 0.2s ease !important;
    }
    
    .faq-question:hover {
        background: var(--hh-color-base-cloud) !important;
    }
    
    .faq-icon {
        font-size: var(--hh-type-h2-size) !important;
        font-weight: 300 !important;
        color: var(--hh-color-brand-sage) !important;
        transition: transform 0.2s ease !important;
        flex-shrink: 0 !important;
        margin-left: var(--hh-space-sm) !important;
    }
    
    .faq-item.active .faq-icon {
        transform: rotate(45deg) !important;
    }
    
    .faq-answer {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        background: var(--hh-color-base-offWhite) !important;
    }
    
    .faq-item.active .faq-answer {
        max-height: 300px !important; /* Increased for mobile content */
    }
    
    .faq-answer p {
        padding: var(--hh-space-lg) !important;
        margin: 0 !important;
        font-size: var(--hh-type-body-size) !important;
        line-height: var(--hh-type-body-lh) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Error and success message mobile optimization */
    .error-message,
    .success-message {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-lg) !important;
        text-align: center !important;
        font-size: var(--hh-type-body-size) !important;
        line-height: var(--hh-type-body-lh) !important;
    }
    
    .error-message {
        background: rgba(254, 226, 226, 1) !important;
        border: 1px solid rgba(254, 202, 202, 1) !important;
        color: #dc2626 !important;
    }
    
    .success-message {
        background: rgba(209, 250, 229, 1) !important;
        border: 1px solid rgba(187, 247, 208, 1) !important;
        color: #059669 !important;
    }
    
    /* Stripe payment form mobile optimization */
    .stripe-form-container {
        background: var(--hh-color-base-white) !important;
        border-radius: var(--hh-radius-lg) !important;
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        border: 1px solid var(--hh-color-borders-default) !important;
        margin-top: var(--hh-space-lg) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .stripe-form-container h3 {
        font-size: var(--hh-type-h3-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-text-primary) !important;
        text-align: center !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .stripe-element {
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        border-radius: var(--hh-radius-md) !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        margin-bottom: var(--hh-space-lg) !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        background: var(--hh-color-base-white) !important;
    }
    
    .stripe-element:focus-within {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1) !important;
    }
    
    /* Payment button styling */
    .stripe-submit-btn {
        width: 100% !important;
        padding: var(--hh-space-lg) !important;
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 56px !important;
        background: var(--hh-color-brand-primary) !important;
        color: var(--hh-color-text-inverse) !important;
        border: none !important;
        border-radius: var(--hh-radius-md) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .stripe-submit-btn:hover:not(:disabled) {
        background: var(--hh-color-brand-primary-600) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        transform: translateY(-1px) !important;
    }
    
    .stripe-submit-btn:active:not(:disabled) {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    .stripe-submit-btn:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
}

/* ===== TOKEN PURCHASING PAGE COMPACT MOBILE ===== */
@media (max-width: 480px) {
    /* Ultra-compact for very small screens */
    .pricing-container {
        padding: var(--hh-space-sm) var(--hh-space-xs) !important;
    }
    
    .pricing-header {
        padding: var(--hh-space-lg) 0 var(--hh-space-md) !important;
    }
    
    .pricing-header h1 {
        font-size: var(--hh-type-h2-size) !important;
        line-height: var(--hh-type-h2-lh) !important;
    }
    
    .pricing-grid {
        gap: var(--hh-space-md) !important;
    }
    
    /* More compact pricing cards */
    .pricing-card {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .plan-name {
        font-size: var(--hh-type-h3-size) !important;
    }
    
    .price-amount {
        font-size: 40px !important;
    }
    
    .purchase-btn {
        min-height: 52px !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
    }
    
    /* More compact FAQ section */
    .faq-section {
        padding: var(--hh-space-lg) 0 !important;
        margin-top: var(--hh-space-xl) !important;
    }
    
    .faq-title {
        font-size: var(--hh-type-h3-size) !important;
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .faq-question {
        padding: var(--hh-space-md) !important;
        min-height: 52px !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    .faq-answer {
        max-height: 250px !important;
    }
    
    .faq-answer p {
        padding: var(--hh-space-md) !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    /* More compact Stripe form */
    .stripe-form-container {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .stripe-element {
        min-height: 44px !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
    }
    
    .stripe-submit-btn {
        min-height: 52px !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-md) !important;
    }
}