/*
 * 2NET Giftcard storefront. Inherits the theme's type and colours; layout only.
 * Colour overrides arrive as CSS custom properties on :root (see TNGC_Frontend::inline_css).
 */

/* ---- product page ---- */
.tngc-form { max-width: 100%; }
.tngc-section-title { margin: 1.25em 0 .6em; font-size: 1.1em; }
.tngc-subtitle { margin: 1.2em 0 .5em; font-size: .95em; font-weight: 600; }
.tngc-amount-buttons { display: flex; flex-wrap: wrap; gap: .5em; align-items: stretch; }
.tngc-amount {
	min-width: 5.5em;
	padding: .55em .9em;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1.2;
	border-radius: 3px;
}
.tngc-amount .amount { color: inherit; }
.tngc-amount.is-selected,
.tngc-amount:hover { background: var(--tngc-main, #222); color: #fff; border-color: var(--tngc-main, #222); }
.tngc-amount.is-selected .amount, .tngc-amount:hover .amount { color: #fff; }
.tngc-custom-wrap { position: relative; display: inline-flex; align-items: center; }
.tngc-custom-wrap .tngc-custom-amount { width: 9em; padding-right: 2em; min-height: 100%; }
.tngc-custom-wrap .tngc-currency { position: absolute; right: .7em; opacity: .6; pointer-events: none; }
.tngc-custom-wrap.is-selected .tngc-custom-amount { border-color: var(--tngc-main, currentColor); }
.tngc-amount-error { color: #b32d2e; margin: .5em 0 0; font-size: .9em; }
.tngc-field { display: grid; grid-template-columns: minmax(7em, 10em) 1fr; gap: .5em 1em; align-items: center; margin: 0 0 .75em; }
.tngc-field label { margin: 0; }
.tngc-field input, .tngc-field textarea { width: 100%; }
.tngc-field-message { align-items: start; }
.tngc-actions { display: flex; flex-wrap: wrap; gap: .75em; align-items: center; margin-top: 1.25em; }

@media (max-width: 600px) {
	.tngc-field { grid-template-columns: 1fr; gap: .25em; }
	.tngc-amount { flex: 1 1 calc(50% - .5em); }
	.tngc-custom-wrap { flex: 1 1 100%; }
	.tngc-custom-wrap .tngc-custom-amount { width: 100%; }
}

/* ---- preview ---- */
.tngc-preview { margin-bottom: 1em; }
.tngc-preview-card { position: relative; overflow: hidden; border-radius: 6px; }
.tngc-preview-image { display: block; width: 100%; height: auto; }
.tngc-preview-placeholder { aspect-ratio: 4 / 3; background: #e9e9e9; }
.tngc-preview-overlay {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; justify-content: space-between; align-items: flex-end; gap: 1em;
	padding: .75em 1em;
	background: linear-gradient(transparent, rgba(0,0,0,.55));
	color: #fff;
}
.tngc-preview-amount { font-size: 1.4em; font-weight: 700; }
.tngc-preview-amount .amount { color: #fff; }
.tngc-preview-meta { margin-top: .6em; font-size: .95em; }
.tngc-preview-meta p { margin: 0 0 .2em; }
.tngc-preview-message span { white-space: pre-wrap; font-style: italic; opacity: .8; }
.tngc-preview-message span:empty { display: none; }

/* ---- apply form (cart / checkout) ---- */
.tngc-apply {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 4px;
	background: var(--tngc-sec-bg, transparent);
	color: var(--tngc-sec-text, inherit);
}
.tngc-apply:hover { background: var(--tngc-sec-bg-hover, var(--tngc-sec-bg, transparent)); color: var(--tngc-sec-text-hover, var(--tngc-sec-text, inherit)); }
.tngc-apply-intro { margin: 0; }
.tngc-apply-intro a { text-decoration: underline; cursor: pointer; }
.tngc-apply-form { margin-top: .75em; }
.tngc-apply-form[hidden] { display: none; }
.tngc-apply-form p { margin: 0 0 .5em; }
.tngc-apply-row { display: flex; flex-wrap: wrap; gap: .5em; }
.tngc-apply-row input[type="text"] { flex: 1 1 14em; min-width: 0; }
.tngc-apply-button {
	background: var(--tngc-btn-bg, initial);
	color: var(--tngc-btn-text, initial);
	border-color: var(--tngc-btn-bg, initial);
}
.tngc-apply-button:hover {
	background: var(--tngc-btn-bg-hover, var(--tngc-btn-bg, initial));
	color: var(--tngc-btn-text-hover, var(--tngc-btn-text, initial));
	border-color: var(--tngc-btn-bg-hover, var(--tngc-btn-bg, initial));
}
.tngc-applied { margin: .75em 0 0; padding: 0; list-style: none; }
.tngc-applied li { display: flex; justify-content: space-between; gap: 1em; padding: .25em 0; }
.tngc-total-row .tngc-remove { margin-left: .5em; font-size: .85em; }

/* ---- my account ---- */
.tngc-account-table td, .tngc-account-table th { vertical-align: top; }
.tngc-account-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tngc-status { display: inline-block; padding: .1em .5em; border-radius: 3px; font-size: .85em; border: 1px solid currentColor; }
.tngc-status-valid { color: #1e7b34; }
.tngc-status-used, .tngc-status-expired, .tngc-status-disabled { opacity: .7; }

/* ---- date/time picker (jQuery UI ships no CSS on the storefront) ---- */
.tngc-datepicker-widget.ui-datepicker { display: none; z-index: 1000 !important; width: 19em; padding: .6em; background: #fff; color: #222; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: 14px; line-height: 1.4; }
.tngc-datepicker-widget .ui-datepicker-header { position: relative; padding: .2em 0 .6em; text-align: center; font-weight: 600; }
.tngc-datepicker-widget .ui-datepicker-prev, .tngc-datepicker-widget .ui-datepicker-next { position: absolute; top: 0; width: 1.8em; height: 1.8em; line-height: 1.8em; cursor: pointer; text-align: center; border-radius: 4px; }
.tngc-datepicker-widget .ui-datepicker-prev { left: 0; }
.tngc-datepicker-widget .ui-datepicker-next { right: 0; }
.tngc-datepicker-widget .ui-datepicker-prev:hover, .tngc-datepicker-widget .ui-datepicker-next:hover { background: rgba(0,0,0,.06); }
.tngc-datepicker-widget .ui-datepicker-prev .ui-icon, .tngc-datepicker-widget .ui-datepicker-next .ui-icon { display: block; text-indent: -9999px; overflow: hidden; }
.tngc-datepicker-widget .ui-datepicker-prev::before { content: "\2039"; font-size: 1.4em; }
.tngc-datepicker-widget .ui-datepicker-next::before { content: "\203A"; font-size: 1.4em; }
.tngc-datepicker-widget .ui-datepicker-prev::before, .tngc-datepicker-widget .ui-datepicker-next::before { position: absolute; inset: 0; line-height: 1.3em; text-indent: 0; }
.tngc-datepicker-widget table { width: 100%; border-collapse: collapse; margin: 0; font-size: .95em; }
.tngc-datepicker-widget th { padding: .3em 0; font-weight: 600; text-align: center; opacity: .7; }
.tngc-datepicker-widget td { padding: 1px; text-align: center; }
.tngc-datepicker-widget td a, .tngc-datepicker-widget td span { display: block; padding: .35em 0; text-decoration: none; color: inherit; border-radius: 4px; }
.tngc-datepicker-widget td a:hover { background: rgba(0,0,0,.07); }
.tngc-datepicker-widget td .ui-state-active { background: var(--tngc-main, #222); color: #fff; }
.tngc-datepicker-widget td .ui-state-highlight { font-weight: 700; text-decoration: underline; }
.tngc-datepicker-widget .ui-state-disabled span { opacity: .3; }
.tngc-datepicker-widget .ui-timepicker-div { border-top: 1px solid rgba(0,0,0,.1); margin-top: .5em; padding-top: .5em; }
.tngc-datepicker-widget .ui-timepicker-div dl { margin: 0; display: flex; align-items: center; gap: .4em .6em; flex-wrap: wrap; }
.tngc-datepicker-widget .ui-timepicker-div .ui_tpicker_second_label, .tngc-datepicker-widget .ui-timepicker-div .ui_tpicker_second, .tngc-datepicker-widget .ui-timepicker-div .ui_tpicker_millisec_label, .tngc-datepicker-widget .ui-timepicker-div .ui_tpicker_millisec, .tngc-datepicker-widget .ui-timepicker-div .ui_tpicker_microsec_label, .tngc-datepicker-widget .ui-timepicker-div .ui_tpicker_microsec, .tngc-datepicker-widget .ui-timepicker-div .ui_tpicker_timezone_label, .tngc-datepicker-widget .ui-timepicker-div .ui_tpicker_timezone { display: none; }
.tngc-datepicker-widget .ui-timepicker-div dt { margin: 0; font-weight: 600; }
.tngc-datepicker-widget .ui-timepicker-div dd { margin: 0; }
.tngc-datepicker-widget .ui-timepicker-div select { padding: .2em .4em; font-size: .95em; }
.tngc-datepicker-widget .ui_tpicker_time_label, .tngc-datepicker-widget .ui_tpicker_time { display: none; }
.tngc-datepicker-widget .ui-datepicker-buttonpane { display: flex; justify-content: space-between; gap: .5em; margin-top: .6em; padding-top: .5em; border-top: 1px solid rgba(0,0,0,.1); }
.tngc-datepicker-widget .ui-datepicker-buttonpane button { padding: .4em .9em; font-size: .9em; cursor: pointer; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 4px; }
.tngc-datepicker-widget .ui-datepicker-buttonpane button.ui-datepicker-close { background: var(--tngc-main, #222); color: #fff; border-color: transparent; }