/*
Theme Name: Shipments SaaS
Theme URI: https://example.com/shipments-saas
Author: Your Company
Description: Website for the Shipments cloud app: warehouse, sales reps, medicines and supplier portal. Home page and four solution pages (3PL, medicines, sales teams, purchasing and supplier portal) in navy and signal orange, in English and Russian.
Requires at least: 6.6
Tested up to: 7.2
Requires PHP: 7.4
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shipments-saas
Domain Path: /languages
Tags: block-patterns, full-site-editing, business, wide-blocks, editor-style, custom-colors, custom-menu, translation-ready
*/

/* Most styling lives in theme.json; small extras below. */

/* Russian (and any Cyrillic language): Space Grotesk has no Cyrillic letters, so headings use Inter. */
html[lang^="ru"], html[lang^="uk"], html[lang^="be"], html[lang^="bg"], html[lang^="sr"], html[lang^="kk"] {
	--wp--preset--font-family--display: var(--wp--preset--font-family--body);
}

/* Card style for groups (Styles → Card). */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wp-block-group.is-style-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 12px 30px -12px rgba(14, 26, 43, .25);
}
.wp-block-group.is-style-card > * + * { margin-block-start: .6rem; }
.wp-block-group.is-style-card h3 { margin-top: 0; }

/* Small uppercase label above headings (Styles → Eyebrow label). */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark);
	font-weight: 600;
}
.has-primary-background-color .is-style-eyebrow,
.has-primary-dark-background-color .is-style-eyebrow { color: var(--wp--preset--color--accent-light); }

/* Lists with a cross (what suppliers never see). */
ul.is-style-cross { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem 2rem; }
ul.is-style-cross li { padding-left: 1.6rem; position: relative; }
ul.is-style-cross li::before { content: "✕"; position: absolute; left: 0; color: var(--wp--preset--color--accent-light); font-weight: 700; }

/* Step numbers. */
.ss-step-number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; border-radius: 50%;
	background: var(--wp--preset--color--accent-dark); color: #fff; font-weight: 700;
	font-family: var(--wp--preset--font-family--display);
}

/* Outline buttons: transparent, text and border in the section's text colour. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background-color: rgba(127, 127, 127, .12); }

/* Header stays on top; no gaps between header, main and footer. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.wp-site-blocks > main, .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

/* Language switcher in the header (shows when Polylang or WPML is active). */
.ss-langs { display: flex; gap: .25rem; font-size: var(--wp--preset--font-size--small); }
.ss-langs a { padding: .35rem .55rem; border-radius: 6px; text-decoration: none; color: var(--wp--preset--color--muted); }
.ss-langs a[aria-current] { color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface); font-weight: 600; }

/* ---- Pictures of the app (Custom HTML blocks) ------------------------------------------------------------------ */
.ss-mock { background: #fff; color: #0E1A2B; border-radius: 16px; overflow: hidden; font-size: 14px; line-height: 1.45; box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); text-align: left; }
.ss-mock * { box-sizing: border-box; }
.ss-mock .bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: #F3F5F8; border-bottom: 1px solid #DCE2EA; color: #5A6677; font-size: 12px; }
.ss-mock .bar i { width: 10px; height: 10px; border-radius: 50%; background: #DCE2EA; display: inline-block; }
.ss-mock .head { background: #12305A; color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; gap: 10px; }
.ss-mock .head small { color: #C4CEDC; }
.ss-mock .body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ss-mock .row { border: 1px solid #DCE2EA; border-radius: 10px; padding: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ss-mock .muted { color: #5A6677; }
.ss-mock .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ss-mock .tile { border: 1px solid #DCE2EA; border-radius: 10px; padding: 12px; }
.ss-mock .tile b { display: block; font-family: var(--wp--preset--font-family--display); font-size: 26px; line-height: 1.1; }
.ss-mock .tile span { font-size: 12px; color: #5A6677; }
.ss-mock .app { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 340px; }
.ss-mock .body, .ss-mock .row > * { min-width: 0; }
.ss-mock .tile span { hyphens: auto; overflow-wrap: anywhere; }
.ss-mock .side { background: #0B1F3B; color: #C4CEDC; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ss-mock .side span { padding: 7px 10px; border-radius: 8px; }
.ss-mock .side .on { background: rgba(255,255,255,.1); color: #FF9A5C; font-weight: 600; }
.ss-mock table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ss-mock th { text-align: left; background: #F6F7F9; font-weight: 600; padding: 9px 10px; }
.ss-mock td { padding: 9px 10px; border-top: 1px solid #EEF1F5; }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: #E8EEF8; color: #12305A; }
.ss-chip.ok { background: #E6F4EE; color: #0F6B47; }
.ss-chip.warn { background: #FDEBDD; color: #8A3606; }
.ss-chip.pri { background: #C24D0A; color: #fff; }
.ss-btn { display: block; text-align: center; background: #C24D0A; color: #fff; border-radius: 10px; padding: 12px; font-weight: 600; }
.ss-phone { width: 290px; max-width: 100%; margin: 0 auto; border: 10px solid #0E1A2B; border-radius: 36px; overflow: hidden; background: #F6F7F9; color: #0E1A2B; font-size: 14px; text-align: left; }
.ss-phone .head { background: #12305A; color: #fff; padding: 16px; }
.ss-phone .head small { color: #C4CEDC; display: block; font-size: 12px; }
.ss-phone .head b { font-family: var(--wp--preset--font-family--display); font-size: 20px; }
.ss-phone .body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ss-phone .item { background: #fff; border: 1px solid #DCE2EA; border-radius: 10px; padding: 10px; }
.ss-phone .item .line { display: flex; justify-content: space-between; color: #5A6677; font-size: 13px; }
.ss-phone .good { background: #E6F4EE; color: #0F6B47; border-radius: 10px; padding: 10px; font-weight: 600; }
.ss-toggle { width: 44px; height: 26px; border-radius: 999px; background: #C9D3E1; position: relative; flex: none; }
.ss-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.ss-toggle.on { background: #C24D0A; }
.ss-toggle.on::after { left: auto; right: 3px; }
.ss-modules .row { padding: 16px 0; border: 0; border-bottom: 1px solid #EEF1F5; border-radius: 0; }
.ss-modules .row:last-child { border-bottom: 0; }
.ss-modules { padding: 4px 22px; }

@media (max-width: 781px) {
	.ss-mock .app { grid-template-columns: 1fr; }
	.ss-mock .side { display: none; }
	.ss-mock .tiles { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-card { transition: none; }
	.wp-block-group.is-style-card:hover { transform: none; }
}
.ss-signin a { text-decoration: none; font-weight: 500; color: var(--wp--preset--color--contrast); }
.ss-signin a:hover { color: var(--wp--preset--color--accent-dark); }

/* Header: Messenger link with the app's speech-bubble icon */
.ss-messenger a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-weight: 500; color: var(--wp--preset--color--contrast); padding: .45rem .75rem; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; }
.ss-messenger a:hover { border-color: var(--wp--preset--color--accent-dark); color: var(--wp--preset--color--accent-dark); }
.ss-messenger svg { color: var(--wp--preset--color--accent-dark); }

/* Lists with orange ticks (what you can do in messages) */
ul.ss-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
ul.ss-ticks li { position: relative; padding-left: 1.8rem; }
ul.ss-ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--wp--preset--color--accent-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* Chat pictures */
.ss-chat .head { align-items: center; justify-content: flex-start; }
.ss-chat .head small { margin-left: auto; }
.ss-bubble { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.1); align-items: center; justify-content: center; flex: none; }
.ss-msg { max-width: 82%; background: #fff; border: 1px solid #DCE2EA; border-radius: 14px 14px 14px 4px; padding: 9px 12px; }
.ss-msg small { display: block; font-size: 11px; color: #5A6677; margin-bottom: 2px; font-weight: 600; }
.ss-msg.me { margin-left: auto; background: #12305A; color: #fff; border-color: #12305A; border-radius: 14px 14px 4px 14px; }
.ss-msg.me small { color: #C4CEDC; }
.ss-msg .tick { color: #FF9A5C; font-size: 12px; }
.ss-chat .body { background: #F6F7F9; }
.ss-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Messenger on a computer */
.ss-desk-in { display: grid; grid-template-columns: 38% minmax(0, 1fr); min-height: 330px; }
.ss-list { border-right: 1px solid #DCE2EA; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-list .ss-chips { margin-bottom: 6px; }
.ss-thread { padding: 9px 10px; border-radius: 10px; position: relative; display: flex; flex-direction: column; min-width: 0; }
.ss-thread b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.ss-thread span { font-size: 12px; color: #5A6677; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-thread i { position: absolute; right: 10px; top: 10px; font-style: normal; background: #C24D0A; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.ss-thread.on { background: #FFF4EC; }
.ss-conv { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #F6F7F9; min-width: 0; }
.ss-conv-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ss-write { margin-top: auto; border: 1px solid #C9D3E1; background: #fff; border-radius: 10px; padding: 8px 8px 8px 12px; color: #8F9BAD; display: flex; justify-content: space-between; align-items: center; }

/* Questions (Details blocks) */
.ss-faq .wp-block-details { border-top: 1px solid var(--wp--preset--color--border); padding: 1.1rem 0; margin: 0; }
.ss-faq .wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }
.ss-faq summary { font-weight: 600; font-size: var(--wp--preset--font-size--large); cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.ss-faq summary::-webkit-details-marker { display: none; }
.ss-faq summary::after { content: "+"; position: absolute; right: 0; top: -.1em; font-size: 1.5rem; color: var(--wp--preset--color--accent-dark); }
.ss-faq details[open] summary::after { content: "–"; }
.ss-faq details p { margin-top: .6rem; }

@media (max-width: 781px) {
	.ss-desk-in { grid-template-columns: 1fr; }
	.ss-list { border-right: 0; border-bottom: 1px solid #DCE2EA; }
	.ss-messenger span { display: none; }
}