/* Simple Mobile CSS untuk Voucher */

/* Global mobile optimizations */
@media (max-width: 768px) {
    /* Simple voucher code styling */
    .voucher-code-container {
        padding: 1rem;
        margin: 1rem 0;
        text-align: center;
    }
    
    .voucher-code {
        font-size: 1.4rem !important;
        padding: 1rem !important;
        background: #007bff !important;
        color: white !important;
        border: 2px dashed white !important;
        border-radius: 8px !important;
        font-family: monospace !important;
        font-weight: bold !important;
        letter-spacing: 1px !important;
        line-height: 1.4 !important;
        word-break: break-all !important;
        margin: 0.5rem 0 !important;
        box-shadow: none !important;
        position: static !important;
    }

    .voucher-code::before,
    .voucher-code::after {
        display: none !important;
    }

    /* Action buttons layout */
    .action-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin: 1rem 0 !important;
    }

    .btn-action {
        flex: 1 !important;
        min-width: calc(33.33% - 0.5rem) !important;
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
        position: static !important;
    }

    .btn-action::before,
    .btn-action::after {
        display: none !important;
    }

    .campaign-header {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1rem !important;
    }

    .campaign-header h1 {
        font-size: 1.5rem !important;
    }

    .p-4 {
        padding: 1rem !important;
    }

    .main-container {
        margin: 0.5rem !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .voucher-code {
        font-size: 1.1rem !important;
        padding: 0.8rem !important;
        letter-spacing: 1px !important;
    }

    .voucher-code-container h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.8rem !important;
    }

    .btn-action {
        font-size: 0.75rem !important;
        padding: 8px 6px !important;
    }

    .campaign-header h1 {
        font-size: 1.3rem !important;
    }
}