/**
 * The offers dropdown in the booking page's code box, and the copy state on an
 * applied code.
 *
 * Enqueued on the booking page only. The tour page no longer prints anything
 * from includes/coupon-promo.php.
 *
 * The copy rules are keyed on [data-ct-copy] rather than on a class, because the
 * element that carries it is not always the same one: today it is the applied
 * code in .ct-book__refon, and anything else that wants to be copyable only has
 * to grow the attribute.
 *
 * @package CustomTours
 */

/* ==========================================================================
   The dropdown
   ========================================================================== */

.ct-promo {
	display: block;
	margin: 0 0 10px;
	font-family: 'Inter', sans-serif;
}

/*
 * Full width, matching the text field below it, so the two read as one control
 * with two ways in rather than as a stray select above a form.
 */
.ct-promo__select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	padding: 0 10px;
	border: 1px solid #E5E8EC;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 13.5px;
	color: #1A1A1A;
	cursor: pointer;
}

.ct-promo__select:focus-visible {
	outline: 2px solid #1689CF;
	outline-offset: 1px;
	border-color: #1689CF;
}

/*
 * "or type a code below". Said out loud because the list can only ever hold
 * coupons — a referral code belongs to a customer and cannot be enumerated on a
 * public page — so somebody holding one has to know the field still wants them.
 */
.ct-promo__or {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 500;
	color: #6B7280;
}

/* ==========================================================================
   A code that can be copied
   ========================================================================== */

/*
 * Added by the script, and only once it can actually copy. Nothing here promises
 * a control that does not exist: without JavaScript the code carries none of
 * these rules and reads as plain text, which is what it is.
 */
[data-ct-copy].is-copyable {
	cursor: pointer;
	user-select: all;

	/*
	 * The width is held open so the box does not jump when the text becomes
	 * "Copied". A code is at most 24 characters; 5em covers the ones anybody
	 * types, and a longer one simply pushes past it as before.
	 */
	min-width: 5em;
	text-align: center;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

[data-ct-copy].is-copyable:hover {
	background: #1F9D55;
	border-color: #1F9D55;
	color: #fff;
}

[data-ct-copy].is-copyable:focus-visible {
	outline: 2px solid #1F9D55;
	outline-offset: 2px;
}

/*
 * Held for a moment after a successful copy. Filled rather than outlined, so the
 * change is obvious at a glance on a phone, where there is no hover state to
 * have noticed in the first place.
 */
[data-ct-copy].is-copied {
	background: #1F9D55;
	border-color: #1F9D55;
	color: #fff;
	letter-spacing: .4px;
}


/* ==========================================================================
   The offer cards on a tour page

   Rendered by includes/coupon-tour-list.php, under the booking widget's
   buttons, following the layout the office supplied: a tinted card with the
   badge and code on one line, the value opposite it, and the description and
   the action on the line below.

   Scoped under .ct-offers / .ct-offer, every rule. This sits inside the tour
   page's booking widget, where the supplied design styles bare elements, and
   an unscoped `p` or `code` rule here would reach the itinerary.
   ========================================================================== */

.ct-offers {
	margin: 14px 0 0;
	text-align: left;
	font-family: 'Inter', sans-serif;
}

/*
 * PARENT-SCOPED, AND THAT IS WHAT MAKES IT APPLY. These three are <p>
 * elements inside .ct-itin, where the tour page sets `.ct-itin p { margin: 0 }`.
 * That selector is one class and one element, which outranks a single class —
 * so the first version of these rules, keyed on the class alone, set a margin
 * that never won and left the cards with no spacing at all.
 *
 * Adding the parent makes each one two classes, which does win, and it is the
 * honest fix: !important would have hidden the reason rather than answered it.
 */
.ct-offers .ct-offers__head {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6B7280;
}

/* ---- one card ---- */

.ct-offer {
	padding: 12px 14px;
	border: 1px solid #BCDCF0;
	border-radius: 10px;
	background: #EAF4FC;
}

.ct-offer + .ct-offer {
	margin-top: 10px;
}

/*
 * The code on the left, what it is worth opposite it.
 *
 * wrap, because this widget is narrow: a long code beside "₹2,000 / $25 off"
 * does not always fit, and squeezing them would break the code across lines.
 */
.ct-offer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 10px;
}

/* ---- the badge and the code ---- */

.ct-offer__id {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.ct-offer__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #1689CF;
	color: #fff;

	/* The row is baseline-aligned for its text; a circle has no baseline worth
	   sitting on, so it is nudged to line up with the code beside it. */
	align-self: center;
}

.ct-offer__code {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .4px;
	line-height: 1.4;
	color: #1A2332;
	text-transform: uppercase;

	/* A code is one token — breaking it across two lines makes it unreadable
	   and impossible to copy by eye. */
	white-space: nowrap;
}

.ct-offer__worth {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #1689CF;
	white-space: nowrap;
}

/* ---- the description ---- */

/*
 * Rendered only when the coupon has one, so there is no empty-state rule to
 * write here — see includes/coupon-tour-list.php.
 */
.ct-offer .ct-offer__blurb {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: #6B7280;
}

.ct-offers .ct-offers__note {
	margin: 18px 0 0;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.5;
	color: #6B7280;
}