/* ============================================
   BRAND NEW DROPDOWN IMPLEMENTATION
   YouTube & Spotify Only - Desktop Mode
   Built from scratch
   ============================================ */

/* Desktop only - min-width: 769px */
@media (min-width: 769px) {

    /* New dropdown container */
    .plan-duration-selector {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-bottom: 14px !important;
        position: relative !important;
    }

    /* The select element - Compact horizontal, Tall vertical */
    .plan-duration-selector select {
        /* Compact width */
        width: auto !important;
        max-width: 50% !important;
        min-width: 120px !important;

        /* Tall vertical padding */
        padding: 16px 32px 16px 14px !important;

        /* Typography */
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        text-align: center !important;

        /* Remove default styling */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;

        /* Border and background */
        border: 2px solid rgba(0, 0, 0, 0.15) !important;
        border-radius: 10px !important;
        background: #ffffff !important;

        /* Cursor and transition */
        cursor: pointer !important;
        transition: all 0.3s ease !important;

        /* Text color - will be overridden by theme */
        color: #333333 !important;

        /* Shadow */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
    }

    /* YouTube Theme - Red - Compact & Tall */
    [data-category="youtube"] .plan-duration-selector select {
        background: #FF0000 !important;
        border: 2px solid #FF0000 !important;
        color: #ffffff !important;

        /* Custom arrow icon - White */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px !important;
    }

    [data-category="youtube"] .plan-duration-selector select:hover {
        /* No hover effects */
    }

    [data-category="youtube"] .plan-duration-selector select:focus {
        outline: none !important;
        /* No focus effects - keep same as normal state */
    }

    /* Spotify Theme - Green - Compact & Tall */
    [data-category="spotify"] .plan-duration-selector select {
        background: #1DB954 !important;
        border: 2px solid #1DB954 !important;
        color: #ffffff !important;

        /* Custom arrow icon - White */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px !important;
    }

    [data-category="spotify"] .plan-duration-selector select:hover {
        /* No hover effects */
    }

    [data-category="spotify"] .plan-duration-selector select:focus {
        outline: none !important;
        /* No focus effects - keep same as normal state */
    }

    /* Dropdown options */
    .plan-duration-selector select option {
        background: #ffffff !important;
        color: #1a1a1a !important;
        padding: 12px 16px !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
    }
}

/* Hide on mobile */
@media (max-width: 768px) {
    .plan-duration-selector {
        display: none !important;
    }
}