/**
 * Smart Convert – Currency & Unit Conversion - Admin Styles
 *
 * Design System: Soft UI / Neumorphism
 * Context: WordPress Admin Dashboard & Gutenberg Editor
 * * This stylesheet manages the visual presentation of the plugin settings,
 * modals, and interactive elements. It relies on a CSS variable system
 * to ensure consistency across the UI.
 *
 * @package           smart-convert-currency-unit-conversion
 * @author            Petr Novák
 * @copyright         2025 Petr Novák
 * @license           GPL-2.0-or-later
 * @licenseURI        https://www.gnu.org/licenses/gpl-2.0.html
 */
 

/* Figtree Font - Local Loading */
/* ----------------------------------------------------------------------------- */

/* Light (300) */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/figtree/figtree-v9-latin_latin-ext-300.woff2') format('woff2');
}

/* Regular (400) */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/figtree/figtree-v9-latin_latin-ext-regular.woff2') format('woff2');
}

/* Medium (500) */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/figtree/figtree-v9-latin_latin-ext-500.woff2') format('woff2');
}

/* SemiBold (600) */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/figtree/figtree-v9-latin_latin-ext-600.woff2') format('woff2');
}

/* Bold (700) */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/figtree/figtree-v9-latin_latin-ext-700.woff2') format('woff2');
}

/* Black (900) */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../assets/fonts/figtree/figtree-v9-latin_latin-ext-900.woff2') format('woff2');
}

:root {
    /* * === Color Palette ===
     * Defined as CSS variables for easy theming and maintenance.
     */
    --smart-convert-currency-unit-conversion-bg-wp: #f0f0f1;            /* Standard WordPress Admin gray background */
    --smart-convert-currency-unit-conversion-bg-card: #FFFFFF;          /* Pure white for elevated card elements */
    --smart-convert-currency-unit-conversion-bg-card-alt: #F7FCFB;      /* Very light teal (used for inputs, headers, and contrast areas) */
    
    --smart-convert-currency-unit-conversion-text-main: #1A2F45;        /* Primary text color (Dark Blue) */
    --smart-convert-currency-unit-conversion-text-light: #50667d;       /* Secondary text color (Lighter Blue for labels/descriptions) */
    
    --smart-convert-currency-unit-conversion-primary: #FF6B81;          /* Primary Action Color (Coral Pink) */
    --smart-convert-currency-unit-conversion-primary-hover: #e6566e;    /* Darker shade for hover states */
    
    --smart-convert-currency-unit-conversion-accent: #82C7C4;           /* Accent Color (Teal) */
    --smart-convert-currency-unit-conversion-accent-faint: rgba(130, 199, 196, 0.25); /* Low opacity accent for backgrounds/shadows */
    
    /* * === Shadows ===
     * Soft shadows adjusted specifically for the light gray WP background
     * to create the "elevated" Neumorphic feel.
     */
    --smart-convert-currency-unit-conversion-shadow-card: 0 4px 10px rgba(130, 199, 196, 0.15);
    --smart-convert-currency-unit-conversion-shadow-hover: 0 6px 15px rgba(130, 199, 196, 0.25);
}

/* ==========================================================================
   Wrapper & Typography
   ========================================================================== */

/* * Main wrapper for the settings page. 
 * Scoped to prevent styles from bleeding into the rest of the WP Admin.
 */
.smart-convert-currency-unit-conversion-settings-wrapper {
    font-family: 'Figtree', sans-serif;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    background: transparent;
    box-shadow: none;
    padding: 10px 20px 0 0;
    margin: 0;
    box-sizing: border-box;
}

.smart-convert-currency-unit-conversion-settings-wrapper h1,
.smart-convert-currency-unit-conversion-settings-wrapper h2,
.smart-convert-currency-unit-conversion-settings-wrapper h3,
.smart-convert-currency-unit-conversion-settings-wrapper h4 {
    font-family: 'Figtree', sans-serif;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    font-weight: 700;
}

/* Main Page Title Styling */
.smart-convert-currency-unit-conversion-settings-wrapper > h2:first-child {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-left: 5px;
    background: linear-gradient(110deg, #b3001b 10%, #ff6b81 45%, #ffffff 50%, #ff6b81 55%, #b3001b 90%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* General Typography overrides */
.smart-convert-currency-unit-conversion-settings-wrapper p, 
.smart-convert-currency-unit-conversion-settings-wrapper li,
.smart-convert-currency-unit-conversion-settings-wrapper label {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--smart-convert-currency-unit-conversion-text-main);
}

.smart-convert-currency-unit-conversion-settings-wrapper .description {
    color: var(--smart-convert-currency-unit-conversion-text-light);
    font-style: normal;
    font-size:14px;
}

/* ==========================================================================
   Navigation Tabs
   ========================================================================== */

/* * Custom styling for WordPress-like tabs.
 * Removes default borders and applies a pill-shaped design.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .nav-tab-wrapper {
    border-bottom: none !important;
    padding-bottom: 0;
    margin-bottom: 25px;
    display: flex;
    gap: 10px;
    padding-left: 5px;
}

.smart-convert-currency-unit-conversion-settings-wrapper .nav-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--smart-convert-currency-unit-conversion-text-light);
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 8px;
    margin: 0;
    transition: all 0.3s ease;
}

.smart-convert-currency-unit-conversion-settings-wrapper .nav-tab:hover {
    color: var(--smart-convert-currency-unit-conversion-primary);
    background-color: rgba(255, 255, 255, 0.5);
}

/* Active Tab State */
.smart-convert-currency-unit-conversion-settings-wrapper .nav-tab-active,
.smart-convert-currency-unit-conversion-settings-wrapper .nav-tab-active:hover {
    background: var(--smart-convert-currency-unit-conversion-bg-card);
    color: var(--smart-convert-currency-unit-conversion-text-main);
    border: none;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
    transform: translateY(-1px);
}

/* ==========================================================================
   Cards / Sections Layout
   ========================================================================== */

/* * Form Table Container
 * Replaces the standard WP form-table structure with a card-based design.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .form-table {
    background: var(--smart-convert-currency-unit-conversion-bg-card);
    border-radius: 15px;
    padding: 30px;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
    margin-top: 20px;
    margin-bottom: 30px;
    display: block; /* Overrides WP default display: table */
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 1. Base styles for semantic boxes */
.smart-convert-currency-unit-conversion-settings-wrapper .form-table {
    position: relative !important;
    border-left: 0; /* Reset to default WP border */
}

/* 2. The Strip (Pseudoelement) */
.smart-convert-currency-unit-conversion-settings-wrapper .form-table::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 9px;
    height: 100%;
    border-radius: 9px 0 0 9px;
    z-index: 1;
    background: linear-gradient(to bottom, #40C4FF, #80D8FF);
}

/* Individual Feature Cards (Templates, Rates, Import/Export) */
.smart-convert-currency-unit-conversion-settings-wrapper .smart-convert-currency-unit-conversion-template-card,
.smart-convert-currency-unit-conversion-settings-wrapper .smart-convert-currency-unit-conversion-default-selector,
.smart-convert-currency-unit-conversion-settings-wrapper .smart-convert-currency-unit-conversion-import-export {
    background: var(--smart-convert-currency-unit-conversion-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    padding: 25px 25px 25px 34px;
    margin-bottom: 25px;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.smart-convert-currency-unit-conversion-settings-wrapper .smart-convert-currency-unit-conversion-template-card:hover {
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-hover);
}

/* Distinct style for Built-in templates to differentiate from custom ones */
.smart-convert-currency-unit-conversion-settings-wrapper .smart-convert-currency-unit-conversion-template-card.builtin {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

/* Table Header alignments */
.smart-convert-currency-unit-conversion-settings-wrapper .form-table th {
    font-weight: 600;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    padding: 20px 20px 20px 0;
    width: 220px;
    vertical-align: top;
}

.smart-convert-currency-unit-conversion-settings-wrapper .form-table td {
    padding: 15px 0;
}
.smart-convert-currency-unit-conversion-default-no-bottom-margin{
    margin-bottom:0 !important;
}


/* ==========================================================================
   Template Selectors Alignment
   ========================================================================== */

/* * The following section aggressively overrides WordPress Admin defaults
 * to ensure input fields and buttons align perfectly on the cross-axis.
 */

.smart-convert-currency-unit-conversion-default-selector form {
    display: flex;
    align-items: center; /* Physically centers flex items vertically */
    gap: 10px;
    flex-wrap: wrap;
}

/* Select Box - Vertical Centering Fix */
.smart-convert-currency-unit-conversion-default-selector select.regular-text {
    height: 42px !important;
    min-height: 42px !important;
    /* Set line-height matching the height (minus borders) to center text */
    line-height: 40px !important; 
    margin: 0 !important;
    /* Crucial: Zero vertical padding prevents text from being pushed off-center */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important; /* Maintain left indentation */
    box-sizing: border-box;
    width: auto;
    flex-grow: 1;
    max-width: 100%;
    vertical-align: middle !important;
}

/* Button Wrapper (WordPress occasionally wraps submit buttons in p.submit) */
.smart-convert-currency-unit-conversion-default-selector .submit {
    margin: 0 !important;
    padding: 0 !important;
}

/* Submit Button Alignment */
.smart-convert-currency-unit-conversion-default-selector .button {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    vertical-align: middle !important;
    /* Ensure padding doesn't affect calculation of height */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ==========================================================================
   Inputs & Controls
   ========================================================================== */

/* Standardize all input types */
.smart-convert-currency-unit-conversion-settings-wrapper input[type="text"],
.smart-convert-currency-unit-conversion-settings-wrapper input[type="email"],
.smart-convert-currency-unit-conversion-settings-wrapper input[type="number"],
.smart-convert-currency-unit-conversion-settings-wrapper input[type="password"],
.smart-convert-currency-unit-conversion-settings-wrapper textarea,
.smart-convert-currency-unit-conversion-settings-wrapper select {
    background: var(--smart-convert-currency-unit-conversion-bg-card-alt);
    border: 1px solid #ccd0d4;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 450px;
    height: auto;
    min-height: 42px;
}

/* Focus States - Coral Glow */
.smart-convert-currency-unit-conversion-settings-wrapper input:focus,
.smart-convert-currency-unit-conversion-settings-wrapper textarea:focus,
.smart-convert-currency-unit-conversion-settings-wrapper select:focus {
    border-color: var(--smart-convert-currency-unit-conversion-primary);
    box-shadow: 0 0 0 2px rgba(255, 107, 129, 0.15);
    outline: none;
    background: #fff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* * 1. Base settings for all buttons.
 * Enforces Flexbox to ensure icons and text are perfectly centered.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .button {
    display: inline-flex !important; /* Force Flexbox */
    align-items: center;             /* Vertical center */
    justify-content: center;         /* Horizontal center */
    gap: 8px;                        /* Gap between icon and text */
    line-height: 1 !important;       /* Reset line-height to prevent offset */
    height: auto;
    min-height: 42px;                /* Unify height across all buttons */
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
    /* Default style for secondary/standard buttons */
    background: #fff;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    border: 1px solid #dcdcde;
    padding: 0 18px; /* Padding for width only, height is handled by min-height */
}

/* * 2. Specific adjustments for WordPress Dashicons within buttons.
 * Removes default WP margins that cause misalignment.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .button .dashicons {
    margin: 0 !important;            /* Remove WP margins */
    line-height: 1 !important;       /* Reset line-height */
    width: 20px;
    height: 20px;
    font-size: 20px;
    display: flex;                   /* The icon itself is a flex container */
    align-items: center;
    justify-content: center;
}

/* * 3. Primary Button (Coral Theme)
 * Overrides default WP blue buttons with the plugin's primary color.
 */
.smart-convert-currency-unit-conversion-settings-wrapper .button.button-primary,
.smart-convert-currency-unit-conversion-settings-wrapper .smart-convert-currency-unit-conversion-template-actions .button-primary {
    background-color: var(--smart-convert-currency-unit-conversion-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0 24px;
    box-shadow: 0 4px 6px rgba(255, 107, 129, 0.25);
    text-shadow: none;
}

/* Hover States for Primary Buttons */
.smart-convert-currency-unit-conversion-settings-wrapper .button.button-primary:hover,
.smart-convert-currency-unit-conversion-settings-wrapper .button.button-primary:focus {
    background-color: var(--smart-convert-currency-unit-conversion-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 10px rgba(255, 107, 129, 0.35);
    border: none;
    color: #fff; /* Ensure text remains white */
}

/* Hover States for Secondary (Standard) Buttons */
.smart-convert-currency-unit-conversion-settings-wrapper .button:not(.button-primary):hover {
    border-color: var(--smart-convert-currency-unit-conversion-primary);
    color: var(--smart-convert-currency-unit-conversion-primary);
    background: #fff;
}

/* Disabled State Styling */
.button.disabled, .button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: #f0f0f1 !important;
    color: #a7aaad !important;
    box-shadow: none !important;
    border-color: #dcdcde !important;
}

/* ==========================================================================
   Rates Table
   ========================================================================== */

.smart-convert-currency-unit-conversion-settings-wrapper .wp-list-table {
    border: none;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
    border-radius: 12px;
    overflow: hidden;
    background: var(--smart-convert-currency-unit-conversion-bg-card);
    position: relative !important;

}
.smart-convert-currency-unit-conversion-table-rates::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 9px;
    height: 100%;
    border-radius: 9px 0 0 9px;
    z-index: 1;
    background: linear-gradient(to bottom, #E0E0E0, #EEEEEE);
}
.smart-convert-currency-unit-conversion-table-rates td:first-child,.smart-convert-currency-unit-conversion-table-rates th:first-child {padding: 15px 15px 15px 24px !important;}

.smart-convert-currency-unit-conversion-settings-wrapper .wp-list-table thead th {
    background: var(--smart-convert-currency-unit-conversion-bg-card-alt);
    color: var(--smart-convert-currency-unit-conversion-text-main);
    font-weight: 700;
    padding: 15px;
    border-bottom: 2px solid #f0f0f1;
}

.smart-convert-currency-unit-conversion-settings-wrapper .wp-list-table td {
    padding: 15px;
    vertical-align: middle;
    font-size: 1rem;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    border-bottom: 1px solid #f0f0f1;
}

/* ==========================================================================
   Miscellaneous Elements
   ========================================================================== */

/* Badges for status or type indication */
.smart-convert-currency-unit-conversion-badge {
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.smart-convert-currency-unit-conversion-badge.builtin {
    background: #e2e8f0;
    color: var(--smart-convert-currency-unit-conversion-text-main);
}

.smart-convert-currency-unit-conversion-badge.default {
    background: var(--smart-convert-currency-unit-conversion-accent);
    color: #fff;
}

/* Code blocks and Previews */
.smart-convert-currency-unit-conversion-template-preview, 
.smart-convert-currency-unit-conversion-settings-wrapper pre,
.smart-convert-currency-unit-conversion-settings-wrapper code {
    background: #f6f7f7 !important;
    border: 1px solid #dcdcde !important;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    color: var(--smart-convert-currency-unit-conversion-text-main);
padding: 1rem;
    display: inline-block;
}

/* Section Headline overrides (removes borders from specific IDs) */
#smart-conver-pro-defaults, 
#smart-conver-pro-appearance {
    border-top: none;
    margin-top: 40px;
    padding-top: 10px;
}

/* jQuery UI Autocomplete Fixes */
.ui-autocomplete {
    border-radius: 8px;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
    border: 1px solid #dcdcde;
}
.ui-state-active, 
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background: var(--smart-convert-currency-unit-conversion-accent) !important;
    color: #fff !important;
    border: none !important;
}


/* ==========================================================================
   Help & FAQ Section
   ========================================================================== */

.smart-convert-currency-unit-conversion-help-container {
    margin-top: 20px;
    max-width: 1200px;
}

.smart-convert-currency-unit-conversion-help-section {
    background: var(--smart-convert-currency-unit-conversion-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
}

.smart-convert-currency-unit-conversion-help-section h2 {
    margin-top: 0;
    font-size: 1.4rem;
    border-bottom: 1px solid #f0f0f1;
    padding-bottom: 15px;
    margin-bottom: 20px;
    color: var(--smart-convert-currency-unit-conversion-text-main);
}

.smart-convert-currency-unit-conversion-help-section h3 {
    font-size: 1.1rem;
    margin-top: 25px;
    margin-bottom: 10px;
    color: var(--smart-convert-currency-unit-conversion-text-light);
}

/* * FAQ Accordion Styling using <details> and <summary>
 */
.smart-convert-currency-unit-conversion-faq-details {
    background: var(--smart-convert-currency-unit-conversion-bg-card-alt);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.smart-convert-currency-unit-conversion-faq-details:hover {
    box-shadow: 0 4px 6px rgba(130, 199, 196, 0.15);
    border-color: var(--smart-convert-currency-unit-conversion-accent);
}

/* Active/Open State */
.smart-convert-currency-unit-conversion-faq-details[open] {
    background: #fff;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
    border-color: var(--smart-convert-currency-unit-conversion-accent);
}

.smart-convert-currency-unit-conversion-faq-summary {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    list-style: none; /* Hides default HTML triangle */
    position: relative;
    padding-right: 40px;
    display: flex;
    align-items: center;
}

/* Custom '+' icon for summary expansion */
.smart-convert-currency-unit-conversion-faq-summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 1.2rem;
    color: var(--smart-convert-currency-unit-conversion-accent);
    font-weight: 700;
    transition: transform 0.3s ease;
}

/* Rotate icon to 'x' position when open */
.smart-convert-currency-unit-conversion-faq-details[open] .smart-convert-currency-unit-conversion-faq-summary::after {
    transform: rotate(45deg);
    color: var(--smart-convert-currency-unit-conversion-primary);
}

/* Webkit specific marker hiding */
.smart-convert-currency-unit-conversion-faq-summary::-webkit-details-marker {
    display: none;
}

.smart-convert-currency-unit-conversion-faq-content {
    padding: 0 20px 20px 20px;
    color: var(--smart-convert-currency-unit-conversion-text-light);
    line-height: 1.6;
    font-size: 0.95rem;
    border-top: 1px solid #f0f0f1;
    margin-top: 5px;
    padding-top: 15px;
}

/* Utility for tables within Help sections */
.smart-convert-currency-unit-conversion-help-table {
    border-collapse: separate; 
    border-spacing: 0;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.smart-convert-currency-unit-conversion-help-table th {
    background: var(--smart-convert-currency-unit-conversion-bg-card-alt);
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: var(--smart-convert-currency-unit-conversion-text-main);
}
.smart-convert-currency-unit-conversion-help-table td {
    padding: 10px 15px;
    border-top: 1px solid #f0f0f1;
    color: var(--smart-convert-currency-unit-conversion-text-light);
}
.smart-convert-currency-unit-conversion-help-table code {
    background: #f0f0f1;
    padding: 3px 6px;
    border-radius: 4px;
    color: var(--smart-convert-currency-unit-conversion-primary);
}

/* ==========================================================================
   SCP Ajax Overlay & Progress (Light/Glass Theme)
   ========================================================================== */

/* Fullscreen overlay for AJAX updates */
#smart-convert-currency-unit-conversion-update-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(240, 240, 241, 0.85);
    backdrop-filter: blur(8px);          /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#smart-convert-currency-unit-conversion-particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; 
}

/* Central Modal in Overlay */
.smart-convert-currency-unit-conversion-modal-card {
    background: #FFFFFF;
    padding: 50px 40px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(130, 199, 196, 0.25);
    width: 90%;
    max-width: 420px;
    text-align: center;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.8);
    animation: scpPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scpPopIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Spinner Icons */
.smart-convert-currency-unit-conversion-spinner-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: inline-block;
    color: var(--smart-convert-currency-unit-conversion-text-main);
}

.smart-convert-currency-unit-conversion-spinner-icon.spin {
    animation: scpSpin 1.5s linear infinite;
    opacity: 0.8;
}
@keyframes scpSpin { 100% { transform: rotate(360deg); } }

.smart-convert-currency-unit-conversion-spinner-icon.pulse {
    animation: scpPulse 0.5s infinite alternate;
    color: #46b450;
}
@keyframes scpPulse { from { transform: scale(1); } to { transform: scale(1.2); } }

.smart-convert-currency-unit-conversion-modal-card h3 {
    margin: 0 0 25px 0;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    font-family: 'Figtree', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height:1.6;
}

/* Progress Bar Components */
.smart-convert-currency-unit-conversion-progress-container {
    width: 100%;
    height: 8px;
    background: #f0f0f1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.smart-convert-currency-unit-conversion-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--smart-convert-currency-unit-conversion-accent), var(--smart-convert-currency-unit-conversion-primary));
    border-radius: 10px;
    transition: width 0.3s ease-out;
}

.smart-convert-currency-unit-conversion-progress-text {
    font-size: 1rem;
    color: var(--smart-convert-currency-unit-conversion-text-light);
    font-weight: 500;
    font-family: 'Figtree', sans-serif;
}

.smart-convert-currency-unit-conversion-update-details {
    margin-top: 15px;
    font-size: 0.9rem;
    color: var(--smart-convert-currency-unit-conversion-text-light);
    min-height: 1.2em;
}

/* Floating Currency Particles Animation */
.smart-convert-currency-unit-conversion-currency-particle {
    position: absolute;
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    white-space: nowrap;
    user-select: none;
    line-height: 1;
    animation-name: scpFlow;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    text-shadow: none; 
}

@keyframes scpFlow {
    0% {
        transform: translateX(0) rotate(0deg) scale(0.8);
        opacity: 0;
        left: -50px;
    }
    10% { opacity: 0.4; } 
    80% { opacity: 0.4; }
    100% {
        transform: translateX(110vw) rotate(45deg) scale(1.1);
        opacity: 0;
        left: 0;
    }
}

/* ==========================================================================
   Gutenberg / Inline Modal Styles
   ========================================================================== */

/* Unification of Modal Styles within Block Editor */
.smart-convert-currency-unit-conversion-inline-modal .components-modal__content {
    border-radius: 20px !important;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card) !important;
    font-family: 'Figtree', sans-serif !important;
    padding: 0 !important;
    overflow: hidden;
}

.smart-convert-currency-unit-conversion-inline-modal .components-modal__header {
    background: linear-gradient(135deg, #e2f4f2 0%, #faf5ed 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 20px 24px;
}

.smart-convert-currency-unit-conversion-inline-modal .components-modal__header-heading {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--smart-convert-currency-unit-conversion-text-main);
}

/* * Gutenberg Specific Controls
 * High specificity overrides to match the plugin theme.
 */

/* 1. Labels (Value, Original Currency, etc.) - Forced Bold */
.smart-convert-currency-unit-conversion-inline-modal .components-base-control__label {
    font-weight: 700 !important; /* Bold */
    color: #1e1e1e;              /* Dark, almost black (WP standard) */
    margin-bottom: 4px !important;
    font-size: 13px;
    text-transform: none;
}

/* 2. Hint / Description Text - Styled gray */
.smart-convert-currency-unit-conversion-inline-modal .smart-convert-currency-unit-conversion-inline-hint {
    font-size: 12px !important;
    color: #50667d !important;   /* Desired gray code */
    margin: 0 0 12px 0 !important; /* Spacing below the hint */
    line-height: 1.4;
    font-style: normal !important;
}

/* Spacing adjustment for input controls */
.smart-convert-currency-unit-conversion-inline-modal .components-base-control {
    margin-bottom: 20px !important;
}

/* Primary Actions in Gutenberg Modal */
.smart-convert-currency-unit-conversion-inline-modal button.is-primary {
    background-color: var(--smart-convert-currency-unit-conversion-primary) !important;
    border-color: var(--smart-convert-currency-unit-conversion-primary) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 6px rgba(255, 107, 129, 0.25);
    transition: all 0.2s;
}

.smart-convert-currency-unit-conversion-inline-modal button.is-primary:hover {
    background-color: var(--smart-convert-currency-unit-conversion-primary-hover) !important;
    transform: translateY(-1px);
}

/* Secondary Actions in Gutenberg Modal */
.smart-convert-currency-unit-conversion-inline-modal button.is-secondary {
    color: var(--smart-convert-currency-unit-conversion-text-light) !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   Custom Units UI
   ========================================================================== */

/* Wrapper for the Add Custom Unit Form */
.smart-convert-currency-unit-conversion-custom-units-card {
    background: var(--smart-convert-currency-unit-conversion-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px; /* Space before default units */
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
    position: relative;
    overflow: hidden;
}

/* Decorative highlight border for the custom card */
.smart-convert-currency-unit-conversion-custom-units-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--smart-convert-currency-unit-conversion-primary);
}

.smart-convert-currency-unit-conversion-units-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 20px;
    position: relative;
}

/* Vertical divider line logic - Fixed positioning */
.smart-convert-currency-unit-conversion-units-grid::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #e2e8f0;
}

.smart-convert-currency-unit-conversion-unit-column h4 {
    margin-top: 0;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Column Header colors */
.smart-convert-currency-unit-conversion-unit-column-from h4 { color: var(--smart-convert-currency-unit-conversion-primary); }
.smart-convert-currency-unit-conversion-unit-column-to h4 { color: var(--smart-convert-currency-unit-conversion-accent); }

/* LIVE PREVIEW BOX */
.smart-convert-currency-unit-conversion-live-preview-wrapper {
    background: #F7FCFB;
    border: 2px dashed #ccd0d4;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.smart-convert-currency-unit-conversion-live-preview-wrapper:hover {
    border-color: var(--smart-convert-currency-unit-conversion-accent);
    background: #fff;
}

.smart-convert-currency-unit-conversion-live-preview-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--smart-convert-currency-unit-conversion-text-light);
    margin-bottom: 10px;
    font-weight: 700;
}

.smart-convert-currency-unit-conversion-live-preview-equation {
    font-family: 'Figtree', sans-serif;
    font-size: 1.5rem;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.smart-convert-currency-unit-conversion-live-preview-equation .part-from { color: var(--smart-convert-currency-unit-conversion-primary); }
.smart-convert-currency-unit-conversion-live-preview-equation .part-to { color: var(--smart-convert-currency-unit-conversion-accent); }
.smart-convert-currency-unit-conversion-live-preview-equation .operator { color: #ccc; }

.smart-convert-currency-unit-conversion-live-preview-equation span {
    display: inline-block;
    transition: all 0.2s;
}

/* Form Styles adjustments */
.smart-convert-currency-unit-conversion-form-row { margin-bottom: 15px; }
.smart-convert-currency-unit-conversion-form-row label { font-weight: 600; margin-bottom: 5px; display: block; font-size: 0.9rem;}
.smart-convert-currency-unit-conversion-input-group { display: flex; gap: 10px; }

/* Custom Switch/Toggle Design */
.smart-convert-currency-unit-conversion-mode-toggle {
    display: flex;
    background: #f0f0f1;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.smart-convert-currency-unit-conversion-mode-toggle label {
    flex: 1;
    text-align: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--smart-convert-currency-unit-conversion-text-light);
    transition: all 0.2s;
}

.smart-convert-currency-unit-conversion-mode-toggle input { display: none; }

/* Active state for the toggle switch */
.smart-convert-currency-unit-conversion-mode-toggle label.active {
    background: #fff;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.smart-convert-currency-unit-conversion-mode-toggle span { display: block;}

/* Factor Input Section */
.smart-convert-currency-unit-conversion-factor-section {
    background: var(--smart-convert-currency-unit-conversion-bg-card-alt);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px dashed #ccd0d4;
    margin-top: 20px;
}

.smart-convert-currency-unit-conversion-factor-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 1.1rem;
}

.smart-convert-currency-unit-conversion-factor-wrapper input {
    width: 150px !important;
    text-align: center;
    font-weight: bold;
    color: var(--smart-convert-currency-unit-conversion-primary);
}

/* Badge styling for Custom Units */
.smart-convert-currency-unit-conversion-badge.custom {
    background: #fdf2f4; /* Light coral bg */
    color: var(--smart-convert-currency-unit-conversion-primary);
    border: 1px solid #fadbd8;
}

/* Responsive adjustment for the unit grid */
@media (max-width: 782px) {
    .smart-convert-currency-unit-conversion-units-grid {
        grid-template-columns: 1fr;
    }
    .smart-convert-currency-unit-conversion-units-grid::after { display: none; }
}

/* ==========================================================================
   Equation Card (Merged View)
   ========================================================================== */

.smart-convert-currency-unit-conversion-conversion-equation-card {
    background: #F7FCFB;
    border: 2px dashed #ccd0d4;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.smart-convert-currency-unit-conversion-conversion-equation-card:hover {
    border-color: var(--smart-convert-currency-unit-conversion-accent);
    background: #fff;
}

.smart-convert-currency-unit-conversion-equation-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--smart-convert-currency-unit-conversion-text-light);
    margin-bottom: 15px;
    font-weight: 700;
}

.smart-convert-currency-unit-conversion-equation-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-family: 'Figtree', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    flex-wrap: wrap;
}

.eq-part {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eq-left { color: var(--smart-convert-currency-unit-conversion-primary); }
.eq-operator { color: #ccc; font-weight: 300; font-size: 2rem; }
.eq-right { color: var(--smart-convert-currency-unit-conversion-accent); }

/* Prominent Input inside equation */
.smart-convert-currency-unit-conversion-factor-input {
    width: 140px !important;
    text-align: center;
    font-weight: bold;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    font-size: 1.4rem !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 5px !important;
    height: auto !important;
}

.smart-convert-currency-unit-conversion-factor-input:focus {
    border-color: var(--smart-convert-currency-unit-conversion-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.2) !important;
}

/* ==========================================================================
   Validation & States
   ========================================================================== */

/* Validation Message Text */
.smart-convert-currency-unit-conversion-validation-msg {
    font-size: 0.85rem;
    margin-top: 4px;
    display: block;
    font-weight: 600;
}

.smart-convert-currency-unit-conversion-validation-msg.error {
    color: #d63638; /* Standard WP Red for text readability */
}

.smart-convert-currency-unit-conversion-validation-msg.ok {
    color: #46b450;
}

/* Error Border - High Specificity to override default states */
.smart-convert-currency-unit-conversion-error-border {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 1px #d63638 !important;
}

/* Disabled Input/Select state */
input[disabled], select[disabled] {
    opacity: 0.6;
    background: #f0f0f1 !important;
    cursor: not-allowed;
    border-color: #dcdcde !important;
    box-shadow: none !important;
}
.smart-convert-currency-unit-conversion-sym { font-weight: 700; }

/* Error state for inputs (Must be !important to override defaults) */
.smart-convert-currency-unit-conversion-input-error {
    border-color: #FF6B81 !important; /* Coral Pink */
    box-shadow: 0 0 0 1px #FF6B81 !important;
    background-color: #fff5f6 !important; /* Slight tint background */
}

/* Valid state (optional) */
.smart-convert-currency-unit-conversion-input-valid {
    border-color: #46b450 !important;
}

/* Button Disabled State (Redundant rule kept for safety) */
.button.disabled, .button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: #f0f0f1 !important;
    color: #a7aaad !important;
    box-shadow: none !important;
    border-color: #dcdcde !important;
}

/* ==========================================================================
   Z-Index Fixes
   ========================================================================== */

/* Fix Autocomplete Z-Index Context */
.smart-convert-currency-unit-conversion-custom-units-card {
    /* Ensure overflow is visible so the dropdown can spill out of the container */
    overflow: visible !important; 
    z-index: 10;
}

.ui-autocomplete {
    /* Ensure the menu appears on top of other elements */
    z-index: 99999 !important;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Fix for Radio Buttons Clickability */
.smart-convert-currency-unit-conversion-mode-toggle label {
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.smart-convert-currency-unit-conversion-mode-toggle input {
    /* Visually hide input, but keep it in DOM for accessibility/functionality */
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}


.disabled-look {
    background-color: #eee !important;
    color: #777 !important;
    border-color: #ddd !important;
    cursor: not-allowed;
}

/* ==========================================================================
   Import / Export Styles
   ========================================================================== */

/* Form Wrapper */
#smart-convert-currency-unit-conversion-import-form {
    background: #F7FCFB !important; /* Soft Teal bg */
    border: 1px solid #ccd0d4 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
}

/* File Input Styling */
#smart-convert-currency-unit-conversion-import-form input[type="file"] {
    background: #fff;
    padding: 10px;
    border: 1px dashed #ccd0d4;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 15px;
    cursor: pointer;
}

#smart-convert-currency-unit-conversion-import-form input[type="file"]:hover {
    border-color: var(--smart-convert-currency-unit-conversion-primary);
}

/* Radio Buttons Styling */
#smart-convert-currency-unit-conversion-import-form label {
    font-family: 'Figtree', sans-serif;
    font-size: 0.95rem;
    color: var(--smart-convert-currency-unit-conversion-text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Buttons Alignment */
#smart-convert-currency-unit-conversion-import-form button {
    height: 40px !important; /* Force same height */
    line-height: 1 !important;
    padding: 0 20px !important;
    font-size: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Cancel Button */
#smart-convert-currency-unit-conversion-import-form button.button {
    background: #fff;
    border: 1px solid #dcdcde;
    color: #50667d;
}
#smart-convert-currency-unit-conversion-import-form button.button:hover {
    border-color: #50667d;
    color: #1A2F45;
}

/* Start Import Button */
#smart-convert-currency-unit-conversion-import-form button.button-primary {
    background: var(--smart-convert-currency-unit-conversion-primary);
    border-color: var(--smart-convert-currency-unit-conversion-primary);
    color: #fff;
    box-shadow: 0 4px 6px rgba(255, 107, 129, 0.25);
}
#smart-convert-currency-unit-conversion-import-form button.button-primary:hover {
    background: var(--smart-convert-currency-unit-conversion-primary-hover);
}


/* ==========================================================================
   Support Grid Section
   ========================================================================== */

.smart-convert-currency-unit-conversion-support-grid-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 40px;
}

.smart-convert-currency-unit-conversion-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.smart-convert-currency-unit-conversion-support-card {
    background: var(--smart-convert-currency-unit-conversion-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.smart-convert-currency-unit-conversion-support-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--smart-convert-currency-unit-conversion-shadow-hover);
    background: #fff;
}

/* Icon Container (Circle) */
.smart-convert-currency-unit-conversion-support-icon {
    width: 60px;
    height: 60px;
    background: var(--smart-convert-currency-unit-conversion-bg-card-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--smart-convert-currency-unit-conversion-accent);
    font-size: 30px;
    border: 1px solid #e2e8f0;
}

.smart-convert-currency-unit-conversion-support-icon .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

/* Specific styling for Bug Report card (Red tint) */
.smart-convert-currency-unit-conversion-support-card.bug-report .smart-convert-currency-unit-conversion-support-icon {
    color: var(--smart-convert-currency-unit-conversion-primary);
    background: #fff5f6; /* Very light red tint */
    border-color: #fadbd8;
}

.smart-convert-currency-unit-conversion-support-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: var(--smart-convert-currency-unit-conversion-text-main);
}

.smart-convert-currency-unit-conversion-support-card p {
    font-size: 0.95rem;
    color: var(--smart-convert-currency-unit-conversion-text-light);
    margin-bottom: 25px;
    line-height: 1.5;
    flex-grow: 1; /* Pushes button to bottom for alignment across cards */
}

.smart-convert-currency-unit-conversion-support-card .button {
    width: 100%;
    justify-content: center;
    margin-top: auto; /* Aligns button to bottom */
}

/* Wrapper for inline modal content (provides padding around form) */
.smart-convert-currency-unit-conversion-inline-content-wrapper {
    padding: 30px !important;
}



/* ==========================================================================
   Gutenberg Editor Highlighting
   ========================================================================== */

/* * Styles the [smart-convert] shortcode inside the editor.
 * Uses a CSS animation to auto-hide the highlight after 3 seconds.
 * Keeps layout stable (no padding/font changes).
 */
.smart-convert-currency-unit-conversion-inline {
    /* Base styling - rounded corners and pointer */
    border-radius: 3px;
    cursor: pointer;
    
    /* Inherit font styles to prevent layout shifts */
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    margin: 0;
    border: none;

    /* ANIMATION: Keeps background visible, then fades it out */
    /* Name | Duration | Timing | Fill-Mode */
    animation: smart-convert-currency-unit-conversion-highlight-fade 3s ease-in-out forwards;
}

/* Keyframes for the fade-out effect */
@keyframes smart-convert-currency-unit-conversion-highlight-fade {
    0% {
        /* Start: Visible Corporate Gradient (Teal -> Coral) */
        background: linear-gradient(135deg, rgba(130, 199, 196, 0.25) 0%, rgba(255, 107, 129, 0.25) 100%);
        box-shadow: 0 0 0 1px rgba(130, 199, 196, 0.3);
    }
    66% {
        /* Hold: Keep visible for the first 2 seconds */
        background: linear-gradient(135deg, rgba(130, 199, 196, 0.25) 0%, rgba(255, 107, 129, 0.25) 100%);
        box-shadow: 0 0 0 1px rgba(130, 199, 196, 0.3);
    }
    100% {
        /* End: Fully Transparent (Invisible) */
        background: linear-gradient(135deg, rgba(130, 199, 196, 0) 0%, rgba(255, 107, 129, 0) 100%);
        box-shadow: 0 0 0 0 rgba(130, 199, 196, 0);
    }
}

/* Active state override - prevents outline but keeps functionality */
.smart-convert-currency-unit-conversion-inline[data-rich-text-format-boundary] {
    outline: none;
}

/* ==========================================================================
   Template Preview (Tooltip Styles)
   ========================================================================== */

/* * These styles correspond to the logic previously generated inline via PHP.
 * Colors are now controlled via CSS variables defined in PHP (wp_add_inline_style).
 */

.smart-convert-currency-unit-conversion-template-preview .smart-convert-currency-unit-conversion-hover {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #1A2F45; /* Used text color instead of "black" for better UI consistency */
    cursor: help;
}

.smart-convert-currency-unit-conversion-template-preview .smart-convert-currency-unit-conversion-hover .smart-convert-currency-unit-conversion-bubble {
    visibility: hidden;
    max-width: 15rem;
    
    /* Use CSS variables with fallback to default values */
    background-color: var(--smart-convert-currency-unit-conversion-bubble-bg, #424242); 
    color: var(--smart-convert-currency-unit-conversion-bubble-text, #ffffff);
    
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    min-width: 12rem;
    font-size: smaller;
    line-height: 1.4;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* Added subtle shadow for depth */
}

.smart-convert-currency-unit-conversion-template-preview .smart-convert-currency-unit-conversion-hover .smart-convert-currency-unit-conversion-bubble strong {
    font-weight: bold;
    font-size: normal;
}

.smart-convert-currency-unit-conversion-template-preview .smart-convert-currency-unit-conversion-hover .smart-convert-currency-unit-conversion-bubble span {
    color: inherit;
    opacity: 0.9;
    min-width: 9.5rem !important;
    display: block;
    font-size: 0.75rem;
    margin-top: 4px;
}

/* Arrow (Triangle) below the bubble */
.smart-convert-currency-unit-conversion-template-preview .smart-convert-currency-unit-conversion-hover .smart-convert-currency-unit-conversion-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    /* Arrow color must match the bubble background */
    border-color: var(--smart-convert-currency-unit-conversion-bubble-bg, #424242) transparent transparent transparent;
}

.smart-convert-currency-unit-conversion-template-preview .smart-convert-currency-unit-conversion-hover:hover .smart-convert-currency-unit-conversion-bubble {
    visibility: visible;
    opacity: 1;
}


/* ==========================================================================
   Semantic Box Strips (UX Hierarchy)
   ========================================================================== */

/* 1. Base styles for semantic boxes */
.smart-convert-currency-unit-conversion-box-create,
.smart-convert-currency-unit-conversion-box-tools,
.smart-convert-currency-unit-conversion-box-data,
.smart-convert-currency-unit-conversion-box-warning {
    position: relative !important;
    border-left: 0; /* Reset to default WP border */
}

/* 2. The Strip (Pseudoelement) */
.smart-convert-currency-unit-conversion-box-create::before,
.smart-convert-currency-unit-conversion-box-tools::before,
.smart-convert-currency-unit-conversion-box-data::before,
.smart-convert-currency-unit-conversion-box-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 9px;
    height: 100%;
    border-radius: 9px 0 0 9px;
    z-index: 1;
}

/* 3. Context Colors (Calculated from Primary #FF6B81) */

/* WARNING (Red/Pink - Primary Brand Color) */
.smart-convert-currency-unit-conversion-box-warning::before {
    background: linear-gradient(to bottom, #FF5252, #FF8A80);
}

/* CREATION (Green - Same Luminosity as Primary) */
.smart-convert-currency-unit-conversion-box-create::before {
    background: linear-gradient(to bottom, #69F0AE, #B9F6CA);
}

/* TOOLS (Purple - Same Luminosity as Primary) */
.smart-convert-currency-unit-conversion-box-tools::before {
    background: linear-gradient(to bottom, #40C4FF, #80D8FF);
}

/* DATA (Grey - Desaturated Primary) */
.smart-convert-currency-unit-conversion-box-data::before {
    background: linear-gradient(to bottom, #E0E0E0, #EEEEEE);
}