/* =========================================================
   Cityscape 2025 landing pages (body.cityscape-landing)
   — supplier-interest-registration-cityscape-2025
   Values taken from the live Elementor CSS (page id 76347).
   Markup: src/seed/fix-supplier-interest-cityscape.ts
   The landing has its own bar and social footer, so the site
   header and footer are hidden here.
   ========================================================= */

body.cityscape-landing { padding-top: 0 !important; background-color: #EAE3DA !important; }
body.cityscape-landing #header,
body.cityscape-landing .site-footer { display: none !important; }
html.csl-lock, html.csl-lock body { overflow: hidden; }

/* main is one grid: bar across, title | form, social under the form.
   The HTML blocks' wrappers step aside so their children join the grid. */
.csl-main {
	--csl-green: #3B5147; --csl-cream: #FFECD1; --csl-brown: #85553A; --csl-ink: #2C2C2C;
	--csl-side: 5%;
	display: grid;
	grid-template-columns: var(--csl-side) minmax(0, 3fr) 50px minmax(0, 2fr) var(--csl-side);
	align-items: start;
	background: #EAE3DA;
	color: var(--csl-ink);
}
.csl-main > .cms-section { display: contents; }
.csl-main img { display: block; max-width: 100%; height: auto; }

/* ---------- green bar ---------- */
.csl-bar {
	grid-column: 1 / -1;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
	padding: 1% var(--csl-side);
	background-color: var(--csl-green); background-position: center; background-size: cover; background-repeat: no-repeat;
}
.csl-bar__ryi { justify-self: start; font-family: 'Lucky Beauty', serif; font-size: 15px; line-height: 45px; color: var(--csl-cream); }
.csl-bar__ryi:hover { color: #fff; }
.csl-bar__logo img { width: 150px; }
.csl-bar__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.csl-bar__menu { display: none; padding: 0; border: 0; background: none; color: var(--csl-cream); cursor: pointer; }

.csl-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 24px; border: 1px solid transparent; border-radius: 10px; background: transparent;
	font-family: 'Lucky Beauty', serif; font-size: 15px; font-weight: 500; line-height: 1; color: var(--csl-cream);
	cursor: pointer; transition: background-color .3s, color .3s;
}
.csl-btn:hover, .csl-btn:focus-visible { color: var(--csl-cream); }
.csl-btn--outline { border-color: #FFECD161; }
.csl-btn--outline:hover, .csl-btn--outline:focus-visible { background: var(--csl-cream); color: var(--csl-green); }

/* ---------- title + form ---------- */
.csl-title { grid-column: 2; padding-block: clamp(40px, 5vw, 100px) 0; }
.csl-title h1 { margin: 0; font-family: 'Lucky Beauty new', 'Lucky Beauty', serif; font-size: 60px; font-weight: 400; line-height: 65px; color: var(--csl-ink); }
.rtl .csl-title h1 { font-family: '29LTAzer-Light', sans-serif; line-height: 1.4; }

.csl-main > .cms-form-section { grid-column: 4; padding: clamp(40px, 5vw, 100px) 0 0; }
.csl-main > .cms-form-section .container { max-width: none; padding: 0; }
.csl-main > .cms-form-section .section-title,
.csl-main > .cms-form-section .cms-form-section__intro { display: none; }

.csl-main .lead-form { grid-template-columns: 1fr; gap: 10px; padding: 0; border: 0; background: transparent; }
.csl-main .lead-form label, .csl-main .lead-form .flbl, .csl-main .lead-form .fselect,
.csl-main .lead-form .fphone, .csl-main .lead-form .ffile, .csl-main .lead-form legend {
	font-size: 17px; line-height: 20px; letter-spacing: 0; text-transform: none; color: var(--csl-ink);
}
.csl-main .lead-form .flbl { padding-bottom: 8px; }
.csl-main .lead-form input, .csl-main .lead-form select, .csl-main .lead-form textarea,
.csl-main .lead-form .ss-trigger, .csl-main .lead-form .ffile-box {
	background: transparent; border-color: #7A7A7A6E; font-size: 14px; color: #000;
}
/* phone: the outline is on the wrapper (the number input inside has none), so it takes the same colour */
.csl-main .lead-form .pi { border-color: #7A7A7A6E; background: transparent; }
.csl-main .lead-form .pi:focus-within { border-color: var(--csl-brown); }
.csl-main .lead-form .flbl > span[aria-hidden] { color: #D9534F; margin-inline-start: 4px; }

/* file field as on WordPress: a small native-looking button, then the file name */
.csl-main .lead-form .ffile-box { justify-content: flex-start; gap: 6px; padding: 0; border: 0; background: transparent; }
.csl-main .lead-form .ffile-btn {
	order: -1; padding: 3px 8px; border: 1px solid #8F8F9D; border-radius: 4px; background: #E9E9ED;
	font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; color: #000;
	transition: background-color .2s;
}
.csl-main .lead-form .ffile-box:hover .ffile-btn { background: #D0D0D7; }
.csl-main .lead-form .ffile-box:focus-within .ffile-btn { outline: 2px solid var(--csl-brown); outline-offset: 1px; }
.csl-main .lead-form .ffile-name, .csl-main .lead-form .ffile-name.empty { flex: 0 1 auto; font-size: 14px; color: #000; }
/* no file yet: the name slot would repeat the button label */
.csl-main .lead-form .ffile-name.empty { font-size: 0; }
.csl-main .lead-form .ffile-name.empty::after { content: 'No file selected.'; font-size: 14px; }
.rtl .csl-main .lead-form .ffile-name.empty::after { content: 'لم يتم اختيار ملف.'; }

.csl-main .lead-form .btn-solid { width: 100%; justify-content: center; margin-top: 10px; padding: 12px 24px; border-radius: 3px; font-family: 'Marcellus', serif; font-weight: 500; }
.rtl .csl-main .lead-form .btn-solid { font-family: '29LTAzer-Light', sans-serif; }
.csl-main .lead-form .btn-solid .arr { display: none; }

/* ---------- hub cards (retal-cityscape-2025-register-your-interest, src/seed/fix-cityscape-hub.ts) ---------- */
.csl-hub {
	grid-column: 1 / -1;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px;
	padding: 5%;
}
.csl-card { display: flex; flex-direction: column; gap: 20px; color: var(--csl-green); }
.csl-card::before { content: ''; width: 53px; border-top: 1px solid var(--csl-green); }
.csl-card__title { margin: -10px 0 0; font-family: 'Lucky Beauty', serif; font-size: 20px; font-weight: 600; line-height: 25px; color: var(--csl-green); }
.rtl .csl-card__title { font-family: '29LTZaridDisplayVF', sans-serif; }
.csl-main .csl-card__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: filter .3s; }
.csl-card:hover .csl-card__img { filter: brightness(.92); }

/* ---------- Cityscape 2024 hub (retal-cityscape-register-your-interest, src/seed/fix-cityscape-hub-2024.ts) ----------
   Same bar and popups in the 2024 colours (brown and white on white), photo
   cards with the title over them, and its own brown footer band. Values from
   the live Elementor CSS (page id 61176). */
body.cityscape-landing.csl-2024 { background-color: #fff !important; }
.csl-main--2024 { --csl-green: #85553A; --csl-cream: #fff; background: #fff; }
.csl-main--2024 .csl-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.csl-main--2024 .csl-bar__ryi { font-size: 20px; }
.csl-main--2024 .csl-bar__logo { justify-self: center; }
.csl-main--2024 .csl-bar > .csl-bar__logo { display: block; width: 100%; }
.csl-main--2024 .csl-bar > .csl-bar__logo img { width: 30%; min-width: 120px; margin-inline: auto; }
.csl-main--2024 .csl-btn { padding: 0 25px; border-radius: 0; font-weight: 400; line-height: 45px; }
.csl-main--2024 .csl-btn--outline { border-color: #fff; }

.csl-main--2024 .csl-hub { gap: 20px; }
.csl-card--cover { position: relative; overflow: hidden; min-height: 800px; padding: 50px; border-radius: 40px; isolation: isolate; }
.csl-card--cover::before { display: none; }
.csl-card__bg {
	position: absolute; inset: 0; z-index: -1;
	background-position: center; background-size: cover; background-repeat: no-repeat;
	transition: transform 1.5s;
}
.csl-card--cover:hover .csl-card__bg { transform: scale(1.1); }
.csl-card--cover .csl-card__title { margin: 0; font-size: 30px; line-height: 45px; text-decoration: underline; color: var(--csl-brown); }

.csl-foot {
	grid-column: 1 / -1;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px;
	padding: 2% var(--csl-side);
	background: var(--csl-brown);
}
.csl-foot__copy, .csl-foot__links a { font-family: 'Lucky Beauty', serif; font-size: 15px; font-weight: 600; line-height: 45px; color: #fff; }
.csl-foot__copy { margin: 0; }
.csl-foot__links { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.csl-foot__links a:hover { color: #fff; text-decoration: underline; }
.rtl .csl-foot__copy, .rtl .csl-foot__links a { font-family: '29LTAzer-Light', sans-serif; }

/* ---------- social icons ---------- */
.csl-social { grid-column: 4; padding: 40px 0 clamp(30px, 3vw, 60px); }
.csl-social ul { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.csl-social a { display: flex; align-items: center; justify-content: center; min-width: 22px; font-size: 18px; color: var(--csl-ink); transition: color .3s; }
.csl-social a:hover { color: var(--csl-brown); }

/* ---------- popups ---------- */
.csl-modal {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center; padding: 20px;
	background: rgba(0, 0, 0, .6);
	opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.csl-modal.is-open { opacity: 1; visibility: visible; }
.csl-modal__dialog { position: relative; width: min(560px, 100%); padding: 50px 40px 40px; background: #fff; text-align: center; }
.csl-modal__close { position: absolute; top: 14px; inset-inline-end: 14px; padding: 4px; border: 0; background: none; color: var(--csl-ink); cursor: pointer; }
.csl-modal__dialog h4 { margin: 0 0 30px; font-family: 'Lucky Beauty', serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: var(--csl-ink); }
.rtl .csl-modal__dialog h4 { font-family: '29LTAzer-Light', sans-serif; }
.csl-stores { display: flex; justify-content: center; gap: 16px; }
.csl-stores img { width: 180px; }

.csl-modal--menu { align-items: flex-start; padding: 0; }
.csl-modal__dialog--menu {
	width: 100%; min-height: 100%; padding: 20px; text-align: start;
	display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
	background-color: var(--csl-green); background-size: cover; background-position: center;
}
.csl-menu__top { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.csl-menu__top img { width: 135px; }
.csl-modal__dialog--menu .csl-modal__close { position: static; color: var(--csl-cream); }
.csl-menu__link { font-family: 'Lucky Beauty', serif; font-size: 20px; color: var(--csl-cream); }
.rtl .csl-bar__ryi, .rtl .csl-btn, .rtl .csl-menu__link { font-family: '29LTAzer-Light', sans-serif; }

/* ---------- responsive (Elementor breakpoints 1400 / 1200 / 767) ---------- */
@media (max-width: 1400px) {
	.csl-bar { padding: 30px 20px; }
	.csl-card--cover { min-height: 600px; }
	.csl-foot { padding: 30px 20px; }
}

@media (max-width: 1200px) {
	.csl-main--2024 .csl-bar__ryi { font-size: 15px; }
	.csl-main--2024 .csl-btn { padding: 0 10px; }
	.csl-card--cover { min-height: 500px; }
}

@media (max-width: 880px) {
	.csl-card--cover { min-height: 400px; padding: 30px; }
	.csl-card--cover .csl-card__title { font-size: 20px; }
	.csl-foot { padding: 20px; }
}

@media (max-width: 1200px) {
	.csl-title h1 { font-size: 30px; line-height: 35px; }
	.csl-main .lead-form label, .csl-main .lead-form .flbl, .csl-main .lead-form .ffile,
	.csl-main .lead-form input, .csl-main .lead-form select { font-size: 13px; }
}

@media (max-width: 767px) {
	.csl-main { grid-template-columns: 20px minmax(0, 1fr) 20px; }
	.csl-bar { grid-template-columns: auto 1fr; padding: 20px; }
	.csl-bar__ryi, .csl-bar__app { display: none; }
	.csl-bar__logo img { width: 135px; }
	.csl-bar__menu { display: inline-flex; }
	.csl-title, .csl-main > .cms-form-section, .csl-social { grid-column: 2; }
	.csl-hub { grid-template-columns: 1fr; gap: 50px; padding: 50px 20px; }
	.csl-card__title { font-size: 25px; }
	.csl-main--2024 .csl-bar { grid-template-columns: auto 1fr; }
	.csl-main--2024 .csl-bar > .csl-bar__logo { justify-self: start; }
	.csl-main--2024 .csl-bar > .csl-bar__logo img { width: 135px; margin-inline: 0; }
	.csl-main--2024 .csl-hub { gap: 20px; }
	.csl-card--cover { padding: 20px; border-radius: 20px; }
	.csl-card--cover .csl-card__title { font-size: 25px; }
	.csl-foot { flex-direction: column; justify-content: center; padding: 30px 20px 10px; }
	.csl-foot__copy { order: 1; font-size: 12px; }
	.csl-title { padding-top: 50px; }
	.csl-title h1 { font-size: 25px; line-height: 30px; }
	.csl-main > .cms-form-section { padding-top: 20px; }
	.csl-social { padding: 40px 0 50px; }
	.csl-social ul { justify-content: center; }
	.csl-modal__dialog--app { padding: 50px 20px 30px; }
	.csl-modal__dialog h4 { font-size: 20px; }
	.csl-stores img { width: 140px; }
}