/* /////////////////////////////

	1. Basic Styles
	2. Navbar
	3. Buttons
	4. Hero
	5. Marketing
	6. Testimonials
	7. Pricing
	8. Call to Action
	9. Footer
	10. Media Queries

   //////////////////////////*/

body {
	font-family: 'Roboto', sans-serif;
	color: #3a3f52;
}

section {
	background: #fff;
	padding: 100px 0px;
}

h2 {
	font-size: 44px;
	font-weight: 700;
    color: #178BFF;
}

h3 {
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 25px;
}

h5 {
	font-size: 16px;
}

p {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .05em;
	color: #53627C;
}

ul {
	list-style-type: none;
	padding-left: 0px;
}

b {
	font-weight: 700;
}

.title-block {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	text-align: center;
}

.title-block p {
	font-size: 20px;
	font-weight: 300;
	color: #8da2b5;
	margin-bottom: 0px;
}

.divider {
	padding: 2rem 0 0;
    margin: 2rem 0 0;
    border-top: 1px solid #3c3f45;
}

.divider-light {
	padding: 2rem 0 0;
    margin: 2rem 0 0;
	border-top: 1px solid #edf1f2
}

/* Загрузка */
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 1000;
}

.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Основной контент */
.main-content {
	padding: 20px;
}

.price-settings {
	max-width: 800px;
	margin: 0 auto;
}

h4 {
	color: #888;
	margin: 15px 0;
	font-size: 16px;
}

/* Группы настроек */
.settings-group,
.condition-group,
.memory-group,
.battery-group,
.activation-group {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

/* Элементы настроек */
.setting-item,
.condition-item,
.memory-item,
.battery-item,
.activation-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding: 10px;
	border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child,
.condition-item:last-child,
.memory-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

/* Метки и значения */
label, span {
	color: #333;
	font-size: 14px;
}

input[type="number"] {
	width: 100px;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-align: right;
	font-size: 14px;
}

input[readonly] {
	background-color: #f9f9f9;
	cursor: not-allowed;
}

/* Специальные стили для блокировки активации */
.activation-value {
	display: flex;
	align-items: center;
	gap: 10px;
}

.percent {
	color: #666;
}

.note {
	color: #999;
	font-size: 12px;
}

/* Адаптивность */
@media (max-width: 768px) {
	body {
		padding: 10px;
	}

	.container {
		padding: 10px;
	}

	.main-content {
		padding: 10px;
	}

	.setting-item,
	.condition-item,
	.memory-item,
	.battery-item,
	.activation-item {
		flex-direction: column;
		align-items: flex-start;
	}

	input[type="number"] {
		width: 100%;
		margin-top: 5px;
	}

	.activation-value {
		width: 100%;
		margin-top: 5px;
	}
}

/* ==============================================
   2. Navbar 
===============================================*/

.custom-navbar {
	background-color: #ffffff!important;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.09);
	height: 70px;
	max-height: 70px;
}

.navbar-toggler {
	font-size: 38px;
	background-color: transparent;
}

.navbar-toggler:focus {
	text-decoration: none;
	outline: none;
}

.navbar-toggler-icon {
	color: #ffffff;
}

.navbar-collapse {
	background-color: #ffffff;
}

.nav-custom-link {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .05em;
	margin-top: 5px;
}

.navbar a {
	color: #53627C !important;
}

/* Mobile header tweaks */
@media (max-width: 576px) {
  .custom-navbar .container { flex-wrap: wrap; }
  #langSelect { max-width: 160px; font-size: 14px; height: 32px; padding: 2px 6px; }
  .custom-navbar img { height: 28px !important; }
  .navbar .btn-primary { padding: 6px 12px; font-size: 14px; }
  .custom-navbar .d-flex.align-items-center:last-child { width: 100%; margin-top: 8px; }
  .hero .col-md-5, .features .col-md-5 { text-align: center; }
  .hero .col-md-5 img, .features .col-md-5 img { margin: 0 auto; }
  .how-list li { font-size: 16px; margin-bottom: 12px; }
  /* Сжимаем изображения телефонов */
  .hero .phone-shot, .features .phone-shot { width: 74vw; max-width: 290px; }
}

/* предотвращаем горизонтальный скролл на узких экранах */
html, body { overflow-x: hidden; }

.nav-right {
	float: right;
}

/* ==============================================
   3. Buttons
===============================================*/

.btn {
	font-size: 14px;
	font-weight: 400;
	border-radius: 3px!important;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.05), 0 1px 2px 0 rgba(0,0,0,.08);
}

.btn:hover {
	text-decoration: none;
}

.btn-regular {
	background-color: #0095f7;
	color: #ffffff;
	padding: 10px 25px;
	letter-spacing: .1em;
	margin-top: 25px;
	display: inline-block;
}

.btn-regular:hover {
	background-color: #0191f0;
	color: #ffffff;
}

.btn-demo {
	color: #ffffff;
	background-color: #6772e5;
	letter-spacing: .1em;
	padding: 15px 48px;
	display: inline-block;
	width: 100%;
	margin-top: 20px;
}

.btn-demo:hover {
	color: #ffffff;
	background-color: #636ee1;
}

.btn-demo-small {
	font-size: 12px;
	background-color: #6772e5;
	padding: 1px 4px;
}

.btn-demo-small:hover {
	background-color: #636ee1;
}

.btn-demo-small a {
	color: #ffffff!important;
}

.btn-buy {
	color: #ffffff;
	background-color: #0095f7;
	letter-spacing: .1em;
	padding: 15px 48px;
	display: inline-block;
	width: 100%;
	margin-top: 20px;
}

.btn-buy:hover {
	background-color: #0191f0;
	color: #ffffff;
}

/* ==============================================
   4. Hero
===============================================*/

.hero {
	padding: 100px 0;
	background-color: #f8f9fa;
}

.hero h1 {
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 30px;
}

.hero p {
	font-size: 20px;
	margin-bottom: 40px;
}

.how-list {
	margin: 40px 0;
}

.how-list li {
	font-size: 18px;
	margin-bottom: 20px;
	color: #53627C;
    position: relative;
    padding-left: 22px;
}

.how-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 10px;
    background: #6bd12b;
  border-radius: 50%;
}

/* ==============================================
   5. Features
===============================================*/

.features {
	padding: 100px 0;
}

.features h2 {
	margin-bottom: 30px;
}

.features p {
	font-size: 18px;
	margin-bottom: 40px;
}

/* ==============================================
   6. Images
===============================================*/

.img-fluid {
	max-width: 100%;
	height: auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 5px;
	margin-bottom: 20px;
}

/* ==============================================
   7. CTA
===============================================*/

.cta {
	padding: 80px 0;
	background-color: #f8f9fa;
	text-align: center;
}

/* ==============================================
   13. Phone Screenshot Frame
================================================*/

.phone-shot {
    padding: 0;
    border: clamp(8px, 1.6vw, 14px) solid #000000;
    /* Радиус, визуально соответствующий iPhone 15 */
    border-radius: clamp(30px, 12%, 56px);
    background: #000000;
    box-shadow: 0 14px 40px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.2);
    overflow: hidden;
}

@media (max-width: 576px) {
    .phone-shot {
        border-width: clamp(6px, 2.5vw, 10px);
        border-radius: clamp(22px, 14%, 36px);
    }
}

/* ==============================================
   14. Scroll Reveal Animations
================================================*/

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease var(--delay, 0ms), transform 600ms ease var(--delay, 0ms);
    will-change: opacity, transform;
}

.reveal.from-left {
    transform: translateX(-24px);
}

.reveal.from-right {
    transform: translateX(24px);
}

/* Коррекция анимации в RTL: инвертируем направления, чтобы не наезжало на изображение */
html[dir="rtl"] .reveal.from-left {
    transform: translateX(24px);
}

html[dir="rtl"] .reveal.from-right {
    transform: translateX(-24px);
}

.reveal-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* На маленьких экранах уменьшаем смещение, чтобы исключить визуальный наезд */
@media (max-width: 768px) { 
    .reveal.from-left { transform: translateX(-12px); }
    .reveal.from-right { transform: translateX(12px); }
    html[dir="rtl"] .reveal.from-left { transform: translateX(12px); }
    html[dir="rtl"] .reveal.from-right { transform: translateX(-12px); }
}

.cta h2 {
	margin-bottom: 30px;
}

.cta p {
	font-size: 20px;
	margin-bottom: 40px;
}

/* ==============================================
   8. Modal
===============================================*/

.modal-content {
	border-radius: 8px;
	padding: 20px;
}

.modal-body {
	text-align: center;
	padding: 40px;
}

/* Кастомные модальные окна */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
		display: none;
	align-items: center;
	justify-content: center;
	z-index: 1050;
}

.modal-overlay.show {
	display: flex;
}

.modal-card {
	background: #ffffff;
	border-radius: 8px;
	max-width: 520px;
	width: 92%;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	padding: 24px;
}

.modal-card h4 {
	margin-bottom: 12px;
}

.modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	font-size: 22px;
	cursor: pointer;
	color: #53627C;
}

.navbar .btn-primary {
	color: #ffffff !important;
}

/* ==============================================
   9. Loading Screen
===============================================*/

#loading-screen {
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.loading-content {
	text-align: center;
}

.loading-spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
  border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ==============================================
   10. RTL Support
===============================================*/

html[dir="rtl"] {
	direction: rtl;
	text-align: right;
}

html[dir="rtl"] body {
	text-align: right;
}

html[dir="rtl"] .iphone-bg-wrap img {
	transform: none !important;
	-webkit-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
}

/* ==============================================
   11. App Store Buttons
===============================================*/

.app-buttons {
	margin-top: 2rem;
  display: flex;
	gap: 1rem;
  justify-content: center;
}

.app-buttons img {
  height: 40px;
  width: auto;
}

@media (max-width: 576px) {
    .app-buttons {
  flex-direction: column;
  align-items: center;
}
    
    .app-buttons img {
        height: 44px;
        margin-bottom: 0.75rem;
    }
}

/* ==============================================
   12. Media Queries
===============================================*/

@media (max-width: 768px) { 
	.hero { padding: 48px 0; }
	.hero h1 { font-size: 32px; line-height: 1.2; }
	.hero p { font-size: 16px; }

	.features { padding: 48px 0; }
	.features h2 { font-size: 28px; line-height: 1.25; }
	.features p { font-size: 15px; }

	.cta { padding: 40px 0; }
	.cta h2 { font-size: 28px; }
	.cta p { font-size: 16px; }
}