/* ==========================================================================
   Contact / General Form
   ========================================================================== */
 
#contact-form {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--paddingSmall);
    background: rgb(var(--background));
    border-radius: var(--borderRadiusLarge);
}
 
#contact-form h2 {
    margin-bottom: var(--paddingSmall);
    font-size: var(--fontMedium); /* was missing the -- prefix, so this rule never applied */
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
    text-align: center;
}
 
#contact-form a {
    color: rgb(var(--highlight2));
}
 
#contact-form a:hover {
    color: rgb(var(--highlight2Faint));
}
 
 
/* ---------- Input groups ---------- */
 
.input-box {
    margin-bottom: var(--paddingSmall);
}
 
.input-box label {
    display: block;
    margin-bottom: var(--paddingSmall);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightNormal);
    color: rgb(var(--textFaint));
}
 
.input-box input,
.input-box select,
.input-box textarea {
    box-sizing: border-box;
    width: 100%;
    padding: var(--paddingMinimum);
    font-size: var(--fontSmall);
    font-family: inherit;
    color: rgb(var(--text));
    background: rgb(var(--background));
    border: var(--borderThickness) solid rgb(var(--backgroundFaint));
    border-radius: var(--borderRadius);
    transition: border-color var(--transitionTime) ease, box-shadow var(--transitionTime) ease;
}

.input-box textarea {
    resize: none;
    font-family: inherit;
    /* Fixed size, consistent in every browser: width locked (resize is
       disabled above) and height fixed by the rows="3" attribute in the
       markup rather than auto-growing to content. */
}

.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus {
    outline: none;
    border-color: rgb(var(--highlight1));
    box-shadow: 0 0 0 3px rgba(var(--highlight1), 0.35);
}
 
/* Override the browser's built-in autofill styling so it matches the theme
   instead of the default white/yellow background most browsers force in */
.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus,
.input-box input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgb(var(--highlight1)) inset !important;
    box-shadow: 0 0 0 30px rgb(var(--highlight1)) inset !important;
    -webkit-text-fill-color: rgb(var(--text)) !important;
    caret-color: rgb(var(--text)); /* was hardcoded #000000 — now follows the theme like everything else */
}

/* ---------- Checkbox rows (e.g. terms/privacy agreement) ---------- */

.checkbox-box {
    margin-bottom: var(--paddingSmall);
}

.checkbox-box label {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--paddingMinimum) / 2);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightNormal);
    color: rgb(var(--textFaint));
    cursor: pointer;
}

.checkbox-box input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.15em;
    accent-color: rgb(var(--highlight2));
    cursor: pointer;
}

.checkbox-box a {
    color: rgb(var(--highlight2));
    font-weight: var(--fontWeightBold);
    text-decoration: none;
}

.checkbox-box a:hover {
    text-decoration: underline;
}
 
 
/* ---------- Submit button ---------- */
 
#contact-form button {
    width: 100%;
    margin-top: var(--paddingSmall);
    padding: var(--paddingMinimum);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--background));
    background: rgb(var(--highlight2));
    border: none;
    border-radius: var(--borderRadiusPill);
    cursor: pointer;
    transition: background var(--transitionTime) ease, box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease;
}
 
#contact-form button:hover,
#contact-form button:active {
    background: rgb(var(--highlight2Faint));
    color: rgb(var(--background));
    box-shadow: var(--shadowSoft);
    transform: translateY(-2px);
}
 
 
/* ==========================================================================
   Status Messages (errors / success)
   ========================================================================== */
 
/* Shared layout/spacing for both states, so .errors and .success never
   drift out of sync when one gets tweaked and the other doesn't */
.errors,
.success {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    margin: 0 auto var(--paddingSmall) auto;
    padding: var(--paddingSmall) calc(var(--paddingSmall) * 1.3);
    border-radius: var(--borderRadius);
    font-size: var(--fontSmall);
}
 
.errors ul,
.success ul {
    margin: 0;
    padding-left: var(--paddingLarge);
}
 
.errors li,
.success li {
    margin-bottom: calc(var(--paddingMinimum) / 2);
}
 
.errors li:last-child,
.success li:last-child {
    margin-bottom: 0;
}
 
/* Color is the only real difference between the two states */
.errors {
    color: rgb(var(--error, 153 27 27));       /* falls back to a red if --error isn't defined in your theme */
    background: rgb(var(--errorFaint, 254 226 226));
}
 
.success {
    color: rgb(var(--text));
    background: rgb(var(--highlight1));
}
 
 
/* ==========================================================================
   Phone display adjustments
   ========================================================================== */
 
@media only screen and (max-width: 480px) {
 
    #contact-form {
        max-width: 100%; /* let the form use the full screen width rather than
                             being capped at 400px, which wastes space on phones */
        padding: var(--paddingMinimum);
    }
 
    .input-box input,
    .input-box select,
    .input-box textarea {
        /* iOS Safari auto-zooms the whole page when a focused input's
           font-size is under 16px — this is the fix, regardless of what
           --fontSmall resolves to elsewhere */
        font-size: 16px;
        padding: calc(var(--paddingMinimum) * 1.3); /* slightly taller tap target */
    }
 
    #contact-form button {
        font-size: 16px;
        padding: calc(var(--paddingMinimum) * 1.3);
        min-height: 44px; /* comfortable minimum touch target size */
    }
 
    .errors,
    .success {
        max-width: 100%;
        padding: var(--paddingMinimum) calc(var(--paddingMinimum) * 1.3);
    }
 
}

/* ---------- Duplicate-check results — shared by
   discover/attraction/request-attraction.php and
   admin/attractions/edit-attraction.php ---------- */
.duplicate-check-status {
    margin: calc(var(--paddingMinimum) / 2) 0 0 0;
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}

.duplicate-check-status-clear {
    color: rgb(var(--text));
    font-weight: var(--fontWeightBold);
}

.duplicate-check-results-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--paddingMinimum) / 2);
    margin-top: calc(var(--paddingMinimum) / 2);
}

.duplicate-check-result-item {
    display: flex;
    align-items: center;
    gap: var(--paddingSmall);
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    color: inherit;
    text-decoration: none;
    background: rgb(var(--backgroundFaint));
    border-radius: var(--borderRadius);
    transition: background var(--transitionTime) ease;
}

.duplicate-check-result-item:hover {
    background: rgb(var(--highlight1));
}

.duplicate-check-result-item img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--borderRadius);
}

.duplicate-check-result-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.duplicate-check-result-item strong {
    font-size: var(--fontSmall);
    color: rgb(var(--text));
}

.duplicate-check-result-item span {
    font-size: var(--fontSmallest);
    color: rgb(var(--textFaint));
}

.duplicate-check-detail {
    font-weight: var(--fontWeightBold);
    color: rgb(var(--highlight2)) !important;
}