/* Comayt Group — shared website (portal) styling */

/* Images are draggable by default in browsers, which shows OS-native drag/cut
   cursors (and, on some platforms, a scissors icon) when hovering and moving
   the mouse over any <img>. Product/photo images on this site are for viewing,
   not dragging, so disable native drag everywhere. */
img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}

.navbar-brand,
.navbar-home {
	display: none !important;
}

/* A guest visitor's nav has no menu items, so hide Bootstrap's collapse/
   hamburger plumbing for them -- the icon row never hides behind a toggler
   on small screens. A LOGGED-IN visitor's collapse holds the real account
   avatar/dropdown (My Account, Log out) -- that one must stay reachable, or
   there is no way at all to log out on a small screen. */
body[frappe-session-status="logged-out"] .navbar-toggler,
body[frappe-session-status="logged-out"] .navbar-collapse {
	display: none !important;
}

.navbar {
	min-height: 56px;
}

.navbar .container {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding-top: 0;
	padding-bottom: 0;
	/* Force a fixed left-to-right slot order so the globe stays on the right in BOTH languages */
	direction: ltr !important;
}

/* Shared "chip" treatment for the language icon */
.comayt-lang-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	transition: background 0.2s ease, opacity 0.2s ease;
	/* justify-content: space-between on the navbar only pushes this to the
	   right when there's another visible flex item to space against — at
	   widths where Frappe hides its own search box, this is the only item
	   left in the row and space-between has nothing to distribute, so it
	   silently falls back to the start (left in LTR). An auto start-margin
	   pins it to the end of the row unconditionally, regardless of siblings. */
	margin-inline-start: auto;
}

.comayt-lang-switch:hover {
	background: rgba(255, 255, 255, 0.9);
}

/* Same chip treatment as the language icon, sitting just before it -- the
   lang switch's own auto-margin pins this whole little group to the end of
   the row, so this one doesn't need its own. */
.comayt-account-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	transition: background 0.2s ease;
	cursor: pointer;
	margin-inline-end: 6px;
}

.comayt-account-icon:hover {
	background: rgba(255, 255, 255, 0.9);
}

.comayt-account-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

@media (max-width: 480px) {
	.comayt-account-icon {
		width: 34px;
		height: 34px;
	}
	.comayt-account-icon svg {
		width: 18px;
		height: 18px;
	}
}

.comayt-lang-switch {
	position: relative;
	cursor: pointer;
	user-select: none;
}

.comayt-lang-icon svg {
	width: 30px;
	height: 30px;
	display: block;
}

.comayt-lang-switch .comayt-lang-menu {
	display: none;
	position: absolute;
	top: 46px;
	inset-inline-end: 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 28px -6px rgba(17, 63, 214, 0.22), 0 4px 10px rgba(17, 63, 214, 0.1);
	overflow: hidden;
	min-width: 170px;
	z-index: 999;
}

.comayt-lang-switch.open .comayt-lang-menu {
	display: block;
}

.comayt-lang-menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	border: none;
	background: #fff;
	font-size: 14px;
	color: #30426A;
	cursor: pointer;
	text-align: start;
}

.comayt-lang-menu button:hover {
	background: #EEF2FD;
}

.comayt-lang-menu .flag {
	font-size: 18px;
}

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

/* Glossy shine effect for the "Comayt" brand word */
.brand-name {
	background: linear-gradient(100deg, #8A1E24 15%, #8A1E24 35%, #d97b83 50%, #8A1E24 65%, #8A1E24 85%);
	background-size: 250% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #8A1E24;
	animation: comayt-shine 4.5s ease-in-out infinite;
}

@keyframes comayt-shine {
	0% { background-position: 200% center; }
	100% { background-position: -50% center; }
}

/* Small screens: trim the side padding a touch, keep the same proportions */
@media (max-width: 480px) {
	.navbar .container {
		padding-left: 14px;
		padding-right: 14px;
	}
	.comayt-lang-switch {
		width: 34px;
		height: 34px;
	}
	.comayt-lang-icon svg {
		width: 26px;
		height: 26px;
	}
	/* On narrow screens the icon itself sits near the left edge, so a menu
	   anchored to open leftward (the desktop default) pushes off-screen
	   entirely. Open it rightward instead, which stays on-screen here. */
	.comayt-lang-switch .comayt-lang-menu {
		inset-inline-end: auto;
		inset-inline-start: 0;
	}
}

/* Footer height should hug the single line of text, not the default fixed box.
   The icons/text themselves are identical everywhere — but on content-heavy
   pages (product grids) the footer sits flush against the last row with no
   breathing room, which reads as "squeezed" next to the home page where
   it naturally has open space above it. margin-top gives every page that
   same breathing room regardless of what precedes the footer. */
.web-footer {
	min-height: 0 !important;
	height: auto !important;
	margin-top: 32px !important;
	padding-top: 18px !important;
	padding-bottom: 18px !important;
	display: flex !important;
	align-items: center !important;
}

/* Hide the default (multi-row) footer markup — site.js rebuilds a single compact row instead */
.web-footer .footer-logo-extension,
.web-footer .footer-grouped-links,
.web-footer .footer-links,
.web-footer .footer-info {
	display: none !important;
}

.comayt-footer-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 0.8rem;
	color: #7a8aa8;
	line-height: 1.4;
}

.comayt-footer-links a {
	color: #30426A;
	margin-inline-start: 18px;
	text-decoration: none;
	font-size: 0.8rem;
}

.comayt-footer-links a:first-child {
	margin-inline-start: 0;
}

.comayt-footer-social {
	display: flex;
	align-items: center;
	gap: 16px;
}

.comayt-social-icon svg {
	width: 22px;
	height: 22px;
}

.comayt-social-icon {
	display: flex;
	color: #7a8aa8;
	transition: color 0.15s ease;
}

a.comayt-social-icon:hover {
	color: #113FD6;
}

.comayt-social-icon.disabled {
	opacity: 0.4;
	cursor: default;
}

button.comayt-social-icon {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.comayt-wechat-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 15, 30, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}

.comayt-wechat-box {
	position: relative;
	background: #fff;
	border-radius: 14px;
	padding: 32px 28px 26px;
	max-width: 320px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.comayt-wechat-box img {
	width: 100%;
	max-width: 220px;
	height: auto;
	border-radius: 8px;
	margin: 0 auto 16px;
	display: block;
}

.comayt-wechat-box p {
	margin: 0;
	color: #4a5568;
	font-size: 14px;
	line-height: 1.5;
}

.comayt-wechat-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: #7a8aa8;
	cursor: pointer;
	padding: 6px;
}

.comayt-wechat-close:hover {
	color: #113FD6;
}

.comayt-phone-row {
	display: flex;
	gap: 6px;
}

.comayt-country-select {
	/* A fixed flex-basis (rather than "auto") keeps this predictable across
	   browsers — Safari on macOS in particular sizes a native <select> to
	   its own box-model quirks when left to "auto", leaving a large gap
	   before the number field next to it. -webkit-appearance strips that
	   native chrome so our padding/width are actually what render. */
	flex: 0 0 108px;
	padding: 9px 22px 9px 6px;
	border: 1px solid #d7deee;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.85rem;
	color: inherit;
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%2348557a" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 8px center;
	background-size: 10px 6px;
	-webkit-appearance: none;
	appearance: none;
	direction: ltr;
	text-align: left;
}

.comayt-phone-row input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	direction: ltr;
	text-align: left;
}

.comayt-ov-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 14, 30, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
}

.comayt-ov-box {
	position: relative;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	max-width: 720px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.comayt-ov-close {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: #24304f;
	border: none;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.comayt-ov-title {
	padding: 12px 46px 0 16px;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	background: #000;
}

.comayt-ov-video {
	display: block;
	width: 100%;
	max-height: 80vh;
	background: #000;
}