@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

body {
    background: #F4F5F1 none !important;
}

.uri-logo .logo-image {
    display: none;
}

.uri-logo::before {
    content:           '';
    display:           inline-block;
    width:             86px;
    height:            86px;
    background-image:  url('../../img/auth_page/rixon_logo.svg');
    background-size:   contain;
    background-repeat: no-repeat;
    vertical-align:    middle;
    margin-bottom:     15px;
}
.esim-features path {
    fill: var(--url-color);
}
#auth-tabs .nav-link.active {
    color: var(--url-color) !important;
}

/* Design uses Tajawal Regular (400) where platform defaults to 700 */
#auth-tabs .nav-link,
.auth-title-txt,
.auth-label,
#sign-in .remember-me-label,
#sign-up .label-is-active,
#sign-in .forgot-password-url,
#auth-content .recovery-password-button,
#recovery-password-wrapper .back-to-login,
#recovery-password-wrapper .reset-password,
#recovery-password-wrapper .recovery-password-button,
#sign-up .register-button,
#sign-in .login-button,
.social-network-icons-button-wrapper h3 {
    font-weight: 400 !important;
}
#recovery-password-wrapper .reset-password,
#recovery-password-wrapper .recovery-password-button,
#sign-up .register-button,
#sign-in .login-button {
    background:    #D87C0B !important;
    border:        none !important;
    border-radius: 10px !important;
}

#recovery-password-wrapper .reset-password:hover,
#recovery-password-wrapper .recovery-password-button:hover,
#sign-up .register-button:hover,
#sign-in .login-button:hover {
    background: #9C5906 !important;
}

#content-wrapper input[type=checkbox]:checked + label:before {
    background-color: var(--primary) !important;
    border-color:     var(--primary) !important;
}

.mini .language-dropdown-menu.dropdown-menu .currencies-list li.active > label {
    color: var(--url-color) !important;
}

#language .dropdown-menu .language-list li.active > label,
#language .dropdown-menu .language-list li:hover > label,
#currency .dropdown-menu .currency-list li.active > label,
#currency .dropdown-menu .currency-list li:hover > label {
    color: var(--url-color) !important;
}

#language .dropdown-menu .language-list li.active > svg,
#currency .dropdown-menu .currency-list li.active > svg {
    stroke: var(--url-color) !important;
}

.jsgrid-grid-header {
    border-radius: 10px 10px 0 0;
}

/* Table header cells use Tajawal ExtraBold (800) in the design; platform leaves them unstyled (browser default bold = 700) */
.jsgrid-header-row > .jsgrid-header-cell {
    font-weight: 800;
}

/* Table body text is 14px in the design; the grid component's base font-size is 13px */
.jsgrid,
.jsgrid-table,
.jsgrid input,
.jsgrid textarea,
.jsgrid select {
    font-size: 14px;
}

/* Sidebar links use Tajawal Medium (500); platform sets no explicit weight (falls back to body's 400) */
body .sidebar-nav ul li a {
    font-weight: 500;
}

/* The actual visible label is .main-title, which the shared sidebar partial sets to font-weight:600
   directly — that's more specific than the rule above, so it wins and the 500 above never applied.
   Tajawal has no 600 face loaded, so it was rendering as a heavier fallback (700) than the design's
   Medium (500), which is confirmed via getComputedStyle on the live page. */
body li.nav-item .main-title {
    font-weight: 500 !important;
}

/* Sidebar section captions ("Lines", "Platform Management") use Tajawal Medium (500);
   platform's 600 isn't a loaded Tajawal weight and falls back to Bold */
body .lines-subtitle,
body .platform-management {
    font-weight: 500;
}

/* "Lines" sits inside .main-part, so its 24px margin-top is the only spacing before it.
   "Platform Management" starts a new <ul> right after .main-part's own 30px padding-bottom,
   so its 25px margin-top stacks on top of that (55px total) instead of matching Lines' 24px. */
body .platform-management {
    margin-top: 0 !important;
}

#header .logo .logo-img {
    width:      auto;
    height:     50px;
    margin-top: 5px;
}

body .switcher input:checked + .slider {
    background: linear-gradient(180deg, #013E35 0%, #189E84 100%) !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    border:        none !important;
    outline:       none !important;
    box-shadow:    none !important;
    border-radius: 10px !important;
}

.btn-primary:not(.disabled):not(:disabled) {
    background: #D87C0B !important;
    color:      #FFFFFF !important;
}

.btn-primary svg path {
    fill: #FFFFFF !important;
}

#content-wrapper .btn-primary,
#content-wrapper .btn-primary.export-line-btn,
#content-wrapper .btn-primary.export-transactions-btn,
#content-wrapper #js-export-btn {
    color: #FFFFFF !important;
}

.btn-primary:not(.disabled):not(:disabled):hover,
.btn-primary:not(.disabled):not(:disabled):active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: #9C5906 !important;
}

/* Let Bootstrap's own muted gray disabled look show through instead of the forced brand orange above.
   Bootstrap's blanket ".btn:disabled {opacity:.65}" then fades this gray+white pair further,
   washing it out to near-invisible on a light card — override opacity so it stays crisp. */
.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--gray-300) !important;
    color:      var(--white) !important;
    opacity:    1 !important;
}

@media only screen and (max-width: 993px) {
    #user-details-mobile-menu,
    #mobile-menu {
        background: linear-gradient(180deg, #013E35 0%, #189E84 100%) !important;
    }

    #user-details-mobile-menu .dropdown-menu,
    #mobile-menu .dropdown-menu,
    #user-details-mobile-menu .language-dropdown-menu,
    #mobile-menu .language-dropdown-menu {
        background: transparent !important;
        box-shadow: none !important;
    }

    #user-details-mobile-menu .language-list .item > label,
    #mobile-menu .language-list .item > label {
        color: rgba(255, 255, 255, 0.75) !important;
    }
}

#header #user-details-mobile-menu .main-title-locale,
#header #user-details-mobile-menu .main-title-locale-currency,
#header #mobile-menu .main-title-locale,
#header #mobile-menu .main-title-locale-currency {
    color: #FFFFFF !important;
}

#header #user-details-mobile-menu .sign-currency,
#header #mobile-menu .sign-currency,
#header #user-details-mobile-menu .account-name,
#header #mobile-menu .account-name {
    color: #FFFFFF !important;
}

#header #user-details-mobile-menu .item.active > label,
#header #mobile-menu .item.active > label {
    color:       #FFFFFF !important;
    font-weight: 700 !important;
}

body li.nav-item a > svg {
    vertical-align: middle !important;
}

[lang=es] body .sidebar-nav ul li {
    height: auto;
}
[lang=es] body .sidebar-nav ul li a {
    display:     flex;
    align-items: center;
    gap:         8px;
    height:      auto;
    min-height:  40px;
}
[lang=es] body li.nav-item .main-title {
    position:     static !important;
    white-space:  normal;
    line-height:  20px;
    margin-left:  0 !important;
    margin-right: 0 !important;
}
[lang=es] body .sidebar-nav ul li a > svg {
    flex-shrink: 0;
}
#refill .topup-item.active {
    border-color: var(--url-color) !important;
}
.discount-code-btn .icon.icon-discount-code {
    filter: brightness(0) invert(1);
}
body .sidebar-nav ul li:hover a {
    background: rgba(255, 255, 255, 0.1) !important;
}
body .sidebar-nav ul li.active a,
body .sidebar-nav ul li.active:hover a {
    background: var(--leftbar-backgroud-hover) !important;
}
body .sidebar-nav ul li.empty-space:hover {background: transparent !important;}
/* The generic ":hover a" rules above (ours and the platform's own) don't exclude the empty
   spacer, so hovering over its blank row still highlights it like a real, clickable item. */
body .sidebar-nav ul li.empty-space:hover a {
    background: transparent !important;
}
/* The generic sidebar item rule sets min-height:40px, which clamps this spacer's own
   height:24px upward, doubling the intended gap between sections (visible in every
   language, not just Arabic — confirmed on the live page). */
body .sidebar-nav ul li.empty-space {
    min-height: 0;
}

#minimize-menu {
    color: var(--white) !important;
}

#cart-icon .count {
    background-color: #F37061 !important;
}

#header #back-to-home {
    display: block;
    height:  100%;
}
.session-info .badge-current {
    background:  var(--url-color) !important;
    line-height: 12px !important;
}
.session-info .session-device-details .session-platform { align-items: flex-start !important; }
/* This table's header hardcodes background: var(--indigo), which for Rixon is black (used
   elsewhere as regular dark text) — swap it for the brand accent to match the other table headers */
#transaction-panel .transaction-table tr.table-header {
    background: var(--url-color) !important;
}

/* .transaction-btn is a plain .btn-outline-primary button — no override needed, the generic
   .btn-outline-primary rules already give it the correct orange border/text and #9C5906 hover. */
.btn-outline-primary:hover {
    color:            var(--white) !important;
    background-color: #9C5906 !important;
    border-color:     #9C5906 !important;
}

/* Coupons page sets its own .create-coupon:hover color, which loads after this file and wins
   the cascade at equal specificity, overriding the Bootstrap outline-button hover state */
#content-wrapper .create-coupon.btn-outline-primary:hover {
    color: var(--white) !important;
}
[dir=ltr] #header #back-to-home { margin-right: 0; }
[dir=rtl] #header #back-to-home { margin-left: 0; }
#header #back-to-home .link-back-to-home {
    min-width:       190px;
    width:           fit-content;
    margin-top:      15px;
    border:          0;
    text-decoration: none;
    line-height:     20px;
    font-size:       14px;
    border-radius:   17px;
    background:      #F7F7F7;
    padding:         5px 10px;
    color:           var(--url-color);
    height:          30px;
    margin-left:     4px;
    margin-right:    4px;
}
#header #back-to-home .link-back-to-home:hover {
    background-color: var(--url-color) !important;
    color:            #FFFFFF !important;
}
#header #back-to-home .link-back-to-home svg {
    margin-right:   6px;
    vertical-align: middle;
}
#header #back-to-home .link-back-to-home svg path {
    fill: var(--url-color);
}
#header #back-to-home .link-back-to-home:hover svg path {
    fill: #FFFFFF;
}

#header .date-content {
    min-width:       110px;
    justify-content: center;
}

.date-content .time {
    font-variant-numeric: tabular-nums;
    min-width:            1.2ch;
    text-align:           center;
}

/* .js-disconnect-integration and .js-close-btn are plain .btn-outline-primary buttons —
   no brand-specific override needed, the generic .btn-outline-primary rules already give
   them the correct orange border/text and #9C5906 hover. */

/* Billing & Payments: #payment-method-panel's gap to its sibling column is a physical
   margin-right, which doesn't flip with direction. In RTL the two columns swap sides
   (payment-method-panel's section renders on the right, billing-address on the left), so the
   margin ends up facing away from its neighbor instead of toward it, collapsing the gap between
   the two cards from ~30px down to ~3px. Move it to margin-left for RTL so it faces the neighbor. */
[dir=rtl] #payment-method-panel {
    margin-right: 0;
    margin-left:  30px;
}