/**
 * Precision Flange & Machine - AI Assistant & ASME Engineering Hub Styles
 * Bulletproof Scoped CSS (Immune to WordPress Theme Overrides) + Custom Dark Dropdowns
 * Version: 1.3.0
 */

/* ==========================================================================
   0. Hide Legacy Old Chatbot Elements Safely
   ========================================================================== */
#chatbot-toggle,
#contact-box,
#chatbot-frame {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   1. Root Container & Theme-Isolation Reset (#pfamChatbotRoot)
   ========================================================================== */
#pfamChatbotRoot.pfam-chatbot-root {
    position: fixed !important;
    z-index: 999999 !important;
    bottom: 24px !important;
    right: 24px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    color: #f1f5f9 !important;
}

#pfamChatbotRoot.pfam-chatbot-root *,
#pfamChatbotRoot.pfam-chatbot-root *::before,
#pfamChatbotRoot.pfam-chatbot-root *::after {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Base reset for all buttons inside the widget so WP theme never turns them into white boxes */
#pfamChatbotRoot button {
    appearance: none !important;
    -webkit-appearance: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
}

/* ==========================================================================
   2. Floating Launcher Pill (#pfamChatLauncher)
   ========================================================================== */
#pfamChatbotRoot #pfamChatLauncher.pfam-chat-launcher {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #0b1120 !important;
    background-color: #0b1120 !important;
    background-image: linear-gradient(135deg, #0f172a 0%, #0b1120 100%) !important;
    border: 2px solid #ff9933 !important;
    border-radius: 50px !important;
    padding: 8px 20px 8px 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 153, 51, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    user-select: none !important;
    outline: none !important;
    width: auto !important;
    height: auto !important;
    text-transform: none !important;
}

#pfamChatbotRoot #pfamChatLauncher.pfam-chat-launcher:hover {
    transform: translateY(-3px) scale(1.02) !important;
    background: #111a2e !important;
    background-color: #111a2e !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 28px rgba(255, 153, 51, 0.55) !important;
    border-color: #ffa74f !important;
}

#pfamChatbotRoot .pfam-launcher-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border: 1.5px solid #ff9933 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

#pfamChatbotRoot .pfam-launcher-avatar .pfam-avatar-img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

#pfamChatbotRoot .pfam-launcher-dot {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 12px !important;
    height: 12px !important;
    background: #10b981 !important;
    border: 2px solid #0b1120 !important;
    border-radius: 50% !important;
    animation: pfamPulseGreen 2s infinite !important;
}

@keyframes pfamPulseGreen {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.75); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

#pfamChatbotRoot .pfam-launcher-content {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
}

#pfamChatbotRoot .pfam-launcher-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    line-height: 1.2 !important;
    display: block !important;
}

#pfamChatbotRoot .pfam-launcher-sub {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #ff9933 !important;
    letter-spacing: 0.2px !important;
    margin-top: 2px !important;
    text-transform: none !important;
    display: block !important;
}

#pfamChatbotRoot .pfam-launcher-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #0b1120 !important;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.6) !important;
}

/* ==========================================================================
   3. Chat Window Container (#pfamChatWindow)
   ========================================================================== */
#pfamChatbotRoot #pfamChatWindow.pfam-chat-window {
    position: fixed !important;
    bottom: 94px !important;
    right: 24px !important;
    width: 440px !important;
    max-width: calc(100vw - 32px) !important;
    height: 670px !important;
    max-height: calc(100vh - 120px) !important;
    background: #0f172a !important;
    background-color: #0f172a !important;
    border: 1.5px solid rgba(255, 153, 51, 0.45) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 153, 51, 0.22) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateY(20px) scale(0.96) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#pfamChatbotRoot #pfamChatWindow.pfam-chat-window.active {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   4. Header & Top Control Buttons
   ========================================================================== */
#pfamChatbotRoot .pfam-chat-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
}

#pfamChatbotRoot .pfam-chat-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

#pfamChatbotRoot .pfam-assistant-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #0b1120 !important;
    border: 1.5px solid #ff9933 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

#pfamChatbotRoot .pfam-assistant-avatar .pfam-avatar-img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

#pfamChatbotRoot .pfam-assistant-live-dot {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    border: 2px solid #1e293b !important;
}

#pfamChatbotRoot .pfam-assistant-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

#pfamChatbotRoot .pfam-verified-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    background: #ff9933 !important;
    color: #0b1120 !important;
    border-radius: 50% !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
}

#pfamChatbotRoot .pfam-assistant-tagline {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

#pfamChatbotRoot .pfam-chat-header-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#pfamChatbotRoot .pfam-chat-btn-ctrl,
#pfamChatbotRoot button.pfam-chat-btn-ctrl,
#pfamChatbotRoot a.pfam-chat-btn-ctrl {
    background: rgba(30, 41, 59, 0.9) !important;
    background-color: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#pfamChatbotRoot .pfam-chat-btn-ctrl:hover,
#pfamChatbotRoot button.pfam-chat-btn-ctrl:hover,
#pfamChatbotRoot a.pfam-chat-btn-ctrl:hover {
    background: rgba(255, 153, 51, 0.22) !important;
    background-color: rgba(255, 153, 51, 0.22) !important;
    color: #ff9933 !important;
    border-color: #ff9933 !important;
}

/* ==========================================================================
   5. Dual Navigation Tabs
   ========================================================================== */
#pfamChatbotRoot .pfam-tabs-header {
    display: flex !important;
    background: #090e1a !important;
    border-bottom: 2px solid #ff9933 !important;
    flex-shrink: 0 !important;
}

#pfamChatbotRoot button.pfam-tab-btn {
    flex: 1 !important;
    background: #090e1a !important;
    background-color: #090e1a !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 11px 12px !important;
    color: #94a3b8 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    position: relative !important;
}

#pfamChatbotRoot button.pfam-tab-btn:hover {
    color: #f8fafc !important;
    background: #111a2e !important;
    background-color: #111a2e !important;
}

#pfamChatbotRoot button.pfam-tab-btn.active {
    color: #ffffff !important;
    background: #1e293b !important;
    background-color: #1e293b !important;
}

#pfamChatbotRoot button.pfam-tab-btn.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: #ff9933 !important;
    box-shadow: 0 -2px 8px rgba(255, 153, 51, 0.6) !important;
}

#pfamChatbotRoot .pfam-tab-content {
    flex: 1 !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #0b1120 !important;
}

#pfamChatbotRoot .pfam-tab-content.active {
    display: flex !important;
}

#pfamChatbotRoot [style*="display: none"],
#pfamChatbotRoot [style*="display:none"] {
    display: none !important;
}

/* ==========================================================================
   6. Tab 1: AI Chat & Quick-Reply Chips
   ========================================================================== */
#pfamChatbotRoot .pfam-chat-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0b1120 !important;
}

#pfamChatbotRoot .pfam-chat-body::-webkit-scrollbar,
#pfamChatbotRoot .pfam-asme-list-view::-webkit-scrollbar,
#pfamChatbotRoot .pfam-asme-workbench::-webkit-scrollbar,
#pfamChatbotRoot .pfam-dropdown-menu::-webkit-scrollbar {
    width: 6px !important;
}

#pfamChatbotRoot .pfam-chat-body::-webkit-scrollbar-thumb,
#pfamChatbotRoot .pfam-asme-list-view::-webkit-scrollbar-thumb,
#pfamChatbotRoot .pfam-asme-workbench::-webkit-scrollbar-thumb,
#pfamChatbotRoot .pfam-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 153, 51, 0.45) !important;
    border-radius: 4px !important;
}

#pfamChatbotRoot .pfam-chat-messages-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

#pfamChatbotRoot .pfam-msg {
    display: flex !important;
    gap: 10px !important;
    max-width: 90% !important;
}

#pfamChatbotRoot .pfam-msg-bot {
    align-self: flex-start !important;
}

#pfamChatbotRoot .pfam-msg-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #1e293b !important;
    border: 1px solid #ff9933 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#pfamChatbotRoot .pfam-msg-avatar img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
}

#pfamChatbotRoot .pfam-msg-bubble {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#pfamChatbotRoot .pfam-msg-bot .pfam-msg-text {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    padding: 11px 15px !important;
    border-radius: 16px 16px 16px 4px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#pfamChatbotRoot .pfam-msg-bot .pfam-msg-text a {
    color: #ff9933 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

#pfamChatbotRoot .pfam-msg-user {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}

#pfamChatbotRoot .pfam-msg-user .pfam-msg-text {
    background: linear-gradient(135deg, #ff9933 0%, #e65100 100%) !important;
    color: #ffffff !important;
    padding: 10px 15px !important;
    border-radius: 16px 16px 4px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Quick-Reply Chips (Dark Slate Pills with Orange Border) */
#pfamChatbotRoot .pfam-quick-replies {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 4px !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}

#pfamChatbotRoot button.pfam-quick-chip {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 153, 51, 0.5) !important;
    color: #f8fafc !important;
    border-radius: 18px !important;
    padding: 6px 13px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    user-select: none !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

#pfamChatbotRoot button.pfam-quick-chip:hover {
    background: #ff9933 !important;
    background-color: #ff9933 !important;
    color: #0b1120 !important;
    border-color: #ff9933 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(255, 153, 51, 0.4) !important;
}

#pfamChatbotRoot .pfam-rfq-receipt {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border: 1.5px solid #10b981 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    color: #f1f5f9 !important;
}

/* Inline RFQ Contact & Company Form inside Chat Bubble */
#pfamChatbotRoot .pfam-inline-rfq-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 10px !important;
    background: #0f172a !important;
    border: 1px solid rgba(255, 153, 51, 0.35) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

#pfamChatbotRoot .pfam-rfq-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

#pfamChatbotRoot .pfam-rfq-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

#pfamChatbotRoot .pfam-rfq-field label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    margin: 0 !important;
    text-transform: none !important;
}

#pfamChatbotRoot input.pfam-rfq-input,
#pfamChatbotRoot textarea.pfam-rfq-textarea {
    width: 100% !important;
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 7px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
}

#pfamChatbotRoot input.pfam-rfq-input {
    height: 34px !important;
}

#pfamChatbotRoot textarea.pfam-rfq-textarea {
    min-height: 62px !important;
    resize: vertical !important;
    line-height: 1.4 !important;
}

#pfamChatbotRoot input.pfam-rfq-input::placeholder,
#pfamChatbotRoot textarea.pfam-rfq-textarea::placeholder {
    color: #64748b !important;
}

#pfamChatbotRoot input.pfam-rfq-input:focus,
#pfamChatbotRoot textarea.pfam-rfq-textarea:focus {
    border-color: #ff9933 !important;
    box-shadow: 0 0 0 2px rgba(255, 153, 51, 0.2) !important;
}

#pfamChatbotRoot .pfam-rfq-error {
    background: rgba(239, 68, 68, 0.16) !important;
    border: 1px solid #ef4444 !important;
    color: #fca5a5 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
}

#pfamChatbotRoot button.pfam-rfq-submit-btn {
    width: 100% !important;
    background: linear-gradient(135deg, #ff9933 0%, #e65100 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    margin-top: 4px !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(255, 153, 51, 0.35) !important;
    transition: all 0.18s ease !important;
}

#pfamChatbotRoot button.pfam-rfq-submit-btn:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

#pfamChatbotRoot .pfam-receipt-badge {
    background: #10b981 !important;
    color: #0b1120 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    display: inline-block !important;
}

#pfamChatbotRoot .pfam-receipt-code {
    font-family: monospace !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ff9933 !important;
    margin-top: 4px !important;
}

#pfamChatbotRoot .pfam-emergency-banner {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1.5px solid #ef4444 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    color: #fecaca !important;
    font-size: 12px !important;
}

#pfamChatbotRoot .pfam-emergency-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

#pfamChatbotRoot .pfam-msg-bot .pfam-msg-text a.pfam-emergency-cta,
#pfamChatbotRoot a.pfam-emergency-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35) !important;
}

#pfamChatbotRoot .pfam-msg-bot .pfam-msg-text a.pfam-emergency-email,
#pfamChatbotRoot a.pfam-emergency-email {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #1e293b !important;
    border: 1px solid rgba(255, 153, 51, 0.6) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

/* Typing Indicator */
#pfamChatbotRoot .pfam-chat-typing {
    display: flex;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

#pfamChatbotRoot .pfam-typing-avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #1e293b !important;
    border: 1px solid #ff9933 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#pfamChatbotRoot .pfam-typing-bubble {
    background: #1e293b !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    display: flex !important;
    gap: 4px !important;
}

#pfamChatbotRoot .pfam-typing-dot {
    width: 6px !important;
    height: 6px !important;
    background: #ff9933 !important;
    border-radius: 50% !important;
    animation: pfamTypingDot 1.4s infinite !important;
}

#pfamChatbotRoot .pfam-typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
#pfamChatbotRoot .pfam-typing-dot:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes pfamTypingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Wizard Back / Start Over Bar */
#pfamChatbotRoot .pfam-chat-step-bar {
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7px 14px !important;
    background: #0d1424 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#pfamChatbotRoot button.pfam-step-back-btn,
#pfamChatbotRoot button.pfam-step-restart-btn {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
}

#pfamChatbotRoot button.pfam-step-back-btn:hover {
    color: #ff9933 !important;
    border-color: #ff9933 !important;
    background: rgba(255, 153, 51, 0.12) !important;
}

#pfamChatbotRoot button.pfam-step-restart-btn:hover {
    color: #f87171 !important;
    border-color: #f87171 !important;
    background: rgba(239, 68, 68, 0.12) !important;
}

/* Chat Input Footer & Send Button */
#pfamChatbotRoot .pfam-chat-footer {
    background: #0f172a !important;
    border-top: 1px solid rgba(255, 153, 51, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
}

#pfamChatbotRoot .pfam-chat-input-form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
}

#pfamChatbotRoot input.pfam-chat-input-field {
    flex: 1 !important;
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    height: 38px !important;
    color: #f8fafc !important;
    font-size: 13px !important;
    outline: none !important;
    box-shadow: none !important;
}

#pfamChatbotRoot input.pfam-chat-input-field::placeholder {
    color: #64748b !important;
}

#pfamChatbotRoot input.pfam-chat-input-field:focus {
    border-color: #ff9933 !important;
}

#pfamChatbotRoot button.pfam-chat-send-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ff9933 0%, #e65100 100%) !important;
    border: none !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(255, 153, 51, 0.35) !important;
}

#pfamChatbotRoot button.pfam-chat-send-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 14px rgba(255, 153, 51, 0.5) !important;
}

#pfamChatbotRoot button.pfam-chat-send-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: #ffffff !important;
    display: block !important;
    flex-shrink: 0 !important;
}

#pfamChatbotRoot .pfam-chat-subfooter {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 14px 10px !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#pfamChatbotRoot .pfam-direct-contacts {
    display: flex !important;
    gap: 10px !important;
}

#pfamChatbotRoot a.pfam-sublink {
    color: #ff9933 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

#pfamChatbotRoot a.pfam-sublink:hover {
    text-decoration: underline !important;
}

#pfamChatbotRoot .pfam-powered-by {
    font-size: 10px !important;
    color: #94a3b8 !important;
}

/* ==========================================================================
   7. Tab 2: ASME Specs Hub & Custom Modern Dark Dropdowns
   ========================================================================== */
#pfamChatbotRoot .pfam-asme-hub-root {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #0b1120 !important;
}

#pfamChatbotRoot .pfam-asme-search-box {
    padding: 10px 14px !important;
    position: relative !important;
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
}

#pfamChatbotRoot .pfam-asme-search-icon {
    position: absolute !important;
    left: 26px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    font-size: 13px !important;
    pointer-events: none !important;
}

#pfamChatbotRoot input.pfam-asme-search-field {
    width: 100% !important;
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    padding: 8px 14px 8px 34px !important;
    margin: 0 !important;
    height: 36px !important;
    color: #f8fafc !important;
    font-size: 12px !important;
    outline: none !important;
}

#pfamChatbotRoot input.pfam-asme-search-field:focus {
    border-color: #ff9933 !important;
}

#pfamChatbotRoot .pfam-asme-cat-pills {
    display: flex;
    gap: 6px !important;
    padding: 8px 14px !important;
    overflow-x: auto !important;
    background: #0d1424 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
}

#pfamChatbotRoot button.pfam-cat-pill {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    padding: 5px 11px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
}

#pfamChatbotRoot button.pfam-cat-pill:hover {
    border-color: #ff9933 !important;
    color: #ffffff !important;
}

#pfamChatbotRoot button.pfam-cat-pill.active {
    background: #ff9933 !important;
    background-color: #ff9933 !important;
    color: #0b1120 !important;
    font-weight: 800 !important;
    border-color: #ff9933 !important;
}

#pfamChatbotRoot .pfam-asme-list-view {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px 14px !important;
    display: flex;
    flex-direction: column !important;
    gap: 8px !important;
}

#pfamChatbotRoot .pfam-asme-card {
    background: #141c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.18s ease !important;
}

#pfamChatbotRoot .pfam-asme-card:hover {
    border-color: #ff9933 !important;
    background: #192338 !important;
    transform: translateX(3px) !important;
}

#pfamChatbotRoot .pfam-asme-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
}

#pfamChatbotRoot .pfam-asme-card-meta {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

#pfamChatbotRoot .pfam-asme-badge-cat {
    background: rgba(255, 153, 51, 0.15) !important;
    color: #ff9933 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}

#pfamChatbotRoot .pfam-asme-card-arrow {
    color: #ff9933 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Workbench View */
#pfamChatbotRoot .pfam-asme-workbench {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 14px !important;
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
}

#pfamChatbotRoot .pfam-workbench-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#pfamChatbotRoot button.pfam-workbench-back {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #e2e8f0 !important;
    padding: 5px 12px !important;
    border-radius: 14px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    cursor: pointer !important;
}

#pfamChatbotRoot button.pfam-workbench-back:hover {
    border-color: #ff9933 !important;
    color: #ff9933 !important;
}

#pfamChatbotRoot .pfam-workbench-cat {
    font-size: 10.5px !important;
    background: rgba(255, 153, 51, 0.18) !important;
    color: #ff9933 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

#pfamChatbotRoot .pfam-workbench-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 2px 0 0 !important;
    line-height: 1.25 !important;
}

#pfamChatbotRoot .pfam-workbench-desc {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

/* Dynamic Form & Sleek Custom Dark Dropdowns */
#pfamChatbotRoot .pfam-asme-spec-form,
.page-workbench-form-box {
    background: #141c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.pfam-spec-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.pfam-spec-form-grid.pfam-single-col {
    grid-template-columns: 1fr !important;
}

.pfam-spec-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    position: relative !important;
}

.pfam-spec-label {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-transform: none !important;
}

/* Custom Dark Dropdown Trigger & Menu (Replaces Old-Fashioned Native <select>) */
.pfam-custom-dropdown {
    position: relative !important;
    width: 100% !important;
    user-select: none !important;
}

.pfam-custom-dropdown button.pfam-dropdown-trigger {
    width: 100% !important;
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1.5px solid rgba(255, 153, 51, 0.4) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.pfam-custom-dropdown button.pfam-dropdown-trigger:hover,
.pfam-custom-dropdown.open button.pfam-dropdown-trigger {
    border-color: #ff9933 !important;
    background: #243247 !important;
    background-color: #243247 !important;
    box-shadow: 0 0 0 2px rgba(255, 153, 51, 0.2) !important;
}

.pfam-dropdown-chevron {
    color: #ff9933 !important;
    font-size: 12px !important;
    transition: transform 0.2s ease !important;
    margin-left: 6px !important;
}

.pfam-custom-dropdown.open .pfam-dropdown-chevron {
    transform: rotate(180deg) !important;
}

.pfam-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #0f172a !important;
    background-color: #0f172a !important;
    border: 1.5px solid #ff9933 !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85) !important;
    max-height: 210px !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
    padding: 4px !important;
    display: none !important;
}

.pfam-custom-dropdown.open .pfam-dropdown-menu {
    display: block !important;
    animation: pfamDropdownFadeIn 0.15s ease-out !important;
}

@keyframes pfamDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.pfam-dropdown-item {
    padding: 7px 10px !important;
    border-radius: 6px !important;
    color: #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: background 0.14s ease, color 0.14s ease !important;
}

.pfam-dropdown-item:hover {
    background: rgba(255, 153, 51, 0.18) !important;
    color: #ffffff !important;
}

.pfam-dropdown-item.active {
    background: #ff9933 !important;
    color: #0b1120 !important;
    font-weight: 800 !important;
}

.pfam-dropdown-check {
    display: none !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.pfam-dropdown-item.active .pfam-dropdown-check {
    display: inline-block !important;
}

/* Calculate Button */
#pfamChatbotRoot button.pfam-spec-calc-btn,
button.pfam-spec-calc-btn {
    width: 100% !important;
    background: linear-gradient(135deg, #ff9933 0%, #e65100 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: 0 4px 12px rgba(255, 153, 51, 0.3) !important;
}

#pfamChatbotRoot button.pfam-spec-calc-btn:hover,
button.pfam-spec-calc-btn:hover {
    filter: brightness(1.07) !important;
    transform: translateY(-1px) !important;
}

/* Results Table & Card */
#pfamChatbotRoot .pfam-asme-result-wrap {
    background: #0f172a !important;
    border: 1.5px solid #ff9933 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
}

#pfamChatbotRoot .pfam-result-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 153, 51, 0.3) !important;
    padding-bottom: 7px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ff9933 !important;
    gap: 8px !important;
}

#pfamChatbotRoot .pfam-result-badge,
#pfamChatbotRoot .pfam-badge-asme {
    background: #ff9933 !important;
    color: #0b1120 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}

#pfamChatbotRoot table.pfam-asme-data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

#pfamChatbotRoot table.pfam-asme-data-table th,
#pfamChatbotRoot table.pfam-asme-data-table td {
    padding: 6px 8px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    background: transparent !important;
}

#pfamChatbotRoot table.pfam-asme-data-table th {
    color: #94a3b8 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

#pfamChatbotRoot table.pfam-asme-data-table td:first-child {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

#pfamChatbotRoot table.pfam-asme-data-table td:nth-child(2) {
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: right !important;
}

#pfamChatbotRoot .pfam-asme-tolerance-box {
    background: rgba(255, 153, 51, 0.1) !important;
    border-left: 3px solid #ff9933 !important;
    padding: 7px 10px !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 11px !important;
    color: #cbd5e1 !important;
    line-height: 1.4 !important;
}

/* Official CAD Drawings Box inside Widget */
#pfamChatbotRoot .pfam-widget-drawings-box {
    background: #141c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
}

#pfamChatbotRoot .pfam-widget-dwg-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ff9933 !important;
    margin-bottom: 6px !important;
}

#pfamChatbotRoot .pfam-widget-dwg-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    max-height: 130px !important;
    overflow-y: auto !important;
}

#pfamChatbotRoot a.pfam-widget-dwg-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    color: #e2e8f0 !important;
    font-size: 11px !important;
    text-decoration: none !important;
    gap: 8px !important;
}

#pfamChatbotRoot a.pfam-widget-dwg-link:hover {
    border-color: #ff9933 !important;
    color: #ffffff !important;
}

#pfamChatbotRoot .pfam-dwg-fname {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#pfamChatbotRoot .pfam-dwg-dl-badge {
    background: #ff9933 !important;
    color: #0b1120 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}

/* Request Official Quote Green Button & Call Hotline */
#pfamChatbotRoot .pfam-asme-result-actions,
#pfamChatbotRoot .pfam-asme-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 2px !important;
}

#pfamChatbotRoot button.pfam-action-quote-spec {
    width: 100% !important;
    background: #10b981 !important;
    background-color: #10b981 !important;
    border: none !important;
    color: #ffffff !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

#pfamChatbotRoot button.pfam-action-quote-spec:hover {
    background: #059669 !important;
    background-color: #059669 !important;
}

#pfamChatbotRoot a.pfam-action-call-spec {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
}

#pfamChatbotRoot a.pfam-action-call-spec:hover {
    color: #ff9933 !important;
}

/* ==========================================================================
   8. Full Page ASME Engineering Hub (Shortcode Support)
   ========================================================================== */
.page-asme-hub-wrapper {
    background: #090e1a;
    color: #f1f5f9;
    min-height: 100vh;
    padding-bottom: 60px;
}

.page-asme-hero {
    background: linear-gradient(135deg, #0d1527 0%, #152037 100%);
    border-bottom: 1px solid #1e293b;
    padding: 40px 24px 35px;
    text-align: center;
}

.page-asme-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 64, 175, 0.4);
    border: 1px solid #3b82f6;
    color: #60a5fa;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 16px;
}

.page-asme-hero-title {
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.page-asme-hero-sub {
    font-size: 15px;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto 28px;
    line-height: 1.5;
}

.page-asme-search-bar {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.page-search-icon-wrap {
    display: flex;
    align-items: center;
    padding-left: 18px;
    color: #94a3b8;
    font-size: 16px;
}

.page-asme-search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 16px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
}

.page-asme-search-btn {
    background: #2563eb;
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 0 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-asme-try-search {
    margin-top: 14px;
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-asme-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11.5px;
}

.page-asme-stats-row {
    max-width: 1100px;
    margin: 24px auto 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 0 20px;
}

.page-stat-card {
    background: #111a2e;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.page-stat-icon-blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.page-stat-icon-green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.page-stat-icon-amber { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }

.page-stat-details h4 { font-size: 16px; font-weight: 800; color: #ffffff; margin: 0; }
.page-stat-details p { font-size: 12px; color: #94a3b8; margin: 2px 0 0; }

.page-asme-main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-asme-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
}

.page-asme-cat-card {
    background: #111a2e;
    border: 1px solid #1e293b;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}
.page-asme-cat-card:hover { border-color: #ff9933; transform: translateY(-4px); }

.page-cat-top-bar { display: flex; justify-content: flex-end; padding: 10px 14px 0; }
.page-cat-badge-pill { background: rgba(255, 153, 51, 0.15); color: #ff9933; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 12px; }
.page-cat-img-box { height: 140px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.page-cat-img-box img { max-height: 120px; max-width: 90%; object-fit: contain; }
.page-cat-body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.page-cat-title { font-size: 18px; font-weight: 800; color: #ffffff; margin: 0 0 6px; }
.page-cat-desc { font-size: 12.5px; color: #94a3b8; line-height: 1.5; margin: 0; flex: 1; }

.page-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; border-bottom: 1px solid #1e293b; padding-bottom: 12px; }
.page-list-header h4 { font-size: 20px; font-weight: 800; margin: 0; color: #fff; }
.page-badge-count { font-size: 13px; color: #ff9933; font-weight: 600; }
.page-btn-back-cats { background: #1e293b; border: 1px solid #334155; color: #cbd5e1; padding: 8px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.page-standards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.page-standard-card { background: #111a2e; border: 1px solid #1e293b; border-radius: 12px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; }
.page-standard-card:hover { border-color: #ff9933; background: #16223b; }
.page-std-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.page-std-cat { font-size: 11px; font-weight: 800; color: #ff9933; background: rgba(255, 153, 51, 0.12); padding: 2px 8px; border-radius: 4px; }
.page-std-dwg-badge { font-size: 11px; font-weight: 700; color: #34d399; }
.page-std-title { font-size: 16px; font-weight: 800; color: #ffffff; margin: 0 0 8px; }
.page-std-desc { font-size: 12px; color: #94a3b8; line-height: 1.45; margin: 0 0 16px; flex: 1; }
.page-std-footer { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: #ff9933; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 10px; }

.page-workbench-wrap { background: #0f172a; border: 1.5px solid #1e293b; border-radius: 16px; padding: 30px; }
.page-workbench-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-workbench-top-title h3 { font-size: 26px; font-weight: 900; color: #ffffff; margin: 4px 0 6px; }
.page-workbench-top-title p { font-size: 13.5px; color: #94a3b8; margin: 0; }
.page-workbench-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; margin-top: 24px; }
@media (max-width: 900px) { .page-workbench-grid { grid-template-columns: 1fr; } }
.page-workbench-results-box { background: #141c2e; border: 1.5px solid #ff9933; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; }
.page-workbench-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.page-workbench-table th, .page-workbench-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.page-workbench-table th { color: #94a3b8; background: rgba(255,255,255,0.02); }
.page-workbench-table td:nth-child(2) { text-align: right; }
.page-btn-quote-large { background: #10b981; border: none; color: #ffffff; font-weight: 800; font-size: 14px; padding: 12px 20px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.page-drawings-section { margin-top: 36px; border-top: 1px solid #1e293b; padding-top: 24px; }
.page-drawings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.page-drawing-card { background: #111a2e; border: 1px solid #1e293b; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.page-drawing-thumb { height: 170px; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.page-drawing-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }
.page-drawing-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: #141c2e; }
.page-drawing-name { font-size: 12px; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-btn-download-dwg { background: #ff9933; color: #0b0f19 !important; font-weight: 800; font-size: 11.5px; text-decoration: none !important; padding: 7px 12px; border-radius: 6px; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }