/* Reid Forms Plugin Styles */

.spacer {
    height: 10px;
}

/* Ensure box-sizing includes padding and borders */
* {
    box-sizing: border-box;
}

/* General form styles */
.rf-divi-form {
    margin: 20px 0;
    padding: 10px;
}

.rf-divi-hidden-wrapper {
    display: none;
}

/* Field wrapper */
.rf-divi-field-wrapper {
    margin-right: 1.5%; /* Prevent overlap */
    margin-bottom: 1%;
}

.rf-divi-field {
    padding: 8px;
    border: 1px solid #ccc;
    width: 100%;
}

.rf-divi-submit-button {
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.rf-divi-submit-button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}

.rf-divi-toggle-display {
    display: inline-block !important;
}

.rf-divi-toggle-hide {
    display: none !important;
}

/* Layout classes */
.rf-divi-layout-full {
    width: 100%;
    display: inline-block;
}
.rf-divi-layout-half {
    width: calc(50% - 1.5%); /* Adjusted to prevent wrapping */
    display: inline-block;
    vertical-align: top;
}
.rf-divi-layout-third {
    width: calc(33.33% - 1.5%); /* Adjusted for thirds */
    display: inline-block;
    vertical-align: top;
}
.rf-divi-layout-quarter {
    width: calc(25% - 1.5%); /* Adjusted for quarters */
    display: inline-block;
    vertical-align: top;
}

.centered {
    text-align: center;
}

/* Position classes */
.rf-divi-float-left {
    float: left;
}
.rf-divi-float-right {
    float: right;
}
.rf-divi-clear-float {
    clear: both;
}

.rf-divi-no-float {
    float: none;
}

/* Clearfix for parent containers */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* site overrides */
p {
    margin: 1rem 0 0 0;
}

.display-text {
    font-size: 0.9em;
}

/* Responsive design */
@media (max-width: 900px) {
    .rf-divi-layout-half {
        width: 100%;
    }
    .rf-divi-layout-quarter {
        width: calc(50% - 1.5%);
    }
}

@media (max-width: 800px) {
    .rf-divi-layout-third {
        width: calc(50% - 1.5%);
    }
}
@media (max-width: 600px) {
    .rf-divi-layout-third,
    .rf-divi-layout-quarter {
        width: 100%;
    }
}