@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

:root {
    --color-title: #067380;
    --primary-color: #085dc5;
    --color-hover: #028f9c;
}

/* Box-sizing cho tất cả elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

form {
    position: relative;
}

body {
    font-family: "Roboto", sans-serif;
}

* {
    font-family: "Roboto", sans-serif;
}
.custom-margin-index {
    margin: 0px 60px;
}
.custom-padding-index {
    padding: 80px 0px;
}
/* Container responsive for large screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1480px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1680px;
    }
}

/* Fix iOS zoom on input focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="url"],
textarea,
select {
    font-size: 16px !important;
}

/* Prevent zoom on iOS for smaller screens */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* SweetAlert2 Custom Styles */
.swal2-popup {
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.swal2-icon {
    width: 80px !important;
    height: 80px !important;
    border-width: 4px !important;
    margin: 20px auto !important;
}

.swal2-icon.swal2-question {
    border-color: #085dc5 !important;
    color: #085dc5 !important;
    font-size: 48px !important;
    font-weight: 700 !important;
}

.swal2-icon.swal2-question::before {
    font-size: 48px !important;
}
.swal2-icon-content {
    font-size: 60px !important;
}

.swal2-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    letter-spacing: -0.5px !important;
}

.swal2-html-container {
    font-size: 16px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.3px !important;
}

.swal2-actions {
    gap: 12px !important;
    margin-top: 20px !important;
}

.swal2-styled {
    border-radius: 10px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    min-width: 120px !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    letter-spacing: -0.3px !important;
}

.swal2-styled.swal2-confirm {
    background-color: #085dc5 !important;
}

.swal2-styled.swal2-confirm:hover {
    background-color: #064a9a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(8, 93, 197, 0.3) !important;
}

.swal2-styled.swal2-cancel {
    background-color: #64748b !important;
}

.swal2-styled.swal2-cancel:hover {
    background-color: #475569 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3) !important;
}

.swal2-icon.swal2-success {
    border-color: #10b981 !important;
    background-color: transparent !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: #10b981 !important;
}

/* Set proper color for circular lines */
.swal2-icon.swal2-success .swal2-success-circular-line-left {
    background-color: transparent !important;
}

.swal2-icon.swal2-success .swal2-success-circular-line-right {
    background-color: transparent !important;
}

.swal2-icon.swal2-success .swal2-success-fix {
    background-color: transparent !important;
}

.swal2-icon.swal2-error {
    border-color: #ef4444 !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #ef4444 !important;
}

/* Loading Spinner */
.swal2-loader {
    border-color: #085dc5 transparent #085dc5 transparent !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .custom-margin-index {
        margin: 0px 10px;
    }
    .custom-padding-index {
        padding: 10px 0px;
    }
    .swal2-popup {
        width: 90% !important;
        padding: 24px !important;
    }

    .swal2-icon {
        width: 60px !important;
        height: 60px !important;
        margin: 15px auto !important;
    }

    .swal2-icon.swal2-question {
        font-size: 36px !important;
    }

    .swal2-icon.swal2-question::before {
        font-size: 36px !important;
    }

    .swal2-title {
        font-size: 22px !important;
        margin: 15px 0 8px !important;
        letter-spacing: -0.4px !important;
    }

    .swal2-html-container {
        font-size: 14px !important;
        letter-spacing: -0.2px !important;
        margin: 8px 0 20px !important;
    }

    .swal2-styled {
        padding: 10px 24px !important;
        font-size: 14px !important;
        min-width: 100px !important;
        letter-spacing: -0.2px !important;
    }
}