/**
 * qTap Mobile Editor Block - Plugin-Specific Styles Only
 * 
 * Parent framework provides (DO NOT override):
 * - Input color, font-size, height, padding, border, background
 * - Button styling
 * - List/card/message styling
 * 
 * This file ONLY contains:
 * - Typography overrides (letter-spacing, text-align for OTP)
 * - Width hints for specific fields
 * - Layout for OTP row
 * - WhatsApp icon styling
 * - Screen reader utilities
 */

/* Screen reader only - for ARIA labels */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

/* WhatsApp icon styling */
.kdc-qtap-icon--whatsapp {
    color: #25D366;
    vertical-align: middle;
    transition: color 0.2s ease;
}

.kdc-qtap-whatsapp-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.kdc-qtap-whatsapp-link:hover .kdc-qtap-icon--whatsapp,
.kdc-qtap-whatsapp-link:focus .kdc-qtap-icon--whatsapp {
    color: #128C7E;
}

/* Mobile number row layout */
.kdc-qtap-mobile-number-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* OTP input: Only typography overrides */
.kdc-qtap-mobile-form .js-otp-input {
    text-align: center;
    letter-spacing: 0.2em;
}

/* OTP field wrapper - control width in flex row */
.kdc-qtap-otp-field {
    flex: 0 0 auto;
    width: auto;
    min-width: 12ch;
    max-width: 14ch;
}

/* Mobile input width hint */
.kdc-qtap-mobile-form .js-mobile-input {
    min-width: 16ch;
    max-width: 100%;
}

/* Validation message area */
.kdc-qtap-mobile-validation {
    min-height: 1.5em;
    padding: 4px 0;
}

/* OTP row layout - align-items baseline to preserve input height */
.kdc-qtap-mobile-otp-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Timer */
.kdc-qtap-mobile-timer {
    font-variant-numeric: tabular-nums;
    min-width: 4ch;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .kdc-qtap-mobile-form .js-mobile-input {
        width: 100%;
        min-width: 100%;
    }
    
    .kdc-qtap-mobile-otp-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .kdc-qtap-mobile-number-row {
        flex-wrap: wrap;
    }
}