/* Mizrahnik currency converter — full card styling (single source for all money pages).
   Based on the original card; adds a second source row + editable target. */

.mz-modern-card {
    max-width: 380px;
    margin: 30px auto;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    font-family: 'Rubik', 'Assistant', sans-serif;
    overflow: hidden;
    direction: rtl;
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    transition: background-color 0.3s ease;
}

.mz-modern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px 5px;
}

.mz-header-content { display: flex; flex-direction: column; gap: 5px; }
.mz-title { font-weight: 800; font-size: 20px; color: #121331; }

.mz-rate-badge {
    background: rgba(95, 168, 134, 0.1);
    color: #5FA886;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
}

.mz-modern-body { padding: 10px 20px; }

.mz-currency-row {
    background: #F8F9FB;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* gap between the two source rows (ILS + USD) */
.mz-currency-row.source + .mz-currency-row.source { margin-top: 10px; }

.mz-currency-row.source:focus-within {
    background: #fff;
    border-color: #5FA886;
    box-shadow: 0 4px 15px rgba(95, 168, 134, 0.15);
    transform: translateY(-2px);
}

.mz-currency-row.target {
    background: #fff;
    border: 1px dashed #e0e0e0;
}

.mz-currency-row.target:focus-within {
    border-style: solid;
    border-color: #5FA886;
    box-shadow: 0 4px 15px rgba(95, 168, 134, 0.15);
}

.mz-currency-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mz-flag { font-size: 24px; line-height: 1; }
.mz-code { font-weight: 700; font-size: 16px; color: #555; }

/* amount field sits on its own line, full width — large numbers never get cut */
.mz-input-area, .mz-result-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
}

.mz-symbol { font-size: 18px; color: #aaa; font-weight: 500; }

.mz-input-area input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 26px;
    font-weight: 700;
    color: #121331;
    text-align: left;
    outline: none;
    padding: 0;
    margin: 0;
    direction: ltr;
}

/* editable target: looks like the old result text, behaves like an input */
.mz-result-area input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 26px;
    font-weight: 800;
    color: #5FA886;
    text-align: left;
    outline: none;
    padding: 0;
    margin: 0;
    direction: ltr;
}

.mz-input-area input::-webkit-outer-spin-button,
.mz-input-area input::-webkit-inner-spin-button,
.mz-result-area input::-webkit-outer-spin-button,
.mz-result-area input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mz-input-area input, .mz-result-area input { -moz-appearance: textfield; }

.mz-connector-line {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
    font-size: 12px;
}

.mz-modern-footer { text-align: center; padding: 10px 20px 20px; color: #aaa; }
.mz-modern-footer small { font-size: 12px; }

/* 🌙 Dark Mode */
[data-theme="dark"] .mz-modern-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .mz-title { color: #fff !important; }
[data-theme="dark"] .mz-rate-badge { background: rgba(95, 168, 134, 0.2); }
[data-theme="dark"] .mz-currency-row.source { background: #111827 !important; border-color: transparent; }
[data-theme="dark"] .mz-currency-row.source:focus-within { border-color: #5FA886; background: #0f1523 !important; }
[data-theme="dark"] .mz-currency-row.target { background: rgba(255, 255, 255, 0.03) !important; border-color: #374151; }
[data-theme="dark"] .mz-code { color: #ccc; }
[data-theme="dark"] .mz-input-area input { color: #fff; }
[data-theme="dark"] .mz-header-icon lord-icon { filter: brightness(0) invert(1); }
[data-theme="dark"] .mz-connector-line { color: #4b5563; }

/* currency selector — high specificity + !important to beat the site's global dark-mode rules */
.mz-modern-card .mz-cur-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1.5px solid var(--mz-border, rgba(17, 24, 39, 0.18)) !important;
    background-color: #ffffff !important;
    border-radius: 10px !important;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    color: #333 !important;
    cursor: pointer;
    padding: 7px 30px 7px 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235FA886' d='M0 0h12L6 8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 11px center !important;
    background-size: 12px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mz-modern-card .mz-cur-select:hover { border-color: #5FA886 !important; }
.mz-modern-card .mz-cur-select:focus-visible { outline: none; border-color: #5FA886 !important; box-shadow: 0 0 0 3px rgba(95, 168, 134, 0.2); }

html[data-theme="dark"] .mz-modern-card .mz-cur-select,
body[data-theme="dark"] .mz-modern-card .mz-cur-select {
    background-color: #0f172a !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23e5e7eb' d='M0 0h12L6 8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 11px center !important;
    background-size: 12px !important;
}
html[data-theme="dark"] .mz-modern-card .mz-cur-select option,
body[data-theme="dark"] .mz-modern-card .mz-cur-select option { background: #1f2937; color: #e5e7eb; }