html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

html, body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/*prevent the user details dropdown from showing during page load*/
[x-cloak] {
    display: none !important;
}

/* ==============================
   ERROR STATE - INPUTS
   ============================== */
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
input.error,
select.error,
textarea.error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
    outline: none !important;
}

input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus,
input.error:focus,
select.error:focus,
textarea.error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* ==============================
   ERROR STATE - LABELS
   ============================== */
label.is-invalid,
label.error {
    color: #ef4444 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
    font-weight: 500 !important;
    background: transparent !important;
}

/* ==============================
   SUCCESS STATE - INPUTS
   ============================== */
input.is-valid,
select.is-valid,
textarea.is-valid,
input.valid,
select.valid,
textarea.valid {
    border-color: #10b981 !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1) !important;
    outline: none !important;
}

input.is-valid:focus,
select.is-valid:focus,
textarea.is-valid:focus,
input.valid:focus,
select.valid:focus,
textarea.valid:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

[v-cloak] {
    display: none;
}

/* Location Dropdown input color hidden */

.flex-1.min-w-\[120px\].border-0.outline-0.bg-transparent.p-0.focus\:border-transparent.focus\:ring-0.focus\:ring-transparent.location-dropdown.is-valid.valid {
    border-color: rgba(16, 185, 129, 0) !important;
    background-color: rgba(240, 253, 244, 0) !important;
    box-shadow: rgba(16, 185, 129, 0) 0px 0px 0px 2px !important;
    outline: none !important;
}

/*Hide OTP input validations*/
#txtRegisterOtp0-error,
#txtRegisterOtp1-error,
#txtRegisterOtp2-error,
#txtRegisterOtp3-error,
#txtRegisterOtp4-error,
#txtForgotOtp0-error,
#txtForgotOtp1-error,
#txtForgotOtp2-error,
#txtForgotOtp3-error,
#txtForgotOtp4-error,
#txtBankDetailOtp0-error,
#txtBankDetailOtp1-error,
#txtBankDetailOtp2-error,
#txtBankDetailOtp3-error,
#txtBankDetailOtp4-error,
#txtLicensePlateNumbers-error {
    display: none !important;
}

#txtRegisterOtp5-error,
#txtForgotOtp5-error,
#txtBankDetailOtp5-error {
    white-space: nowrap;
}

#txtLicensePlateLetters-error {
    position: absolute;
    margin: 0;
    margin-top: 0px;
    bottom: -1.5rem;
}

#artwork-upload-error{
    text-align: center !important;
}

/*End Hide OTP input validations*/
#chkTerms-error {
    position: absolute;
    top: 20px;
}

.signature-canvas {
    width: 100%;
    max-width: 400px;
    height: 150px;
    touch-action: none;
    cursor: crosshair;
}

/* ==============================
   CUSTOM TOOLTIP STYLES
   ============================== */

/* Use data-tooltip attribute for custom tooltips */
[data-tooltip] {
    position: relative;
}

    /* Tooltip container */
    [data-tooltip]:hover::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        background-color: #1a1a1a;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 6px;
        opacity: 0;
        pointer-events: none;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        animation: tooltipFadeIn 0.2s ease forwards;
        animation-delay: 0.3s;
    }

    /* Tooltip arrow */
    [data-tooltip]:hover::after {
        content: '';
        position: absolute;
        bottom: calc(100% + 2px);
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1a1a1a;
        opacity: 0;
        pointer-events: none;
        z-index: 1000;
        animation: tooltipArrowFadeIn 0.2s ease forwards;
        animation-delay: 0.3s;
    }

/* Fade in animation */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Arrow fade in animation */
@keyframes tooltipArrowFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Ensure tooltip appears above other elements */
[title]:hover {
    cursor: pointer;
    z-index: 999;
}

/* Alternative: Data attribute tooltips (if you want to use data-tooltip instead of title) */
[data-tooltip] {
    position: relative;
}

    [data-tooltip]:hover::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        background-color: #1a1a1a;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 6px;
        opacity: 0;
        pointer-events: none;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        animation: tooltipFadeIn 0.2s ease forwards;
        animation-delay: 0.3s;
    }

    [data-tooltip]:hover::after {
        content: '';
        position: absolute;
        bottom: calc(100% + 2px);
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1a1a1a;
        opacity: 0;
        pointer-events: none;
        z-index: 1000;
        animation: tooltipArrowFadeIn 0.2s ease forwards;
        animation-delay: 0.3s;
    }

/* Right positioned tooltip variant */
[data-tooltip-position="right"]:hover::before {
    bottom: auto;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

[data-tooltip-position="right"]:hover::after {
    bottom: auto;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1a1a1a;
    border-top-color: transparent;
}

/* Left positioned tooltip variant */
[data-tooltip-position="left"]:hover::before {
    bottom: auto;
    right: calc(100% + 8px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

[data-tooltip-position="left"]:hover::after {
    bottom: auto;
    right: calc(100% + 2px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #1a1a1a;
    border-top-color: transparent;
}

/* Bottom positioned tooltip variant */
[data-tooltip-position="bottom"]:hover::before {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%);
}

[data-tooltip-position="bottom"]:hover::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: #1a1a1a;
}

/* Tooltip color variants */
[data-tooltip-color="primary"]:hover::before {
    background-color: #3b82f6;
}

[data-tooltip-color="primary"]:hover::after {
    border-top-color: #3b82f6;
}

[data-tooltip-color="success"]:hover::before {
    background-color: #10b981;
}

[data-tooltip-color="success"]:hover::after {
    border-top-color: #10b981;
}

[data-tooltip-color="danger"]:hover::before {
    background-color: #ef4444;
}

[data-tooltip-color="danger"]:hover::after {
    border-top-color: #ef4444;
}

[data-tooltip-color="warning"]:hover::before {
    background-color: #f59e0b;
}

[data-tooltip-color="warning"]:hover::after {
    border-top-color: #f59e0b;
}