/**
 * Frontend stylesheet for CF7 Currency Field
 */

.wpcf7-currencyfield-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.wpcf7-currencyfield-container .currency-symbol {
    position: absolute;
    left: 6px;
    pointer-events: none; /* Allow clicks to pass through to the input */
    top: 16px;
}

.wpcf7-currencyfield-container input[type="text"] {
    padding-left: 40px;
    width: 100%;
    text-align: left;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 8px 8px 8px 40px;
    font-size: 16px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wpcf7-currencyfield-container input[type="text"]:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

/* Style the placeholder to match currency input */
.wpcf7-currencyfield-container input[type="text"]::placeholder {
    color: #aaa;
    opacity: 0.7;
}

/* Error state */
.wpcf7-currencyfield-container input.wpcf7-not-valid {
    border-color: #dc3232;
}

.wpcf7-currencyfield-container + .wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 0.9em;
    margin-top: 4px;
}