/**
 * Wildanet One Touch Switching – Checkout Styles
 */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

.ots-wrapper {
    border: 1px solid #cce0d6;
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
    background: #fff;
    font-family: 'Work Sans', sans-serif;
}

.ots-wrapper h3 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: .4em;
}

.ots-wrapper .ots-intro {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0 0 1.2em;
    color: #333;
}

/* Yes / No toggle buttons */
.ots-toggle {
    margin: 10px 0 20px;
    display: flex;
    gap: 10px;
}

.ots-btn {
    flex: 1;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: background .2s, color .2s;
}

.ots-btn.active.yes {
    background: #48A9A6 !important;
    color: #fff !important;
    border: 2px solid #48A9A6 !important;
}

.ots-btn.active.no {
    background: #C996D6 !important;
    color: #fff !important;
    border: 2px solid #C996D6 !important;
}

.ots-btn:not(.active).yes {
    background: #fff !important;
    color: #48A9A6 !important;
    border: 2px solid #48A9A6 !important;
}

.ots-btn:not(.active).no {
    background: #fff !important;
    color: #C996D6 !important;
    border: 2px solid #C996D6 !important;
}

/* Explanatory text */
.ots-wrapper .ots-explain {
    font-size: .95rem;
    color: #333;
    line-height: 1.5;
}

.ots-wrapper .ots-link {
    font-size: .9rem;
    margin-top: 8px;
}

.ots-wrapper .ots-link a {
    color: #d64045;
    text-decoration: none;
    font-weight: 500;
}

/* Details fields */
.ots-details {
    margin-top: 25px;
}

.ots-details .ots-details-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.ots-details input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 0;
    border: 1px solid #ccc;
    font-size: 1rem;
    margin-bottom: 10px;
}

/* Consent */
.ots-consent {
    margin-top: 20px;
}

.ots-consent p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: #333;
}

.ots-consent label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

.ots-wrapper input[type="checkbox"] {
    position: static !important;
    float: none !important;
    width: 18px;
    height: 18px;
    margin: 0;
}