/* Outworq WiFi Tracker - Public Styles */
/* !important used ONLY where themes commonly override */
/* Dynamic elements (tabs, modals) use normal CSS for JS compatibility */

/* Container */
.owt-container { 
    max-width: 700px !important; 
    margin: 0 auto !important; 
    padding: 20px !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; 
}
/* Box-sizing without !important to allow inline styles to work */
.owt-container * { 
    box-sizing: border-box; 
}

/* Timer Section */
.owt-timer-section { 
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important; 
    border-radius: 16px !important; 
    padding: 30px !important; 
    text-align: center !important; 
    color: white !important; 
    margin-bottom: 20px !important; 
    box-shadow: 0 10px 40px rgba(67, 56, 202, 0.4) !important; 
}

.owt-status-indicator { 
    display: inline-flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
    padding: 10px 20px !important; 
    border-radius: 20px !important; 
    font-size: 14px !important; 
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    margin-bottom: 20px !important; 
    letter-spacing: 0.5px !important; 
}
.owt-status-indicator.active { 
    background: rgba(255, 255, 255, 0.95) !important; 
    color: #166534 !important; 
}
.owt-status-indicator.inactive { 
    background: rgba(0, 0, 0, 0.3) !important; 
    color: rgba(255, 255, 255, 0.9) !important; 
}

.owt-pulse { 
    width: 10px !important; 
    height: 10px !important; 
    background: #4ade80 !important; 
    border-radius: 50% !important; 
    animation: pulse 2s infinite !important; 
}
@keyframes pulse { 
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 
    70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } 
}

.owt-timer-display { margin: 20px 0 !important; }
.owt-timer { 
    font-size: 64px !important; 
    font-weight: 800 !important; 
    font-family: "SF Mono", Monaco, Consolas, monospace !important; 
    letter-spacing: 4px !important; 
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; 
}
.owt-started-at { 
    font-size: 13px !important; 
    opacity: 0.8 !important; 
    margin-top: 8px !important; 
}

.owt-current-charge { 
    background: rgba(255, 255, 255, 0.25) !important; 
    border: 2px solid rgba(255, 255, 255, 0.3) !important; 
    border-radius: 12px !important; 
    padding: 15px 25px !important; 
    display: inline-block !important; 
    margin-bottom: 20px !important; 
}
.owt-charge-label { 
    font-size: 14px !important; 
    opacity: 0.95 !important; 
    font-weight: 600 !important; 
}
.owt-charge-amount { 
    font-size: 28px !important; 
    font-weight: 800 !important; 
    margin-left: 10px !important; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; 
}

/* Buttons - styling only, no display control */
.owt-btn { 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    padding: 14px 32px !important; 
    font-size: 16px !important; 
    font-weight: 600 !important; 
    border: none !important; 
    border-radius: 8px !important; 
    cursor: pointer !important; 
    transition: all 0.2s ease !important; 
    text-decoration: none !important; 
}
.owt-btn-icon { font-size: 18px !important; }
.owt-btn-start { 
    background: white !important; 
    color: #4338ca !important; 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; 
    font-weight: 700 !important; 
}
.owt-btn-start:hover { 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; 
}
.owt-btn-start:disabled { 
    background: #ccc !important; 
    color: #666 !important; 
    cursor: not-allowed !important; 
    transform: none !important; 
}
.owt-btn-stop { 
    background: #dc2626 !important; 
    color: white !important; 
    font-weight: 700 !important; 
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3) !important; 
}
.owt-btn-stop:hover { 
    background: #b91c1c !important; 
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important; 
}
.owt-btn-pay { 
    background: #667eea !important; 
    color: white !important; 
    width: 100% !important; 
    margin-top: 20px !important; 
}
.owt-btn-pay:hover { background: #5a67d8 !important; }
.owt-btn-pay:disabled { 
    background: #ccc !important; 
    cursor: not-allowed !important; 
}
.owt-btn-small { 
    padding: 8px 16px !important; 
    font-size: 13px !important; 
}
.owt-btn-primary { 
    background: #667eea !important; 
    color: white !important; 
}
.owt-btn-login { 
    background: #667eea !important; 
    color: white !important; 
    margin: 5px !important; 
}

/* Notices */
.owt-unpaid-notice, .owt-info-notice { 
    background: #fef3c7 !important; 
    border: 2px solid #f59e0b !important; 
    border-radius: 12px !important; 
    padding: 20px !important; 
    margin-bottom: 20px !important; 
    text-align: center !important; 
}
.owt-notice-icon { 
    font-size: 32px !important; 
    margin-bottom: 10px !important; 
}
.owt-unpaid-notice h4, .owt-info-notice h4 { 
    margin: 0 0 10px 0 !important; 
    color: #92400e !important; 
}
.owt-unpaid-notice p, .owt-info-notice p { 
    margin: 0 0 15px 0 !important; 
    color: #78350f !important; 
}
.owt-unpaid-list { text-align: left !important; }
.owt-unpaid-item { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    padding: 10px !important; 
    background: white !important; 
    border-radius: 6px !important; 
    margin-bottom: 8px !important; 
}
.owt-unpaid-amount { 
    font-weight: 700 !important; 
    color: #92400e !important; 
}

/* Tabs - NO !important on display, let JS control */
.owt-tabs-section { margin-top: 30px !important; }
.owt-tabs { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    border-bottom: 3px solid #e5e7eb !important; 
    margin-bottom: 20px !important; 
}
.owt-tab { 
    padding: 14px 18px !important; 
    background: none !important; 
    border: none !important; 
    font-size: 14px !important; 
    font-weight: 700 !important; 
    color: #6b7280 !important; 
    cursor: pointer !important; 
    border-bottom: 3px solid transparent !important; 
    margin-bottom: -3px !important; 
    transition: all 0.2s !important; 
    white-space: nowrap !important; 
}
.owt-tab:hover { 
    color: #4338ca !important; 
    background: #f9fafb !important; 
}
.owt-tab.active { 
    color: #4338ca !important; 
    border-bottom-color: #4338ca !important; 
    background: #f9fafb !important; 
}

/* Tab content - NO !important, JS needs to show/hide */
.owt-tab-content {
    display: none; /* Default hidden, JS will show active */
}

.owt-notes-content, .owt-passwords-content { 
    background: #f9fafb !important; 
    border: 2px solid #e5e7eb !important; 
    border-radius: 8px !important; 
    padding: 20px !important; 
    font-size: 14px !important; 
    line-height: 1.6 !important; 
    color: #374151 !important; 
}
.owt-passwords-content { 
    font-family: "SF Mono", Monaco, Consolas, monospace !important; 
    white-space: pre-wrap !important; 
}

/* Tables */
.owt-table { 
    width: 100% !important; 
    border-collapse: collapse !important; 
    font-size: 14px !important; 
}
.owt-table th, .owt-table td { 
    padding: 12px !important; 
    text-align: left !important; 
    border-bottom: 1px solid #e5e7eb !important; 
}
.owt-table th { 
    background: #f8f9fa !important; 
    font-weight: 600 !important; 
    color: #666 !important; 
    font-size: 12px !important; 
    text-transform: uppercase !important; 
}
.owt-table td { color: #333 !important; }
.owt-table td small { 
    display: block !important; 
    color: #999 !important; 
    font-size: 12px !important; 
}

/* Status Badges */
.owt-status-badge { 
    display: inline-block !important; 
    padding: 4px 10px !important; 
    border-radius: 12px !important; 
    font-size: 11px !important; 
    font-weight: 600 !important; 
    text-transform: uppercase !important; 
}
.owt-status-active { 
    background: #dcfce7 !important; 
    color: #166534 !important; 
}
.owt-status-pending { 
    background: #fef3c7 !important; 
    color: #92400e !important; 
}
.owt-status-invoiced { 
    background: #e0e7ff !important; 
    color: #3730a3 !important; 
}
.owt-status-paid { 
    background: #d1fae5 !important; 
    color: #065f46 !important; 
}
.owt-status-unpaid { 
    background: #fee2e2 !important; 
    color: #991b1b !important; 
}

/* Pagination */
.owt-pagination { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    gap: 10px !important; 
    margin-top: 20px !important; 
    padding: 20px 0 !important; 
}
.owt-pagination button { 
    padding: 8px 16px !important; 
    border: 1px solid #e5e7eb !important; 
    background: white !important; 
    color: #4338ca !important; 
    border-radius: 6px !important; 
    cursor: pointer !important; 
    font-weight: 600 !important; 
    transition: all 0.2s !important; 
    font-size: 14px !important; 
}
.owt-pagination button:hover:not(:disabled) { 
    background: #4338ca !important; 
    color: white !important; 
}
.owt-pagination button:disabled { 
    opacity: 0.5 !important; 
    cursor: not-allowed !important; 
}
.owt-pagination span { 
    color: #666 !important; 
    font-size: 14px !important; 
}

/* Modal - Hidden by default, NO !important on display */
.owt-modal { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    background: rgba(0, 0, 0, 0.6) !important; 
    display: none; /* No !important - JS needs to control */
    align-items: center !important; 
    justify-content: center !important; 
    z-index: 10000 !important; 
}
/* When shown by JS, display as flex */
.owt-modal[style*="display: block"],
.owt-modal[style*="display:block"] { 
    display: flex !important; 
}

.owt-modal-content { 
    background: white !important; 
    border-radius: 16px !important; 
    padding: 30px !important; 
    max-width: 450px !important; 
    width: 90% !important; 
    position: relative !important; 
}
.owt-modal-close { 
    position: absolute !important; 
    top: 15px !important; 
    right: 20px !important; 
    font-size: 28px !important; 
    color: #999 !important; 
    cursor: pointer !important; 
    background: none !important; 
    border: none !important; 
}
.owt-modal-close:hover { color: #333 !important; }
.owt-modal-content h3 { 
    margin: 0 0 20px 0 !important; 
    font-size: 22px !important; 
    color: #333 !important; 
}

.owt-invoice-summary { margin-bottom: 20px !important; }
.owt-invoice-name { 
    font-size: 18px !important; 
    font-weight: 700 !important; 
    color: #667eea !important; 
    margin-bottom: 15px !important; 
    text-align: center !important; 
}
.owt-summary-row { 
    display: flex !important; 
    justify-content: space-between !important; 
    padding: 8px 0 !important; 
    font-size: 14px !important; 
    color: #666 !important; 
}
.owt-summary-row.owt-total { 
    border-top: 2px solid #e5e7eb !important; 
    margin-top: 8px !important; 
    padding-top: 12px !important; 
    font-size: 18px !important; 
    font-weight: 700 !important; 
    color: #333 !important; 
}

#owt-card-element { 
    padding: 15px !important; 
    border: 2px solid #e5e7eb !important; 
    border-radius: 8px !important; 
    background: white !important; 
}
#owt-card-errors { 
    color: #ef4444 !important; 
    font-size: 13px !important; 
    margin-top: 10px !important; 
    min-height: 20px !important; 
}
#owt-payment-success { 
    text-align: center !important; 
    padding: 20px !important; 
}
.owt-success-icon { 
    width: 60px !important; 
    height: 60px !important; 
    background: #10b981 !important; 
    color: white !important; 
    font-size: 32px !important; 
    line-height: 60px !important; 
    border-radius: 50% !important; 
    margin: 0 auto 15px !important; 
}

/* Misc */
.owt-no-data, .owt-no-invoices { 
    text-align: center !important; 
    color: #999 !important; 
    padding: 30px !important; 
}
.owt-login-required { 
    text-align: center !important; 
    padding: 40px 20px !important; 
    background: #f8f9fa !important; 
    border-radius: 16px !important; 
}
.owt-login-required p { 
    margin: 0 0 20px 0 !important; 
    color: #666 !important; 
}
.owt-error { 
    background: #fee2e2 !important; 
    color: #991b1b !important; 
    padding: 15px !important; 
    border-radius: 8px !important; 
    text-align: center !important; 
}

/* Products Section */
.owt-products-section h4 { 
    margin: 20px 0 15px 0 !important; 
    color: #333 !important; 
    font-size: 18px !important; 
    font-weight: 700 !important; 
}
.owt-add-product-form { 
    background: #f9fafb !important; 
    padding: 25px !important; 
    border-radius: 12px !important; 
    margin-bottom: 30px !important; 
    border: 2px solid #e5e7eb !important; 
}
.owt-add-product-form label { 
    display: block !important; 
    margin-bottom: 8px !important; 
    color: #374151 !important; 
    font-weight: 600 !important; 
    font-size: 14px !important; 
}
.owt-add-product-form select, 
.owt-add-product-form input[type="number"] { 
    width: 100% !important; 
    max-width: 400px !important; 
    padding: 10px !important; 
    margin: 5px 0 15px 0 !important; 
    border: 2px solid #e5e7eb !important; 
    border-radius: 8px !important; 
    font-size: 14px !important; 
}
.owt-add-product-form select:focus, 
.owt-add-product-form input[type="number"]:focus { 
    outline: none !important; 
    border-color: #4338ca !important; 
}
.owt-add-product-form input[type="number"] { 
    max-width: 120px !important; 
}
#owt-product-total-preview { 
    font-size: 20px !important; 
    font-weight: 700 !important; 
    color: #4338ca !important; 
    margin: 15px 0 20px 0 !important; 
    padding: 15px !important; 
    background: white !important; 
    border-radius: 8px !important; 
    text-align: center !important; 
}
.owt-recent-purchases { 
    margin-top: 30px !important; 
}

/* Message Form */
.owt-message-form-section h4 { 
    margin: 0 0 10px 0 !important; 
    color: #333 !important; 
    font-size: 20px !important; 
    font-weight: 700 !important; 
}
.owt-message-intro { 
    color: #666 !important; 
    margin: 0 0 25px 0 !important; 
    line-height: 1.6 !important; 
}
.owt-form-group { 
    margin-bottom: 20px !important; 
}
.owt-form-group label { 
    display: block !important; 
    margin-bottom: 8px !important; 
    color: #374151 !important; 
    font-weight: 600 !important; 
    font-size: 14px !important; 
}
.owt-form-group input[type="text"], 
.owt-form-group textarea { 
    width: 100% !important; 
    padding: 12px !important; 
    border: 2px solid #e5e7eb !important; 
    border-radius: 8px !important; 
    font-size: 14px !important; 
    font-family: inherit !important; 
    transition: border-color 0.2s !important; 
}
.owt-form-group input[type="text"]:focus, 
.owt-form-group textarea:focus { 
    outline: none !important; 
    border-color: #4338ca !important; 
}
.owt-form-group textarea { 
    resize: vertical !important; 
    min-height: 150px !important; 
}
.owt-char-count { 
    display: block !important; 
    margin-top: 5px !important; 
    color: #999 !important; 
    font-size: 12px !important; 
}
.owt-sender-info { 
    background: #f9fafb !important; 
    padding: 12px !important; 
    border-radius: 6px !important; 
    margin-bottom: 20px !important; 
}
.owt-sender-info small { 
    color: #666 !important; 
    font-size: 13px !important; 
}
.owt-message-success { 
    text-align: center !important; 
    padding: 40px 20px !important; 
    background: #f0fdf4 !important; 
    border: 2px solid #86efac !important; 
    border-radius: 12px !important; 
}
.owt-message-success .owt-success-icon { 
    width: 80px !important; 
    height: 80px !important; 
    background: #10b981 !important; 
    color: white !important; 
    font-size: 48px !important; 
    line-height: 80px !important; 
    border-radius: 50% !important; 
    margin: 0 auto 20px !important; 
}
.owt-message-success h4 { 
    margin: 0 0 10px 0 !important; 
    color: #065f46 !important; 
    font-size: 24px !important; 
}
.owt-message-success p { 
    margin: 0 0 20px 0 !important; 
    color: #047857 !important; 
    font-size: 16px !important; 
}

/* Selection Wrapper (Location + Pricing) */
.owt-selection-wrapper {
    margin: 25px 0 !important;
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
}

/* Location Select (50% width - equal to pricing) */
.owt-location-select-wrapper { 
    flex: 0 0 calc(50% - 7.5px) !important;
    min-width: 200px !important;
}
.owt-location-label { 
    display: block !important; 
    margin-bottom: 10px !important; 
    font-size: 14px !important; 
    font-weight: 600 !important; 
    color: white !important; 
    text-align: center !important; 
}
.owt-location-select { 
    width: 100% !important;
    padding: 12px 15px !important; 
    font-size: 16px !important; 
    border: 2px solid rgba(255,255,255,0.3) !important; 
    border-radius: 8px !important; 
    background: rgba(255,255,255,0.95) !important; 
    color: #333 !important; 
    cursor: pointer !important; 
    transition: all 0.2s !important; 
}
.owt-location-select:focus { 
    outline: none !important; 
    border-color: white !important; 
    background: white !important; 
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3) !important; 
}

/* Pricing Select (50% width - equal to location) */
.owt-pricing-select-wrapper {
    flex: 0 0 calc(50% - 7.5px) !important;
    min-width: 200px !important;
}
.owt-pricing-label {
    display: block !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: white !important;
    text-align: center !important;
}
.owt-pricing-select {
    width: 100% !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.95) !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.owt-pricing-select:focus {
    outline: none !important;
    border-color: white !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3) !important;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .owt-selection-wrapper {
        flex-direction: column !important;
    }
    .owt-location-select-wrapper,
    .owt-pricing-select-wrapper {
        flex: 1 1 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
}

/* Profile Section */
.owt-profile-section h4 { 
    margin: 20px 0 15px 0 !important; 
    color: #333 !important; 
    font-size: 20px !important; 
    font-weight: 700 !important; 
}
.owt-profile-info { 
    background: #f9fafb !important; 
    padding: 20px !important; 
    border-radius: 8px !important; 
    border: 2px solid #e5e7eb !important; 
}
.owt-profile-item { 
    padding: 10px 0 !important; 
    border-bottom: 1px solid #e5e7eb !important; 
}
.owt-profile-item:last-child { 
    border-bottom: none !important; 
}
.owt-profile-item strong { 
    color: #374151 !important; 
    margin-right: 10px !important; 
}
.owt-profile-password-section { 
    margin-top: 30px !important; 
}
#owt-password-success { 
    text-align: center !important; 
    padding: 20px !important; 
    background: #f0fdf4 !important; 
    border: 2px solid #86efac !important; 
    border-radius: 8px !important; 
}
#owt-password-success .owt-success-icon { 
    width: 60px !important; 
    height: 60px !important; 
    background: #10b981 !important; 
    color: white !important; 
    font-size: 36px !important; 
    line-height: 60px !important; 
    border-radius: 50% !important; 
    margin: 0 auto 15px !important; 
}
#owt-password-success p { 
    margin: 0 !important; 
    color: #065f46 !important; 
    font-weight: 600 !important; 
}