/* =================================================================
   GLOBAL TOOL STYLES for HoursCalculator.cc
   यह फाइल सभी कैलकुलेटर टूल्स के लिए सामान्य स्टाइल को नियंत्रित करती है।
   This file controls the common styles for all calculator tools.
================================================================= */

/* --- 1. Main Calculator Container (मुख्य कंटेनर) --- */
/* यह वह कार्ड है जिसमें पूरा कैलकुलेटर होता है। */
.calculator-container {
    max-width: 800px; /* अधिकांश टूल्स के लिए आदर्श चौड़ाई */
    margin: 40px auto;
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: var(--border-radius, 8px);
    box-shadow: var(--box-shadow, 0 5px 20px rgba(0, 0, 0, 0.08));
    border: 2px solid black; /* 🔥 Black bold border added */
}

/* टूल का शीर्षक */
.calculator-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--dark-color, #212529);
    font-weight: 700;
}


/* --- 2. Form Elements (फॉर्म के तत्व) --- */
/* यह सभी इनपुट, लेबल और सिलेक्ट बॉक्स पर लागू होता है। */

/* लेबल के लिए स्टाइल */
.form-label {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color, #e4e7eb);
}

/* सभी इनपुट और सिलेक्ट बॉक्स */
.form-control, .form-select {
    height: 50px;
    border-radius: var(--border-radius, 8px);
    border: 1.5px solid #555555;  /* Thicker blue border for strong stroke */
    background-color: #fafbfc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);  /* Subtle black shadow */

}

/* इनपुट पर फोकस होने पर स्टाइल */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
    outline: none;
}

/* इनपुट ग्रुप के लिए स्टाइल (जैसे समय के साथ AM/PM) */
.input-group-text {
    font-weight: 500;
    background-color: #f8f9fa;
}

/* जानकारी वाला छोटा टेक्स्ट */
.info-text {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 5px;
}


/* --- 3. Action Buttons (एक्शन बटन) --- */
/* "Calculate" और "Reset" जैसे बटनों के लिए */
.calculator-buttons {
    display: flex;
    gap: 15px; /* बटनों के बीच की जगह */
    margin-top: 30px;
}

.calculator-buttons .btn {
    flex-grow: 1; /* बटन पूरी चौड़ाई में फैल जाएंगे */
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 600;
}


/* --- 4. Result Display Area (परिणाम दिखाने का क्षेत्र) --- */
/* यह वह बॉक्स है जहाँ अंतिम परिणाम दिखाया जाता है। */
.result-container {
    margin-top: 30px;
    padding: 25px;
    background-color: var(--light-gray, #f8f9fa);
    border-radius: var(--border-radius, 8px);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

/* विभाजित परिणामों के लिए कंटेनर */
.result-split-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; /* मोबाइल पर स्टैक करने की अनुमति देता है */
    gap: 20px;
}

.result-block {
    text-align: center;
}

.result-block h4 {
    color: var(--secondary-color, #6c757d);
    margin-bottom: 10px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1rem;
}

.result-block .final-result {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color, #0d6efd);
    word-wrap: break-word;
}

/* त्रुटि संदेश की स्टाइल */
.result-container .error-message {
    color: #dc3545; /* Bootstrap danger color */
    font-weight: 600;
    font-size: 1.2rem;
}


/* --- 5. Advanced Components (उन्नत घटक) --- */
/* टैब, डिवाइडर आदि जैसे अतिरिक्त तत्वों के लिए */

/* टैब की स्टाइल (जैसे बेसिक/एडवांस) */
.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-link {
    color: var(--secondary-color, #6c757d);
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 1rem;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: var(--primary-color, #0d6efd);
    border-bottom: 3px solid var(--primary-color, #0d6efd);
    background-color: transparent;
}

/* सेक्शन को अलग करने के लिए डिवाइडर */
hr.tool-divider {
    margin: 35px 0;
    border-top: 1px solid #e9ecef;
}

/* "Why Choose Us" सेक्शन के आइकन */
.feature-icon {
    font-size: 2rem;
    color: var(--primary-color, #0d6efd);
}





/* --- Styles for Advanced Time Duration Calculator --- */

/* Add/Subtract बटन ग्रुप */
.btn-group .btn {
    border-radius: 0;
}
.btn-group .btn:first-child {
    border-top-left-radius: var(--border-radius, 8px);
    border-bottom-left-radius: var(--border-radius, 8px);
}
.btn-group .btn:last-child {
    border-top-right-radius: var(--border-radius, 8px);
    border-bottom-right-radius: var(--border-radius, 8px);
}

/* कॉपी फीडबैक संदेश ("Copied!") के लिए स्टाइल (FIXED) */
.copy-feedback {
    position: absolute;
    top: 12px;
    right: 50px;
    font-size: 0.8rem;
    color: #0d6b42;
    background-color: #e6f9f0;
    padding: 2px 8px;
    border-radius: 4px;
    opacity: 0; /* <<< महत्वपूर्ण: शुरू में छिपा हुआ */
    transition: opacity 0.3s ease;
}

/* परिणाम बॉक्स का प्लेसहोल्डर और त्रुटि संदेश */
.result-placeholder, .result-error {
    text-align: center;
    color: var(--secondary-color, #6c757d);
    padding: 2rem 0;
}
.result-error {
    color: #dc3545;
    font-weight: 600;
}

/* विस्तृत परिणाम के लिए नया ग्रिड लेआउट */
.result-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px 20px;
    align-items: center;
    text-align: left;
}

/* मुख्य परिणाम */
.result-details .result-label {
    grid-column: 1 / 3;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color, #6c757d);
    text-transform: uppercase;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
    margin-bottom: 5px;
}
.result-details .result-value {
    grid-column: 1 / 3;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color, #0d6efd);
}

/* कुल परिणाम */
.result-details .result-label-total {
    font-weight: 500;
    color: var(--text-color, #343a40);
}
.result-details .result-value-total {
    font-weight: 600;
    font-size: 1.1rem;
    text-align: right;
}





/* Add/Subtract ऑपरेशन डिवाइडर और बटन ग्रुप */
.operation-divider {
    text-align: center;
    margin: 25px 0;
}
.operation-divider .btn-group {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.operation-divider .btn {
    padding: 0.5rem 1.5rem;
    font-weight: 600;
}
.operation-divider .btn .bi { /* आइकन के लिए स्पेस */
    margin-right: 0.5rem;
}


/* Add/Subtract बटन ग्रुप */
.btn-group .btn {
    border-radius: 0;
}
.btn-group .btn:first-child {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}



/* ======================================================
   Styles for Batch Processing Textarea
====================================================== */

/* --- Styles for Batch Processing Textarea --- */
textarea.batch-textarea { /* <-- यहाँ बदलाव है */
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.7;
    
    min-height: 300px; /* <-- मान को थोड़ा और बढ़ा दें ताकि बदलाव दिखे */
    
    resize: vertical;
    padding: 15px;
    background-color: #fdfdff;
    border-width: 1px;
}



/* ======================================================
   Styles for Global Share Buttons
====================================================== */

.share-container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    text-align: center;
        margin-bottom: 20px;


}

.share-container h5 {
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--secondary-color, #6c757d);
}

.share-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 0 5px;
    border-radius: 50%; /* गोल बटन */
    color: #ffffff;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.share-buttons a:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* हर सोशल मीडिया के लिए अलग रंग */
.share-fb { background-color: #1877F2; }
.share-tw { background-color: #1DA1F2; }
.share-wa { background-color: #25D366; }
.share-li { background-color: #0A66C2; }
.share-em { background-color: #777777; }




#batchInput {
    height: 250px; /* अपनी पसंद की ऊँचाई सेट करें */
    /* min-height: 200px;  यह भी एक अच्छा विकल्प है */
    font-size: 1.1rem; /* फॉन्ट को थोड़ा बड़ा करने के लिए */
}

/* ============================================= */
/* Global Style for Batch Processing Textareas   */
/* ============================================= */
.batch-textarea {
    height: 250px;           /* Set a fixed height */
    /* min-height: 200px; */ /* Alternatively, use a minimum height */
    font-size: 1.1rem;       /* Make the font slightly larger for readability */
    font-family: monospace;  /* Use a monospace font for better alignment of text */
    line-height: 1.6;        /* Increase line spacing for clarity */
}




textarea#contactMessage {
    height: auto; /* HTML rows एट्रिब्यूट को काम करने दें */
    min-height: 150px; /* एक अच्छी न्यूनतम ऊंचाई सेट करें, यदि rows काम न करे */
    resize: vertical; /* उपयोगकर्ता को ऊर्ध्वाधर रूप से आकार बदलने की अनुमति दें */
}













/* ======================================================
   Styles for Global Star Rating System
====================================================== */
.star-rating {
    font-size: 2.2rem; /* स्टार का आकार */
    color: #ccc; /* डिफ़ॉल्ट स्टार रंग */
    cursor: pointer;
    display: inline-block;
    letter-spacing: 2px; /* सितारों के बीच थोड़ी जगह */
}
.star-rating .star {
    transition: color 0.2s ease-in-out;
}
.star-rating .star.active { /* केवल सक्रिय स्टार गोल्ड */
    color: #ffc107; 
}
/* जब कोई स्टार होवर करता है, तो उसके पहले के सभी स्टार भी हाइलाइट होते हैं */
.star-rating:not(.rated) .star:hover,
.star-rating:not(.rated) .star:hover ~ .star.active,
.star-rating:not(.rated) .star.active:hover {
    color: #ffc107; /* होवर पर गोल्ड */
}

/* होवर प्रभाव जब उपयोगकर्ता ने रेट नहीं किया हो */
.star-rating:not(.rated) .star:hover ~ .star {
    color: #ccc; /* पीछे के स्टार ग्रे रहें */
}


/* यदि उपयोगकर्ता ने पहले ही रेट कर लिया है तो होवर इफेक्ट को अक्षम करें */
.star-rating.rated {
    cursor: default; /* कंटेनर के लिए भी डिफ़ॉल्ट कर्सर */
}
.star-rating.rated .star {
    cursor: default !important; /* प्रत्येक स्टार के लिए भी डिफ़ॉल्ट कर्सर */
}
.star-rating.rated .star:hover {
    color: #ffc107; /* रेट करने के बाद होवर पर कोई बदलाव नहीं */
}
.star-rating.rated .star:hover ~ .star {
    color: #ccc; /* रेट करने के बाद होवर पर पीछे के स्टार को ग्रे रखें */
}

/* औसत रेटिंग डिस्प्ले */
#averageRatingDisplay {
    font-size: 0.9rem;
}
.current-avg-rating {
    color: #ffc107;
}
.total-ratings-count {
    color: var(--secondary-color);
}
/* अलर्ट मैसेज के लिए */
#thankYouMessage {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    text-align: center;
}