.medicine-page {
    position: relative;
    width: 1200px;
    margin: 0px auto;
    margin-top: 50px;
}


/* Related Medicines Prices */

.related-medicines {
    position: relative;
}

.medicine-details {
    display: flex;
    flex-direction: column;
}

.medicine-details p {
    margin: 0px;
    padding: 0px;
}

.medicine-details .medicine-name {
    font-size: var(--font-size-xl);
}


/* Save Medicine Button Styles */

.save-medicine-section {
    margin-top: 1rem;
}

.save-medicine-section button {
    transition: all 0.2s ease-in-out;
}

.save-medicine-section button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}


/* Modal Styles */

#save-medicine-modal {
    backdrop-filter: blur(4px);
}

#save-medicine-modal .relative {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Collection List Styles */

#collections-list .flex {
    transition: all 0.2s ease-in-out;
}

#collections-list .flex:hover {
    transform: translateX(4px);
    border-color: #3B82F6;
}


/* Color Options */

.color-option {
    transition: all 0.2s ease-in-out;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.border-gray-600 {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}


/* Message Styles */

#save-message {
    animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Responsive Modal */

@media only screen and (max-width: 768px) {
    #save-medicine-modal .relative {
        width: 95% !important;
        margin: 1rem auto;
    }
    /* #save-medicine-modal .modal-footer {
        flex-direction: column;
        gap: 1rem;
    }
    #save-medicine-modal .modal-footer {
        width: 100%;
    } */
}

.medicine-details-box {
    position: relative;
    padding: 20px;
    margin-top: 30px;
    border-radius: 15px;
    background: var(--color-white);
    box-shadow: 0px 1px 14px 0px rgba(241, 234, 234, 0.25);
}

.medicine-details-box .tabs {
    gap: 16px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    margin-bottom: 15px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
    /* For Firefox */
    -ms-overflow-style: none;
}

.medicine-details-box .tabs::-webkit-scrollbar {
    display: none;
}

.medicine-details-box .tabs .tab {
    display: flex;
    padding: 12px 24px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    border: 2px solid #E1DFDF;
    color: var(--color-text-gray2);
    background: var(--color-white);
    font-size: 18px;
    cursor: pointer;
    text-wrap: nowrap;
}

.medicine-details-box .tabs .tab.active {
    color: var(--color-white);
    background: var(--color-secondary);
}

.medicine-details-box .tabcontent {
    display: none;
}

.medicine-details-box .tabcontent.active {
    display: block;
}

@media only screen and (max-width: 1200px) {
    .medicine-page {
        width: 95%;
    }
}

@media only screen and (max-width: 750px) {
    .bottom-section {
        display: flex;
        flex-flow: column-reverse;
    }
}

@media only screen and (max-width: 450px) {
    .medicine-page {
        width: 98%;
        margin-top: 25px;
    }
}