/*!
 * WebTibo FreeGift for WooCommerce
 * @author    WebTibo <https://webtibo.com>
 * @copyright © 2026 WebTibo — Tüm hakları saklıdır.
 * @license   Proprietary — yalnızca WebTibo lisansı ile kullanılabilir. İzinsiz kopyalanamaz, dağıtılamaz, satılamaz.
 * @link      https://webtibo.com
 * WebTibo ♥ Tarafından Özenle Hazırlanmıştır.
 */
/* WebTibo FreeGift — ön yüz form stilleri */

.wtfg-wrap {
	--wtfg-color: #1aa39a;
	--wtfg-border: #d9dee3;
	--wtfg-text: #2b3138;
	--wtfg-muted: #7a838c;
	max-width: 560px;
	margin: 24px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--wtfg-text);
	box-sizing: border-box;
}

.wtfg-wrap *,
.wtfg-wrap *::before,
.wtfg-wrap *::after {
	box-sizing: border-box;
}

.wtfg-form {
	background: #fff;
	border: 1px solid var(--wtfg-border);
	border-radius: 14px;
	padding: 28px 26px 20px;
	box-shadow: 0 6px 26px rgba(20, 30, 40, 0.06);
}

/* Hero / hediye alanı */
.wtfg-hero {
	text-align: center;
	margin-bottom: 22px;
}
.wtfg-hero-img {
	max-width: 180px;
	height: auto;
	margin: 0 auto 8px;
	display: block;
}
.wtfg-hero-svg {
	display: inline-block;
	margin-bottom: 6px;
}
.wtfg-hero-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--wtfg-text);
}
.wtfg-hero-subtitle {
	font-size: 14px;
	color: var(--wtfg-muted);
	margin-top: 4px;
}

/* Progress */
.wtfg-progress {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
}
.wtfg-progress-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wtfg-border);
	transition: background 0.2s, transform 0.2s;
}
.wtfg-progress-dot.is-active {
	background: var(--wtfg-color);
	transform: scale(1.15);
}

/* Adım / başlık */
.wtfg-step-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 16px;
}

/* Alanlar */
.wtfg-field {
	margin-bottom: 18px;
}
.wtfg-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}
.wtfg-req {
	color: #e0245e;
}
.wtfg-help {
	font-size: 12px;
	color: var(--wtfg-muted);
	margin-top: 5px;
}

/* Sipariş no "What is this?" yardımcısı */
.wtfg-orderlabel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.wtfg-orderlabel .wtfg-label {
	margin-bottom: 6px;
}
.wtfg-whatis-toggle {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 12.5px;
	color: var(--wtfg-color);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.wtfg-whatis-toggle:hover {
	text-decoration: underline;
}
.wtfg-whatis-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 10px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}
.wtfg-whatis {
	background: #f3f8f7;
	border: 1px solid #d6e6e3;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 12.5px;
	color: #475259;
	line-height: 1.55;
	margin-bottom: 8px;
}
.wtfg-input,
.wtfg-select,
.wtfg-textarea {
	width: 100%;
	padding: 11px 13px;
	font-size: 15px;
	border: 1px solid var(--wtfg-border);
	border-radius: 9px;
	background: #fff;
	color: var(--wtfg-text);
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}
.wtfg-select {
	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 fill='%237a838c' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}
.wtfg-input:focus,
.wtfg-select:focus,
.wtfg-textarea:focus {
	outline: none;
	border-color: var(--wtfg-color);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wtfg-color) 18%, transparent);
}

/* Radio / checkbox seçenekleri */
.wtfg-choices {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wtfg-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 6px;
	font-size: 15px;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.12s;
}
.wtfg-choice:hover {
	background: #f6f8f9;
}
.wtfg-choice input {
	width: 17px;
	height: 17px;
	accent-color: var(--wtfg-color);
	margin: 0;
}
.wtfg-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	color: var(--wtfg-muted);
	cursor: pointer;
}
.wtfg-consent input {
	margin-top: 2px;
	accent-color: var(--wtfg-color);
}

/* Hata */
.wtfg-field.has-error .wtfg-input,
.wtfg-field.has-error .wtfg-select,
.wtfg-field.has-error .wtfg-textarea {
	border-color: #e0245e;
}
.wtfg-field-error {
	color: #e0245e;
	font-size: 12.5px;
	margin-top: 5px;
}

/* Mesaj */
.wtfg-message {
	margin: 4px 0 14px;
	padding: 11px 14px;
	border-radius: 9px;
	font-size: 14px;
	background: #fdecef;
	color: #b71540;
}
.wtfg-message.is-error {
	background: #fdecef;
	color: #b71540;
}

/* Aksiyonlar */
.wtfg-actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
.wtfg-btn {
	flex: 1;
	padding: 13px 18px;
	font-size: 15px;
	font-weight: 700;
	border: none;
	border-radius: 9px;
	cursor: pointer;
	transition: transform 0.08s, filter 0.15s, opacity 0.15s;
}
.wtfg-next,
.wtfg-submit {
	background: var(--wtfg-color);
	color: #fff;
}
.wtfg-next:hover,
.wtfg-submit:hover {
	filter: brightness(0.94);
}
.wtfg-btn:active {
	transform: translateY(1px);
}
.wtfg-btn:disabled {
	opacity: 0.6;
	cursor: default;
}
.wtfg-back {
	background: #eef1f3;
	color: var(--wtfg-text);
	flex: 0 0 auto;
	min-width: 96px;
}

/* Footer / imza */
.wtfg-footer {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid #eef1f3;
}
.wtfg-credit {
	font-size: 12px !important;
}

/* Başarı */
.wtfg-success {
	background: #fff;
	border: 1px solid var(--wtfg-border);
	border-radius: 14px;
	padding: 40px 26px 22px;
	text-align: center;
	box-shadow: 0 6px 26px rgba(20, 30, 40, 0.06);
}
.wtfg-success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--wtfg-color);
	color: #fff;
	font-size: 34px;
	line-height: 64px;
}
.wtfg-success-text {
	font-size: 16px;
	font-weight: 600;
}
.wtfg-spam-note {
	margin-top: 12px;
	padding: 10px 14px;
	background: #f3f8f7;
	border: 1px solid #d6e6e3;
	border-radius: 9px;
	font-size: 13.5px;
	color: #475259;
	line-height: 1.5;
}
.wtfg-spam-note-inline {
	margin-top: 8px;
	padding: 8px 12px;
	font-size: 12.5px;
}

.wtfg-error {
	padding: 14px;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: 9px;
	font-size: 14px;
}

/* Mobil */
@media ( max-width: 600px ) {
	.wtfg-form,
	.wtfg-success {
		padding: 22px 18px 16px;
		border-radius: 12px;
	}
	.wtfg-actions {
		flex-direction: column-reverse;
	}
	.wtfg-back {
		width: 100%;
	}
}