/* MOT_INLINE_COMPONENT_2026_02_11 */
/* Reusable Vehicle MOT & Tax Check Component Styles */

.tv-mot-component {
    width: 100%;
    max-width: 100%;
}

.tv-mot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px, 1.8vw + 6px, 20px);
    align-items: start;
}

@media (min-width: 768px) {
    .tv-mot-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.tv-mot-card {
    background: var(--color-bg, #ffffff);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: clamp(10px, 2vw, 16px);
    padding: clamp(14px, 2.2vw + 6px, 24px);
    box-shadow: 0 8px 24px var(--color-shadow, rgba(0, 0, 0, 0.08));
    min-width: 0;
}

.tv-mot-form-header h3,
.tv-mot-results-header h3 {
    font-size: clamp(1.1rem, 2.2vw + 0.6rem, 1.5rem);
    margin-bottom: clamp(6px, 1vw + 4px, 10px);
    color: var(--color-text, #1a1a1a);
}

.tv-mot-form-header p,
.tv-mot-results-subtitle {
    font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
    color: var(--color-text-light, #666);
    margin: 0;
}

.tv-mot-form-body {
    margin-top: clamp(12px, 1.8vw + 6px, 20px);
}

.tv-mot-input-group {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vw + 4px, 10px);
    margin-bottom: clamp(12px, 1.8vw + 6px, 16px);
}

.tv-mot-input-group label {
    font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
}

.tv-mot-input {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: clamp(10px, 1.8vw + 6px, 14px);
    border: 2px solid var(--color-border, #e5e5e5);
    border-radius: clamp(8px, 1.5vw, 12px);
    font-size: clamp(1rem, 1vw + 0.7rem, 1.1rem);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.06em;
    background: var(--color-bg, #ffffff);
    color: var(--color-text, #1a1a1a);
    transition: all 0.2s ease;
    box-sizing: border-box;
    min-width: 0;
}

.tv-mot-input:focus {
    outline: none;
    border-color: var(--color-primary, #ff6600);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
}

.tv-mot-input::placeholder {
    color: var(--color-text-light, #999);
    text-transform: none;
}

.tv-mot-submit {
    width: 100%;
    min-height: 44px;
    font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
    padding: clamp(10px, 1.8vw + 6px, 14px) clamp(16px, 2.5vw + 8px, 24px);
    border-radius: clamp(8px, 1.5vw, 12px);
}

.tv-mot-results-body {
    margin-top: clamp(12px, 1.8vw + 6px, 20px);
    max-height: min(70vh, 720px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.tv-mot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw + 12px, 48px) clamp(12px, 2vw + 6px, 20px);
    text-align: center;
    color: var(--color-text-light, #999);
}

.tv-mot-placeholder svg {
    margin-bottom: clamp(12px, 2vw + 6px, 16px);
    opacity: 0.5;
}

.tv-mot-placeholder p {
    font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
    margin: 0;
}

/* Loading State */
.tv-mot-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 5vw + 16px, 60px) clamp(12px, 2vw + 6px, 20px);
    text-align: center;
}

.tv-mot-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 102, 0, 0.1);
    border-top-color: var(--color-primary, #ff6600);
    border-radius: 50%;
    animation: tvMotSpin 0.8s linear infinite;
    margin-bottom: clamp(12px, 2vw + 6px, 20px);
}

.tv-mot-loading-text {
    font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
    color: var(--color-text-light, #666);
    font-weight: 500;
    margin: 0;
}

/* Error State */
.tv-mot-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(32px, 5vw + 16px, 60px) clamp(12px, 2vw + 6px, 20px);
    text-align: center;
}

.tv-mot-error-icon {
    font-size: clamp(2.5rem, 4vw + 1.5rem, 3.5rem);
    margin-bottom: clamp(12px, 2vw + 6px, 16px);
}

.tv-mot-error-message {
    font-size: clamp(1rem, 1.2vw + 0.7rem, 1.1rem);
    color: #dc2626;
    font-weight: 600;
    margin: 0 0 clamp(12px, 2vw + 6px, 20px);
}

.tv-mot-retry-btn {
    min-height: 44px;
    padding: clamp(10px, 1.8vw + 6px, 14px) clamp(16px, 2.5vw + 8px, 24px);
}

/* Success State - Vehicle Data */
.tv-mot-reg-wrap {
    text-align: center;
    margin-bottom: clamp(14px, 2.2vw + 8px, 24px);
}

.tv-mot-vehicle-reg {
    display: inline-block;
    background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%);
    color: #000;
    font-size: clamp(1.4rem, 2.5vw + 0.8rem, 1.8rem);
    font-weight: 800;
    padding: clamp(10px, 1.5vw + 6px, 12px) clamp(18px, 3vw + 10px, 24px);
    border-radius: clamp(6px, 1.2vw, 8px);
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
    border: 3px solid #000;
    font-family: 'Courier New', monospace;
}

/* Summary Pills */
.tv-mot-summary {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1.2vw + 4px, 14px);
    margin: 0 0 clamp(12px, 1.8vw + 6px, 18px);
}

.tv-mot-summary-pill {
    background: var(--color-surface, #f9f9f9);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 999px;
    padding: clamp(6px, 1vw + 4px, 10px) clamp(10px, 1.8vw + 6px, 16px);
    font-size: clamp(0.85rem, 0.6vw + 0.75rem, 0.95rem);
    color: var(--color-text, #1a1a1a);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.8vw + 2px, 8px);
}

/* Data Sections */
.tv-mot-section {
    margin-bottom: clamp(12px, 1.8vw + 6px, 20px);
}

.tv-mot-section:last-child {
    margin-bottom: 0;
}

.tv-mot-section-title {
    font-size: clamp(1rem, 1.2vw + 0.7rem, 1.2rem);
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    margin-bottom: clamp(10px, 1.5vw + 6px, 16px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw + 4px, 8px);
}

.tv-mot-section-icon {
    font-size: clamp(1.2rem, 1.5vw + 0.8rem, 1.3rem);
}

.tv-mot-data-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(10px, 1.5vw + 6px, 12px);
}

@media (min-width: 480px) {
    .tv-mot-data-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

.tv-mot-data-item {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: clamp(8px, 1.5vw, 12px);
    padding: clamp(12px, 1.8vw + 6px, 14px) clamp(14px, 2vw + 8px, 16px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    gap: clamp(8px, 1.2vw + 4px, 12px);
}

.tv-mot-data-item:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.tv-mot-data-label {
    font-size: clamp(0.85rem, 0.6vw + 0.75rem, 0.9rem);
    color: #666;
    font-weight: 500;
}

.tv-mot-data-value {
    font-size: clamp(0.95rem, 0.8vw + 0.8rem, 1rem);
    color: var(--color-text, #1a1a1a);
    font-weight: 700;
    text-align: right;
}

/* Status Badges */
.tv-mot-badge {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.8vw + 2px, 6px);
    padding: clamp(5px, 0.8vw + 3px, 6px) clamp(12px, 1.8vw + 6px, 14px);
    border-radius: 20px;
    font-size: clamp(0.85rem, 0.6vw + 0.75rem, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tv-mot-badge-valid {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.tv-mot-badge-expired {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.tv-mot-badge-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.tv-mot-badge-info {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

/* Collapsible Details */
.tv-mot-details {
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: clamp(8px, 1.5vw, 14px);
    padding: clamp(10px, 1.5vw + 6px, 14px);
    background: var(--color-surface, #f9f9f9);
    margin-bottom: clamp(10px, 1.5vw + 6px, 16px);
}

.tv-mot-details:last-child {
    margin-bottom: 0;
}

.tv-mot-details-summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.tv-mot-details-summary::-webkit-details-marker {
    display: none;
}

.tv-mot-details-summary::after {
    content: "+";
    color: var(--color-primary, #ff6600);
    font-weight: 700;
    font-size: clamp(1.2rem, 1.5vw + 0.8rem, 1.4rem);
    line-height: 1;
}

.tv-mot-details[open] .tv-mot-details-summary::after {
    content: "–";
}

.tv-mot-details[open] .tv-mot-data-grid {
    margin-top: clamp(10px, 1.5vw + 6px, 14px);
}

/* Animations */
@keyframes tvMotSpin {
    to { transform: rotate(360deg); }
}

/* Mobile Optimizations */
@media (max-width: 480px) {
    .tv-mot-data-item {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(4px, 0.8vw + 2px, 6px);
    }

    .tv-mot-data-value {
        text-align: left;
    }

    .tv-mot-vehicle-reg {
        font-size: clamp(1.2rem, 3vw + 0.6rem, 1.4rem);
        padding: clamp(8px, 1.2vw + 4px, 10px) clamp(14px, 2.5vw + 8px, 18px);
    }
}

/* Safe Area Support (iPhone notch) */
@supports (padding: env(safe-area-inset-bottom)) {
    .tv-mot-results-body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}