/* =========================================================
    🎯 SMART COMPACT SHARE CARD (Dynamic Flex Style)
   ========================================================= */

/* मुख्य कंटेनर */
.share-card {
    background: #11141a; 
    margin: 0 auto !important;
    padding: 12px 16px 20px 16px !important;
    border-radius: 24px 24px 0 0 !important; 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    
    width: 100% !important; 
    max-width: 100% !important; 
    height: auto !important; 
    flex-shrink: 0 !important;
    
    display: flex;
    flex-direction: column;
    /* 💥 Row Gap dynamic kiya taaki buttons mix na hon */
    gap: clamp(10px, 2.5vh, 16px); 
    box-sizing: border-box;
}

/* कॉमन बटन स्टाइल - Dynamic Height & Text scaling */
.action-btn {
    border: none;
    outline: none;
    font-weight: 600;
    /* 💥 Text size scale hoga micro screens par drop nahi hoga */
    font-size: clamp(11px, 3vw, 13px);  
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.2s, opacity 0.2s;
    box-sizing: border-box;
    width: 100%;
    
    /* 💥 Exact absolute slim premium height control */
    height: 40px !important; 
    border-radius: 50px; 
}

.action-btn:active {
    transform: scale(0.96); 
}

/* --- ROW 1: Next Button (Right Aligned & Dynamic Width) --- */
.share-row-one {
    display: flex;
    justify-content: flex-end; 
    width: 100%;
    max-width: 500px; 
    margin: 0 auto;  
    margin-bottom: clamp(6px, 1.5vh, 10px) !important;
}

.next-btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5); 
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    
    /* 💥 FIX: Pura width lene se rokne ke liye auto width + content-based wrapping */
    width: auto !important;
    min-width: clamp(100px, 30vw, 140px); /* Chote screen par safe size */
    padding: 0 20px;
    height: 36px !important; 
}

/* --- ROW 2: 3-Button Grid --- */
.share-row-two {
    display: flex; /* Grid se flex layout kiya taaki fully elastic rahe */
    justify-content: space-between;
    gap: clamp(8px, 2vw, 12px); 
    width: 100%;
    max-width: 500px; 
    margin: 0 auto !important;
    margin-bottom: clamp(6px, 1.5vh, 10px) !important;
}

/* Har ek button baraabar ka space lega */
.share-row-two .action-btn {
    color: #fff;
    flex: 1 1 0%; 
    min-width: 0; /* Text shrink dynamic zone safety */
}

.whatsapp-btn {
    background: #008726;
    height: 100% !important; 
}

.download-btn {
    background: linear-gradient(135deg, #7c3aed, #6d28d9); 
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3);
    height: 100% !important;
}

.edit-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    height: 100% !important;
}

/* --- ROW 3: Big Bottom Button --- */
.share-row-three {
    width: 100%;
    max-width: 500px; 
    margin: 0 auto; 
}

.change-photo-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.change-photo-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* =========================================================
    📱 Extreamly Micro Screens Ke Liye Real-time Compression
   ========================================================= */
@media (max-width: 360px) {
    .share-card {
        padding: 10px 12px 14px 12px !important;
        gap: 8px;
    }
    .action-btn {
        height: 36px !important; 
    }
    .next-btn {
        height: 32px !important;
    }
}