/* =====================================================
   Custom Contact Form – Frontend Styles
   Matches the sage-green UI from the design reference
   ===================================================== */

:root {
    --ccf-bg:           #f0efea;
    --ccf-white:        #ffffff;
    --ccf-border:       #d8d5cc;
    --ccf-border-focus: #4a6741;
    --ccf-text:         #2c2c2c;
    --ccf-placeholder:  #a0998a;
    --ccf-icon:         #7a7265;
    --ccf-label:        #2c2c2c;
    --ccf-btn-bg:       #3d5c35;
    --ccf-btn-hover:    #2e4628;
    --ccf-btn-text:     #ffffff;
    --ccf-trust:        #7a7265;
    --ccf-radius:       14px;
    --ccf-success-bg:   #eaf4ec;
    --ccf-success-text: #2a6846;
    --ccf-error-bg:     #fdf0f0;
    --ccf-error-text:   #c0392b;
    --ccf-font:         'Georgia', serif;
    --ccf-sans:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Wrapper ── */
.ccf-wrapper {
    background:    var(--ccf-bg);
    border-radius: 20px;
    padding:       36px 40px 40px;
    max-width:     780px;
    margin:        0 auto;
    box-sizing:    border-box;
    font-family:   var(--ccf-sans);
}

/* ── Alerts ── */
.ccf-alert {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    border-radius: 10px;
    padding:       14px 18px;
    margin-bottom: 24px;
    font-size:     14px;
    line-height:   1.5;
}
.ccf-alert svg {
    flex-shrink:   0;
    width:         18px;
    height:        18px;
    margin-top:    2px;
}
.ccf-alert--success {
    background: var(--ccf-success-bg);
    color:      var(--ccf-success-text);
}
.ccf-alert--error {
    background: var(--ccf-error-bg);
    color:      var(--ccf-error-text);
}
.ccf-alert--error ul {
    margin:     0;
    padding:    0 0 0 18px;
}
.ccf-alert--error ul li {
    margin-bottom: 4px;
}

/* ── Layout ── */
#ccf-form {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.ccf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     20px;
}

.ccf-field {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.ccf-field--full {
    width: 100%;
}

/* ── Labels ── */
.ccf-field > label,
.ccf-field--full > label:not(.ccf-checkbox-label) {
    font-size:   13px;
    font-weight: 600;
    color:       var(--ccf-label);
    letter-spacing: 0.02em;
}

/* ── Input Wrap ── */
.ccf-input-wrap {
    position:      relative;
    display:       flex;
    align-items:   center;
    background:    var(--ccf-white);
    border:        1.5px solid var(--ccf-border);
    border-radius: var(--ccf-radius);
    transition:    border-color 0.18s, box-shadow 0.18s;
    overflow:      hidden;
}
.ccf-input-wrap:focus-within {
    border-color: var(--ccf-border-focus);
    box-shadow:   0 0 0 3px rgba(74,103,65,0.12);
}

.ccf-icon {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    margin-left: 16px;
    color:       var(--ccf-icon);
    pointer-events: none;
}

.ccf-input-wrap input {
    flex:        1;
    border:      none !important;
    outline:     none;
    background:  transparent;
    padding:     13px 16px 13px 10px;
    font-size:   14px;
    color:       var(--ccf-text);
    font-family: var(--ccf-sans);
    width:       100%;
    box-sizing:  border-box;
}
.ccf-input-wrap input::placeholder {
    color: var(--ccf-placeholder);
}

/* ── Textarea ── */
.ccf-textarea-wrap {
    position:      relative;
    background:    var(--ccf-white);
    border:        1.5px solid var(--ccf-border);
    border-radius: var(--ccf-radius);
    transition:    border-color 0.18s, box-shadow 0.18s;
}
.ccf-textarea-wrap:focus-within {
    border-color: var(--ccf-border-focus);
    box-shadow:   0 0 0 3px rgba(74,103,65,0.12);
}
.ccf-textarea-wrap textarea {
    display:     block;
    width:       100%;
    border:      none;
    outline:     none;
    background:  transparent;
    padding:     14px 42px 14px 16px;
    font-size:   14px;
    color:       var(--ccf-text);
    font-family: var(--ccf-sans);
    resize:      vertical;
    min-height:  130px;
    box-sizing:  border-box;
    line-height: 1.55;
}
.ccf-textarea-wrap textarea::placeholder {
    color: var(--ccf-placeholder);
}
.ccf-resize-icon {
    position:       absolute;
    right:          12px;
    bottom:         12px;
    width:          14px;
    height:         14px;
    color:          var(--ccf-placeholder);
    pointer-events: none;
}

/* ── Consent ── */
.ccf-consent {
    margin-top: -4px;
}
.ccf-checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    cursor:      pointer;
    user-select: none;
}
.ccf-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}
.ccf-checkbox-custom {
    flex-shrink:   0;
    width:         20px;
    height:        20px;
    border:        1.5px solid var(--ccf-border);
    border-radius: 5px;
    background:    var(--ccf-white);
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    border-color 0.15s, background 0.15s;
    margin-top:    1px;
}
.ccf-checkbox-custom svg {
    width:      12px;
    height:     12px;
    stroke:     var(--ccf-white);
    opacity:    0;
    transition: opacity 0.12s;
}
.ccf-checkbox-label input:checked ~ .ccf-checkbox-custom {
    background:   var(--ccf-btn-bg);
    border-color: var(--ccf-btn-bg);
}
.ccf-checkbox-label input:checked ~ .ccf-checkbox-custom svg {
    opacity: 1;
}
.ccf-checkbox-label input:focus-visible ~ .ccf-checkbox-custom {
    box-shadow: 0 0 0 3px rgba(74,103,65,0.2);
}
.ccf-consent-text {
    font-size:   13px;
    color:       var(--ccf-icon);
    line-height: 1.5;
}
.ccf-consent-text a {
    color:           var(--ccf-btn-bg);
    text-decoration: underline;
}

/* ── Submit Row ── */
.ccf-submit-row {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
    margin-top:  4px;
}

/* ── Button ── */
.ccf-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    padding:         13px 28px;
    background:      var(--ccf-btn-bg);
    color:           var(--ccf-btn-text);
    border:          none;
    border-radius:   50px;
    font-size:       15px;
    font-weight:     600;
    cursor:          pointer;
    font-family:     var(--ccf-sans);
    letter-spacing:  0.01em;
    transition:      background 0.18s, transform 0.1s, box-shadow 0.18s;
    box-shadow:      0 2px 8px rgba(61,92,53,0.18);
    white-space:     nowrap;
}
.ccf-btn svg {
    width:  17px;
    height: 17px;
}
.ccf-btn:hover {
    background:  var(--ccf-btn-hover);
    box-shadow:  0 4px 14px rgba(61,92,53,0.28);
    transform:   translateY(-1px);
}
.ccf-btn:active {
    transform:  translateY(0);
    box-shadow: 0 2px 6px rgba(61,92,53,0.18);
}
.ccf-btn:disabled {
    opacity:        0.65;
    cursor:         not-allowed;
    pointer-events: none;
}
.ccf-btn--loading svg.ccf-spinner {
    animation: ccf-spin 0.8s linear infinite;
}
@keyframes ccf-spin { to { transform: rotate(360deg); } }

/* ── Trust badge ── */
.ccf-trust {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    color:       var(--ccf-trust);
    margin:      0;
}
.ccf-trust svg {
    width:       16px;
    height:      16px;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .ccf-wrapper {
        padding:       24px 20px 28px;
        border-radius: 14px;
    }
    .ccf-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ccf-submit-row {
        flex-direction: column;
        align-items:    flex-start;
        gap:            14px;
    }
    .ccf-btn {
        width:           100%;
        justify-content: center;
    }
}