/* ==========================================================================
   Subscription section redesign — add to child theme (enqueue after parent)
   Palette taken from site logo: clay / gold / navy on cream
   ========================================================================== */

.section-subscription--redesign {
    padding: 0;
    background: #F6F0E3 !important;
}

.section-subscription--redesign .cs-container {
    max-width: 1080px;
    padding: 48px 20px;
}

.cs-subscription--split {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    background: #8C2F39;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(60, 20, 20, .35);
}

.cs-subscription--split::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#D9A441 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    opacity: .16;
    pointer-events: none;
}

/* left: message */
.cs-subscription-message {
    position: relative;
    z-index: 1;
    padding: 64px 56px;
    color: #FBF7EE;
}

.cs-subscription-eyebrow {
    display: inline-block;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #D9A441;
    margin-bottom: 20px;
}

.cs-subscription--redesign .cs-subscription-title,
.cs-subscription-message .cs-subscription-title {
    font-size: 38px;
    line-height: 1.15;
    color: #FBF7EE;
    margin: 0 0 18px;
    max-width: 10em;
    text-align: left !important;
}

.cs-subscription-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #EFE1CE;
    max-width: 30em;
    margin: 0 0 26px;
}

.cs-subscription-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-subscription-bullets li {
    position: relative;
    padding-left: 24px;
    font-size: 14.5px;
    color: #F2E6D6;
}

.cs-subscription-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 8px;
    border-left: 2px solid #D9A441;
    border-bottom: 2px solid #D9A441;
    transform: rotate(-45deg);
}

/* right: card that wraps the Powerkit form */
.cs-subscription-card {
    position: relative;
    z-index: 1;
    background: #FBF7EE;
    margin: 22px 22px 22px 0;
    border-radius: 14px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cs-subscription-stamp {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 64px;
    height: 64px;
    border: 1.5px dashed #B07E24;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #B07E24;
    transform: rotate(8deg);
}

.cs-subscription-card-label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8C2F39;
    margin-bottom: 8px;
}

.cs-subscription-card-title {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 8px;
    color: #2B2620;
    max-width: 11em;
}

.cs-subscription-card-desc {
    font-size: 14.5px;
    color: #5C544A;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 26em;
}

/* ---- Powerkit form overrides ----
   Selectors below are best-effort guesses at Powerkit's markup.
   Inspect the rendered form in devtools and adjust the class names
   to match exactly what the plugin outputs on your install. */

.cs-subscription-card .powerkit-subscription-form,
.cs-subscription-card form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cs-subscription-card input[type="email"],
.cs-subscription-card input[type="text"] {
    flex: 1 1 200px;
    border: 1.5px solid #E3D8C0 !important;
    background: #fff !important;
    border-radius: 10px !important;
    padding: 15px 16px !important;
    font-size: 15px !important;
    color: #2B2620 !important;
}

.cs-subscription-card input[type="email"]:focus,
.cs-subscription-card input[type="text"]:focus {
    border-color: #8C2F39 !important;
    outline: none;
}

.cs-subscription-card button,
.cs-subscription-card input[type="submit"] {
    border: 0 !important;
    background: #8C2F39 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 15px 26px !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: background .15s ease;
}

.cs-subscription-card button:hover,
.cs-subscription-card input[type="submit"]:hover {
    background: #6E2029 !important;
}

.cs-subscription-card .powerkit-subscription-form-consent,
.cs-subscription-card small,
.cs-subscription-card .description {
    flex-basis: 100%;
    font-size: 12px;
    color: #A79C86;
    margin-top: 4px;
}

@media (max-width: 760px) {
    .cs-subscription--split {
        grid-template-columns: 1fr;
    }
    .cs-subscription-message {
        padding: 44px 28px 8px;
    }
    .cs-subscription-card {
        margin: 16px;
        padding: 32px 24px;
    }
    .cs-subscription--redesign .cs-subscription-title,
    .cs-subscription-message .cs-subscription-title {
        font-size: 28px;
    }
}

/* Anular mayúsculas en el formulario de suscripción de Powerkit y el tema Once */
.cs-subscription-card input,
.cs-subscription-card input[type="text"],
.cs-subscription-card input[type="email"],
.pk-subscribe-form input,
.pk-subscribe-form input[type="email"],
.pk-subscribe-field input {
    text-transform: none !important;
}

/* Opcional: Si quieres que el placeholder sí mantenga las mayúsculas */
.cs-subscription-card input::placeholder,
.pk-subscribe-form input::placeholder {
    text-transform: uppercase;
}