:root
{
	--campaign-report-width: 1170px;
	--default-page-width: 1200px;
	--standard-border-color: rgb(230, 230, 230);
	--delete-color: rgb(255, 78, 100);
	--add-color: rgb(33, 186, 69);
	--refresh-button-color: var(--amber-primary, #ee5f2b);
	--sms-color: rgb(251, 123, 185);
	/* Amber Design Tokens */
	--amber-bg: #f1ebe3;
	--amber-primary: #ee5f2b;
	--amber-amber: #f4a63a;
	--amber-title: rgb(91, 96, 114);
	--amber-muted: rgb(155,158,181);
	--amber-text-sec: rgb(91,96,114);
	--amber-text-light: rgb(130,134,155);
	--amber-border: rgb(226,232,243);
	--amber-table-border: rgb(238,242,248);
	--amber-table-hd-bg: rgb(245,248,253);
	--amber-th-color: rgb(139,147,167);
	--amber-card-radius: 18px;
	--amber-card-shadow: rgba(45,58,120,.08) 0px 6px 20px;
	--amber-card-shadow-warm: rgba(238,95,43,.06) 0px 4px 18px;
	--focused-inputs-border-color: #ee5f2b;
}

/* =============================================
   AMBER THEME — LAYOUT & GLOBAL STYLES
   ============================================= */

body
{
	background: var(--amber-bg);
	margin: 0px;
	padding: 0px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

*
{
	font-size-adjust: 0.5;
}

a
{
	color: var(--amber-primary, #ee5f2b);
}

input[type="checkbox"],
input[type="radio"]
{
	accent-color: var(--amber-primary, #ee5f2b);
}

/* =============================================
   APP SHELL
   ============================================= */

.amber-app
{
	display: flex;
	min-height: 100vh;
	align-items: flex-start;
}

/* =============================================
   SIDEBAR RAIL
   ============================================= */

.amber-rail
{
	width: 262px;
	flex-shrink: 0;
	background: linear-gradient(168deg, #242741 0%, #15172b 100%);
	display: flex;
	flex-direction: column;
	padding: 24px 15px;
	position: sticky;
	top: 16px;
	height: calc(100vh - 32px);
	border-radius: 26px;
	margin: 16px;
	overflow-y: auto;
	scrollbar-width: none;
	box-sizing: border-box;
}

.amber-rail::-webkit-scrollbar
{
	display: none;
}

/* Brand */
.amber-brand
{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 4px 10px 20px;
	flex-shrink: 0;
}

.amber-logo
{
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}

.amber-logo-ring
{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ee5f2b;
	position: relative;
}

.amber-logo-ring::after
{
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: #fff;
}

.amber-logo-dot
{
	position: absolute;
	top: 50%;
	inset-inline-start: 52%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #22293f;
	transform: translate(-50%, -50%);
}

.amber-brand-name
{
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.4px;
	color: #fff;
}

.amber-brand-accent
{
	color: #f5a05a;
}

/* =============================================
   SIDEBAR NAVIGATION OVERRIDES
   ============================================= */

.amber-rail .side-bar-navigation
{
	flex: 1;
	overflow-y: auto;
	margin: 0;
	scrollbar-width: none;
}

.amber-rail .side-bar-navigation::-webkit-scrollbar
{
	display: none;
}

.amber-rail .sidemenu-item
{
	margin-bottom: 2px;
}

/* Top-level nav item */
.amber-rail .menu-item
{
	display: flex;
	align-items: center;
	padding: 12px 15px;
	border-radius: 13px;
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	color: #a9b6d6;
	background: transparent;
	gap: 13px;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.amber-rail .menu-item-icon
{
	display: inline-flex;
	align-items: center;
	font-size: 19px;
	flex-shrink: 0;
}

.amber-rail .menu-item-text
{
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Caret arrows */
.amber-rail .sidemenu-item-expand,
.amber-rail .sidemenu-item-collapse
{
	float: none;
	display: inline-flex;
	align-items: center;
	margin-inline-start: auto;
	font-size: 14px;
	opacity: 0.65;
}

.amber-rail .sidemenu-item-collapse
{
	display: none;
}

.amber-rail .submenuitem_expanded > .menu-item .sidemenu-item-collapse
{
	display: inline-flex;
}

.amber-rail .submenuitem_expanded > .menu-item .sidemenu-item-expand
{
	display: none;
}

/* Active leaf item */
.amber-rail .sidemenu-item-current:not(.sidemenu-item-with-children) > .menu-item
{
	background: #fff;
	color: #22293f;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.amber-rail .sidemenu-item-current:not(.sidemenu-item-with-children) > .menu-item .fa-icon-span
{
	color: #22293f;
}

/* Active leaf item's anchor */
.amber-rail .sidemenu-item-current:not(.sidemenu-item-with-children) > .menu-item a
{
	color: #22293f;
}

/* Expanded parent */
.amber-rail .submenuitem_expanded > .menu-item
{
	background: rgba(255,255,255,.10);
	color: #fff;
}

.amber-rail .submenuitem_expanded > .menu-item .fa-icon-span
{
	color: #fff;
}

/* Sub-items container */
.amber-rail .sidemenu-subitems-container
{
	display: none;
	flex-direction: column;
	gap: 2px;
	margin: 2px 6px 6px;
	padding-inline-start: 14px;
	border-inline-start: 1.5px solid rgba(255,255,255,.14);
	padding-inline-end: 0;
}

.amber-rail .submenuitem_expanded .sidemenu-subitems-container
{
	display: flex;
}

/* Sub-item row */
.amber-rail .sidemenu-subitems-container .sidemenu-item > .menu-item
{
	padding: 9px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #9fb0d0;
	background: transparent;
	box-shadow: none;
	gap: 0;
}

.amber-rail .sidemenu-subitems-container .sidemenu-item > .menu-item .fa-icon-span
{
	display: none;
}

.amber-rail .sidemenu-subitems-container .sidemenu-item > .menu-item a
{
	color: inherit;
	text-decoration: none;
	flex: 1;
}

/* Active sub-item */
.amber-rail .sidemenu-subitems-container .sidemenu-item-current > .menu-item
{
	background: rgba(255,255,255,.16);
	color: #fff;
	font-weight: 700;
}

.amber-rail .sidemenu-subitems-container .sidemenu-item-current > .menu-item a
{
	color: #fff;
}

/* Hide bullet dots */
.amber-rail .menu-item-dot
{
	display: none;
}

/* Leaf top-level items (Home, List Cleaning, Landing Page) */
.amber-rail .sidemenu-item:not(.sidemenu-item-with-children) > .menu-item a
{
	color: inherit;
	text-decoration: none;
	flex: 1;
}

/* All fa-icon-span colors in rail */
.amber-rail .fa-icon-span
{
	color: #a9b6d6;
}

/* "NEW" badge on List Cleaning */
.amber-rail .menu-item-badge-new > .menu-item a::after
{
	content: "NEW";
	display: inline-block;
	font-size: 9px;
	font-weight: 800;
	background: var(--amber-primary, #ee5f2b);
	color: #fff;
	border-radius: 6px;
	padding: 2px 6px;
	margin-inline-start: 8px;
	vertical-align: middle;
	line-height: 1.4;
}

/* =============================================
   ACCOUNT SECTION (bottom of sidebar)
   ============================================= */

.amber-account-section
{
	margin-block-start: auto;
	flex-shrink: 0;
	padding-block-start: 8px;
}

.amber-account-menu
{
	display: none;
	flex-direction: column;
	gap: 2px;
	margin: 0 6px 6px;
	padding-inline-start: 14px;
	border-inline-start: 1.5px solid rgba(255,255,255,.14);
}

.amber-account-menu.open
{
	display: flex;
}

.amber-account-menu a
{
	display: block;
	padding: 9px 14px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #9fb0d0;
	text-decoration: none;
	transition: background 0.1s, color 0.1s;
}

.amber-account-menu a:hover
{
	background: rgba(255,255,255,.10);
	color: #fff;
}

.amber-account-chip
{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 13px;
	border-radius: 14px;
	cursor: pointer;
	background: rgba(255,255,255,.10);
	border: none;
	text-align: start;
	font-family: inherit;
	transition: background 0.15s;
	text-decoration: none;
}

.amber-account-chip:hover
{
	background: rgba(255,255,255,.15);
}

.amber-account-avatar
{
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: #fff;
	color: #22293f;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 16px;
	flex-shrink: 0;
}

.amber-account-info
{
	flex: 1;
	min-width: 0;
	text-align: start;
}

.amber-account-name
{
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.amber-account-no
{
	color: #90a0c8;
	font-size: 11.5px;
}

.amber-acct-chevron
{
	font-size: 13px;
	opacity: 0.6;
	flex-shrink: 0;
	transition: transform 0.2s;
}

.amber-account-menu.open + .amber-account-chip .amber-acct-chevron
{
	transform: rotate(180deg);
}

/* =============================================
   MONSTER MASCOT CARD
   ============================================= */

.amber-monster-card
{
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255,255,255,.07);
	border-radius: 14px;
	padding: 12px 14px;
	margin-bottom: 8px;
}

.amber-monster-title
{
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}

.amber-monster-subtitle
{
	color: #90a0c8;
	font-size: 11.5px;
	margin-top: 2px;
}

/* Mascot icon */
.amber-mascot
{
	width: 46px;
	height: 52px;
	flex-shrink: 0;
	animation: mm-bob 3s ease-in-out infinite;
}


@keyframes mm-bob
{
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

@keyframes mm-blink
{
	0%, 90%, 100% { transform: scaleY(1); }
	94% { transform: scaleY(0.06); }
	97% { transform: scaleY(1); }
}

/* =============================================
   UPGRADE BUTTON
   ============================================= */

.amber-upgrade-btn
{
	display: block;
	margin-top: 8px;
	padding: 12px;
	background: #fff;
	border-radius: 12px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #22293f;
	text-decoration: none;
	transition: background 0.15s, box-shadow 0.15s;
}

.amber-upgrade-btn:hover
{
	background: #f0f2f8;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.amber-classic-link
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
	transition: color 0.15s;
}

.amber-classic-link:hover
{
	color: rgba(255,255,255,0.9);
}

/* =============================================
   MAIN CONTENT STAGE
   ============================================= */

.amber-stage
{
	flex: 1;
	min-width: 0;
	min-height: 100vh;
	padding: 30px 40px 46px;
}

/* =============================================
   PAGE HEADER
   ============================================= */

.amber-page-header
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24px;
	gap: 20px;
}

.amber-page-header-left
{
	flex: 1;
	min-width: 0;
}

.amber-page-header-right
{
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.amber-page-title
{
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.6px;
	color: rgb(34,41,63);
}

.amber-page-subtitle
{
	margin: 6px 0 0;
	color: rgb(155,158,181);
	font-size: 14.5px;
}

.amber-page-subtitle:empty
{
	display: none;
}

/* =============================================
   AMBER PAGE BODY
   ============================================= */

.amber-page-body > div,
.amber-page-body > div > div
{
	width: auto;
	max-width: none;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/* =============================================
   AMBER CARDS
   ============================================= */

.amber-card
{
	background: linear-gradient(rgb(255,255,255), rgb(242,246,254));
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius);
	padding: 22px;
	box-shadow: var(--amber-card-shadow);
}

.amber-white-card
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius);
	padding: 24px;
	box-shadow: var(--amber-card-shadow-warm);
}

/* =============================================
   STATUS COUNTER CARDS (Home page)
   ============================================= */

.amber-counters-grid
{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

.amber-counter-card
{
	min-width: 0;
	position: relative;
	overflow: hidden;
	background: linear-gradient(rgb(255,255,255), rgb(242,246,254));
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius);
	padding: 22px;
	box-shadow: var(--amber-card-shadow);
}

.amber-counter-card-sms
{
	background: linear-gradient(140deg, rgb(245,185,63), rgb(238,95,43));
	border: none;
	box-shadow: rgba(238,95,43,.34) 0px 12px 26px;
	color: #fff;
}

.amber-counter-card-top
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.amber-counter-card-title
{
	font-weight: 700;
	font-size: 14.5px;
	color: var(--amber-text-sec);
}

.amber-counter-card-sms .amber-counter-card-title
{
	color: #fff;
}

.amber-counter-card-sub
{
	font-size: 12px;
	color: rgb(134,140,160);
}

.amber-counter-card-sms .amber-counter-card-sub
{
	color: rgba(255,255,255,.82);
}

.amber-counter-icon
{
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 20px;
}

.amber-counter-card-bottom
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.amber-counter-value
{
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.6px;
	color: var(--amber-title);
	white-space: nowrap;
	direction: ltr;
}

.amber-counter-card-sms .amber-counter-value
{
	color: #fff;
}

.amber-counter-total
{
	color: rgb(188,198,219);
	font-weight: 600;
}

.amber-counter-card-sms .amber-counter-total
{
	color: rgba(255,255,255,.62);
}

.amber-ring
{
	transform: rotate(-90deg);
	flex-shrink: 0;
}

/* =============================================
   GET STARTED PANEL
   ============================================= */

.amber-get-started-grid
{
	display: grid;
	grid-template-columns: 326px 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.amber-get-started-card
{
	min-width: 0;
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--amber-card-shadow-warm);
}

.amber-get-started-card h3
{
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--amber-title);
}

.amber-get-started-card p
{
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--amber-th-color);
}

.amber-action-buttons
{
	display: flex;
	flex-direction: column;
	gap: 11px;
	flex: 1;
	justify-content: center;
}

/* Email Campaign button (gradient) */
.amber-action-btn-email
{
	display: flex;
	align-items: center;
	gap: 14px;
	border: none;
	cursor: pointer;
	padding: 15px 16px;
	border-radius: 14px;
	font-family: inherit;
	background: linear-gradient(120deg, rgb(244,166,58), rgb(238,95,43));
	text-align: start;
	box-shadow: rgba(238,95,43,.34) 0px 12px 24px;
	transition: transform 0.15s;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}

.amber-action-btn-email:hover
{
	transform: translateY(-1px);
}

.amber-action-icon-wrap
{
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.amber-action-icon-email
{
	background: rgba(255,255,255,.22);
	color: #fff;
}

.amber-action-btn-label
{
	flex: 1;
	min-width: 0;
}

.amber-action-btn-title
{
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
}

.amber-action-btn-desc
{
	display: block;
	font-size: 12.5px;
	color: rgba(255,255,255,.86);
}

/* SMS + Import buttons (white) */
.amber-action-btn-secondary
{
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid rgb(238,242,248);
	cursor: pointer;
	padding: 13px 15px;
	border-radius: 14px;
	font-family: inherit;
	background: #fff;
	text-align: start;
	transition: transform 0.15s, box-shadow 0.15s;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}

.amber-action-btn-secondary:hover
{
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(45,58,120,.10);
}

.amber-action-icon-sms
{
	background: rgb(231,238,252);
	color: var(--amber-primary);
}

.amber-action-icon-import
{
	background: rgb(238,242,248);
	color: var(--amber-title);
}

.amber-action-btn-secondary-title
{
	display: block;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--amber-title);
}

.amber-action-btn-secondary-desc
{
	display: block;
	font-size: 12.5px;
	color: var(--amber-th-color);
}

/* =============================================
   AREA CHART CARDS
   ============================================= */

.amber-charts-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 20px;
}

.amber-chart-card
{
	min-width: 0;
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius);
	padding: 24px;
	box-shadow: var(--amber-card-shadow-warm);
}

.amber-chart-header
{
	margin-bottom: 18px;
}

.amber-chart-title
{
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--amber-title);
}

.amber-chart-subtitle
{
	margin: 5px 0 0;
	font-size: 13px;
	color: rgb(134,140,160);
}

.amber-chart-area
{
	position: relative;
	height: 150px;
}

.amber-chart-area svg
{
	display: block;
	overflow: visible;
}

.amber-chart-dot
{
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	box-shadow: rgba(45,58,120,.18) 0px 2px 5px;
	transform: translate(-50%, -50%);
}

.amber-chart-labels
{
	display: flex;
	justify-content: space-between;
	margin-block-start: 10px;
}

.amber-chart-label
{
	flex: 1;
	text-align: center;
	font-size: 11px;
	color: rgb(134,140,160);
	line-height: 1.3;
}

/* =============================================
   AREA CHART TAG HELPER OUTPUT
   ============================================= */

.amber-area-chart-wrap
{
	width: 100%;
}

.amber-area-chart-svg-wrap
{
	position: relative;
	width: 100%;
	height: 150px;
}

.amber-area-chart-dot
{
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid;
	box-shadow: rgba(45,58,120,.18) 0px 2px 5px;
	transform: translate(-50%, -50%);
}

.amber-area-chart-labels
{
	display: flex;
	justify-content: space-between;
	margin-block-start: 10px;
}

.amber-area-chart-labels > div
{
	flex: 1;
	text-align: center;
	font-size: 11px;
	color: rgb(134,140,160);
	line-height: 1.3;
}

/* =============================================
   RECENT CAMPAIGNS TABLE CARD
   ============================================= */

.amber-table-card
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius);
	padding: 24px 26px;
	box-shadow: var(--amber-card-shadow-warm);
	margin-bottom: 20px;
}

.amber-table-card-title
{
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 800;
	color: var(--amber-title);
}

.amber-table
{
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.amber-table thead tr
{
	background: var(--amber-table-hd-bg);
}

.amber-table th
{
	padding: 12px 14px;
	color: var(--amber-th-color);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	text-align: start;
}

.amber-table th:first-child
{
	text-align: center;
}

.amber-table td
{
	padding: 13px 14px;
	border-block-start: 1px solid var(--amber-table-border);
}

.amber-table td:first-child
{
	text-align: center;
}

.amber-table tr:hover td
{
	background: rgba(245,248,253,.6);
}

/* Campaign type icon in table */
.amber-campaign-icon-cell
{
	display: inline-flex;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	align-items: center;
	justify-content: center;
	background: rgb(231,238,252);
}

/* Report open button */
.amber-report-btn
{
	border: none;
	cursor: pointer;
	padding: 7px 22px;
	border-radius: 9px;
	background: var(--amber-primary);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.3px;
}

/* =============================================
   STATUS PILLS
   ============================================= */

.amber-pill
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

.amber-pill-dot
{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.amber-pill-draft   { background: rgb(253,243,226); color: rgb(224,148,42); }
.amber-pill-draft   .amber-pill-dot { background: rgb(224,148,42); }

.amber-pill-sent    { background: rgb(230,246,238); color: rgb(34,176,125); }
.amber-pill-sent    .amber-pill-dot { background: rgb(34,176,125); }

.amber-pill-running { background: rgb(225,240,255); color: rgb(30,130,230); }
.amber-pill-running .amber-pill-dot { background: rgb(30,130,230); }

.amber-pill-ready   { background: rgb(235,252,245); color: rgb(16,150,100); }
.amber-pill-ready   .amber-pill-dot { background: rgb(16,150,100); }

.amber-pill-error   { background: rgb(255,238,238); color: rgb(210,50,50); }
.amber-pill-error   .amber-pill-dot { background: rgb(210,50,50); }

/* =============================================
   AMBER BUTTONS
   ============================================= */

.amber-btn-primary
{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: none;
	cursor: pointer;
	padding: 14px 22px;
	border-radius: 14px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.3px;
	color: #fff;
	background: var(--amber-primary);
	box-shadow: rgba(47,106,224,.26) 0px 8px 18px;
	text-decoration: none;
}

.amber-btn-primary:hover
{
	background: rgb(220,80,30);
}

.amber-btn-save
{
	border: none;
	cursor: pointer;
	padding: 11px 34px;
	border-radius: 10px;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.3px;
	color: #fff;
	background: var(--amber-primary);
}

.amber-btn-cancel
{
	cursor: pointer;
	padding: 11px 34px;
	border-radius: 10px;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.3px;
	color: var(--amber-primary);
	background: #fff;
	border: 1px solid var(--amber-border, rgb(226,232,243));
}

.amber-btn-icon
{
	width: 42px;
	height: 42px;
	border-radius: 11px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.amber-btn-delete
{
	background: rgb(240,80,110);
	color: #fff;
}

.amber-btn-amber
{
	background: rgb(244,166,58);
	color: #fff;
}

.amber-btn-outline
{
	background: #fff;
	border: 1px solid var(--amber-border);
	color: var(--amber-th-color);
}

/* =============================================
   TOOLBAR (search + action bar)
   ============================================= */

.amber-toolbar
{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.amber-toolbar-left,
.amber-toolbar-right
{
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.amber-toolbar-title
{
	font-size: 15px;
	font-weight: 600;
	color: var(--amber-text);
	white-space: nowrap;
}

/* Search box — applies to any textbox-with-icon inside an amber toolbar */
.amber-toolbar .textbox-with-icon,
.amber-search-box
{
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--amber-border);
	border-radius: 11px;
	padding: 10px 14px;
	min-width: 230px;
	color: rgb(134,140,160);
	font-size: 14px;
	margin-bottom: 0;
}

/* inner input must be borderless — the container IS the visual box */
.amber-toolbar .textbox-with-icon input.textbox,
.amber-search-box input.textbox
{
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
	flex: 1;
	min-width: 0;
	width: auto;
	font-size: 14px;
	color: var(--amber-title);
}

.amber-toolbar .textbox-with-icon input.textbox:focus,
.amber-search-box input.textbox:focus
{
	border: none;
	box-shadow: none;
}

.amber-toolbar .textbox-with-icon > input.textbox,
.amber-search-box.textbox-with-icon > input.textbox
{
	padding-inline-end: 0;
}

/* icon in flex flow instead of absolute-positioned */
.amber-toolbar .textbox-with-icon .textbox-icon,
.amber-search-box .textbox-icon
{
	position: static;
	display: flex;
	align-items: center;
	width: auto;
	top: auto;
	right: auto;
	margin: 0;
	font-size: 18px;
	color: rgb(180,186,200);
	cursor: pointer;
}

.amber-toolbar .dropdown-container 
{
	margin-bottom: 0px;
	min-width: 250px;
}
/* =============================================
   AMBER MODAL
   ============================================= */
.amber-modal-backdrop
{
	position: fixed;
	inset: 0;
	background: rgba(22,39,106,.32);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
}

.amber-modal-box
{
	background: #fff;
	border-radius: 16px;
	box-shadow: rgba(22,39,106,.28) 0px 24px 60px;
	overflow: hidden;
}

.amber-modal-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--amber-table-border);
}

.amber-modal-title
{
	font-size: 17px;
	font-weight: 800;
	color: var(--amber-title);
	margin: 0;
}

.amber-modal-close
{
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--amber-th-color);
	cursor: pointer;
	border: none;
	background: transparent;
	padding: 0;
}

.amber-modal-body
{
	padding: 24px;
}

/* =============================================
   AMBER FORM FIELDS
   ============================================= */

.amber-field
{
	margin-bottom: 22px;
}

.amber-field-label
{
	font-size: 13.5px;
	color: rgb(58,63,82);
	margin-bottom: 7px;
}

.amber-field-required
{
	color: rgb(240,80,110);
}

.amber-input
{
	background: #fff;
	border: 1px solid var(--amber-border);
	border-radius: 10px;
	padding: 12px 14px;
	min-height: 44px;
	font-size: 14px;
	color: var(--amber-title);
	width: 100%;
	font-family: inherit;
	box-shadow: none;
	outline: none;
	box-sizing: border-box;
}

.amber-input:focus
{
	border-color: var(--amber-primary);
	box-shadow: 0 0 0 3px rgba(238,95,43,.12);
}

.amber-select-wrap
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1px solid var(--amber-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	color: rgb(58,63,82);
	cursor: pointer;
}

.amber-checkbox-wrap
{
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14px;
	color: rgb(58,63,82);
}

.amber-checkbox-box
{
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 2px solid rgb(203,213,234);
	flex-shrink: 0;
}

/* =============================================
   BREADCRUMBS (wizard-links-display)
   ============================================= */

.wizard-links-display
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
	font-size: 13.5px;
}

.wizard-link
{
	display: none;
}

.wizard-link.wizard-step-number-finished,
.wizard-link.wizard-step-number-current
{
	display: flex;
	align-items: center;
	gap: 8px;
}

.wizard-step-number-finished
{
	cursor: pointer;
}

	.wizard-link a
	{
		font-size: 13.5px;
		font-weight: 500;
		color: rgb(154,163,182);
		text-decoration: none;
	}

.wizard-link a:hover
{
}

.wizard-link-without-link
{
	font-size: 13.5px;
	font-weight: 700;
	color: var(--amber-primary);
}

.wizard-link-delimiter
{
	font-size: 0;
	color: transparent;
	margin-inline: 0;
}

.wizard-link-delimiter::before
{
	content: '›';
	font-size: 13.5px;
	color: rgb(201,211,230);
}

.wizard-link-delimiter.wizard-step-progress-current,
.wizard-link-delimiter.wizard-step-progress-hidden
{
	display: none;
}

/* =============================================
   WIZARD STEPS CARD
   ============================================= */

.amber-wizard-steps-card
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 22px 28px;
	margin-bottom: 18px;
	box-shadow: rgba(238,95,43,.06) 0px 4px 18px;
}

/* =============================================
   ACCOUNT WARNING (home page)
   ============================================= */

.account-warning-message
{
	background: rgb(255,240,240);
	border: 1px solid rgb(255,200,200);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 14px;
	color: rgb(180,40,40);
	display: flex;
	gap: 10px;
	align-items: center;
}

.account-warning-hidden
{
	display: none;
}

/* =============================================
   AMBER GRID (replaces old grid tag-helper styling)
   ============================================= */

/* =============================================
   AMBER GRID TABLE OVERRIDES
   ============================================= */

.amber-table-card .data-table
{
	font-size: 14px;
	table-layout: auto;
}

.amber-table-card .data-table-header > th
{
	background-color: var(--amber-table-hd-bg);
	color: var(--amber-th-color);
	font-size: 12.5px;
	font-weight: 700;
	padding: 13px 14px;
}

.amber-table-card .data-table-header > th:first-child
{
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

.amber-table-card .data-table-header > th:last-child
{
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.amber-table-card .data-table td
{
	padding: 13px 14px;
	font-weight: 400;
	font-size: 14px;
	color: var(--amber-title);
	border-bottom: 1px solid var(--amber-table-border);
}

.amber-table-card .data-table-footer td
{
	padding: 14px 6px 6px;
}

/* =============================================
   AMBER DETAIL CARD — FIELD STYLING
   ============================================= */

.amber-details-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 40px;
}

.amber-details-grid > div
{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.amber-white-card .field-container,
.amber-card .field-container
{
	display: block;
	margin: 0 0 18px;
}

.amber-white-card .field-container:last-child,
.amber-card .field-container:last-child
{
	margin-bottom: 0;
}

.amber-white-card .field-caption,
.amber-card .field-caption
{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--amber-th-color);
	margin-bottom: 4px;
}

.amber-white-card .field-value,
.amber-card .field-value
{
	font-size: 15px;
	color: var(--amber-title);
	font-weight: 500;
}

/* Two-factor auth rows */
.acc-details-otp-title
{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--amber-th-color);
	margin-bottom: 8px;
}

.acc-details-otp-row
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--amber-title);
}

/* =============================================
   AMBER UTILITY HELPERS
   ============================================= */

.amber-mb-20 { margin-bottom: 20px; }
.amber-mb-28 { margin-bottom: 28px; }

.amber-card-edit-btn
{
	position: absolute;
	top: 20px;
	inset-inline-end: 20px;
}

.amber-white-card
{
	position: relative;
}

.amber-detail-row
{
	margin-bottom: 16px;
}

.amber-detail-row:last-child
{
	margin-bottom: 0;
}

/* cr-status-title used inside amber cards */
.amber-white-card .cr-status-title,
.amber-card .cr-status-title
{
	font-size: 18px;
	font-weight: 800;
	color: rgb(34, 41, 63);
	margin-bottom: 20px;
}

.amber-white-card:has(.pie-chart-container) .cr-status-title
{
	text-align: center;
	margin-bottom: 4px;
}

/* =============================================
   AMBER PAGE TABS
   ============================================= */

.amber-page-tabs
{
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 20px;
	background: rgba(255,255,255,.7);
	border: 1px solid var(--amber-border);
	border-radius: 12px;
	padding: 5px 6px;
	width: fit-content;
}

.tab-link a,
.amber-page-tabs .tab-link a
{
	display: block;
	padding: 9px 18px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--amber-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.12s, color 0.12s;
}

.tab-link a:hover,
.amber-page-tabs .tab-link a:hover
{
	background: rgba(0,0,0,.05);
	color: var(--amber-title);
}

.tab-link-active a,
.amber-page-tabs .tab-link-active a
{
	background: #fff;
	color: var(--amber-title);
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(45,58,120,.10);
}

/* Tabs in PageHeader right area (fewer tabs like 2-3) */
.amber-page-header-right .tab-link
{
	display: inline-flex;
}

/* =============================================
   COUNTER ICON BACKGROUNDS
   ============================================= */

/* counter icon backgrounds — all matched to Amber design reference */
.amber-icon-email    { background: rgb(253,236,229); color: rgb(238,95,43);  font-size: 19px; }
.amber-icon-amber    { background: rgb(253,243,226); color: rgb(224,148,42); font-size: 19px; }
.amber-icon-campaign { background: rgb(233,241,253); color: rgb(244,166,58); font-size: 19px; }
.amber-icon-sms      { background: rgba(255,255,255,.22); color: #fff;       font-size: 19px; }

/* =============================================
   GET STARTED ILLUSTRATION
   ============================================= */

.amber-get-started-illustration
{
	margin-block-start: auto;
	display: flex;
	justify-content: center;
}

/* =============================================
   CHART LABELS (rendered inside chart HTML string)
   ============================================= */

.amber-chart-area .amber-chart-labels
{
	position: absolute;
	bottom: -26px;
	inset-inline-start: 0;
	inset-inline-end: 0;
	display: flex;
	justify-content: space-between;
}

.amber-chart-area
{
	position: relative;
	height: 150px;
	margin-bottom: 32px;
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */

@media (max-width: 1400px)
{
	.amber-rail
	{
		width: 240px;
	}
	.amber-stage
	{
		padding: 24px 28px 40px;
	}
	.amber-counters-grid
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1100px)
{
	.amber-counters-grid
	{
		grid-template-columns: repeat(2, 1fr);
	}
	.amber-get-started-grid
	{
		grid-template-columns: 1fr 1fr;
	}
	.amber-charts-grid
	{
		grid-template-columns: 1fr;
	}
}

*
{
	font-family: Assistant;
}

.site-main-container
{
	display: grid;
	grid-template-columns: 285px auto;
}

.side-bar-navigation
{
	margin-inline: 20px;
}

@media (max-width: 1520px) 
{
	.site-main-container
	{
		grid-template-columns: 250px auto;
	}

	.menu-item-text, .menu-item a
	{
		font-size: 15px;
	}

	.side-bar-navigation
	{
		margin-inline: 10px;
	}
}

.site-page-content
{
	background-color: #f4f6f9;
	min-height: 100vh;
}

.site-page-content-body
{
	margin: 24px;
}

.site-page-content-body > div
{
	margin-inline: auto;
}

.site-menu-container
{
	border-right: 1px solid var(--amber-border, rgb(226,232,243));
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.site-menu-container > img
{
	display: block;
	margin-inline: auto;
	margin-block-end: 10px;
}

.side-menu-sector
{
	margin-block-start: 5px;
	padding: 20px;
	border-block-start: 1px solid var(--amber-border, rgb(226,232,243));
}

.site-main-upgrade-package
{
	display: block;
	background-color: var(--amber-primary, #ee5f2b);
	text-transform: uppercase;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	padding: 10px;
	font-weight: bold;
	color: white;
}

.button-base
{
	background-color: var(--amber-primary, #ee5f2b);
	font-size: 14px;
}

.fa-button:hover
{
	border: 1px solid var(--amber-primary, #ee5f2b);
	color: var(--amber-primary, #ee5f2b);
}

.login-container
{
	width: 400px;
	margin-inline: auto;
	margin-block-start: 300px;
}

.login-container > div
{
	margin-block-end: 15px;
}

.login-title 
{
	font-size: 30px;
	font-weight: bold;
}

.site-page-title
{
	font-size: 30px;
	font-weight: bold;
	padding-inline-start: 20px;
	padding-block-start: 10px;
	padding-block-end: 20px;
	letter-spacing: -0.3px;
	color: #111111;
}

.site-page-header 
{
	display: grid;
	grid-template-columns: 40% 60%;
}

.status-counter-chart circle
{
	stroke: rgb(217, 228, 235);
}

.index-counters
{
	display: grid;
	grid-template-columns: auto auto auto auto;
	column-gap: 20px;
	width: 100%;
}

div.status-counter
{
	color: rgb(155, 155, 155);
	background-color: white;
	padding-inline-end: 10px;
}

.status-counter > div
{
	display: grid;
	grid-template-columns: auto 76px;
}

.status-counter-title
{
	font-size: 16px;
}

.status-counter-sub-title 
{
	font-size: 12px;
	margin-bottom: 20px;
}

.status-counter-icon, .status-counter-statistics 
{
	display: inline-block;
}

.status-counter-icon
{
	width: 36px;
	height: 36px;
	border-radius: 10px;
	color: white;
	text-align: center;
	padding-block-start: 4px;
}

.status-counter-statistics
{
	color: black;
	font-size: 25px;
	font-weight: bold;
	margin-inline-start: 10px;
}

.status-counter-chart
{
	padding-block-start: 30px;
}

.index-status-containers
{
	display: grid;
	column-gap: 20px;
	width: 100%;
}

.cr-status-containers
{
	display: grid;
	column-gap: 18px;
	row-gap: 18px;
	grid-template-columns: 1fr 1fr 1fr;
}

.index-status-containers
{
	grid-template-columns: 430px auto auto;
}

.index-status-containers > div > div, .cr-status-containers > div > div
{
	margin-bottom: 20px;
}

.grid-title
{
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	padding-bottom: 5px;
	border-bottom: 1px solid #E9E9E9;
}

.index-create-campaign-button
{
	background-color: var(--amber-primary, #ee5f2b);
}

.index-sms-campaign-button
{
	background-color: #d4607a;
}

.index-import-contacts-button
{
	background-color: #2e86c1;
}

.index-status-containers .fa-text-button 
{
	width: 100%;
}

.index-status-sub-title, .cr-status-sub-title
{
	color: rgb(155, 155, 155);
	font-size: 12px;
	text-transform: none;
	font-weight: normal;
}

.index-limit-desc 
{
	font-size: 14px;
	margin-bottom: 10px;
}

.standard-frame
{
	border-radius: 10px;
	padding: 20px;
	background-color: white;
	margin-bottom: 12px;
	position: relative;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s;
}

.standard-frame:has(.frame-edit-button):hover
{
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(238, 95, 43, 0.25);
}

.standard-frame .frame-edit-button .fa-button
{
	color: #c0c0c0;
	transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.standard-frame:has(.frame-edit-button):hover .frame-edit-button .fa-button
{
	color: var(--amber-primary, #ee5f2b);
	border-color: rgba(238, 95, 43, 0.35);
}

.standard-frame .field-container 
{
	vertical-align: top;
}

.fa-grid-icon
{
	font-family: Phosphor;
	font-size: 14px;
}


.campaigns-header-actions
{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.campaigns-create-btn
{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: none;
	cursor: pointer;
	padding: 14px 22px;
	border-radius: 14px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.3px;
	color: rgb(255,255,255);
	background: rgb(238,95,43);
	box-shadow: rgba(47,106,224,.26) 0px 8px 18px;
}

.campaigns-grid-icon-mail,
.campaigns-grid-icon-sms
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	font-size: 16px;
	background: rgb(231,238,252);
}

.campaigns-grid-icon-mail
{
	color: rgb(244,166,58);
}

.campaigns-grid-icon-sms
{
	color: rgb(238,95,43);
}

.index-grid-container
{
	width: 100%;
}

.standard-frame .grid-title
{
	border-bottom: none;
}

.campaign-reports-unavailable .grid-link-button 
{
	display: none;
}

.user-menu-item
{
	border-block-start: 1px solid var(--amber-border, rgb(226,232,243));
}

.acc-details-frame 
{
	max-width: 1100px;
}

.frame-edit-button 
{
	position: absolute;
	top: 20px;
	right: 20px;
}

.edit-controls-frame
{
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 26px;
}

.edit-controls-row
{
	display: grid;
	gap: 24px;
}

.ecr-50-50
{
	grid-template-columns: 1fr 1fr;
}

.ecr-60-40
{
	grid-template-columns: 3fr 2fr;
}

.ecr-40-40-20
{
	grid-template-columns: 40% 40% 20%;
}
.ecr-100
{
	grid-template-columns: 100%;
}

.popup-body
{
	position: relative;
}

.popup-body-container
{
	padding: 24px 24px 0;
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.popup-footer-container
{
	flex-shrink: 0;
	padding: 16px 24px 20px;
	display: flex;
	gap: 12px;
}

.cancel-button
{
	background-color: white;
	color: rgb(238, 95, 43);
	border: 1px solid rgb(188, 211, 247);
}

.popup-footer-container .form-button
{
	padding: 11px 34px;
	border-radius: 10px;
	font-size: 14px;
	min-width: auto;
	box-shadow: none;
	margin-inline-end: 0;
}

/* Popup outer structure overrides (overrides general.css) */
.popup-main-bg-container
{
	background: rgba(22, 39, 106, 0.32);
	z-index: 10000;
}

.popup-main-container
{
	top: 50%;
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%);
	margin: 0;
	border-radius: 16px;
	box-shadow: rgba(22, 39, 106, 0.28) 0px 24px 60px;
	overflow: hidden;
}

.div-popup-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	height: 65px;
	border-bottom: 1px solid rgb(238, 242, 248);
	box-sizing: border-box;
}

.popup-title
{
	font-size: 17px;
	font-weight: 800;
	color: rgb(34, 41, 63);
	padding: 0;
	display: inline-block;
}

.popup-close-symbol
{
	width: 30px;
	height: 30px;
	border-radius: 8px;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	color: rgb(139, 147, 167);
	float: none;
	padding: 0;
}

.div-popup-content
{
	top: 65px;
	bottom: 0;
}

body.__popup-body
{
	background: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.message-box-message-div
{
	padding: 24px 24px 0;
	height: auto;
	width: auto;
	font-size: 15px;
	color: rgb(58, 63, 82);
	margin-bottom: 24px;
}

.footer-message-box-container
{
	position: static;
	padding: 0 24px 24px;
	display: flex;
	gap: 12px;
}

.footer-message-box-container > .form-button
{
	padding: 11px 30px;
	border-radius: 10px;
	font-size: 14px;
	min-width: auto;
	box-shadow: none;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

.acc-details-otp
{
	display: inline-block;
	margin: 20px;
}

.acc-details-otp > span
{
	vertical-align: top;
}

.acc-details-otp-title
{
	font-size: 12px;
	color: rgb(155, 155, 155);
	margin-block-end: 5px;
}

.acc-details-login-edit-otp-title
{
	font-size: 14px;
	font-weight: 600;
	color: rgb(34, 41, 63);
	margin-block-end: 10px;
}

.acc-details-login-edit-otp
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.acc-details-login-edit-otp > span
{
	font-size: 14px;
	color: rgb(58, 63, 82);
}

.contact-removal-edit-body
{
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 26px;
}

.google-account-hidden 
{
	display: none;
}

.campaign-status-badge
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 700;
}

.campaign-status-badge::before
{
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
	background: currentColor;
}

.campaign-status-draft .campaign-status-badge
{
	background: rgb(253,243,226);
	color: rgb(224,148,42);
}

.campaign-status-ready .campaign-status-badge
{
	background: rgb(253,243,226);
	color: rgb(224,148,42);
}

.campaign-status-cannot-be-sent .campaign-status-badge
{
	background: rgba(220,40,40,.11);
	color: crimson;
}

.campaign-status-sent .campaign-status-badge
{
	background: rgb(230,246,238);
	color: rgb(34,176,125);
}

.campaign-status-running .campaign-status-badge
{
	background: rgba(37,99,235,.11);
	color: rgb(37,99,235);
}

.grid-link-button
{
	display: inline-block;
	padding: 7px 22px;
	border-radius: 9px;
	background: rgb(238,95,43);
	color: rgb(255,255,255);
	font-family: inherit;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.grid-stop-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ee5f2b;
	text-decoration: none;
	transition: opacity 0.15s;
}

.grid-stop-btn::after
{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 2px;
}

.grid-stop-btn:hover
{
	opacity: 0.78;
}

.grid-stop-btn[can-stop="0"]
{
	visibility: hidden;
}

.grid-header-checkbox
{
	text-align: center;
}

.grid-top-panel
{
	display: grid;
	align-items: end;
	column-gap: 5px;
}

.fa-button 
{
	box-sizing: border-box;
}

.grid-top-panel .input-container
{
	width: 100%;
}

.grid-top-panel .fa-button
{
	margin-block-end: 12px;
	margin-inline: 3px;
	display: block;
}
.campaigns-grid-top-panel
{
	grid-template-columns: auto 300px 45px 45px;
}

.tr-mail-grid-top-panel
{
	grid-template-columns: auto 150px 150px 300px 45px;
}

.site-page-header-controls
{
	text-align: end;
	padding-block-start: 10px;
	padding-inline-end: 10px;
}

.campaigns-create-campaign-button
{
	background-color: var(--amber-primary, #ee5f2b);
	font-size: 14px;
}

.lists-create-list-button
{
	background-color: var(--amber-primary, #ee5f2b);
	font-size: 14px;
}

.delete-button
{
	border: 1px solid var(--delete-color);
	background-color: var(--delete-color);
	color: white;
}

.cr-message-counters
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 18px;
}

.message-status-counter
{
	text-align: center;
	padding: 0 12px;
	border-inline-end: 1px solid rgb(238, 242, 248);
}

.message-status-counter-value
{
	font-size: 26px;
	font-weight: 800;
	color: rgb(34, 41, 63);
	margin-bottom: 8px;
}

.message-status-counter-icon
{
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	margin-inline-end: 7px;
}
.message-status-counter-label
{
	color: rgb(91, 96, 114);
	font-weight: 600;
	font-size: 13px;
	display: inline-block;
}

.index-status-title, .cr-status-title
{
	font-size: 16px;
	font-weight: 800;
	color: rgb(34, 41, 63);
	margin-bottom: 18px;
}

.cr-campaign-details-card
{
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 18px;
}

.cr-campaign-details
{
	display: contents;
}

.cr-campaign-details > div
{
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: rgb(34, 41, 63);
}

.cr-campaign-details span
{
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: rgb(139, 147, 167);
}

.cr-campaign-details br
{
	display: none;
}

.sub-title
{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
}

.small-field-title
{
	font-size: 12px;
	color: rgb(155, 155, 155);
}

.acs-top-body-container
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.acs-custom-fields-notification-type
{
	margin-block-end: 50px;
}

.acs-custom-fields-removed-contact-body
{
	height: 155px;
	width: 100%;
	padding-inline-end: 10px;
	padding-inline-start: 10px;
}

.asc-custom-field
{
	display: grid;
	grid-template-columns: 100px auto;
	margin-bottom: 25px;
}

.acs-custom-fields-title-div
{
	margin-block-end: 30px;
}

.acs-custom-fields
{
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.acs-custom-fields-desc
{
	width: 180px;
	flex-shrink: 0;
	font-size: 14px;
	color: rgb(58, 63, 82);
}

.acs-custom-fields-API-save
{
	float: right;
}

.acs-settings-user-ips
{
	margin-block-start: 15px;
}

.acs-multiline
{
	white-space: pre-line;
}

.cr-hours-report-frame
{
	grid-column: span 3;
}

.cr-status-containers > div > div.cr-graph-chart-container
{
	margin-bottom: 0px;
}

.cr-trapezoid-chart-container svg
{
	margin-inline: auto;
	display: block;
}

.cr-report-tabs
{
	display: flex;
	align-items: center;
	gap: 20px;
}

.cr-report-tab
{
	font-size: 14px;
	font-weight: 600;
	color: rgb(154, 163, 182);
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
}

.cr-report-tab.cr-report-tab-active
{
	font-weight: 800;
	color: rgb(34, 41, 63);
	border-bottom: 2px solid var(--amber-primary, #ee5f2b);
}

.cr-campaign-name
{
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 0;
	color: var(--amber-title, rgb(34,41,63));
}

.cr-view-email-link
{
	font-weight: 600;
	color: rgb(244, 166, 58);
	text-decoration: none;
}

.cr-link-clicks-short-rep
{
	grid-column: span 3;
}

.cr-link-clicks-short-rep-table 
{
	width: 100%;
}

.cr-link-clicks-short-rep-table th:last-child, .cr-link-clicks-short-rep-table td:last-child 
{
	width: 100px;
}

.cr-link-clicks-short-rep-table th 
{
	text-align: start;
	font-weight: normal;
	font-size: 12px;
	padding: 10px;
}

.cr-link-clicks-short-rep-table td
{
	font-weight: bold;
	font-size: 12px;
	padding: 10px;
	border-block-start: 2px solid rgb(240, 244, 247);
}

/* Chart style overrides to match Amber design */
.pie-chart-legend
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px 26px;
	font-size: 12.5px;
	margin-top: 10px;
}

.pie-chart-legend > div
{
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgb(91, 96, 114);
	padding-top: 0;
}

.pie-chart-legend > div > div
{
	display: inline;
}

.lines-chart-line-bg
{
	background-color: rgb(238, 242, 248);
	height: 8px;
	border-radius: 99px;
	overflow: hidden;
}

.lines-chart-line
{
	height: 100%;
	border-radius: 99px;
}

.trapezoid-chart-legend
{
	margin-inline-start: 0;
	margin-inline-end: 0;
	gap: 8px 16px;
}

.trapezoid-chart-legend > div
{
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: rgb(91, 96, 114);
}

.trapezoid-chart-legend-text
{
	font-size: 12.5px;
	color: rgb(91, 96, 114);
}

.tab-link 
{
	display: inline-block;
	margin-inline-end: 30px;
	font-weight: bold;
	text-decoration: none;
	padding-bottom: 2px;
}

.tab-link a 
{
	text-decoration: none;
	color: rgb(153, 178, 198);
}

.tab-link-active a
{
	color: var(--amber-primary, #ee5f2b);
}

.tab-link-active
{
	border-bottom: 2px solid var(--amber-primary, #ee5f2b);
}

.cr-detailed-grid-top-panel
{
	grid-template-columns: auto 150px 300px 45px;
}

.cr-detailed-grid-top-panel .grid-title, .cr-clicks-grid-top-panel .grid-title
{
	padding-bottom: 15px;
}

.cr-clicks-grid-top-panel
{
	grid-template-columns: auto 700px 45px;
}

.lists-grid-top-panel
{
	grid-template-columns: auto 300px 45px 45px;
}

.copy-button
{
	border: 1px solid var(--amber-primary, #ee5f2b);
	background-color: var(--amber-primary, #ee5f2b);
	color: white;
}

.list-details-frame
{
	max-width: 1100px;
}

.le-transfer-days span
{
	font-size: 14px;
}

.le-transfer-days .input-container, .le-transfer-days .dropdown-container 
{
	display: inline-block;
}

.le-transfer-days .input-container 
{
	width: 60px;
}

.le-transfer-days .dropdown-container 
{
	width: 250px;
}

.invoice-details-edit-fields
{
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.invoice-details-edit-fields-desc
{
	width: 180px;
	flex-shrink: 0;
	font-size: 14px;
	color: rgb(58, 63, 82);
}

.email-to-join-sub-title-div
{
	margin-block-end: 20px;
	color: rgb(34, 41, 63);
	font-size: 16px;
	font-weight: 800;
}

.email-to-join-sub-title-div-edit
{
	font-size: 14px;
	color: rgb(58, 63, 82);
	line-height: 1.55;
	margin-block-end: 20px;
}

.email-to-join-edit-fields
{
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.email-to-join-edit-frame-div
{
	width: 100%;
}

.email-to-join-edit-fields-desc
{
	width: 180px;
	flex-shrink: 0;
	font-size: 14px;
	color: rgb(58, 63, 82);
}

.email-to-join-edit-check-box-div
{
	display: flex;
	align-items: center;
}

.acs-custom-fields > div:last-child,
.invoice-details-edit-fields > div:last-child,
.email-to-join-edit-fields > div:last-child
{
	flex: 1;
	min-width: 0;
}

.crt-camp-main
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius, 18px);
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: rgba(238,95,43,.06) 0px 4px 18px;
}

.crt-camp-controls-container
{
	width: 460px;
	max-width: 100%;
	text-align: center;
}

.crt-camp-header
{
	font-size: 18px;
	font-weight: 700;
	color: var(--amber-title, #1e2538);
	margin-bottom: 20px;
}

.crt-camp-fld-remark
{
	font-size: 12px;
	color: var(--amber-muted, #8b93a7);
	margin-bottom: 24px;
}

.crt-camp-button-container
{
	text-align: center;
}

.wizard-steps-display
{
	display: flex;
	align-items: center;
	width: 100%;
}

.wizard-step
{
	display: flex;
	align-items: center;
	flex: 1;
}

.wizard-step:last-child
{
	flex: 0 0 34px;
}

.wizard-step-number
{
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgb(238,242,248);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	color: rgb(139,147,167);
	flex-shrink: 0;
}

.wizard-step-number.wizard-step-number-finished,
.wizard-step-number.wizard-step-number-current
{
	background: var(--amber-primary, #ee5f2b);
	color: #fff;
}

.wizard-step-number.wizard-step-number-finished a,
.wizard-step-number.wizard-step-number-current a
{
	color: #fff;
	text-decoration: none;
}

.wizard-step-progress
{
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgb(238,242,248);
	margin-inline: 6px;
}

.wizard-step-number.wizard-step-number-finished + .wizard-step-progress
{
	background: var(--amber-primary, #ee5f2b);
}

.wizard-step-progress-hidden
{
	display: none;
}

.wizard-step-progress-displayed
{
	display: none;
}

.camp-type-types-container
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1000px;
	margin-inline: auto;
}

.campaign-type-container
{
	border: 2px solid rgb(238,242,248);
	border-radius: 16px;
	padding: 26px 22px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.campaign-type-container:hover
{
	border-color: var(--amber-primary, #ee5f2b);
	box-shadow: 0 4px 16px rgba(238,95,43,.12);
}

.campaign-type-icon
{
	font-family: Phosphor;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin-inline: auto;
	margin-bottom: 16px;
}

.camp-type-main
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 40px;
	box-shadow: rgba(238,95,43,.06) 0px 4px 18px;
}

.camp-type-controls-container
{
	max-width: 1000px;
	margin-inline: auto;
}

.campaign-type-title
{
	font-size: 16px;
	font-weight: 800;
	color: rgb(34,41,63);
	text-align: center;
	margin-bottom: 8px;
	margin-block-start: 0;
}

.campaign-type-description
{
	font-size: 13px;
	color: rgb(139,147,167);
	line-height: 1.5;
	text-align: center;
	margin-inline: 0;
}

.camp-type-header
{
	text-align: center;
	font-size: 18px;
	font-weight: 800;
	color: rgb(34,41,63);
	margin-bottom: 28px;
}

.camp-type-main-chosen
{
	border: 2px solid var(--amber-primary, #ee5f2b);
}

.camp-type-button-container
{
	display: flex;
	justify-content: flex-end;
	margin-block-start: 24px;
}

.camp-type-types-container-sms
{
	grid-template-columns: repeat(2, 1fr);
}

.crt-camp-from-url-fld-container 
{
	min-width: 600px;
}

.list-details-main-grid
{
	display: grid;
	grid-template-columns: auto auto auto auto;
	width: 100%;
	max-width: 1100px;
}

.amber-white-card:has(> .list-details-stats-summary)
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 24px 30px;
}

.list-details-stats-summary
{
	text-align: center;
	padding: 0px 20px;
	border-inline-end: 1px solid rgb(238, 242, 248);
}

.list-details-stats-summary-value
{
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -1px;
	color: rgb(34, 41, 63);
	margin-bottom: 8px;
}

.list-details-stats-summary-icon
{
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 4px;
	margin-inline-end: 8px;
	vertical-align: middle;
}

.list-details-stats-summary-label
{
	font-size: 14px;
	font-weight: 600;
	color: rgb(91, 96, 114);
	display: inline-block;
	vertical-align: middle;
}

.amber-white-card:has(> .list-details-stats-by-subtasks)
{
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	padding: 24px 20px;
}

.list-details-stats-by-subtasks
{
	text-align: center;
	padding: 0px 14px;
	border-inline-end: 1px solid rgb(238, 242, 248);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
}

.list-details-stats-by-subtasks-value
{
	font-size: 28px;
	font-weight: 800;
	color: rgb(34, 41, 63);
}

.list-details-stats-by-subtasks-icon
{
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 4px;
}

.list-details-stats-by-subtasks-label
{
	font-size: 12px;
	font-weight: 600;
	color: rgb(139, 147, 167);
	line-height: 1.45;
}

.list-details-graphs-main
{
	display: grid;
	grid-template-columns: 600px auto;
	max-width: 1100px;
	column-gap: 20px;
}

.list-details-graphs-summary
{
}

.list-details-graphs-opens-statistics
{

}

.list-details-graphs-contacts-overview
{
	max-width: 1100px;
}

.list-contacts-add-contact
{
	text-align: end;
	padding-bottom: 15px;
}

.list-contacts-grid-filters
{
	display: grid;
	grid-template-columns: auto 200px 300px 60px 60px;
}

.list-contacts-export-button
{
	width: 200px;
	padding-block-start: 15px;
}

.list-contacts-status-filter
{
}

.list-contacts-search-filter
{
	margin-block-start: 15px;
}

.list-contacts-grid-button
{
	padding-block-start: 23px;
}

.crt-camp-prev-main
{
	background: #fff;
	min-height: 70vh;
	border-radius: var(--amber-card-radius, 18px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.crt-camp-prev-controls-container
{
	margin-inline: auto;
}

.crt-camp-prev-controls-container > div 
{
	min-width: 600px;
}

.crt-camp-prev-list-container 
{
	height: 60vh;
}

.crt-camp-prev-header
{
	font-weight: bold;
	margin-bottom: 10px;
}

.crt-camp-prev-button-container
{
	padding-block-start: 10px;
	text-align: end;
}

.camp-tmpl-main
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius, 18px);
	box-shadow: rgba(238,95,43,.06) 0px 4px 18px;
	display: grid;
	grid-template-columns: 230px auto;
	column-gap: 26px;
	overflow: hidden;
}

.camp-tmpl-categories
{
	padding-inline-start: 20px;
	padding-inline-end: 20px;
	padding-block-start: 20px;
	font-size: 15px;
	position: relative;
	min-height: 500px;
}

.camp-tmpl-categories a
{
	text-decoration: none;
	color: rgb(139,147,167);
	display: block;
	padding: 10px 18px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
}

.template-category
{
	border-radius: 10px;
	margin-bottom: 4px;
}

.chosen-template-category
{
	background-color: var(--amber-primary, #ee5f2b);
	border-radius: 10px;
}

.chosen-template-category a
{
	color: white;
	font-weight: 700;
}

.camp-tmpl-templates-container
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 26px 28px;
	align-content: start;
}

.template-preview
{
	border: 1px solid rgb(230,236,246);
	border-radius: 14px;
	padding: 14px;
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.template-preview img
{
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: top;
	border-radius: 10px;
	display: block;
}

.template-preview:hover
{
	border-color: var(--amber-primary, #ee5f2b);
	box-shadow: 0 4px 16px rgba(238,95,43,.10);
}

.template-preview-caption
{
	text-align: center;
}

.template-preview-buttons
{
	text-align: center;
	display: none;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(255, 255, 255, 0.7);
	padding-block-start: 50px;
}

.template-preview:hover .template-preview-buttons
{
	display: block;
}

.template-preview-button
{
	padding-inline-end: 15px;
	padding-inline-start: 15px;
	padding-block-start: 7px;
	padding-bottom: 7px;
	margin-bottom: 10px;
	font-size: 13px;
	border-radius: 8px;
	width: 100px;
}

.template-preview-button .fa-icon-span
{
	font-size: 14px;
}

.template-preview-button-view
{
	background: #fff;
	border: 1px solid var(--amber-border);
	color: var(--amber-th-color);
}

.template-preview-caption
{
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: rgb(34,41,63);
	margin-top: 12px;
}

.camp-tmpl-editor-type
{
	position: absolute;
	bottom: 20px;
	inset-inline-start: 20px;
	inset-inline-end: 20px;
}

.camp-tmpl-editor-type a
{
	display: block;
	background-color: rgb(63,201,163);
	border-radius: 11px;
	text-align: center;
	text-decoration: none;
	padding: 12px 22px;
	font-weight: 700;
	color: white;
	font-size: 13px;
	letter-spacing: 0.3px;
}

.camp-tmpl-preview-template 
{
	position: fixed;
	display: none;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0, 0, 0, 0.4);
}

.camp-tmpl-preview-template-displayed
{
	display: block;
}

.camp-tmpl-preview-template-container
{
	margin-block-start: 100px;
	width: 700px;
	height: 800px;
	margin-inline: auto;
	position: relative;
	background-color: white;
	border-radius: 10px;
}

.camp-tmpl-preview-template-close-button
{
	position: absolute;
	width: 20px;
	height: 20px;
	top: -40px;
	right: -30px;
	color: white;
	cursor: pointer;
	font-size: 40px;
}

.camp-tmpl-preview-template-container iframe
{
	width: 99%;
	height: 99%;
	margin: 5px;
	box-sizing: border-box;
	border: none;
}

.preview-template-body 
{
	background-color: white;
}

.add-button
{
	border: 1px solid var(--add-color);
	background-color: var(--add-color);
	color: white;
}

.refresh-button
{
	border: 1px solid var(--refresh-button-color);
	background-color: var(--refresh-button-color);
	color: white;
}

.camp-sms-main
{
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 20px;
}

.camp-sms-sender-controls
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.camp-sms-sender-controls > div:first-child
{
	flex: 1;
}

.camp-sms-sender-controls .dropdown-container,
.camp-sms-sender-controls .input-container
{
	width: 100%;
	margin-bottom: 0;
}

.camp-sms-message-controls-container
{
	background: #fff;
	border: 1px solid rgb(230, 236, 246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 24px 26px;
	box-shadow: var(--amber-card-shadow-warm);
}

.cc-contact-details-main
{
	display: grid;
	grid-template-columns: auto 400px;
	column-gap: 20px;
	max-width: 1100px;
}

.cc-contact-info-main
{
	margin-inline-end: 15px;
}

.cc-contact-details-edit-main
{
	display: grid;
	grid-template-columns: 290px 290px;
}

.cc-contact-details-edit-birthday-section
{
	display: grid;
	grid-template-columns: 135px 135px;
}

.cc-contact-history-main
{
	max-width: 1100px;
	margin-top: 20px;
}

.cc-contact-assigned-lists-main
{
	
}

.cc-contact-assigned-list
{
	padding-inline-start: 25px;
}

.cc-contact-assigned-list li 
{
	margin-bottom: 5px;
}

.cc-list-main
{
	display: grid;
	grid-template-columns: 40px auto;
}

.cle-list-main
{
	overflow-y: scroll;
	height: 95%;
	border: solid 1px var(--amber-border);
	border-radius: 10px;
	padding: 10px;
}

.ca-main
{
	display: grid;
	grid-template-columns: 1fr 270px;
	gap: 24px;
	align-items: start;
}

.ca-fields-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.ca-birthday-section
{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.ca-lists-panel .amber-card-section-title
{
	margin-bottom: 10px;
}

.ca-lists-container
{
	overflow-y: auto;
	max-height: 440px;
	border: 1px solid var(--amber-border);
	border-radius: 10px;
	padding: 8px;
}

.camp-sms-message-content-title
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.camp-sms-message-content-title .dropdown-container
{
	margin-block-end: 0px;
}

.camp-sms-message-content-area
{
	border-block-start: 1px solid var(--amber-border, rgb(226,232,243));
	padding-block-start: 16px;
}

.list-openers-grid-filters
{
	display: grid;
	grid-template-columns: 300px 180px auto 170px 170px 70px;
}

.list-openers-mailing-lists
{
	margin-block-start: 10px;
}

.list-openers-add-to-list
{
	margin-block-start: 15px;
}

.list-openers-add-to-list-btn
{
	text-decoration: none;
	background-color: var(--amber-primary, #ee5f2b);
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 700;
	color: white;
	padding-inline-start: 22px;
	padding-inline-end: 22px;
	padding-block-start: 10px;
	padding-bottom: 10px;
	display: inline-block;
	margin-inline-start: 15px;
}

.list-openers-filter > div
{
	width: 150px;
}

.list-openers-download
{
	padding-block-start: 15px;
}

.sms-edt-info-icon
{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-inline: 10px;
}

.sms-edt-info-icon img
{
	vertical-align: bottom;
}

.sms-edt-info-icon div
{
	display: none;
	position: absolute;
	left: 20px;
	top: 20px;
	border: 1px solid #999999;
	border-radius: 10px;
	padding: 10px;
	width: 300px;
	font-size: 14px;
	background-color: white;
}

.sms-edt-info-icon:hover div
{
	display: block;
}

.sms-edt-info-icon-header
{
	text-decoration: underline;
	display: inline-block;
	margin-bottom: 5px;
	font-weight: bold;
}

.sms-preview
{
	/* phone frame removed — preview is now inside the dark card */
}

.sms-preview-header
{
	color: white;
	font-weight: 800;
	font-size: 16px;
	margin-bottom: 16px;
}

.sms-preview-message
{
	border-radius: 10px;
	background: rgb(233, 237, 245);
	min-height: 360px;
	padding: 16px;
	font-size: 13px;
	color: rgb(58, 63, 82);
	line-height: 1.6;
	word-break: break-word;
	overflow-y: auto;
}

.sms-preview-pane
{
	background: rgb(28, 39, 64);
	border-radius: var(--amber-card-radius, 18px);
	padding: 20px;
	box-shadow: var(--amber-card-shadow-warm);
}

.sms-sender-type-comment 
{
	font-size: 14px;
	padding-top: 5px;
}

.list-cleaning-results-grid-filters
{
	display: grid;
	grid-template-columns: auto 300px 70px;
}

.list-cleaning-substatus-filter
{
	width: 280px;
}

.sms-verification-main
{
	padding: 10px;
	max-width: 600px;
	font-size: 20px;
}

.sms-sender-approval-thanks
{
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 0px;
}

.verification-message
{
	font-size: 16px;
	color: Crimson;
	display: none;
}

.verification-message-displayed
{
	display: block;
}

.camp-sms-cc-main
{
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 20px;
}

.camp-sms-cc-lists
{
	background: #fff;
	border: 1px solid rgb(230, 236, 246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 24px 26px;
	box-shadow: var(--amber-card-shadow-warm);
	display: flex;
	flex-direction: column;
}

.camp-sms-cc-manual
{
	background: #fff;
	border: 1px solid rgb(230, 236, 246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 24px 26px;
	box-shadow: var(--amber-card-shadow-warm);
}

.camp-sms-cc-grid-container
{
	flex: 1;
}

.camp-sms-cc-grid-top-panel
{
	grid-template-columns: auto;
}

.camp-sms-cc-lists-grid-title
{
	font-size: 16px;
	font-weight: 800;
	color: rgb(34, 41, 63);
	margin-bottom: 16px;
}

.ra-grid-top-panel
{
	grid-template-columns: auto 200px 150px 150px 300px 45px;
}

.ra-no-actions-defined > span
{
	color: rgb(240, 80, 110);
	font-size: 14px;
	font-weight: 600;
}

.seg-grid-top-panel
{
	grid-template-columns: auto 300px 45px;
}

.seg-create-link-button
{
	background-color: var(--amber-primary, #ee5f2b);
	font-size: 14px;
}

.contacts-list-header-actions,
.lists-header-actions,
.list-contacts-header-actions,
.segmentation-header-actions,
.coupons-header-actions,
.payments-header-actions
{
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 16px;
}

.contacts-create-button
{
	background-color: rgb(244, 166, 58);
	box-shadow: rgba(77, 141, 246, 0.26) 0px 8px 18px;
	border-radius: 14px;
	padding: 14px 22px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: white;
	border: none;
	cursor: pointer;
}

.contacts-main-grid
{
	display: grid;
	grid-template-columns: auto auto auto auto;
	width: 100%;
	max-width: 1100px;
}

.contacts-stats-by-subtasks-main
{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto auto;
	max-width: 1100px;
}

.contacts-graphs-main
{
	display: grid;
	grid-template-columns: 600px auto;
	max-width: 1100px;
	column-gap: 20px;
}

.contacts-graphs-summary
{
}

.contacts-graphs-opens-statistics
{
}

.contacts-graphs-contacts-overview
{
	max-width: 1100px;
}

.contacts-grid-filters
{
	display: grid;
	grid-template-columns: auto 200px 300px 60px 60px;
}

.contacts-status-filter
{
}

.contacts-search-filter
{
	margin-block-start: 15px;
}

.contacts-grid-button
{
	padding-block-start: 23px;
}

.contacts-openers-grid-filters
{
	display: grid;
	grid-template-columns: 300px 180px auto 170px 170px 70px;
}

.contacts-openers-download
{
	padding-block-start: 15px;
}

.contacts-openers-mailing-lists
{
	margin-block-start: 10px;
}

.contacts-openers-add-to-list
{
	margin-block-start: 15px;
}

.contacts-openers-add-to-list-btn
{
	text-decoration: none;
	background-color: var(--amber-primary, #ee5f2b);
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 700;
	color: white;
	padding-inline-start: 22px;
	padding-inline-end: 22px;
	padding-block-start: 10px;
	padding-bottom: 10px;
	display: inline-block;
	margin-inline-start: 15px;
}

.contacts-openers-filter > div
{
	width: 150px;
}

.grid-hidden-col 
{
	visibility: hidden;
	width: 10px;
}

.grid-hidden-col-header
{
	width: 10px;
}

.grid-hidden-col-header span
{
	visibility: hidden;
}

.camp-sms-cc-contacts-grid-title
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 800;
	color: rgb(34, 41, 63);
	margin-bottom: 16px;
}

.camp-sms-cc-add-contacts-button
{
	background-color: var(--amber-primary, #ee5f2b);
	color: white;
	font-size: 13px;
	font-weight: 700;
	border: none;
	border-radius: 10px;
	padding: 8px 14px;
	cursor: pointer;
}


.add-contacts-to-campaign-main 
{
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 20px;
}

.add-contacts-to-campaign-title 
{
	font-weight: bold;
	height: 40px;
}

.add-contacts-to-campaign-title > div 
{
	font-weight: normal;
	font-size: 14px;
}

.camp-sms-cc-save-button-container
{
	display: flex;
	justify-content: flex-end;
	margin-block-start: 16px;
}

.camp-send-settings-main
{
	max-width: 700px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.camp-send-settings-section, .send-test-message-controls
{
	padding-inline-start: 26px;
	padding-inline-end: 26px;
}

.campaign-warning-message
{
	font-size: 18px;
	font-weight: 500;
	color: crimson;
}

.campaign-sent-warning
{
	background-color: rgba(238, 95, 43, 0.06);
	border: 1px solid rgba(238, 95, 43, 0.3);
	border-radius: 10px;
	padding: 16px 20px;
	font-size: 14px;
	color: var(--amber-title, rgb(34, 41, 63));
}

.account-warning-hidden
{
	display: none;
}

.resend-options-warning
{
	font-size: 8pt;
	color: Crimson;
}

.ab-testing-header
{
	font-size: 16px;
	font-weight: bold;
	padding-top: 15px;
}

.ab-testing-header-a
{
	color: crimson;
	font-weight: bold;
}

.ab-testing-header-b
{
	color: Blue;
	font-weight: bold;
}

.ab-testing-messages-no 
{
	width: 80px;
}

.ab-testing-mwait-minutes
{
	width: 60px;
}

.ab-testing-settings-click-rate
{
	width: 90px;
}

.repeat-send-days 
{
	width: 50px;
}

.user-register-send-days, .birthday-send-days
{
	width: 50px;
}

.camp-send-settings-section-header, .send-test-message-header
{
	font-size: 16px;
	font-weight: 800;
	color: var(--amber-title, rgb(34,41,63));
	margin-bottom: 16px;
}

.contacts-cleaning-results-grid-filters
{
	display: grid;
	grid-template-columns: auto 300px 70px;
}

.contacts-cleaning-substatus-filter
{
	width: 280px;
}

.contacts-unsubscribes-grid-filters
{
	display: grid;
	grid-template-columns: auto 170px 170px 70px;
}

.contacts-unsubscribes-filter > div
{
	width: 150px;
}

.contacts-unsubscribes-download
{
	padding-block-start: 15px;
}

.send-settings-textbox, .ab-testing-settings-textbox
{
	display: inline-block;
	margin-bottom: 0px;
}

.send-settings-textbox input 
{
	padding: 6px;
}

.send-settings-textbox .textbox-date-inputs input 
{
	padding: 3px;
}

.camp-send-settings-option .radio-button-container
{
	display: inline-block;
	margin-bottom: 5px;
}

.camp-send-settings-option .input-container
{
	display: inline-block;
}

.no-of-messages-per-day
{
	width: 70px;
}

.timing-options
{
	padding-top: 5px;
	margin-top: 15px;
	border-top: 1px solid var(--amber-border, rgb(226,232,243));
}

.send-test-message-controls .form-button
{
	padding-top: 7px;
	padding-bottom: 7px;
}

.camp-send-settings-option .dropdown-container 
{
	display: inline-block;
}

.camp-created-gradient-bar
{
	height: 6px;
	background: linear-gradient(90deg, #f06, #f90, #fc0, #0c6, #09f, #96f);
}

.camp-created-page
{
	min-height: calc(100vh - 6px);
	background-color: var(--amber-bg, #f1ebe3);
	display: flex;
	justify-content: center;
	padding-top: 60px;
	padding-bottom: 40px;
}

div.camp-created-outer
{
	background: rgb(251, 252, 254);
	border: 1px solid rgb(230, 236, 246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 60px 28px;
}

div.camp-created-card, div > div.camp-created-card
{
	max-width: 480px;
	margin: 0 auto;
	background-color: white;
	border-radius: var(--amber-card-radius, 18px);
	border: 1px solid rgb(230, 236, 246);
	padding: 36px 34px;
	text-align: center;
	height: fit-content;
	box-shadow: rgba(77, 141, 246, 0.08) 0px 10px 30px;
}

.camp-created-check-circle
{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: rgba(238, 95, 43, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.camp-created-check-icon
{
	width: 18px;
	height: 30px;
	border-bottom: 4px solid var(--amber-primary, #ee5f2b);
	border-right: 4px solid var(--amber-primary, #ee5f2b);
	transform: rotate(45deg);
	margin-top: -8px;
}

.camp-created-title
{
	font-size: 22px;
	font-weight: 800;
	color: rgb(34, 41, 63);
	margin-bottom: 8px;
}

.camp-created-subtitle
{
	font-size: 14px;
	color: rgb(154, 163, 182);
	margin-bottom: 24px;
}

.camp-created-info-box
{
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgb(246, 248, 253);
	border: 1px solid rgb(238, 242, 248);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 26px;
	text-align: start;
}

.camp-created-hidden
{
	display: none;
}

.camp-created-info-count
{
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -1px;
	color: rgb(34, 41, 63);
	min-width: 36px;
}

.camp-created-info-text
{
	flex: 1;
}

.camp-created-info-label
{
	font-size: 14px;
	font-weight: 800;
	color: rgb(34, 41, 63);
}

.camp-created-info-sublabel
{
	font-size: 12.5px;
	color: rgb(154, 163, 182);
	margin-top: 3px;
}

.camp-created-info-icon-button
{
	flex-shrink: 0;
	background-color: var(--amber-primary, #ee5f2b);
	color: white;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.camp-created-no-of-messages-zero .camp-created-info-count
{
	color: crimson;
}

.camp-created-divider
{
	height: 1px;
	background-color: var(--amber-border, rgb(226,232,243));
	margin-bottom: 20px;
}

.camp-created-button
{
	display: block;
	width: 100%;
	padding: 14px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	margin-bottom: 12px;
	cursor: pointer;
}

.camp-created-button-primary
{
	background-color: var(--amber-primary, #ee5f2b);
	color: white;
}

.camp-created-button-secondary
{
	background-color: white;
	color: var(--amber-primary, #ee5f2b);
	border: 1px solid rgb(188, 211, 247);
}

.cont-imp-st-main
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 26px 28px;
	box-shadow: rgba(238,95,43,.06) 0px 4px 18px;
	max-width: 820px;
}

.cont-imp-st-title
{
	font-size: 16px;
	font-weight: 800;
	color: rgb(34,41,63);
	margin-bottom: 10px;
}

.cont-imp-st-sub-title
{
	font-size: 13px;
	font-weight: 500;
	color: rgb(139,147,167);
}

.cont-imp-st-new-list { margin-bottom: 22px; }

.cont-imp-st-main .amber-toolbar { margin-block-end: 8px; }

.cont-imp-st-grid-top-panel
{
	grid-template-columns: auto;
}

.cont-imp-upl-main
{
	background: #fff;
	border-radius: var(--amber-card-radius, 18px);
	padding: 24px 28px;
}

.cont-imp-up-title
{
	font-weight: bold;
	padding-inline-start: 7px;
	padding-bottom: 10px;
	font-size: 18px;
}

.cont-imp-st-save-button-container
{
	margin-block-start: 20px;
}

.cont-imp-upl-save-button-container
{
	padding-top: 10px;
	padding-bottom: 10px;
}

.cont-imp-upl-file-structure
{
	display: none;
	margin-top: 15px;
	margin-bottom: 10px;
}

.cont-imp-upl-file-structure-displayed
{
	display: block;
}

.cont-imp-up-file-container
{
	max-width: 400px;
}

.contact-imp-file-struct-container
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 20px;
}

.contact-imp-file-struct-container > div
{
	border: 1px solid var(--amber-border, rgb(226,232,243));
	border-radius: 10px;
	padding: 10px;
}

.contact-imp-file-struct-title 
{
	font-weight: bold;
	margin-bottom: 10px;
}

.contact-imp-choose-field-icon
{
}

.contact-imp-choose-field-icon .contact-imp-choose-field-chosen-icon 
{
	display: none;
}

.contact-imp-field-chosen .contact-imp-choose-field-chosen-icon
{
	display: inline-block;
}

.contact-imp-field-chosen .contact-imp-choose-field-not-chosen-icon
{
	display: none;
}

.contact-imp-choose-field 
{
	display: grid;
	grid-template-columns: auto 40px;
}

.contact-imp-file-struct-colname 
{
	height: 55px;
	padding-top: 18px;
	border-bottom: 1px solid var(--amber-border, rgb(226,232,243));
	padding-inline-start: 10px;
}

.contact-imp-file-struct-colname:hover 
{
	background-color: #efefef;
}

.contact-imp-choose-field
{
	padding-top: 3px;
	height: 55px;
}

.cont-imp-upl-file-structure-comment
{
	margin-top: 10px;
	margin-bottom: 10px;
}

.contact-imp-choose-field-not-chosen-icon, .contact-imp-choose-field-chosen-icon
{
	display: inline-block;
	margin-top: 10px;
	margin-inline-start: 10px;
}

span.contact-imp-choose-field-not-chosen-icon
{
	color: crimson;
}

span.contact-imp-choose-field-chosen-icon
{
	color: var(--amber-primary, #ee5f2b);
}

.contact-imp-field-preview
{
	height: 30px;
	padding: 3px;
	border-bottom: 1px solid var(--amber-border, rgb(226,232,243));
}

.contact-imp-file-column-values-preview
{
	background-color: #fbfbfb;
}

.cont-imp-progress-dialog
{
	border: 1px solid var(--amber-border, rgb(226,232,243));
	border-radius: 10px;
	height: 250px;
	width: 400px;
	box-sizing: border-box;
	padding: 10px;
}

.cont-imp-progress-dialog-progress-text
{
	font-weight: bold;
	padding-top: 10px;
	text-align: center;
}

dialog::backdrop
{
	background-color: #f0f0f0;
	opacity: 0.5;
}

.cont-imp-progress-bar-container 
{
	padding-top: 20px;
}

.cont-imp-results 
{
	display: none;
}

.cont-imp-results-button-container
{
	padding-top: 10px;
	display: none;
}

.cont-imp-progress-dialog-finished
{
	height: 630px;
	width: 600px;
}

.cont-imp-progress-dialog-finished .cont-imp-results, .cont-imp-progress-dialog-finished .cont-imp-results-button-container
{
	display: block;
}

.cont-imp-progress-dialog-finished .cont-imp-progress-dialog-progress-text 
{
	display: none;
}

.cont-imp-results-other-errors 
{
	height: 450px;
	overflow-y: auto;
}

.cont-imp-results-critical-error 
{
	color: crimson;
	font-weight: bold;
	margin-bottom: 5px;
}

.cont-imp-results 
{
	padding-inline-start: 10px;
	padding-inline-end: 10px;
}

.cont-imp-results-success-message 
{
	font-weight: bold;
	margin-bottom: 5px;
}

.cont-imp-results-import-done
{
	margin-bottom: 5px;
}

.cont-imp-results-errors-title 
{
	font-size: 14px;
	font-weight: bold;
}

.cont-imp-results-other-errors
{
	font-size: 14px;
}

.cont-imp-unsibscribed-warning
{
	color: rgb(240,80,110);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 18px;
}

.cont-imp-unsibscribed-warning-important
{
	font-weight: 700;
}

.camp-edit-main
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius, 18px);
	box-shadow: rgba(238,95,43,.06) 0px 4px 18px;
	max-width: 1126px;
}

.camp-edit-rotation-link 
{
	display: none;
}

.camp-edit-rotation-link-displayed
{
	display: inline;
}

.camp-edit-top-reply-to > .camp-edit-top-field
{
	display: grid;
	grid-template-columns: 300px auto;
}

.camp-edit-top-rotation
{
	font-size: 14px;
	padding-inline-start: 5px;
	line-height: 14px;
	float: inline-end;
}

.camp-edit-top-field > div 
{
	margin-bottom: 0px;
}

.rotation-top 
{
	display: grid;
	grid-template-columns: auto 150px;
	column-gap: 10px;	
}

.rotation-top .form-button 
{
	margin-top: 7px;
}

.rotation-list 
{
	border-top: 1px solid var(--amber-border, rgb(226,232,243));
	padding-top: 10px;
	height: 400px;
	overflow-y: auto;
}

.rotation-list > div 
{
	display: grid;
	grid-template-columns: auto 50px;
	padding-inline-start: 5px;
	padding-inline-end: 5px;
	column-gap: 10px;
	margin-bottom: 8px;
}

.rotation-list input[type="text"]
{
	padding: 7px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--amber-border, rgb(226,232,243));
	border-radius: 5px;
}

.rotation-list .fa-button
{
	border: 1px solid crimson;
	background-color: crimson;
	color: white;
	width: 32px;
	height: 32px;
	padding: 0px;
}

.rotation-list .fa-button > span 
{
	line-height: 32px;
}

.pay-st-main
{
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 20px;
	align-items: start;
}

.payment-summary-details
{
	display: grid;
	grid-template-columns: auto 100px;
}

.payment-summary-details > div 
{
	margin-top: 10px;
}

.payment-summary-details > div > span 
{
	font-size: 16px;
}

.payment-summary-details > div > div 
{
	font-size: 14px;
	color: #333333;
}

.payment-summary-details-price
{
	text-align: end;
	font-size: 16px;
	padding-top: 8px;
}

.payment-summary-details-price-subtotal, .payment-summary-details-price-tax, .payment-summary-details-price-total
{
	padding-top: 0px;
}

.payment-button
{
	background-color: var(--amber-primary, #ee5f2b);
}

.choose-payment-package-main 
{
	margin-bottom: 20px;
	padding: 20px;
}

.choose-payment-package-title 
{
	font-size: 18px;
	font-weight: bold;
}

.choose-payment-package-subtitle 
{
	font-size: 14px;
}

.choose-payment-package-ddl-container 
{
	margin-top: 10px;
}

.choose-payment-package-plan-options-hidden 
{
	display: none;
}

.choose-payment-package-main-chosen
{
	background-color: rgba(238, 95, 43, 0.05);
	border: 1px solid var(--amber-primary, #ee5f2b);
}

.payment-summary-header
{
	font-size: 20px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--amber-border, rgb(226,232,243));
}

.payment-summary-details-subtotal, .payment-summary-details-price-subtotal
{
	border-top: 1px solid #dddddd;
	padding-top: 14px;
	color: #444444;
}

.payment-summary-details-tax, .payment-summary-details-price-tax
{
	border-bottom: 1px solid #dddddd;
	padding-bottom: 14px;
	color: #444444;
}

.payment-summary-details-total, .payment-summary-details-price-total
{
	padding-top: 5px;
	padding-bottom: 20px;
}

div.payment-summary-details-total > span
{
	font-size: 22px;
}

.payment-summary-details-price-total
{
	color: var(--amber-primary, #ee5f2b);
	font-size: 22px;
}

.payment-summary-button-container > .payment-button 
{
	width: 100%;
}

.pay-co-main
{
	display: grid;
	grid-template-columns: auto 350px;
	column-gap: 20px;
	align-items: start;
}

.pay-fn-invoice-info-hidden 
{
	display: none;
}

.pay-co-error 
{
	background-color: crimson;
	color: white;
	padding: 15px;
	font-size: 16px;
	margin: 20px;
	border-radius: 5px;
	display: none;
}

.pay-co-error-displayed
{
	display: block;
}

.pay-fn-main
{
	background: #fff;
	min-height: 70vh;
	border-radius: var(--amber-card-radius, 18px);
	padding-block-start: 100px;
	padding-block-end: 60px;
}

.pay-fn-main > div
{
	max-width: 600px;
	margin-inline: auto;
}

.pay-fn-header
{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

.pay-fn-message
{
	margin-top: 20px;
}

.pay-fn-links
{
	margin-top: 20px;
}

.pay-fn-link
{
	display: inline-block;
	color: var(--amber-primary, #ee5f2b);
	text-decoration: none;
	font-weight: 600;
	margin-block-end: 8px;
}

.pay-fn-link:hover
{
	text-decoration: underline;
}

.pay-fn-order-info, .pay-fn-invoice-info
{
	font-size: 16px;
	margin-block-end: 8px;
}

.camp-edit-top-field-hidden
{
	display: none;
}

.camp-edit-top-reply-to-controls 
{
	margin-inline-start: 5px;
}

.camp-edit-top-reply-to-controls .fa-button 
{
	height: 36px;
	width: 36px;
	vertical-align: top;
	margin-top: 5px;
}

.camp-edit-top-reply-to-controls .fa-button > span 
{
	line-height: 36px;
}

.camp-edit-reply-address-warning 
{
	position: relative;
	display: inline-block;
	padding-top: 10px;
	cursor: pointer;
}

.camp-edit-reply-address-warning > div 
{
	position: absolute;
	inset-inline-end: 0px;
	top: 35px;
	display: none;
	background-color: lightgoldenrodyellow;
	padding: 3px;
	border: 1px solid #888888;
	border-radius: 3px;
	width: 300px;
	font-size: 14px;
}

.camp-edit-reply-address-warning:hover > div
{
	display: block;
}

.camp-edit-attach-files-toolbar-button
{
	display: none;
}

.camp-edit-attach-files-toolbar-button-displayed
{
	display: inline-block;
}

.camp-edit-attach-files-header 
{
	font-weight: bold;
	margin-block: 5px;
}

.camp-edit-attach-files 
{
	position: relative;
	z-index: 1;
}

.camp-edit-attach-files > div
{
	position: absolute;
	display: none;
	width: 400px;
	background-color: white;
	top: 5px;
	padding: 10px;
	border: 1px solid var(--amber-border, rgb(226,232,243));
	box-shadow: 0px 8px 24px -6px rgba(0, 0, 0, 0.16);
	border-radius: 8px;
}

.camp-edit-attach-files-displayed > div
{
	display: block;
}

.camp-edit-attached-files-list
{
	margin-block: 5px;
}

.camp-edit-attachment-file-link
{
	text-decoration: none;
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
}

.camp-edit-attachment-file-link:hover
{
	text-decoration: underline;
}

.camp-edit-attachment-del-link
{
	color: crimson;
	text-decoration: none;
	font-size: 18px;
	line-height: 18px;
	display: inline-block;
	vertical-align: top;
}

.camp-edit-attach-btn-wrap
{
	position: relative;
	display: inline-block;
}

.camp-edit-attach-badge
{
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: var(--amber-primary, #ee5f2b);
	color: white;
	font-size: 10px;
	font-weight: bold;
	line-height: 16px;
	text-align: center;
	padding: 0 3px;
	pointer-events: none;
}

.camp-edit-attach-badge-hidden
{
	display: none;
}

.camp-edit-link-counting
{
	display: none;
}

.camp-edit-link-counting-displayed
{
	display: block;
}

.camp-edit-link-counting .dropdown-container 
{
	margin-bottom: 0px;
}

.camp-edit-dont-track-mail-links 
{
	margin-inline-start: 15px;
}

.camp-edit-standard-editor-container 
{
	display: none;
}

.camp-edit-standard-editor-container > table 
{
	margin-left: auto;
	margin-right: auto;
}

.camp-edit-standard-editor-container-displayed
{
	display: block;
}

.camp-edit-drag-drop-editor-container
{
	display: none;
}

.camp-edit-drag-drop-editor-container-displayed
{
	display: block;
}

.camp-edit-drag-drop-editor-container > div
{
}

#_NL_showOrg
{
	display: none;
}

._NL_template_name 
{
	font-size: 12px;
}

.camp-edit-control-panel
{
	padding: 18px 22px;
}

.camp-edit-control-panel > div 
{
	display: inline-block;
	margin-inline-end: 3px;
}

.camp-edit-control-panel-end
{
	display: block;
	float: inline-end;
	margin-inline-end: 0px;
}

.camp-edit-control-panel-end > div
{
	display: inline-block;
	margin-inline-end: 3px;
}

.camp-edit-control-panel > .form-button
{
	margin-inline: 5px;
}

.camp-layout-main
{
	display: grid;
	grid-template-columns: auto auto 300px;
}

.camp-layout-mail-width
{
	grid-template-columns: 100px 100px auto;
	align-items: end;
}

.border-style-opt-div
{
	display: inline-block;
	height: 20px;
	width: 100px;
	border-width: 2px;
}

.camp-layout-border-styles .radio-parent-div
{
	line-height: 35px;
}

.camp-layout-border-width > .input-container 
{
	width: 100px;
}

.camp-layout-preview 
{
	height: 400px;
	margin-inline: 20px;
	margin-block: 10px;
}


div.camp-edit-display-html
{
	position: relative;
	display: none;
}

div.camp-edit-display-html-displayed
{
	display: block;
}

div.camp-edit-display-html > div
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 16px;
	z-index: 5;
}

.camp-edit-display-html textarea
{
	width: 100%;
	box-sizing: border-box;
	height: 900px;
	background-color: white;
}

.camp-preview-top 
{
	margin-bottom: 20px;
}

.camp-preview-main iframe 
{
	border: 1px solid var(--amber-border, rgb(226,232,243));
	border-radius: 5px;
	width: 100%;
	height: 80vh;
}

.add-reply-to-comment 
{
	margin-bottom: 10px;
}

.camp-mail-cc-main
{
	background: #fff;
	border: 1px solid rgb(230,236,246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 26px 28px;
	max-width: 1000px;
	box-shadow: rgba(238,95,43,.06) 0px 4px 18px;
}

.camp-mail-cc-grid-top-panel
{
	grid-template-columns: auto;
}

.camp-mail-cc-lists-grid-title
{
	font-size: 16px;
	font-weight: 800;
	color: rgb(34,41,63);
	margin-bottom: 16px;
}

.camp-mail-cc-contacts-grid-title
{
	font-weight: bold;
	padding-inline-start: 7px;
	padding-bottom: 35px;
}

.camp-mail-cc-save-button-container
{
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: end;
}

.camp-mail-ccex-wrapper
{
	background: #fff;
	border: 1px solid rgb(230, 236, 246);
	border-radius: var(--amber-card-radius, 18px);
	padding: 26px 28px;
	box-shadow: rgba(238, 95, 43, .06) 0px 4px 18px;
}

.camp-mail-ccex-main
{
	display: grid;
	grid-template-columns: 1fr 130px 1fr;
	gap: 0 24px;
}

.camp-mail-ccex-panel-title
{
	font-size: 15px;
	font-weight: 700;
	color: rgb(34, 41, 63);
	margin-bottom: 10px;
}

.camp-mail-ccex-panel
{
	border: 1px solid rgb(218, 224, 235);
	border-top: 2px solid var(--amber-primary, #ee5f2b);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.camp-mail-ccex-panel .data-table-header > th:first-child, .camp-mail-ccex-panel .data-table-header > th:last-child
{
	border-start-start-radius: 0px;
	border-end-start-radius: 0px;
	border-start-end-radius: 0px;
	border-end-end-radius: 0px;
}

.camp-mail-ccex-search-row .textbox-with-icon
{
	display: flex;
	align-items: center;
	gap: 9px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 10px 14px;
	width: 100%;
	color: rgb(134, 140, 160);
	font-size: 14px;
	min-width: 0;
}

.camp-mail-ccex-search-row .textbox-with-icon input.textbox
{
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: var(--amber-title);
}

.camp-mail-ccex-search-row .textbox-with-icon input.textbox:focus
{
	border: none;
	box-shadow: none;
	outline: none;
}

.camp-mail-ccex-search-row .textbox-with-icon .textbox-icon
{
	position: static;
	display: flex;
	align-items: center;
	width: auto;
}

.camp-mail-ccex-source-section
{
	display: flex;
	flex-direction: column;
}

.camp-mail-ccex-source-section .camp-mail-ccex-panel
{
	flex: 1;
}

.camp-mail-ccex-search-row
{
	border-bottom: 1px solid rgb(230, 236, 246);
}

.camp-mail-ccex-transfer-col
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	padding-top: 34px;
}

.camp-mail-ccex-transfer-group
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.camp-mail-ccex-transfer-label
{
	max-width: 110px;
}

.camp-mail-ccex-transfer-title
{
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: rgb(34, 41, 63);
	margin-bottom: 2px;
}

.camp-mail-ccex-transfer-desc
{
	display: block;
	font-size: 11px;
	color: rgb(110, 120, 140);
}

.camp-mail-ccex-dest-col
{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.camp-mail-ccex-dest-section
{
	flex: 1;
	display: flex;
	flex-direction: column;
}

.camp-mail-ccex-dest-section .camp-mail-ccex-panel
{
	flex: 1;
}

.move-btn-add,
.move-btn-remove
{
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	padding: 0;
	transition: opacity 0.15s;
}

.move-btn-add:hover,
.move-btn-remove:hover
{
	opacity: 0.8;
}

.move-btn-add.move-btn-chosen
{
	background-color: rgb(59, 192, 148);
	color: #fff;
	border: none;
	box-shadow: 0 6px 16px rgba(59, 192, 148, 0.45);
}

.move-btn-remove.move-btn-chosen
{
	background-color: transparent;
	color: rgb(59, 192, 148);
	border: 2px solid rgb(59, 192, 148);
}

.move-btn-add.move-btn-suppressed
{
	background-color: rgb(224, 93, 122);
	color: #fff;
	border: none;
	box-shadow: 0 6px 16px rgba(224, 93, 122, 0.45);
}

.move-btn-remove.move-btn-suppressed
{
	background-color: transparent;
	color: rgb(224, 93, 122);
	border: 2px solid rgb(224, 93, 122);
}

.camp-mail-ccex-panel .Grid_HeaderRow th
{
	background-color: rgb(244, 246, 252);
	font-weight: 600;
	font-size: 13px;
	color: rgb(34, 41, 63);
	padding: 10px 8px;
	border-bottom: 1px solid rgb(218, 224, 235);
}

.camp-mail-ccex-panel .grid-no-data td
{
	border-bottom: none;
	color: rgb(150, 160, 180);
	font-style: italic;
	text-align: center;
}

.camp-mail-ccex-save-button-container
{
	margin-top: 16px;
	text-align: end;
}

.api-setting-edit-title
{
	font-size: 14px;
	color: rgb(58, 63, 82);
	margin-bottom: 3px;
}

.api-setting-edit-sub-title
{
	font-size: 12.5px;
	color: rgb(134, 140, 160);
	margin-bottom: 18px;
}

.camp-edit-design-button 
{
	display: none;
}

.delete-button:hover
{
	border: 1px solid var(--delete-color);
	background-color: white;
	color: var(--delete-color);
}

.add-button:hover
{
	border: 1px solid var(--add-color);
	background-color: white;
	color: var(--add-color);
}

.refresh-button:hover
{
	border: 1px solid var(--refresh-button-color);
	background-color: white;
	color: var(--refresh-button-color);
}

.move-button:hover
{
	background-color: white;
	color: var(--amber-primary, #ee5f2b);
}

.sms-traffic-report-container .col-chart-value > div
{
	background-color: var(--sms-color);
}

.camp-send-settings-button-container
{
	display: flex;
	justify-content: flex-end;
}

.toolbar-button 
{
	margin-inline-start: 5px;
	margin-inline-end: 5px;
}

.toolbar-button:hover, .toolbar-button.fa-button-two-state-button-on
{
	box-shadow: 0px 0px 0px 4px rgba(238, 95, 43, 0.18);
	border: none;
	color: var(--amber-primary, #ee5f2b);
}

.toolbar-button-container
{
	display: flex;
	align-items: center;
	position: relative;
}

.camp-edit-settings
{
	position: relative;
	z-index: 1;
}

.camp-edit-settings > div
{
	position: absolute;
	display: none;
	width: 450px;
	background-color: white;
	top: 5px;
	inset-inline-end: 0px;
	padding: 10px;
	border: 1px solid var(--amber-border, rgb(226,232,243));
	box-shadow: 0px 8px 24px -6px rgba(0, 0, 0, 0.16);
	border-radius: 8px;
}

.camp-edit-settings > div > div 
{
	margin-inline-start: 10px;
	margin-top: 10px;
}

.camp-edit-settings-displayed > div
{
	display: block;
}

.camp-edit-settings .checkbox-title
{
	font-size: 14px;
}

.camp-edit-settings .dropdown
{
	max-width: 300px;
	font-size: 14px;
}

.camp-edit-settings-main-details
{
	margin-bottom: 10px;
}

.camp-edit-drag-drop-editor-container
{
	background: rgb(245, 247, 251);
	border-radius: 14px;
	margin-inline: 20px;
	margin-bottom: 20px;
	padding: 20px;
}

#__NL_editor_blocks div._NL_control_btn
{
	background: none;
	color: rgb(139, 147, 167);
	padding: 0;
	padding-block-end: 12px;
	font-size: 13.5px;
	font-weight: 700;
}

#__NL_editor_blocks div._NL_control_btn:hover
{
	background: none;
	color: rgb(244, 166, 58);
}

#__NL_editor_blocks div._NL_control_btn._NL_active
{
	background: none;
	color: rgb(244, 166, 58);
}

#__NL_editor_blocks div._NL_control_btn:not(._NL_active)
{
	display: flex;
	align-items: center;
	gap: 8px;
	border-top: 1px solid rgb(230, 236, 246);
	padding: 10px 0;
	font-size: 13px;
	font-weight: 600;
}

#__NL_editor_blocks div._NL_control_btn:not(._NL_active):hover
{
	color: rgb(244, 166, 58);
}

._NL_control_btn_close
{
	display: none !important;
}

._NL_control_btn_open
{
	display: none !important;
}

#__NL_editor_blocks div._NL_control_btn:not(._NL_active) ._NL_control_btn_open
{
	display: inline-block !important;
	margin-inline-start: auto;
	width: 16px;
	height: 16px;
	opacity: 0.5;
	flex-shrink: 0;
}

.camp-edit-control-panel .fa-button.toolbar-button
{
	width: 36px;
	height: 36px;
	border-radius: 9px;
	border: 1px solid rgb(226, 232, 243);
	color: rgb(139, 147, 167);
	font-size: 17px;
}

.camp-edit-control-panel .fa-button.toolbar-button > span
{
	line-height: 34px;
}

.camp-edit-control-panel .fa-button.toolbar-button:hover,
.camp-edit-control-panel .fa-button.toolbar-button.fa-button-two-state-button-on
{
	color: var(--amber-primary, #ee5f2b);
	border: 1px solid rgb(226, 232, 243);
	box-shadow: 0px 0px 0px 4px rgba(238, 95, 43, 0.18);
}

.graph-chart-container > svg
{
	margin-inline: auto;
	display: block;
}

@media (max-width: 1490px)
{
	.index-counters, .index-status-containers, .index-grid-container, .pay-st-main, .pay-co-main
	{
		width: 100%;
	}

	.index-status-containers 
	{
		grid-template-columns: 350px auto auto;
	}

	.status-counter-statistics 
	{
		font-size: 22px;
	}

	.camp-edit-main 
	{
		max-width: auto;
	}
}

@media (max-width: 1460px) 
{
	.cr-status-containers, .cr-message-counters, .cr-campaign-details, .cr-campaign-name
	{
		width: 100%;
	}
}

@media (max-width: 1400px) 
{
	.status-counter-statistics
	{
		font-size: 20px;
	}

	.contacts-main-grid, .list-details-main-grid, .contacts-main-grid
	{
		width: 100%;
	}

	.site-page-header
	{
		grid-template-columns: 35% 65%;
	}
}

@media (max-width: 1390px) 
{
	.cr-status-containers
	{
		grid-template-columns: auto 360px 380px;
	}
}

.wizard-step-hidden
{
	display: none;
}

.coupons-grid-top-panel
{
	grid-template-columns: auto 300px 45px;
}

.coupon-edit-dates-row 
{
	margin-top: 10px;
}

.coupons-add-button
{
	background-color: var(--amber-primary, #ee5f2b);
	font-size: 14px;
}

.camp-created-info-icon-button-sms 
{
	background-color: var(--sms-color);
}

/* In Opera, in RTL, the arrow was on the right side; so we replace it with our own arrow (see the main css) */
select
{
	direction: ltr;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Custom arrow on the LEFT side */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	padding-right: 32px; /* make room for the arrow */
	padding-left: 8px;
}

.camp-sms-save-button-container
{
	display: flex;
	justify-content: flex-end;
	margin-block-start: 20px;
}

.camp-sms-char-info
{
	font-size: 14px;
	margin-block-start: 5px;
}

.camp-sms-char-warning
{
	font-weight: normal;
}

.camp-sms-tracking-row
{
	margin-block-start: 10px;
	margin-block-end: 5px;
}

.clean-list-settings-title
{
	font-weight: bold;
	margin-bottom: 10px;
}

.lc-history-bar-wrap
{
	display: flex;
	align-items: center;
	gap: 8px;
}

.lc-history-bar-fill
{
	height: 8px;
	background-color: #22c55e;
	border-radius: 4px;
	min-width: 2px;
}

.lc-history-bar-label
{
	font-size: 12px;
	white-space: nowrap;
}

.lc-history-frame tr:has(a.lc-history-open-btn)
{
	cursor: pointer;
}

.lc-history-frame tr.lc-row-selected
{
	background-color: rgba(238, 95, 43, 0.07);
}

.menu-item-new > .menu-item > a::after
{
	content: 'NEW';
	background-color: var(--amber-primary, #ee5f2b);
	color: #fff;
	font-size: 9px;
	font-weight: bold;
	padding: 2px 5px;
	border-radius: 4px;
	margin-inline-start: 6px;
	vertical-align: middle;
	letter-spacing: 0.5px;
}

/* ListCleaning page layout */
.lc-page-container
{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lc-form-and-status-row
{
	display: grid;
	column-gap: 20px;
	align-items: flex-start;
	grid-template-columns: 500px auto;
}

.lc-form-frame
{
	flex: 0 0 420px;
}

.lc-status-frame
{
	flex: 1 1 auto;
}

.lc-form-frame.lc-form-running
{
	opacity: 0.55;
	pointer-events: none;
}

.lc-form-section
{
	margin-bottom: 16px;
}

.lc-field-label
{
	font-size: 12.5px;
	color: rgb(139,147,167);
	margin-bottom: 7px;
}

.lc-page-container .sub-title
{
	font-size: 17px;
	font-weight: 800;
	color: rgb(34,41,63);
	margin-bottom: 18px;
}

.amber-card-section-title
{
	font-size: 16px;
	font-weight: 800;
	color: rgb(34, 41, 63);
	margin-bottom: 18px;
}

.acct-details-5col-grid
{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px 30px;
}

.acct-details-3col-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 30px;
}

/* Cleaning options — two-column card grid */
.lc-options-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.lc-options-grid .lc-check-option
{
	display: flex;
	align-items: center;
	gap: 8px;
	border: 2px solid var(--amber-border, rgb(226,232,243));
	border-radius: 10px;
	padding: 8px 10px;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.lc-options-grid .lc-check-option.chk-option-checked
{
	border-color: var(--amber-primary, #ee5f2b);
	background-color: rgba(238, 95, 43, 0.06);
}



/* Status panel — state-based visibility */
.lc-status-state
{
	display: none;
}

.lc-status-frame.lc-state-awaiting .lc-status-state-awaiting
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	text-align: center;
}

.lc-status-frame.lc-state-running .lc-status-state-progress
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	gap: 18px;
}

.lc-status-frame.lc-state-done .lc-status-state-done
{
	display: flex;
	align-items: stretch;
	min-height: 220px;
}

/* Done sub-states */
.lc-done-success-area,
.lc-done-error-area
{
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	text-align: center;
	gap: 12px;
}

.lc-status-state-done.lc-done-success .lc-done-success-area
{
	display: flex;
}

.lc-status-state-done.lc-done-error .lc-done-error-area
{
	display: flex;
}

/* Status big icon */
.lc-status-big-icon
{
	opacity: 0.85;
}

.lc-icon-awaiting
{
	color: #a0aec0;
}

.lc-icon-success
{
	color: var(--add-color);
}

.lc-icon-error
{
	color: var(--delete-color);
}

/* Status text */
.lc-status-state-title
{
	font-size: 17px;
	font-weight: bold;
	color: #444;
}

.lc-status-state-hint
{
	font-size: 13px;
	color: #888;
	margin-top: 4px;
	line-height: 1.5;
}

.lc-status-progress-label
{
	font-size: 15px;
	color: #555;
}

.lc-title-success
{
	color: var(--add-color);
}

.lc-title-error
{
	color: var(--delete-color);
	font-size: 14px;
	font-weight: normal;
	max-width: 280px;
}

.lc-result-open-link
{
	display: inline-block;
	margin-top: 4px;
	color: var(--amber-primary, #ee5f2b);
	text-decoration: none;
	font-size: 14px;
}

.lc-result-open-link:hover
{
	text-decoration: underline;
}

/* List Cleaning - Stats counters row */
.lc-counters-row
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 18px;
}

/* Counter card layout */
.lc-counter-card
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lc-counter-left
{
	display: flex;
	flex-direction: column;
}
.lc-counter-icon
{
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: white;
	margin-bottom: 14px;
}
.lc-counter-title
{
	font-size: 13.5px;
	color: rgb(58,63,82);
	font-weight: 700;
}
.lc-counter-subtitle
{
	font-size: 12.5px;
	color: rgb(134,140,160);
}
.lc-counter-value
{
	font-size: 30px;
	font-weight: 800;
	color: rgb(201,211,230);
}
.lc-counter-arc
{
	display: none;
}

/* ========== Toolbar context: input controls ========== */

.dropdown
{
	padding: 10px;
	font-family: inherit;
}

.amber-toolbar .input-container
{
	margin-bottom: 0;
}

.amber-toolbar .dropdown-container
{
	margin-bottom: 0;
	padding: 0;
}

.amber-toolbar .input-container-mandatory .input-title::after
{
	content: none;
}

.amber-toolbar .input-title
{
	font-size: 11px;
	color: rgb(155, 165, 185);
	margin-inline-start: 2px;
}

/* Search box: fix height via the container (the container IS the visual box) */
.amber-toolbar .textbox-with-icon
{
	height: 42px;
	box-sizing: border-box;
	padding-top: 0;
	padding-bottom: 0;
}

.amber-toolbar .dropdown
{
	height: 42px;
	box-sizing: border-box;
	font-size: 14px;
}

.amber-toolbar .input-container.textbox-date
{
	margin-bottom: 0;
}

.amber-toolbar .textbox-date-inputs
{
	height: 42px;
	box-sizing: border-box;
	padding-top: 10px;
	padding-bottom: 10px;
}

.contacts-list-removed-contact-row 
{
	font-style: italic;
}

.contacts-list-removed-contact-row .grid-link-button 
{
	font-style: normal;
}
/* =============================================
   INTEGRATIONS PAGE
   ============================================= */

.intg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 22px;
}

.intg-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--amber-border);
    border-radius: var(--amber-card-radius);
    overflow: hidden;
    box-shadow: var(--amber-card-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}

.intg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(45, 58, 120, .12);
}

.intg-band {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 0 22px;
    font-weight: 800;
    font-size: 14px;
}

.intg-band svg  { flex-shrink: 0; }
.intg-band span { flex-shrink: 0; }

.intg-band-wp  { background: #eaf2f7; color: #21759b; }
.intg-band-woo { background: #f3eefa; color: #7f54b3; }
.intg-band-el  { background: #fbeaf1; color: #92003b; }

.intg-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}

.intg-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 7px;
    margin: 0 0 9px;
}

.intg-title-row h3 {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    color: #22293f;
}

.intg-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
}

.intg-badge-ok::before   { content: "✅ "; }
.intg-badge-warn::before { content: "⚠️ "; }
.intg-badge-ok   { background: #e6f6ee; color: #1a8a5a; }
.intg-badge-warn { background: #fdf3e2; color: #c07a17; }

.intg-body p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #5b6072;
    margin: 0 0 16px;
}

.intg-note {
    font-size: 12.5px;
    line-height: 1.6;
    color: #5b6072;
    background: #fbf7f2;
    border-inline-start: 3px solid #f4a63a;
    border-radius: 8px;
    padding: 11px 13px;
    margin-bottom: 16px;
}

.intg-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.intg-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--amber-primary);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 18px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(238, 95, 43, .26);
    text-decoration: none;
}

.intg-btn-primary:hover { filter: brightness(1.05); color: #fff; }

.intg-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--amber-border);
    color: var(--amber-primary);
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
}

.intg-btn-ghost:hover { background: #fdf2ec; }

/* Developer API block */
.intg-api {
    background: #fff;
    border: 1px solid var(--amber-border);
    border-radius: var(--amber-card-radius);
    padding: 22px 26px;
    box-shadow: var(--amber-card-shadow);
}

.intg-api-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    row-gap: 14px;
}

.intg-api-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.intg-api-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #eef1f8;
    color: #3a4056;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.intg-api-title {
    font-size: 16.5px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #22293f;
}

.intg-api-desc {
    font-size: 13px;
    color: #8b93a7;
    margin: 0;
}

.intg-api-docs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.intg-btn-doc {
    border: 1px solid var(--amber-border);
    color: var(--amber-primary);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
}

.intg-btn-doc:hover { background: #fdf2ec; }

.intg-key-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    row-gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f8;
}

.intg-key-label {
    font-size: 12.5px;
    font-weight: 800;
    color: #8b93a7;
    letter-spacing: .3px;
    flex-shrink: 0;
}

.intg-key {
    flex: 1;
    min-width: 220px;
    font-family: ui-monospace, monospace;
    font-size: 13.5px;
    color: #22293f;
    background: #f5f8fd;
    border: 1px solid var(--amber-border);
    border-radius: 9px;
    padding: 11px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.intg-key-row button {
    flex-shrink: 0;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
}

.intg-btn-copy {
    border: 1px solid var(--amber-border) !important;
    background: #fff;
    color: var(--amber-primary);
}

.intg-btn-copy:hover { background: #fdf2ec; }

.intg-btn-ip {
    background: #f5f8fd;
    color: #5b6072;
}

.intg-btn-ip:hover { background: #eef2f8; }

@media (max-width: 900px) {
    .intg-grid { grid-template-columns: 1fr; }
}

/* =============================================
   WHATSAPP SETTINGS
   ============================================= */

.wa-settings-main { padding-bottom: 40px; }

/* Not connected */
.wa-not-connected { max-width: 560px; padding: 56px 0 20px; }

.wa-not-connected-icon {
    display: block;
    color: #82869b;
    margin-bottom: 20px;
}

.wa-not-connected-title {
    margin: 0 0 10px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: #22293f;
}

.wa-not-connected-body {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--amber-text-sec);
}

.wa-not-connected-note {
    margin: 0 0 26px;
    font-size: 13.5px;
    color: #82869b;
}

.wa-connect-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: var(--amber-primary);
    padding: 13px 26px;
    border-radius: 10px;
}

.wa-connect-btn:hover { background: #d94f1d; }

/* Warning banners */
.wa-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 12px;
    padding: 15px 17px;
    margin-bottom: 24px;
    max-width: 820px;
}

.wa-warning-banner--error {
    border: 1px solid #e9b4a2;
    background: #fdf0ea;
}

.wa-warning-banner-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.wa-warning-banner-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #8f2f0f;
    margin-bottom: 3px;
}

.wa-warning-banner-body {
    font-size: 13.5px;
    line-height: 1.6;
    color: #8f2f0f;
}

/* Status card */
.wa-status-card {
    max-width: 820px;
    border: 1px solid #e3dbd1;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.wa-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #e3dbd1;
}

.wa-status-phone {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
}

.wa-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.wa-status-dot--connected { background: #2e9e62; }
.wa-status-dot--low       { background: #c4441a; }
.wa-status-dot--disconnected { background: #b9bcc8; }

.wa-status-phone-num 
{
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: #22293f;
	direction: ltr;
	display: inline-block;
}

.wa-status-phone-num--muted { color: #82869b; }

.wa-connected-since {
    font-size: 13px;
    color: #82869b;
}

/* Metrics grid */
.wa-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.wa-metric { padding: 20px 22px; }

.wa-metric--bordered { border-inline-start: 1px solid #e3dbd1; }

.wa-metric-label {
    font-size: 12px;
    font-weight: 700;
    color: #82869b;
    margin-bottom: 8px;
}

.wa-metric-value-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.wa-quality-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wa-quality-dot--high { background: #2e9e62; }
.wa-quality-dot--low  { background: #c4441a; }

.wa-metric-value {
    font-size: 19px;
    font-weight: 800;
    color: #22293f;
    font-variant-numeric: tabular-nums;
}

.wa-metric-value--green { color: #1f7a4c; }
.wa-metric-value--red   { color: #c4441a; }

.wa-metric-value-of {
    font-size: 14px;
    font-weight: 600;
    color: #82869b;
}

.wa-metric-note {
    font-size: 12.5px;
    color: #82869b;
    margin-top: 6px;
}

.wa-metric-bar-wrap {
    height: 5px;
    border-radius: 99px;
    background: #efe7dc;
    margin-top: 10px;
    overflow: hidden;
}

.wa-metric-bar-fill {
    height: 100%;
    background: var(--amber-primary);
    border-radius: 99px;
    width: 0;
    transition: width .3s ease;
}

/* Disconnected card */
.wa-disconnected-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 820px;
    border: 1px solid #e3dbd1;
    border-radius: 14px;
    background: #fff;
    padding: 20px 22px;
}

.wa-disconnected-meta {
    font-size: 13px;
    color: #82869b;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.wa-reconnect-btn {
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: var(--amber-primary);
    padding: 12px 22px;
    border-radius: 10px;
}

.wa-reconnect-btn:hover
{
	background: #d94f1d;
}

@media (max-width: 680px)
{
	.wa-metrics-grid
	{
		grid-template-columns: 1fr;
	}

	.wa-metric--bordered
	{
		border-inline-start: none;
		border-top: 1px solid #e3dbd1;
	}

	.wa-disconnected-card
	{
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── WhatsApp template status colors (single source of truth) ── */
.wa-template-row--active          { --wa-status-color: #2e9e62; }
.wa-template-row--approved        { --wa-status-color: #2563eb; }
.wa-template-row--draft           { --wa-status-color: #94a3b8; }
.wa-template-row--pendingapproval { --wa-status-color: #d97706; }
.wa-template-row--rejected        { --wa-status-color: #c4441a; }

.wa-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wa-status-color);
    font-weight: 500;
}

.wa-status-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wa-status-color);
    flex-shrink: 0;
}

/* ── WhatsApp template name column ── */
.wa-template-name-link
{
	display: block;
	font-family: 'Courier New', Courier, monospace;
	font-weight: 600;
	color: var(--amber-text-primary);
	text-decoration: none;
	font-size: 12px;
}

.wa-template-name-link:hover
{
	text-decoration: underline;
}

.wa-template-body-preview
{
	margin-top: 3px;
	font-size: 12px;
	color: var(--amber-text-secondary);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wa-template-rejection-reason
{
	display: none;
	margin-top: 6px;
	font-size: 12px;
	padding: 5px 9px;
	border-radius: 4px;
	background: #fef2f2;
	border-inline-start: 3px solid var(--wa-status-color);
}

.wa-template-rejection-label
{
	display: block;
	font-weight: 600;
	color: var(--wa-status-color);
	margin-bottom: 2px;
}

.wa-template-row--rejected .wa-template-rejection-reason
{
	display: block;
}

/* ── WhatsApp template status filter pills ── */
.wa-status-filters
{
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding-bottom: 7px;
}

.wa-status-filter-btn
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 15px;
	border-radius: 20px;
	border: 1px solid var(--amber-border);
	background: transparent;
	color: var(--amber-text-primary);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wa-status-filter-btn:hover { border-color: var(--amber-primary); color: var(--amber-primary); }

.wa-status-filter-btn--active
{
	background: var(--amber-primary);
	border-color: var(--amber-primary);
	color: #fff;
}

.wa-status-filter-btn--active:hover { color: #fff; }

.wa-status-filter-count
{
	font-weight: 600;
	font-size: 11px;
	opacity: 0.7;
}

/* ── WhatsApp Template Detail ─────────────────────────────────────────────── */

.wa-template-edit-card
{
	max-width: 820px;
	padding: 28px 32px 24px;
}

.wa-template-edit-footer
{
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--amber-border);
	display: flex;
	gap: 10px;
}

.wa-field-label
{
	font-size: 13px;
	font-weight: 600;
	color: var(--amber-text-secondary);
	margin-bottom: 8px;
}

/* Status badge at top of detail page */

.wa-template-detail-status
{
	margin-bottom: 20px;
}

/* Category cards — stacked vertically */

.wa-category-note
{
	font-size: 12px;
	color: var(--amber-text-secondary);
	margin-bottom: 10px;
}

.wa-category-cards
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 600px;
}

.wa-category-card
{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 2px solid var(--amber-border);
	border-radius: 8px;
	padding: 12px 16px;
	cursor: pointer;
	transition: border-color 0.15s;
}

.wa-category-card:has(input:checked)
{
	border-color: var(--amber-primary);
	background: var(--amber-primary-bg, #fff8f0);
}

.wa-category-card .radio-button-container
{
	margin-top: 2px;
	flex-shrink: 0;
}

.wa-category-card-details { flex: 1; }

.wa-category-card-meta
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.wa-category-card-api-name
{
	font-size: 11px;
	color: var(--amber-text-secondary);
	font-family: 'Courier New', Courier, monospace;
}

.wa-category-card-price
{
	font-size: 11px;
	font-weight: 600;
	color: var(--amber-primary);
	background: var(--amber-primary-bg, #fff3ea);
	border: 1px solid var(--amber-primary);
	border-radius: 4px;
	padding: 1px 6px;
}

.wa-category-card-desc
{
	font-size: 12px;
	color: var(--amber-text-secondary);
	line-height: 1.5;
}

/* Header type buttons */

.wa-header-type-btns
{
	display: flex;
	gap: 6px;
}

.wa-header-type-btn
{
	padding: 6px 14px;
	border: 1px solid var(--amber-border);
	border-radius: 6px;
	background: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--amber-text-secondary);
	transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.wa-header-type-btn:hover { border-color: var(--amber-primary); color: var(--amber-primary); }

.wa-header-type-btn--active
{
	background: var(--amber-primary);
	border-color: var(--amber-primary);
	color: #fff;
}

.wa-header-type-btn--active:hover
{
	color: #fff;
}

.wa-body-char-counter
{
	margin-top: 4px;
	float: inline-end;
	font-size: 12px;
	color: var(--amber-text-secondary);
	display: inline-block;
	direction: ltr;
}

.wa-status-badge-caption
{
	margin-inline-end: 8px;
	font-size: 13px;
	color: var(--amber-text-secondary);
}

.wa-field-hint
{
	margin-top: 3px;
	font-size: 12px;
	color: var(--amber-text-secondary);
}

/* Variables section */

.wa-variables-section
{
}

.wa-add-variable-btn
{
	padding: 5px 12px;
	border: 1px dashed var(--amber-border);
	border-radius: 6px;
	background: transparent;
	font-size: 13px;
	color: var(--amber-primary);
	font-weight: bold;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
}

.wa-add-variable-btn:hover
{
	border-color: var(--amber-primary);
	background: var(--amber-primary-light, #fff5f0);
}

.wa-variables-note
{
	margin-top: 7px;
	margin-bottom: 7px;
	font-size: 12px;
	color: var(--amber-text-secondary);
}

.wa-variable-row
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 3px;
	padding: 10px 12px;
	border: 1px solid var(--amber-border);
	border-radius: 8px;
	background: var(--amber-bg-subtle, #fafaf9);
}

.wa-variable-badge
{
	flex-shrink: 0;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--amber-primary);
	color: #fff;
	font-size: 13px;
	font-family: monospace;
	font-weight: 600;
}

.wa-variable-desc
{
	flex: 1;
	min-width: 0;
	padding: 5px 9px;
	border: 1px solid var(--amber-border);
	border-radius: 6px;
	font-size: 13.5px;
	background: #fff;
}

.wa-variable-desc:focus
{
	outline: none;
	border-color: var(--amber-primary);
}

.wa-variable-example-wrap
{
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.wa-variable-example-label
{
	font-size: 12px;
	color: var(--amber-text-secondary);
	white-space: nowrap;
}

.wa-variable-example-input
{
	width: 160px;
	padding: 5px 9px;
	border: 1px solid var(--amber-border);
	border-radius: 6px;
	font-size: 13.5px;
	background: #fff;
}

.wa-variable-example-input:focus
{
	outline: none;
	border-color: var(--amber-primary);
}

/* Buttons section */

.wa-buttons-section
{
	padding-top: 4px;
}

.wa-buttons-header
{
	display: grid;
	align-items: baseline;
	gap: 8px;
	grid-template-columns: auto auto 1fr;
	margin-bottom: 8px;
}

.wa-buttons-subtitle
{
	font-size: 12px;
	color: var(--amber-text-secondary);
}

.wa-buttons-counter
{
	font-size: 13px;
	color: var(--amber-text-secondary);
	direction: ltr;
	text-align: right;
}

.wa-button-row
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	padding: 8px 10px;
	border: 1px solid var(--amber-border);
	border-radius: 8px;
	background: var(--amber-bg-subtle, #fafaf9);
}

.wa-btn-delete
{
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	font-size: 17px;
	color: var(--amber-text-secondary);
	cursor: pointer;
	line-height: 1;
}

.wa-btn-delete:hover
{
	background: #fee2e2;
	color: #c4441a;
}

.wa-button-text
{
	flex: 1;
	min-width: 0;
	padding: 5px 9px;
	border: 1px solid var(--amber-border);
	border-radius: 6px;
	font-size: 13.5px;
	background: #fff;
}

.wa-button-text:focus
{
	outline: none;
	border-color: var(--amber-primary);
}

.wa-button-type-label
{
	flex-shrink: 0;
	font-size: 12px;
	color: var(--amber-text-secondary);
	white-space: nowrap;
}

.wa-button-url
{
	flex: 1;
	min-width: 0;
	padding: 5px 9px;
	border: 1px solid var(--amber-border);
	border-radius: 6px;
	font-size: 13.5px;
	background: #fff;
	direction: ltr;
}

.wa-button-url:focus
{
	outline: none;
	border-color: var(--amber-primary);
}

.wa-add-button-row
{
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.wa-media-upload-section
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wa-media-file
{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: var(--amber-bg-secondary);
	border-radius: 6px;
	width: fit-content;
}

.wa-media-file-link
{
	color: var(--amber-primary);
	text-decoration: none;
	font-size: 13px;
}

.wa-media-file-link:hover
{
	text-decoration: underline;
}

.wa-media-file-del-link
{
	color: var(--amber-text-muted);
	cursor: pointer;
	line-height: 1;
}

.wa-media-file-del-link:hover
{
	color: var(--amber-danger);
}

/* ── Template page two-column layout ─────────────────────────────── */

.wa-template-page-layout
{
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.wa-template-page-layout .wa-template-edit-card
{
	flex: 1;
	min-width: 0;
}

.amber-page-body div.wa-preview-panel
{
	width: 400px;
	flex-shrink: 0;
	position: sticky;
	top: 20px;
}

.wa-preview-title
{
	font-size: 13px;
	font-weight: 600;
	color: var(--amber-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 10px;
}

/* ── Phone mockup ────────────────────────────────────────────────── */

.wa-phone-mockup
{
	border-radius: 12px;
	overflow: hidden;
}

.wa-phone-header
{
	background: #075E54;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
}

.wa-phone-avatar
{
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #128C7E;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	flex-shrink: 0;
}

.wa-phone-contact-name
{
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.wa-phone-contact-sub
{
	color: rgba(255,255,255,0.65);
	font-size: 11px;
}

.wa-phone-chat
{
	background: #E5DDD5;
	padding: 12px 10px;
	min-height: 160px;
}

.wa-message-wrap
{
	max-width: 90%;
}

/* ── Chat bubble ─────────────────────────────────────────────────── */

.wa-bubble
{
	background: #fff;
	border-radius: 8px;
	padding: 8px 10px 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.12);
	position: relative;
}

.wa-preview-header-media
{
	background: #d1d5db;
	height: 100px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b7280;
	font-size: 12px;
	margin-bottom: 6px;
}

.wa-preview-header-text
{
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 5px;
	word-break: break-word;
}

.wa-preview-body
{
	font-size: 13px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.wa-preview-footer
{
	font-size: 11px;
	color: #8696a0;
	margin-top: 4px;
}

.wa-preview-meta
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 2px;
	margin-top: 3px;
}

.wa-preview-time
{
	font-size: 11px;
	color: #8696a0;
}

.wa-preview-ticks
{
	font-size: 11px;
	color: #53bdeb;
}

.wa-preview-var
{
	color: #c0722a;
	font-weight: 500;
}

/* ── Buttons below bubble ─────────────────────────────────────────── */

.wa-preview-btns
{
	margin-top: 2px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wa-preview-btn
{
	background: #fff;
	border-radius: 8px;
	padding: 9px 12px;
	text-align: center;
	font-size: 13px;
	color: #00a5f4;
	box-shadow: 0 1px 2px rgba(0,0,0,0.12);
	word-break: break-word;
}

/* ── Preview notes ───────────────────────────────────────────────── */

.wa-preview-note
{
	margin-top: 12px;
	font-size: 12px;
	color: var(--amber-text-muted);
	line-height: 1.5;
}

.wa-preview-warning
{
	margin-top: 8px;
	font-size: 12px;
	color: var(--amber-text-secondary);
	line-height: 1.5;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--amber-bg-warning, #fff8ec);
	border-inline-start: 3px solid var(--amber-warning, #f59e0b);
}

.wa-edit-controls--disabled
{
	opacity: 0.55;
	pointer-events: none;
}

.wa-footer-buttons
{
	display: flex;
	gap: 10px;
	align-items: center;
}

.wa-send-test-btn
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 12px;
	padding: 9px 16px;
	border: 1.5px solid #25D366;
	border-radius: 8px;
	background: transparent;
	color: #128C7E;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.wa-send-test-btn:hover
{
	background: #25D366;
	color: #fff;
}
.wa-send-test-btn:disabled
{
	opacity: 0.45;
	pointer-events: none;
}

@media (max-width: 900px)
{
	.wa-template-page-layout
	{
		flex-direction: column;
	}

	.wa-preview-panel
	{
		width: 100%;
		position: static;
	}
}

.wa-body-container .input-container
{
	margin-bottom: 0px;
}

.wa-hidden
{
	display: none;
}