/* T&M RoadCare activation pages (_tpl/tm_roadcare) only. Not shared with any other page. */

/* base */
html {min-height: 100%; overflow-x: hidden;}
body.rc {position: relative; min-height: 100vh; margin: 0; background: #fff; color: #3a4256; font-family: 'Open Sans', Arial, helvetica, sans-serif; font-size: 14px;}
.rc img {max-width: 100%;}
.rc a, .rc a:hover, .rc a:focus {text-decoration: none;}
.bold {font-weight: bold;}
.rtl {direction: rtl;}

/* background */
.rc-bg {position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #fff url(../img/tm_roadcare/bg-landscape.jpg) no-repeat center / cover;}
.rc-page {position: relative; z-index: 1; min-height: 100vh;}

/* landing */
/* .rc-stage keeps the mockup's proportions; children are placed in % of it so the composition stays centred at any size */
.rc-landing {--stage: min(94vw, 1500px, 160vh); --btn: .48; min-height: 100vh; display: flex; padding: 4vh 3vw;}
.rc-landing-inner {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;}
.rc-stage {position: relative; flex: none; width: var(--stage); aspect-ratio: 1024 / 494;}
.rc-stage img {position: absolute; height: auto; max-width: none;}
.rc-tires {left: 5%; top: 45%; width: 32%;}
.rc-logo {right: 3%; top: .8%; width: 31%;}
.rc-card {left: 50%; top: 57.5%; width: 31.7%; transform: translateX(-50%) rotate(-2deg); filter: drop-shadow(0 18px 24px rgba(0, 25, 80, .25));}
.rc-activate {position: relative; flex: none; width: calc(var(--stage) * var(--btn)); margin: calc(var(--stage) * .006) auto 0;}
.rc-activate img {display: block; width: 100%; transition: filter .15s, transform .15s;}
.rc-activate:hover img {filter: brightness(1.06); transform: translateY(-1px);}
.rc-activate a {position: absolute; top: 0; bottom: 0; width: 50%; font-size: 0; color: transparent; overflow: hidden;}
.rc-activate-en {left: 0;}
.rc-activate-ar {right: 0;}

/* activation form & saved pages */
.rc-form-page {max-width: 820px; margin: 0 auto; padding: 3vh 16px 8vh;}
.rc-topbar {display: flex; align-items: center; justify-content: space-between; margin-bottom: 2vh;}
.rc-topbar-center {justify-content: center;}
.rc-topbar-logo img {display: block; height: min(150px, 20vh); width: auto; max-width: none;}
.rc-lang, .rc-lang:hover, .rc-lang:focus {display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .15); color: #fff; font-weight: 600;}
.rc-lang:hover {background: rgba(255, 255, 255, .3);}
.rc-form-card {background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(5, 30, 90, .22); padding: 28px 32px 32px;}
.rc-form-title {margin: 0 0 22px; font-size: 22px; font-weight: 700; color: #0b3a9e; text-align: center;}
.rc-form .row {margin-left: -8px; margin-right: -8px;}
.rc-form .row > [class*=col-] {padding-left: 8px; padding-right: 8px;}
.rc-form .form-group {margin-bottom: 16px;}
.rc-form .form-control {height: 48px; padding: 10px 14px; border: 1px solid #d3dae8; border-radius: 10px; background: #f7f9fd; box-shadow: none; color: #1f2a44; font-size: 15px;}
.rc-form .form-control::placeholder {color: #8a94ab;}
.rc-form .form-control:focus {border-color: #1a56d6; background: #fff; box-shadow: 0 0 0 3px rgba(26, 86, 214, .15); outline: none;}
.rc-form .form-control[readonly] {background: #f7f9fd; cursor: pointer;}
.rc-form .alert {margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 13px;}
.rc-form .select2-container {width: 100% !important;}
.rc-form .select2-container--default .select2-selection--single {height: 48px; border: 1px solid #d3dae8; border-radius: 10px; background: #f7f9fd;}
.rc-form .select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 46px; padding-left: 14px; padding-right: 32px; color: #1f2a44; font-size: 15px;}
.rc-form .select2-container--default .select2-selection--single .select2-selection__arrow {height: 46px; right: 8px;}
.rc-form .select2-container--default.select2-container--focus .select2-selection--single,
.rc-form .select2-container--default.select2-container--open .select2-selection--single {border-color: #1a56d6; background: #fff;}
.rtl .rc-form .select2-container--default .select2-selection--single .select2-selection__rendered {padding-left: 32px; padding-right: 14px;}
.rtl .rc-form .select2-container--default .select2-selection--single .select2-selection__arrow {left: 8px; right: auto;}
.rc-form-actions {margin-top: 8px; text-align: center;}
.rc-btn-submit {display: inline-block; min-width: 260px; height: 52px; padding: 0 32px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ff2a1f, #d10a05); box-shadow: 0 8px 18px rgba(209, 10, 5, .35); color: #fff; font-size: 18px; font-weight: 700; transition: transform .15s, box-shadow .15s;}
.rc-btn-submit:hover {transform: translateY(-1px); box-shadow: 0 10px 22px rgba(209, 10, 5, .45);}
.rc-btn-submit:disabled {opacity: .6;}
.rc [data-notify=container] {opacity: 1 !important; border-radius: 12px; box-shadow: 0 12px 30px rgba(5, 30, 90, .25);}
.rc [data-notify=container].alert-danger {background: #fdeeee;}
.rc-saved-card {padding: 40px 32px; text-align: center;}
.rc-saved-icon {width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: linear-gradient(180deg, #ff2a1f, #d10a05); box-shadow: 0 8px 18px rgba(209, 10, 5, .35); color: #fff; font-size: 34px; line-height: 72px;}
.rc-saved-msg {margin: 0; color: #1f2a44; font-size: 20px; font-weight: 600; line-height: 1.6;}

/* phones & portrait tablets */
@media (orientation: portrait) and (max-width: 991px) {
	/* bg-mobile.jpg is the 1080x1937 phone background with 480px of extra track area at the bottom: it is sized and centred as "cover" on its first 1937px, the extra height only fills the gap left when it shifts up by --rc-shift */
	.rc-bg {--rc-bg-w: max(100vw, 55.76vh); background-image: url(../img/tm_roadcare/bg-mobile.jpg); background-size: var(--rc-bg-w) auto; background-position: center calc((100vh - var(--rc-bg-w) * 1.7935) / 2 - var(--rc-shift, 0px));}
	body.rc {--stage: min(92vw, 540px, 62vh); --btn: 1.04;}
	.rc-landing {--stage: inherit; --btn: inherit; padding: 4vh 4vw;}
	/* free space is split 1:3 above/below the content; --rc-shift (a quarter of it) must match the content height: padding 8vh + stage (800/576) + button margin 2vw + button (208/1400 of its width) */
	.rc-landing-inner {justify-content: flex-start;}
	.rc-landing-inner::before, .rc-landing-inner::after {content: ''; flex: 1 1 0;}
	.rc-landing-inner::after {flex-grow: 3;}
	body.rc:has(.rc-landing) {--rc-shift: calc(max(0px, 92vh - 2vw - var(--stage) * (1.3889 + var(--btn) * .14857)) / 4);}	.rc-stage {aspect-ratio: 576 / 800;}
	.rc-logo {left: 50%; right: auto; top: .635%; width: 60%; transform: translateX(-50%);}
	.rc-tires {left: .4%; top: 54.76%; width: 46%;}
	.rc-card {left: 29.4%; top: 68.14%; width: 68%; transform: rotate(-4deg);}
	.rc-activate {margin: 2vw auto 0;}
}
@media (max-width: 767px) {
	.rc-form-card {padding: 20px 16px 24px; border-radius: 14px;}
	.rc-topbar-logo img {height: 110px;}
	.rc-btn-submit {width: 100%;}
}