/* Base styles for Careza Pharmacy Forms */
/* Most styling is inline in each form, but this file ensures base styles are applied */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #f5f5f5 !important;
}

#container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background-color: #f5f5f5 !important;
    border: none !important;
}

#container.rounded-corners {
    border-radius: 0 !important;
}

#content {
    margin: 0 auto !important;
    padding: 20px !important;
    width: calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    box-sizing: border-box !important;
}

#content.rounded-corners {
    border-radius: 0 !important;
}

/* Required Information Text - Reduced spacing */
span[style*="color:#ff0000"] {
    display: block;
    margin-bottom: 5px !important;
    font-size: 14px;
    color: #ff0000 !important;
}

/* HR separator - Lighter border and reduced spacing */
hr {
    border: none !important;
    border-top: 1px solid #808080 !important;
    margin: 5px 0 8px 0 !important;
}

/* Section Headings - Reduced top margin */
.field>.input>span[style*="font-weight:bold"] {
    margin-top: 5px !important;
}

/* Input fields - Flat design with no shadows or 3D effects */
input.text,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
select.select,
select,
textarea {
    border-color: #cecece !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border-style: solid !important;
    background-color: #ffffff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Hover styles for all form elements - Light cyan border when hovering */
/* High specificity to override inline styles */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
select:hover,
select.select:hover,
textarea:hover,
input.text:hover,
input[class*="text"]:hover,
select.text:hover,
textarea.text:hover,
textarea[class*="text"]:hover,
#content input[type="text"]:hover,
#content input[type="email"]:hover,
#content input[type="tel"]:hover,
#content select:hover,
#content textarea:hover,
#content input.text:hover,
#content select.select:hover,
form input[type="text"]:hover,
form input[type="email"]:hover,
form input[type="tel"]:hover,
form select:hover,
form textarea:hover,
form input.text:hover,
form select.select:hover {
    outline: none !important;
    border-color: #b9ffff !important;
    border-width: 1px !important;
    border-style: solid !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* Focus styles for all form elements - Light cyan border when selected/focused */
/* High specificity to override inline styles */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
select.select:focus,
textarea:focus,
input.text:focus,
input[class*="text"]:focus,
select.text:focus,
textarea.text:focus,
textarea[class*="text"]:focus,
#content input[type="text"]:focus,
#content input[type="email"]:focus,
#content input[type="tel"]:focus,
#content select:focus,
#content textarea:focus,
#content input.text:focus,
#content select.select:focus,
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form select:focus,
form textarea:focus,
form input.text:focus,
form select.select:focus {
    outline: none !important;
    border-color: #b9ffff !important;
    border-width: 1px !important;
    border-style: solid !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* Select dropdown arrow styling - Custom arrow for flat design */
select,
select.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 35px !important;
}

select:focus,
select.select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}