/* 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;
}

/* Live chat widget */

.comayt-chat-bubble {
	position: fixed;
	bottom: 20px;
	inset-inline-end: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1e88e5;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
	z-index: 99990;
}

.comayt-chat-panel {
	position: fixed;
	bottom: 88px;
	inset-inline-end: 20px;
	width: 340px;
	max-width: calc(100vw - 24px);
	height: 460px;
	max-height: calc(100vh - 120px);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 99991;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.comayt-chat-panel.open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.comayt-chat-head {
	background: #1f2430;
	color: #fff;
	padding: 14px 14px 12px 16px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-shrink: 0;
	cursor: grab;
	user-select: none;
}

.comayt-chat-panel.dragging {
	transition: none;
	user-select: none;
}

.comayt-chat-panel.dragging .comayt-chat-head {
	cursor: grabbing;
}

@media (max-width: 480px) {
	.comayt-chat-head {
		cursor: default;
	}
}

.comayt-chat-head-title {
	font-weight: 700;
	font-size: 0.98rem;
}

.comayt-chat-head-note {
	font-size: 0.76rem;
	opacity: 0.75;
	margin-top: 2px;
}

.comayt-chat-head-btns {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.comayt-chat-min,
.comayt-chat-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
	padding: 0;
}

.comayt-chat-min {
	font-size: 1.6rem;
}

.comayt-chat-bubble.has-unread::after {
	content: "";
	position: absolute;
	top: -2px;
	inset-inline-end: -2px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #e74c3c;
	border: 2px solid #fff;
}

@keyframes comayt-chat-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-8px); }
	50% { transform: translateY(0); }
	65% { transform: translateY(-4px); }
	80% { transform: translateY(0); }
}

.comayt-chat-bubble.has-unread {
	animation: comayt-chat-bounce 1.8s ease-in-out infinite;
}

.comayt-chat-gate {
	display: none;
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px;
}

.comayt-chat-gate-title {
	font-size: 0.9rem;
	color: #1f2430;
	font-weight: 600;
	margin-bottom: 12px;
	line-height: 1.4;
}

.comayt-chat-gate input[type="text"],
.comayt-chat-gate input[type="tel"],
.comayt-chat-gate input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1.5px solid #ddd;
	border-radius: 8px;
	font-size: 0.88rem;
	margin-bottom: 10px;
}

.comayt-chat-gate-phonerow {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}

.comayt-chat-gate-phonerow input {
	margin-bottom: 0;
	flex: 1;
	min-width: 0;
}

.comayt-chat-gate-phonerow .comayt-country-select {
	border: 1.5px solid #ddd;
	border-radius: 8px;
	padding: 9px 6px;
	font-size: 0.82rem;
	max-width: 108px;
}

.comayt-chat-gate-hp {
	position: absolute;
	opacity: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.comayt-chat-gate-error {
	color: #c0392b;
	font-size: 0.8rem;
	min-height: 16px;
	margin-bottom: 8px;
}

.comayt-chat-gate-submit {
	width: 100%;
	padding: 10px;
	background: #1f2430;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
}

.comayt-chat-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 12px 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.comayt-chat-msg {
	max-width: 82%;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 0.88rem;
	line-height: 1.4;
	white-space: pre-wrap;
	word-break: break-word;
}

.comayt-chat-msg--owner {
	align-self: flex-start;
	background: #f0f1f4;
	color: #1f2430;
	border-bottom-left-radius: 4px;
}

.comayt-chat-msg--visitor {
	align-self: flex-end;
	background: #1f2430;
	color: #fff;
	border-bottom-right-radius: 4px;
}

.comayt-chat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 12px;
	flex-shrink: 0;
}

.comayt-chat-chips button {
	border: 1.5px solid #d8d8dc;
	background: #fff;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 0.8rem;
	cursor: pointer;
	color: #1f2430;
}

.comayt-chat-chips button:hover {
	background: #f5f5f7;
}

.comayt-chat-inputrow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #eee;
	flex-shrink: 0;
}

.comayt-chat-input {
	flex: 1;
	border: 1.5px solid #ddd;
	border-radius: 20px;
	padding: 9px 14px;
	font-size: 0.88rem;
	outline: none;
	min-width: 0;
}

.comayt-chat-send {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1f2430;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.comayt-chat-send svg {
	width: 18px;
	height: 18px;
}

.comayt-chat-mobile-wrap {
	display: contents;
}

.comayt-chat-backdrop {
	display: none;
}

@media (max-width: 480px) {
	/* A bottom-sheet card, not a floating box positioning itself against the
	   viewport -- the OUTER shell is what's fixed and dvh-sized (a plain,
	   unambiguous full-screen flex column), and the panel is just a normal
	   flex child sized as a percentage of it. Percentage sizing resolved
	   against an already keyboard-aware parent shrinks correctly with the
	   on-screen keyboard with zero JS and zero per-panel viewport math --
	   which is exactly what kept going wrong when the panel tried to
	   position itself directly. */
	.comayt-chat-mobile-wrap {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		position: fixed;
		inset: 0;
		height: 100vh;
		height: 100dvh;
		z-index: 99991;
		pointer-events: none;
	}

	.comayt-chat-mobile-wrap.open {
		pointer-events: auto;
	}

	/* No dimmed backdrop -- checked mh-china's own mobile widget directly:
	   it's a small card that hugs its own content, the rest of the page
	   stays fully visible and interactive above it, nothing gets dimmed. */
	.comayt-chat-backdrop {
		display: none;
	}

	.comayt-chat-panel {
		position: static;
		width: 100%;
		max-width: 100%;
		/* A stable size, not content-hugging -- auto-height made the card
		   visibly grow with every new message, which felt worse than a
		   plain fixed size. Same as mh-china's own compact widget: a fixed
		   card with the message list scrolling INSIDE it (.comayt-chat-body
		   already has overflow-y:auto), not the card itself resizing. */
		height: 42%;
		max-height: 42%;
		border-radius: 16px 16px 0 0;
		flex-shrink: 0;
	}

	.comayt-chat-bubble {
		bottom: 16px;
	}
}