/* Trading Widget - Production CSS */
/* Namespace: tw- (trading-widget) */
/* BEM Methodology + CSS Variables for easy customization */

/* ============================================
   CSS VARIABLES - Customize these colors
   ============================================ */
.tw-widget {
    /* Primary Colors - Change these to match your site */
    --tw-primary: #007bff;
    --tw-success: #10b981;
    --tw-warning: #f59e0b;
    --tw-danger: #ef4444;
    --tw-purple: #8b5cf6;
    
    /* Text Colors */
    --tw-text-primary: #1f2937;
    --tw-text-secondary: #6b7280;
    
    /* Background Colors */
    --tw-bg-primary: #ffffff;
    --tw-bg-secondary: #f9fafb;
    --tw-bg-tertiary: #f3f4f6;
    
    /* Border & Shadow */
    --tw-border: #e5e7eb;
    --tw-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --tw-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --tw-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    
    /* Other */
    --tw-radius: 8px;
    --tw-transition: all 0.2s ease;
}

/* Reset inside widget */
.tw-widget,.tw-widget *{margin:0;padding:0;box-sizing:border-box}

/* Main Container */
.tw-widget{width:100%;max-width:1200px;margin:0 auto;padding:24px;background:var(--tw-bg-primary);border:1px solid var(--tw-border);border-radius:var(--tw-radius);box-shadow:var(--tw-shadow-md);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.5;color:var(--tw-text-primary)}

/* SVG Icons */
.tw-icon{width:24px;height:24px;display:inline-block;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-position:center}
.tw-icon--lg{width:32px;height:32px}
.tw-icon--sm{width:16px;height:16px}

/* Flag SVG Icons */
.tw-icon--australia{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="%23012169"/><path d="M0 0l32 16M32 0L0 16" stroke="%23fff" stroke-width="4"/><path d="M0 0l32 16M32 0L0 16" stroke="%23C8102E" stroke-width="2"/><path d="M16 0v32M0 16h32" stroke="%23fff" stroke-width="6"/><path d="M16 0v32M0 16h32" stroke="%23C8102E" stroke-width="4"/><circle cx="24" cy="8" r="1.5" fill="%23fff"/><circle cx="26" cy="12" r="1" fill="%23fff"/><circle cx="22" cy="22" r="1.5" fill="%23fff"/><circle cx="18" cy="26" r="1" fill="%23fff"/><circle cx="8" cy="22" r="1.5" fill="%23fff"/></svg>')}
.tw-icon--japan{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="%23fff"/><circle cx="16" cy="16" r="7" fill="%23BC002D"/></svg>')}
.tw-icon--uk{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="%23012169"/><path d="M0 0l32 16M32 0L0 16" stroke="%23fff" stroke-width="4"/><path d="M0 0l32 16M32 0L0 16" stroke="%23C8102E" stroke-width="2"/><path d="M16 0v32M0 16h32" stroke="%23fff" stroke-width="6"/><path d="M16 0v32M0 16h32" stroke="%23C8102E" stroke-width="4"/></svg>')}
.tw-icon--usa{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="%23B22234"/><path d="M0 2.5h32M0 6.2h32M0 9.8h32M0 13.5h32M0 17.2h32M0 20.8h32M0 24.5h32M0 28.2h32" stroke="%23fff" stroke-width="2"/><rect width="13" height="14" fill="%233C3B6E"/><g fill="%23fff"><circle cx="2.5" cy="2" r="0.8"/><circle cx="6" cy="2" r="0.8"/><circle cx="9.5" cy="2" r="0.8"/><circle cx="4.2" cy="4" r="0.8"/><circle cx="7.8" cy="4" r="0.8"/><circle cx="2.5" cy="6" r="0.8"/><circle cx="6" cy="6" r="0.8"/><circle cx="9.5" cy="6" r="0.8"/><circle cx="4.2" cy="8" r="0.8"/><circle cx="7.8" cy="8" r="0.8"/><circle cx="2.5" cy="10" r="0.8"/><circle cx="6" cy="10" r="0.8"/><circle cx="9.5" cy="10" r="0.8"/></g></svg>')}
.tw-icon--eu{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="%23003399"/><g fill="%23FFCC00"><circle cx="16" cy="4" r="1"/><circle cx="22" cy="6" r="1"/><circle cx="26" cy="11" r="1"/><circle cx="26" cy="17" r="1"/><circle cx="22" cy="22" r="1"/><circle cx="16" cy="24" r="1"/><circle cx="10" cy="22" r="1"/><circle cx="6" cy="17" r="1"/><circle cx="6" cy="11" r="1"/><circle cx="10" cy="6" r="1"/></g></svg>')}

/* Functional Icons */
.tw-icon--sunrise{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23f59e0b" d="M3 17h18v2H3v-2zm9-13l4 4h-3v4h-2v-4H8l4-4zm9 8c0-4.42-3.58-8-8-8v2c3.31 0 6 2.69 6 6h2zM5 12c0-3.31 2.69-6 6-6V4c-4.42 0-8 3.58-8 8h2z"/></svg>')}
.tw-icon--moon{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%238b5cf6" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>')}
.tw-icon--globe-asia{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23f59e0b" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>')}
.tw-icon--globe-americas{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ef4444" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>')}
.tw-icon--info{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23007bff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>')}
.tw-icon--alert{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23f59e0b" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>')}
.tw-icon--lightbulb{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23f59e0b" d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>')}
.tw-icon--chart{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23007bff" d="M9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4zm2.5 2.1h-15V5h15v14.1zm0-16.1h-15c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>')}
.tw-icon--lock{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2310b981" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>')}

/* Header */
.tw-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:2px solid var(--tw-border);margin-bottom:24px}
.tw-header__left{display:flex;align-items:center;gap:24px;flex:1}
.tw-header__title{font-size:1.5rem;font-weight:700;color:var(--tw-text-primary)}
.tw-header__time{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--tw-bg-tertiary);border-radius:var(--tw-radius);font-size:1.25rem;font-weight:600;color:var(--tw-primary)}
.tw-header__time-indicator{width:8px;height:8px;background:var(--tw-success);border-radius:50%;animation:tw-pulse 2s infinite}

@keyframes tw-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.4);transform:scale(1)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0);transform:scale(1.1)}}

/* Market Selector */
.tw-market-selector{display:flex;gap:8px;background:var(--tw-bg-secondary);padding:4px;border-radius:var(--tw-radius)}
.tw-market-btn{padding:8px 16px;border:none;background:transparent;border-radius:6px;font-size:0.875rem;font-weight:600;color:var(--tw-text-secondary);cursor:pointer;transition:var(--tw-transition);white-space:nowrap}
.tw-market-btn:hover{background:var(--tw-bg-primary)}
.tw-market-btn--active{background:var(--tw-primary);color:white;box-shadow:var(--tw-shadow-sm)}

/* Status Bar */
.tw-status{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--tw-bg-secondary);border-radius:var(--tw-radius);margin-bottom:24px}
.tw-status__market{display:flex;align-items:center;gap:10px}
.tw-status__indicator{width:10px;height:10px;border-radius:50%;background:var(--tw-success)}
.tw-status__indicator--closed{background:var(--tw-danger)}
.tw-status__text{font-weight:600;color:var(--tw-text-primary)}
.tw-status__holiday{display:none;align-items:center;gap:6px;padding:8px 12px;background:var(--tw-warning);color:white;border-radius:6px;font-size:0.875rem;font-weight:500}
.tw-status__holiday--active{display:flex}

/* Sessions Grid */
.tw-sessions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}

/* Session Card */
.tw-session{position:relative;padding:16px;background:var(--tw-bg-secondary);border:2px solid var(--tw-border);border-radius:var(--tw-radius);transition:var(--tw-transition);overflow:hidden}
.tw-session:hover{transform:translateY(-2px);box-shadow:var(--tw-shadow-lg);border-color:var(--tw-primary)}
.tw-session--active{background:linear-gradient(135deg,rgba(0,123,255,0.05) 0%,rgba(16,185,129,0.05) 100%);border-color:var(--tw-success)}
.tw-session--inactive{opacity:0.6}
.tw-session__badge{position:absolute;top:0;right:0;padding:4px 12px;background:var(--tw-success);color:white;font-size:0.75rem;font-weight:700;text-transform:uppercase;border-bottom-left-radius:var(--tw-radius)}
.tw-session__badge--pre{background:var(--tw-warning)}
.tw-session__badge--after{background:var(--tw-purple)}
.tw-session__badge--closed{background:var(--tw-danger)}
.tw-session__header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tw-session__icon{display:flex;align-items:center;justify-content:center}
.tw-session__info{flex:1}
.tw-session__name{font-weight:700;color:var(--tw-text-primary);font-size:1rem;margin-bottom:2px}
.tw-session__time{font-size:0.875rem;color:var(--tw-text-secondary)}
.tw-session__details{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.tw-session__countdown{font-size:0.875rem;font-weight:600;color:var(--tw-primary)}
.tw-session__progress{width:100%;height:4px;background:var(--tw-border);border-radius:2px;overflow:hidden;margin-top:12px}
.tw-session__progress-fill{height:100%;background:linear-gradient(90deg,var(--tw-primary),var(--tw-success));border-radius:2px;transition:width 0.3s ease}

/* Timeline */
.tw-timeline{padding:20px;background:var(--tw-bg-secondary);border-radius:var(--tw-radius);margin-top:24px}
.tw-timeline__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.tw-timeline__title{font-weight:700;color:var(--tw-text-primary);font-size:0.875rem;text-transform:uppercase;letter-spacing:0.05em}
.tw-timeline__legend{display:flex;gap:16px;flex-wrap:wrap}
.tw-timeline__legend-item{display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--tw-text-secondary)}
.tw-timeline__legend-color{width:12px;height:12px;border-radius:2px}
.tw-timeline__container{position:relative;height:60px;background:var(--tw-border);border-radius:var(--tw-radius);overflow:hidden}
.tw-timeline__hours{position:absolute;bottom:-25px;width:100%;display:flex;justify-content:space-between;padding:0 10px;font-size:0.625rem;color:var(--tw-text-secondary)}
.tw-timeline__session{position:absolute;height:100%;display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:0.75rem;opacity:0.8;transition:opacity 0.3s ease}
.tw-timeline__session:hover{opacity:1;z-index:10}
.tw-timeline__marker{position:absolute;width:2px;height:100%;background:var(--tw-danger);box-shadow:0 0 10px rgba(239,68,68,0.5);z-index:20;pointer-events:none}
.tw-timeline__marker::before{content:'';position:absolute;top:-4px;left:-4px;width:10px;height:10px;background:var(--tw-danger);border-radius:50%}

/* Info Section */
.tw-info{display:flex;align-items:center;gap:12px;padding:16px;background:var(--tw-bg-tertiary);border-left:4px solid var(--tw-primary);border-radius:var(--tw-radius);margin-top:20px}
.tw-info__icon{display:flex;align-items:center;justify-content:center}
.tw-info__text{flex:1;font-size:0.875rem;color:var(--tw-text-secondary);line-height:1.6}

/* Responsive */
@media (max-width:768px){
.tw-widget{padding:16px}
.tw-header{flex-direction:column;align-items:stretch}
.tw-header__left{flex-direction:column;align-items:stretch;gap:12px}
.tw-header__title{font-size:1.25rem;text-align:center}
.tw-header__time{justify-content:center;font-size:1.125rem}
.tw-market-selector{justify-content:center}
.tw-sessions{grid-template-columns:1fr}
.tw-status{flex-direction:column;gap:12px;text-align:center}
.tw-timeline__legend{justify-content:center}
.tw-info{flex-direction:column;text-align:center}
}

@media (max-width:480px){
.tw-market-btn{padding:6px 12px;font-size:0.75rem}
.tw-session{padding:12px}
.tw-timeline__container{height:40px}
}

/* Dark Mode Support */
@media (prefers-color-scheme:dark){
.tw-widget{--tw-text-primary:#f3f4f6;--tw-text-secondary:#9ca3af;--tw-bg-primary:#1f2937;--tw-bg-secondary:#111827;--tw-bg-tertiary:#374151;--tw-border:#374151}
}

/* Print */
@media print{
.tw-widget{box-shadow:none;border:1px solid #000}
.tw-market-selector{display:none}
}