/* -------------------------------------------------------------------------- */
/* MINDHUB VISUAL IDENTITY: FORM ELEMENTS                                     */
/* Aesthetic: "The Guestbook" - Understated, Elegant, Transparent             */
/* -------------------------------------------------------------------------- */

/* 1. TEXT INPUTS & TEXTAREAS
   Removes the "box" look. Creates a "floating" text effect on a solid line.
*/
input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    display: block;
    width: 100%;

    /* Typography */
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    color: #2A2A2A; /* Espresso */
    line-height: 1.5;

    /* Background & Borders */
    background-color: transparent;
    background-image: none;
    border: none;
    border-bottom: 1px solid #DCDCDA; /* Thin, crisp separator */
    border-radius: 0; /* No rounded corners for the line style */

    /* Spacing: No side padding needed since there are no side borders */
    padding: 0.75rem 0;

    transition: border-color 0.3s ease, color 0.3s ease;
}

/* 2. FOCUS STATE
   No glowing rings. Just a color shift of the bottom line to Sage.
*/
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: none; /* Removes default browser glow */
    border-bottom-color: #6B7F5E; /* MindHub Sage */
    color: #000000;
}

/* 3. PLACEHOLDER TEXT
   Muted charcoal, subtle and distinct from user input.
*/
::placeholder {
    color: #3B3836;
    opacity: 0.4;
}

/* 4. SELECT DROPDOWNS
   Customizes the arrow and removes default browser styling.
*/
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem; /* Space for the arrow */

    /* Custom Arrow SVG (Encoded) - Charcoal Color */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232A2A2A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0 center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    cursor: pointer;
}

/* 5. CHECKBOXES & RADIOS
   Softening the default browser inputs to match the brand.
*/
input[type="checkbox"],
input[type="radio"] {
    accent-color: #6B7F5E; /* Sage */
    height: 1rem;
    width: 1rem;
    cursor: pointer;
    border-color: #DCDCDA;
}

/* 6. AUTOFILL (Chrome/Edge)
   Prevents the ugly yellow background on autocomplete.
   Forces it to match the transparent/bone look.
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #F9F8F6 inset !important; /* Matches Warm Bone bg */
    -webkit-text-fill-color: #2A2A2A !important;
}

/* If the form is on a pure white card, use white autofill background instead */
.bg-white input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
}


/* GENERATIVE PATTERNS (Luxury Fallbacks) */
.pattern-wellness {
    background: linear-gradient(135deg, #F2F0E9 0%, #DCDCDA 100%);
}
.pattern-mind {
    background: linear-gradient(135deg, #EAE8E4 0%, #B8C1B0 100%); /* Subtle Sage */
}
.pattern-body {
    background: linear-gradient(135deg, #F9F8F6 0%, #E0DED9 100%); /* Warm Bone */
}
.card-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(59, 56, 54, 0.2); /* #3B3836 at 20% */
}
/* Osigurava da Select2 zauzme punu širinu i prati tvoj dizajn */
.select2-container {
    width: 100% !important;
    display: block;
}

.select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #DCDCDA !important; /* Tvoj Underline stil */
    border-radius: 0 !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2A2A2A !important;
    padding-left: 0 !important;
    font-size: 0.875rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

/* Stil za dropdown listu s rezultatima */
.select2-dropdown {
    border: 1px solid #DCDCDA !important;
    border-radius: 2px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important;
}