/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* ============================================================
   MCE Currency Converter
   ============================================================ */
   

   

   .mce-converter input::-webkit-input-placeholder {
    color:#808080;
}
   .mce-converter input:focus::-webkit-input-placeholder {
    color: #808080;
}

/* Firefox < 19 */
   .mce-converter input:-moz-placeholder {
    color: #808080;
}
   .mce-converter input:focus:-moz-placeholder {
    color: #808080;
}

/* Firefox > 19 */
   .mce-converter input::-moz-placeholder {
    color: #808080;
}
   .mce-converter input:focus::-moz-placeholder {
    color: #808080;
}

/* Internet Explorer 10 */
   .mce-converter input:-ms-input-placeholder {
    color: #808080;
}
   .mce-converter input:focus:-ms-input-placeholder {
    color: #808080;
}
/* width */
.mce-select__dropdown::-webkit-scrollbar {
  width: 8px;
    	border-radius: 10px;

}

/* Track */
.mce-select__dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  	border-radius: 10px;

}

/* Handle */
.mce-select__dropdown::-webkit-scrollbar-thumb {
  background: #3FB9B5;
    	border-radius: 10px;

}

/* Handle on hover */
.mce-select__dropdown::-webkit-scrollbar-thumb:hover {
  background: #379E9A;
}
.mce-converter {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1166px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 32px;
    border-radius: 20px;
    -webkit-box-shadow: 0 3px 30px #E8E8E8;
            box-shadow: 0 3px 30px #E8E8E8;
}

.mce-converter *,
.mce-converter *::before,
.mce-converter *::after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
}

/* Top row --------------------------------------------------------- */
.mce-converter__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 14px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.mce-converter__field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
    min-width: 140px;
}

.mce-converter__field--amount {
    -webkit-box-flex: 2.5;
        -ms-flex: 2.5;
            flex: 2.5;
}

.mce-converter__field > label {
    font-size: 1.2em;
    color: #808080;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

/* Amount input */
.mce-converter__input {
	width: 100% !important;
    padding: 0.72rem 1rem !important;
    border: 1.5px solid #A695D7 !important;
    border-radius: 8px !important;
    font-size: 1rem;
    background: #f9f8fe !important;
    outline: none;
        height: 50px !important;
        color:#808080 !important;
    -webkit-transition: border-color 0.15s !important;
    -o-transition: border-color 0.15s !important;
    transition: border-color 0.15s !important;
    -moz-appearance: textfield;
}

.mce-converter__input::-webkit-outer-spin-button,
.mce-converter__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.mce-converter__input:focus { border-color: #7C5CDB; }

/* Custom select --------------------------------------------------- */
.mce-select {
    position: relative;
}

.mce-select__trigger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    padding: 0.6rem 1rem;
    border: 1.5px solid #A695D7;
    border-radius: 8px;
    cursor: pointer;
    background: #f9f8fe;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transition: border-color 0.15s;
    -o-transition: border-color 0.15s;
    transition: border-color 0.15s;
}
.mce-select--open .mce-select__trigger,
.mce-select__trigger:hover { border-color: #7C5CDB; }

.mce-select__icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.25rem;
    overflow: hidden;
}

.mce-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.2rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    vertical-align: middle;
}

/* Fallback badge when a currency icon image is missing */
.mce-icon--text {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #7C5CDB;
    color: #fff;
    font-size: 0.38rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    vertical-align: middle;
    overflow: hidden;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.mce-select__labels {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
}

.mce-select__code {
    font-weight: 700;
    font-size: 0.80rem;
    color: #222;
    line-height: 1.2;
}

.mce-select__name {
    font-size: 0.72rem;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
	line-height: normal;
}

.mce-select__arrow {
    font-size: 0.6rem;
    color: #bbb;
    margin-left: 4px;
    -webkit-transition: -webkit-transform 0.15s;
    transition: -webkit-transform 0.15s;
    -o-transition: transform 0.15s;
    transition: transform 0.15s;
    transition: transform 0.15s, -webkit-transform 0.15s;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.mce-select--open .mce-select__arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

/* Dropdown panel */
.mce-select__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e4dff8;
    border-radius: 10px;
    -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    z-index: 200;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.mce-select__dropdown.open { display: block; }

.mce-select__group-label {
    padding: 6px 14px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #faf9ff;
    border-bottom: 1px solid #f0eeff;
}

.mce-select__option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    -webkit-transition: background 0.1s;
    -o-transition: background 0.1s;
    transition: background 0.1s;
}
.mce-select__option:hover          { background: #f5f2ff; }
.mce-select__option--selected      { background: #ede8ff; }

/* Swap button ----------------------------------------------------- */
.mce-converter__swap {
    background: #dafafa;
    border: none;
    border-radius: 5px;
    width: 44px;
    height: 44px;
    line-height: 25 !important;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.3rem;
    color: #3FB9B5;
    -webkit-transition: background 0.15s, color 0.15s;
    -o-transition: background 0.15s, color 0.15s;
    transition: background 0.15s, color 0.15s;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.mce-converter__swap:hover,.mce-converter__swap:focus { background: #3FB9B5; color: #fff; }

/* Convert button -------------------------------------------------- */
.mce-converter__btn {
	padding: 0.72rem 2.2rem;
    background: #3FB9B5;
    color: #fff;
    border: none;
    border-radius: 50px !important;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: background 0.15s;
    -o-transition: background 0.15s;
    transition: background 0.15s;
    width: 135px;
    text-align: center;
}
.mce-converter__btn:focus{
	   background: #379E9A !important;
}
.mce-converter__btn:hover:not(:disabled) { background: #379E9A; }
.mce-converter__btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Divider --------------------------------------------------------- */
.mce-converter__divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin:24px 0 15px !important;
}

/* Result row ------------------------------------------------------ */
.mce-converter__result {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 12px;
}

.mce-converter__receive {
        font-size: 1.3rem;
    color: #444;
    font-weight: 600;
}
.mce-converter__receive strong {
    color: #462999;
    font-size: 1.45rem;
    font-weight: 700;
    margin-left: 4px;
}

.mce-converter__rate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #888;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
			    line-height: normal;

}
.mce-converter__rate-flip {
    background: none;
    border: none;
    cursor: pointer;
    color: #3FB9B5;
    font-size: 1rem;
    padding: 0 2px;
    line-height: 1;
    -webkit-transition: color 0.15s;
    -o-transition: color 0.15s;
    transition: color 0.15s;
}
.mce-converter__rate-flip:hover { color: #379E9A; }

/* Rate timestamp — always on its own line below the rate row ----- */
.mce-converter__rate-timestamp {
    font-size: 0.80rem;
    color: #aaa;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin-top: 2px;
	    line-height: normal;
}

/* Notice / error message below the result row --------------------- */
.mce-converter__countdown {
    font-size: 14px;
    font-weight: 500;
    line-height: 74px;
    color: #3fb9b5;
    text-align: right;
    margin-top: 8px;
}

/* Error state: switch to centred layout */
.mce-converter__countdown--error {
    text-align: center;
    text-transform: none !important;
}

.mce-converter__countdown a,
.mce-converter__countdown--error a {
    color: #3fb9b5;
    text-decoration: underline;
}

/* Disclaimer ------------------------------------------------------ */
.mce-converter__disclaimer {
    font-size: 0.75rem;
    color: #bbb;
    margin: 16px 0 0;
    line-height: 1.5;
}

/* Debug panel (temporary, for development) ----------------------- */
.mce-converter__debug {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
}

.mce-converter__debug-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.mce-converter__debug pre {
    font-size: 0.72rem;
    font-family: monospace;
    background: #f8f8f8;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    color: #555;
    margin: 0 0 10px;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Responsive ------------------------------------------------------ */
@media (max-width: 700px) {
    .mce-converter__top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
    .mce-converter__swap { width: 100%; border-radius: 8px; }
    .mce-converter__btn { width: 100%; }
    .mce-converter__result { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
    .mce-converter__rate { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .mce-converter__countdown { text-align: left; }
    .mce-converter__countdown--error { text-align: center; }
}