:root {
    /* Light theme colors */
    --background-primary: rgb(248 250 252);
    --background-secondary: white;
    --background-hover: #e7edf3;
    --background-active: #1978e5;
    --background-tag: #d0dbe7;
    --text-primary: white;
    --text-secondary: #4e7097;
    --text-success: #07883b;
    --border-color: #d0dbe7;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --loading-overlay: rgba(255, 255, 255, 0.8);
}

.dark {
    /* Dark theme colors */
    --background-primary: rgb(20 25 31);
    --background-secondary: #2b3540;
    --background-hover: #1f262e;
    --background-active: #1978e5;
    --background-tag: #2b3540;
    --text-primary: white;
    --text-secondary: #9dacbe;
    --text-success: #0bda5e;
    --border-color: #3d4b5c;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --loading-overlay: rgba(20, 25, 31, 0.5);
}
body {
    font-family: "Work Sans", "Noto Sans", sans-serif;
    background-color: var(--background-primary);
}

.currency-tag {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.currency-tag:hover {
    background-color: var(--background-tag);
}

.currency-tag.active {
    background-color: var(--background-active);
}

.currency-tag.active p {
    color: var(--text-primary);
}

/* Table row styles */
table tbody tr {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

table tbody tr:hover {
    background-color: var(--background-hover) !important;
}

table tbody tr.active {
    background-color: var(--background-active) !important;
}

table tbody tr.active td {
    color: var(--text-primary) !important;
}

/* Draggable converter styles */
.converter-window {
    position: fixed;
    width: 320px;
    background: var(--background-secondary);
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--shadow-color);
    z-index: 1000;
    cursor: move;
    user-select: none;
}

.converter-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


header h2,
header a,
header button {
    transition: 0.1s;
}

header h2:hover,
header a:hover,
header button:hover {
    color: var(--background-active);
}


.dark .converter-header {
    border-bottom: 1px solid var(--border-color);
}

.converter-content {
    padding: 16px;
}

.converter-window.dragging {
    opacity: 0.8;
    transition: none;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .px-40 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@container(max-width:120px) {
    .table-ff811658-855f-40a6-8654-4e5aefa33bed-column-120 {
        display: none;
    }
}

@container(max-width:240px) {
    .table-ff811658-855f-40a6-8654-4e5aefa33bed-column-240 {
        display: none;
    }
}

@container(max-width:360px) {
    .table-ff811658-855f-40a6-8654-4e5aefa33bed-column-360 {
        display: none;
    }
}

/* Hide default select arrow */
select::-ms-expand {
    display: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Mobile menu styles */
@media (max-width: 768px) {
    .desktop-menu,
    #calcToggle,
    #mobileCalcToggle {
        display: none;
    }
}

@media (min-width: 769px) {
    #burgerMenu {
        display: none;
    }
}

.mobile-menu-open {
    transform: translateX(0) !important;
}

/* Dark theme base styles */
.dark {
    background-color: var(--background-primary);
    color: var(--text-primary);
}

.dark body,
.dark header,
.dark .layout-container {
    background-color: var(--background-primary);
}

/* Dark theme header */
.dark header {
    border-color: var(--border-color);
}

.dark header h2,
.dark header a,
.dark header button {
    color: var(--text-primary);
    transition: 0.1s;
}

.dark header h2:hover,
.dark header a:hover,
.dark header button:hover {
    color: var(--text-secondary);
}

.dark header button {
    background-color: var(--background-secondary);
}

/* Dark theme search */
.dark .flex.w-full.flex-1.items-stretch {
    background-color: var(--background-secondary);
}

.dark .flex.w-full.flex-1.items-stretch input::placeholder {
    color: var(--text-secondary);
}

.dark .flex.w-full.flex-1.items-stretch [data-icon="MagnifyingGlass"] {
    background-color: var(--background-secondary);
    color: var(--text-secondary);
    border: none;
}

/* Dark theme currency tags */
.dark .currency-tag {
    background-color: var(--background-secondary);
}

.dark .currency-tag p {
    color: var(--text-primary);
}

.dark .currency-tag:hover {
    background-color: var(--background-hover);
}

.dark .currency-tag.active {
    background-color: var(--background-active);
}

/* Dark theme graph */
.dark .flex.min-w-72.flex-1.flex-col {
    border-color: var(--border-color);
}

.dark .flex.min-w-72.flex-1.flex-col > p {
    color: var(--text-primary);
}

.dark .flex.min-w-72.flex-1.flex-col .text-\[\#4e7097\] {
    color: var(--text-secondary);
}

.dark .flex.min-w-72.flex-1.flex-col .text-\[\#07883b\] {
    color: var(--text-success);
}

.dark .flex.min-w-72.flex-1.flex-col svg path[fill] {
    fill: url(#paint0_linear_1131_5935);
}

.dark .flex.min-w-72.flex-1.flex-col svg path[stroke] {
    stroke: #9dacbe;
}

.dark .flex.min-w-72.flex-1.flex-col svg stop {
    stop-color: #2b3540;
}

/* Dark theme table */
.dark .rates_table {
    border-color: #3d4b5c;
}

.dark .rates_table_container thead tr {
    background-color: #1f262e;
}

.dark .rates_table_container th {
    color: white;
}

.dark .rates_table_container td {
    color: #9dacbe;
}

.dark .rates_table_container td:first-child {
    color: white;
}

.dark .rates_table_container tr {
    border-color: #3d4b5c;
}

.dark .rates_table_container tr:hover {
    background-color: #1f262e;
}

.dark .rates_table_container tr.active {
    background-color: #1978e5;
}

.dark .rates_table_container tr.active td {
    color: white;
}

/* Dark theme converter */
.dark .converter-window {
    background-color: #2b3540;
    border-color: #2b3540;
}

.dark .converter-window h2,
.dark .converter-window p,
.dark .converter-window input,
.dark .converter-window select {
    color: white;
}

.dark .converter-window input,
.dark .converter-window select {
    background-color: #1a1f2b;
    border-color: #2b3540;
}

.dark .converter-window .form-input {
    background-color: #1a1f2b;
    border-color: #2b3540;
}

.dark .converter-window .form-input span {
    color: #4e7097;
}

/* Light theme styles */
body, header, .layout-container {
    background-color: rgb(248 250 252);
}

/* Dark theme search styles */
.dark .flex.w-full.flex-1.items-stretch {
    background-color: #2b3540 !important;
}

.dark .search_currency_input {
    background-color: #2b3540 !important;
    color: white !important;
    border: none !important;
}

.dark .flex.w-full.flex-1.items-stretch input::placeholder {
    color: #9dacbe !important;
}

.dark .flex.w-full.flex-1.items-stretch [data-icon="MagnifyingGlass"] {
    background-color: #2b3540 !important;
    color: #9dacbe !important;
    border: none !important;
}

/* Dark theme search and currency tags */
.dark input[placeholder="Search for a currency"] {
    background-color: #2b3540 !important;
    color: white !important;
    border: none !important;
}

.dark input[placeholder="Search for a currency"]::placeholder {
    color: #9dacbe !important;
}

.dark [data-icon="MagnifyingGlass"] {
    background-color: #2b3540 !important;
    color: #9dacbe !important;
    border: none !important;
}

.dark .text-\[\#0e141b\] {
    color: white !important;
}

.dark .text-\[\#4e7097\] {
    color: #a0b1c7 !important;
}

/* Dark theme graph styles */
.dark .flex.min-w-72.flex-1.flex-col {
    border-color: #3d4b5c !important;
}

.dark .flex.min-w-72.flex-1.flex-col > p {
    color: white !important;
}

.dark .flex.min-w-72.flex-1.flex-col .text-\[\#4e7097\] {
    color: #9dacbe !important;
}

.dark .flex.min-w-72.flex-1.flex-col .text-\[\#07883b\] {
    color: #0bda5e !important;
}

.dark .flex.min-w-72.flex-1.flex-col svg path[fill] {
    fill: url(#paint0_linear_1131_5935) !important;
}

.dark .flex.min-w-72.flex-1.flex-col svg path[stroke] {
    stroke: #9dacbe !important;
}

.dark .flex.min-w-72.flex-1.flex-col svg stop {
    stop-color: #2b3540 !important;
}

/* Dark theme table styles */
.dark .rates_table_container thead tr {
    background-color: #1f262e !important;
}

.dark .rates_table_container th {
    color: white !important;
}

.dark .rates_table_container td {
    color: #9dacbe !important;
}

.dark .rates_table_container td:first-child {
    color: white !important;
}

.dark .rates_table_container tr {
    border-color: #3d4b5c !important;
}

.dark .rates_table_container tr:hover {
    background-color: #1f262e !important;
}

.dark .rates_table_container tr.active {
    background-color: #1978e5 !important;
}

.dark .rates_table_container tr.active td {
    color: white !important;
}

/* Dark theme mobile menu */
.dark #mobileMenu {
    background-color: rgb(20 25 31);
}

.dark #mobileMenu h2,
.dark #mobileMenu a {
    color: white;
}

.dark #mobileMenu .border-b {
    border-color: #3d4b5c;
}

.dark #mobileMenu button {
    color: white;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Loading overlay styles */
.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background-color: var(--loading-overlay);
    border-radius: 12px;
}

.dark .loading-overlay {
    background-color: rgba(20, 25, 31, 0.5);
}

/* Dark theme developer page */
.dark .text-\[\\#0e141b\] {
    color: var(--text-primary);
}

.dark .text-\[\\#4e7097\] {
    color: var(--text-secondary);
}

.dark .bg-slate-50 {
    background-color: var(--background-primary);
    border-color: #3d4b5c;;
}

.dark .bg-\[\\#e7edf3\] {
    background-color: var(--background-secondary);
}

.dark .border-\[\\#d0dbe7\] {
    border-color: var(--border-color);
}

.dark .flex.items-center.gap-4.bg-slate-50 {
    background-color: #14191f;
}

.dark .flex.items-center.justify-center.rounded-lg.bg-\[\\#e7edf3\] {
    background-color: #2b3540;
    color: white;
}

.dark .flex.items-center.justify-center.rounded-lg.bg-\[\\#e7edf3\] svg {
    color: white;
}

/* Dark theme buttons */
.dark button.flex.min-w-\[84px\].max-w-\[480px\].cursor-pointer.items-center.justify-center.overflow-hidden.rounded-full.h-8.px-4.flex-row-reverse.bg-\[\\#e7edf3\] {
    background-color: #2b3540;
    color: white;
}

.dark button.flex.min-w-\[84px\].max-w-\[480px\].cursor-pointer.items-center.justify-center.overflow-hidden.rounded-full.h-8.px-4.flex-row-reverse.bg-\[\\#e7edf3\] .text-\[\\#0e141b\] {
    color: white;
}

.dark button.flex.min-w-\[84px\].max-w-\[480px\].cursor-pointer.items-center.justify-center.overflow-hidden.rounded-full.h-8.px-4.flex-row-reverse.bg-\[\\#e7edf3\] svg {
    color: white;
}

.dark .cloudtips_button {
    background-color: #2b3540;
}

/* Dark theme mobile menu */
.dark #mobileMenu {
    background-color: #14191f;
}

.dark #mobileMenu h2,
.dark #mobileMenu a {
    color: white;
}

.dark #mobileMenu .border-b {
    border-color: #2b3540;
}

.dark #mobileMenu button {
    color: white;
}

.dark .benefits_item {
    background-color: #2b3540;
}

.dark .go_to_bot_button, .dark .view_documentation_button {
    background-color: #2b3540;
}

/* Dark theme design page */
.dark .layout-content-container p,
.dark .layout-content-container h3 {
    color: white;
}

.dark .layout-content-container button.flex.min-w-\[84px\].max-w-\[480px\].cursor-pointer.items-center.justify-center.overflow-hidden.rounded-full.h-10.px-4.bg-\[\\#3f7bbf\] {
    background-color: #2b3540 !important;
    color: white !important;
}

.dark .layout-content-container .form-input::placeholder {
    color: #9dacbe;
}

.dark .layout-content-container .text-\[\\#5c718a\] {
    color: #9dacbe;
}

.dark .layout-content-container .border-\[\\#d4dbe2\] {
    border-color: #3d4b5c !important;
}

.dark .layout-content-container .bg-gray-50 {
    background-color: #1f262e !important;
}

.dark .layout-content-container .donate_input {
    background-color: #1f262e !important;
    border-color: #d4dbe2 !important;
    color: white !important;
}

.donate_input_copy_icon {
    cursor: pointer;
    position: relative;
}

.copy_notification {
    position: absolute;
    top: -30px;
    right: 0;
    background-color: #1f262e;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.copy_notification.show {
    opacity: 1;
}

.dark .copy_notification {
    background-color: #2b3540;
}

/* Dark theme FAQ styles */
.dark details {
    background-color: #1f262e !important;
    border-color: #3d4b5c !important;
}

.dark details summary p {
    color: white !important;
}

.dark details summary div {
    color: white !important;
}

.dark details p {
    color: #9dacbe !important;
}
.plans-section {
    margin-bottom: 30px;
    text-align: center;
}
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #0e141b;
    margin-bottom: 15px;
    text-align: center;
}
.currency-tag {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    background: #e7edf3;
    padding: 0 20px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}
.input-section {
    margin-bottom: 30px;
}
.input-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
}
.submit-btn {
    width: 100%;
    height: 54px;
    background: var(--background-active);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
    padding: 0 14px;
}
.submit-btn:disabled {
    background: #a0abc3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.error-message {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 10px;
    display: none;
}
.success-message {
    color: #27ae60;
    font-size: 14px;
    margin-top: 10px;
    display: none;
}
.wrap-pay {
    margin-bottom: 150px;
}
.token-view {
    margin-top: 30px;
    text-align: center;
}
.token-h2 {
    margin-top: 30px;
    text-align: center;
}