/* ===================================
   PACKAGE SELECTION FORM STYLES
   WordPress CSS Variables from theme.json
   =================================== */

/* --- Package Selection Label --- */
.contact-form-wrapper>span:first-child {
    display: block;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    color: var(--wp--preset--color--primary-blue);
    margin-bottom: var(--wp--preset--spacing--10);
    letter-spacing: -0.01em;
    font-family: var(--wp--preset--font-family--body);
}

/* --- Bento Grid Layout --- */
.paket-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: var(--wp--preset--spacing--30);
}

/* Partner spans full width */
.paket-card:nth-child(4) {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .paket-grid {
        grid-template-columns: 1fr;
    }

    .paket-card:nth-child(4) {
        grid-column: 1;
    }
}

/* --- Package Cards --- */
.paket-card {
    /* background: var(--wp--preset--color--base-2); */
    border: 1px solid var(--wp--preset--color--light-gray);
    border-radius: var(--wp--preset--spacing--10);
    padding: var(--wp--preset--spacing--30);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 200px;
    position: relative;
    box-shadow: var(--wp--preset--shadow--light);
}

.paket-card:hover {
    border-color: var(--wp--preset--color--medium-gray);
    box-shadow: var(--wp--preset--shadow--medium);
}

/* Fake Button (Auswählen) */
.paket-card::after {
    content: 'Auswählen';
    margin-top: auto;
    align-self: center;
    width: auto;
    min-width: 120px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--wp--preset--color--light-gray);
    color: var(--wp--preset--color--medium-gray);
    border-radius: 6px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    transition: all 0.2s ease;
}

.paket-card:hover::after {
    border-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--contrast);
}

/* Active State */
.paket-card.active {
    border-color: var(--wp--preset--color--primary-blue);
    background: var(--wp--preset--color--base);
    box-shadow: 0 0 0 1px var(--wp--preset--color--primary-blue);
}

.paket-card.active::after {
    content: 'Ausgewählt';
    background: var(--wp--preset--color--primary-blue);
    color: var(--wp--preset--color--base-2);
    border-color: var(--wp--preset--color--primary-blue);
}

/* --- Partner Addon Styling --- */
.paket-card:nth-child(4) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--30);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    min-height: auto;
}

.paket-card:nth-child(4)::after {
    content: 'Hinzufügen';
    margin-top: 0;
    margin-left: auto;
    align-self: center;
    min-width: 100px;
}

.paket-card:nth-child(4).active {
    background: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--primary-blue);
}

.paket-card:nth-child(4).active::after {
    content: 'Hinzugefügt';
    background: var(--wp--preset--color--primary-blue);
    color: var(--wp--preset--color--base-2);
}

/* --- Typography --- */
.paket-card .card-header .title {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--contrast);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.card-sub {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--wp--preset--spacing--10);
}

/* Partner Specifics */
.paket-card:nth-child(4) .card-header .title {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium);
    white-space: nowrap;
}

.paket-card:nth-child(4) .card-sub {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    background: var(--wp--preset--color--base);
    padding: 4px 10px;
    border-radius: 4px;
    color: var(--wp--preset--color--medium-gray);
    border: 1px solid var(--wp--preset--color--light-gray);
    display: inline-block;
}

.paket-card:nth-child(4).active .card-sub {
    background: var(--wp--preset--color--base-2);
    border-color: var(--wp--preset--color--light-gray);
    color: var(--wp--preset--color--contrast);
}

/* --- Description Text --- */
.card-desc {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.9rem;
    color: var(--wp--preset--color--medium-gray);
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.5;
}

.paket-card:nth-child(4) .card-desc {
    margin: 0;
    margin-left: auto;
    margin-right: var(--wp--preset--spacing--30);
    padding: 0;
}

/* Mobile Adjustment - Package Cards */
@media (max-width: 640px) {
    .paket-card:nth-child(4) {
        flex-direction: column;
        gap: var(--wp--preset--spacing--20);
        text-align: center;
        justify-content: center;
        padding: var(--wp--preset--spacing--30);
    }

    .paket-card:nth-child(4)::after {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .paket-card:nth-child(4) .card-desc {
        margin: var(--wp--preset--spacing--10) 0 0 0;
        padding: var(--wp--preset--spacing--20) 0 0 0;
        border-top: 1px solid var(--wp--preset--color--light-gray);
        width: 100%;
    }

    .paket-card:nth-child(4) .card-header .title {
        white-space: normal;
    }
}

/* ===================================
   FORM INPUT HARMONIZATION
   Using WordPress CSS Variables
   =================================== */

/* --- Form Container --- */
.wpcf7-form {
    font-family: var(--wp--preset--font-family--body);
}

/* --- Form Grid Layout --- */
.wpcf7-form p {
    margin-bottom: var(--wp--preset--spacing--10);
}

/* Two-column grid for name/email and website/phone */
.wpcf7-form p:has(input[name="your-name"]),
.wpcf7-form p:has(input[name="your-email"]) {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
}

.wpcf7-form p:has(input[name="your-name"]) {
    margin-right: var(--wp--preset--spacing--10);
}

.wpcf7-form p:has(input[name="website"]),
.wpcf7-form p:has(input[name="tel"]) {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
}

.wpcf7-form p:has(input[name="website"]) {
    margin-right: var(--wp--preset--spacing--10);
}

/* Mobile: Stack to single column */
@media (max-width: 640px) {

    .wpcf7-form p:has(input[name="your-name"]),
    .wpcf7-form p:has(input[name="your-email"]),
    .wpcf7-form p:has(input[name="website"]),
    .wpcf7-form p:has(input[name="tel"]) {
        width: 100%;
        margin-right: 0;
    }
}

/* --- Labels --- */
.wpcf7-form label {
    display: block;
    /* font-size: var(--wp--preset--font-size--small); */
    /* font-weight: 600; */
    /* color: var(--wp--preset--color--medium-gray); */
    margin-bottom: 0.5rem;
    /* font-family: var(--wp--preset--font-family--body); */
}

/* --- Text Inputs & Selects --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--wp--preset--font-size--medium);
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--contrast);
    background: var(--wp--preset--color--base-2);
    border: 1px solid var(--wp--preset--color--light-gray);
    border-radius: var(--border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 input[type="url"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
    border-color: var(--wp--preset--color--medium-gray);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    border-color: var(--wp--preset--color--contrast);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}

/* --- Textarea --- */
.wpcf7 textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* --- Checkbox --- */
.wpcf7 input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    accent-color: var(--wp--preset--color--primary-blue);
    cursor: pointer;
    vertical-align: middle;
}

.wpcf7 .wpcf7-list-item {
    margin: 0;
}

.wpcf7 .wpcf7-list-item-label {
    display: inline;
    /* font-size: var(--wp--preset--font-size--small); */
    /* color: var(--wp--preset--color--medium-gray); */
    cursor: pointer;
}

/* --- Submit Button --- */
.wpcf7 input[type="submit"] {
    /* width: auto; */
    /* min-width: 160px; */
    /* height: 46px; */
    /* padding: 0 var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--base-2);
    background: var(--wp--preset--color--primary-blue);
    border: 1px solid var(--wp--preset--color--primary-blue);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--wp--preset--shadow--light); */
}

.wpcf7 input[type="submit"]:hover {
    /* background: var(--wp--preset--color--secondary-blue); */
    /* border-color: var(--wp--preset--color--secondary-blue); */
    /* box-shadow: var(--wp--preset--shadow--medium); */
}

.wpcf7 input[type="submit"]:active {
    transform: translateY(1px);
}