/**
 * FC Address Book Blocks Styles
 *
 * Styles for the address book selector in WooCommerce Checkout Blocks.
 *
 * @package FC_Address_Book_Blocks
 */

/* Address Book Container */
.fc-address-book-container {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e0e0e0;
	display: none; /* Hidden by default, shown when edit button is clicked */
}

/* Address Selector */
.fc-address-book-selector {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fc-address-book-selector__label {
	font-weight: 600;
	font-size: 14px;
	color: #333;
	margin-bottom: 4px;
}

.fc-address-book-selector__dropdown {
	position: relative;
}

.fc-address-book-selector__select {
	width: 100%;
	padding: 12px 36px 12px 14px;
	font-size: 14px;
	line-height: 1.4;
	color: #333;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.825L0.45 3.275 1.275 2.45 6 7.175 10.725 2.45 11.55 3.275z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fc-address-book-selector__select:hover {
	border-color: #bbb;
}

.fc-address-book-selector__select:focus {
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
	outline: none;
}

.fc-address-book-selector__select option {
	padding: 8px 12px;
}

/* Primary address indicator */
.fc-address-book-selector__select option[data-primary="true"]::after {
	content: " (Primary)";
	color: #666;
	font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.fc-address-book-selector__select {
		font-size: 16px; /* Prevent zoom on iOS */
		padding: 14px 40px 14px 14px;
	}
}

/* WooCommerce Blocks specific overrides */
.wc-block-checkout .fc-address-book-container {
	margin-top: 0;
}

.wc-block-checkout .fc-address-book-selector__label {
	margin-bottom: 8px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.fc-address-book-selector__select {
		background-color: #1a1a1a;
		border-color: #444;
		color: #e0e0e0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M6 8.825L0.45 3.275 1.275 2.45 6 7.175 10.725 2.45 11.55 3.275z'/%3E%3C/svg%3E");
	}

	.fc-address-book-selector__select:hover {
		border-color: #666;
	}

	.fc-address-book-selector__label {
		color: #e0e0e0;
	}

	.fc-address-book-container {
		border-bottom-color: #444;
	}
}

/* ACH Blocks Payment Form Styles */
.fc-ach-blocks-payment-form {
	padding: 15px 0;
}

.fc-ach-blocks-description {
	margin-bottom: 15px;
	color: #666;
}

.fc-ach-blocks-saved-methods {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e0e0e0;
}

.fc-ach-blocks-saved-title {
	font-weight: 600;
	margin-bottom: 12px;
}

.fc-ach-blocks-token-option {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	margin-bottom: 8px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fafafa;
	cursor: pointer;
	transition: all 0.2s ease;
}

.fc-ach-blocks-token-option:hover {
	border-color: #0073aa;
	background: #f5f9fc;
}

.fc-ach-blocks-token-option.selected {
	border-color: #0073aa;
	background: #f0f7fc;
}

.fc-ach-blocks-token-option input[type="radio"] {
	margin-right: 12px;
}

.fc-ach-blocks-token-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fc-ach-blocks-default-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	background: #0073aa;
	color: #fff;
	border-radius: 3px;
}

.fc-ach-blocks-new-option {
	background: #fff;
	border-style: dashed;
}

.fc-ach-blocks-new-form {
	padding-top: 5px;
}

.fc-ach-blocks-form-title {
	font-weight: 600;
	margin-bottom: 15px;
}

.fc-ach-blocks-field {
	margin-bottom: 15px;
}

.fc-ach-blocks-field label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.fc-ach-blocks-field input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
}

.fc-ach-blocks-field input[type="text"]:focus {
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
	outline: none;
}

.fc-ach-blocks-field.has-error input {
	border-color: #dc3232;
}

.fc-ach-blocks-field .required {
	color: #dc3232;
}

.fc-ach-blocks-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #888;
}

.fc-ach-blocks-error {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #dc3232;
}

.fc-ach-blocks-numbers-row {
	display: flex;
	gap: 15px;
}

.fc-ach-blocks-numbers-row .fc-ach-blocks-field {
	flex: 1;
}

@media (max-width: 480px) {
	.fc-ach-blocks-numbers-row {
		flex-direction: column;
	}
}

.fc-ach-blocks-account-type-tabs {
	display: flex;
	gap: 0;
	background: #f0f0f0;
	border-radius: 6px;
	padding: 4px;
}

.fc-ach-blocks-type-tab {
	flex: 1;
	padding: 10px 16px;
	border: none;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.fc-ach-blocks-type-tab:hover {
	color: #333;
}

.fc-ach-blocks-type-tab.active {
	background: #fff;
	color: #0073aa;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fc-ach-blocks-save-field label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.fc-ach-blocks-save-field input[type="checkbox"] {
	margin-right: 10px;
}

.fc-ach-blocks-security-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 15px;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	margin-top: 20px;
	font-size: 13px;
	color: #666;
}

.fc-ach-blocks-lock-icon {
	flex-shrink: 0;
}

/* ==========================================================================
   Address Nickname Badge
   ========================================================================== */

.fc-address-nickname-badge {
	display: inline-block;
	padding: 4px 10px;
	background: linear-gradient(135deg, #6bc9d3 0%, #5ab8c2 100%);
	color: #fff;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
	box-shadow: 0 1px 3px rgba(107, 201, 211, 0.3);
}

/* Ensure the badge appears on its own line in formatted addresses */
.woocommerce-Address address .fc-address-nickname-badge,
.wc-address-book-address address .fc-address-nickname-badge,
.woocommerce-address-fields address .fc-address-nickname-badge,
.woocommerce-address-wrapper address .fc-address-nickname-badge {
	display: block;
	width: fit-content;
	margin-bottom: 8px;
}

/* Edit address page - ensure badge displays correctly */
.woocommerce-address-fields .fc-address-nickname-badge,
.woocommerce-address-wrapper .fc-address-nickname-badge {
	margin-bottom: 12px;
}

/* Dark mode support for badge */
@media (prefers-color-scheme: dark) {
	.fc-address-nickname-badge {
		background: linear-gradient(135deg, #5ab8c2 0%, #4aa7b1 100%);
	}
}

/* ==========================================================================
   My Account Address Book Styling
   ========================================================================== */

/* Style address book entries */
.wc-address-book-address {
	position: relative;
	padding: 20px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-address-book-address:hover {
	border-color: #6bc9d3;
	box-shadow: 0 2px 8px rgba(107, 201, 211, 0.15);
}

.wc-address-book-address address {
	font-style: normal;
	line-height: 1.6;
	color: #333;
}

/* Meta actions */
.wc-address-book-meta {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f0f0f0;
}

.wc-address-book-meta a {
	font-size: 13px;
	color: #666;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.wc-address-book-meta a:hover {
	color: #6bc9d3;
}

.wc-address-book-meta .wc-address-book-edit {
	color: #0073aa;
}

.wc-address-book-meta .wc-address-book-delete {
	color: #a00;
}

.wc-address-book-meta .wc-address-book-delete:hover {
	color: #dc3232;
}

.wc-address-book-meta .wc-address-book-make-primary {
	color: #6bc9d3;
}

/* ==========================================================================
   Add Payment Method Page - ACH Form Styling
   ========================================================================== */

/* ACH Form on add-payment-method page */
.woocommerce-add-payment-method .fc-ach-form-wrapper,
#add_payment_method .fc-ach-form-wrapper {
	max-width: 600px;
	margin: 0 auto;
	padding: 25px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
}

.woocommerce-add-payment-method .fc-ach-form-title,
#add_payment_method .fc-ach-form-title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e0e0e0;
}

/* Payment method selection styling */
.woocommerce-add-payment-method .wc_payment_method,
#add_payment_method .wc_payment_method {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 16px;
	overflow: hidden;
}

.woocommerce-add-payment-method .wc_payment_method label,
#add_payment_method .wc_payment_method label {
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	background: #fafafa;
	transition: background-color 0.2s ease;
}

.woocommerce-add-payment-method .wc_payment_method label:hover,
#add_payment_method .wc_payment_method label:hover {
	background: #f5f5f5;
}

.woocommerce-add-payment-method .wc_payment_method.payment_method_fc_ach_manual label,
#add_payment_method .wc_payment_method.payment_method_fc_ach_manual label {
	font-weight: 500;
}

/* ACH form fields */
.woocommerce-add-payment-method .payment_box.payment_method_fc_ach_manual,
#add_payment_method .payment_box.payment_method_fc_ach_manual {
	padding: 20px;
	background: #fff;
	border-top: 1px solid #e0e0e0;
}

.woocommerce-add-payment-method .fc-ach-field,
#add_payment_method .fc-ach-field {
	margin-bottom: 18px;
}

.woocommerce-add-payment-method .fc-ach-field label,
#add_payment_method .fc-ach-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: 14px;
	color: #333;
}

.woocommerce-add-payment-method .fc-ach-field input[type="text"],
#add_payment_method .fc-ach-field input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-add-payment-method .fc-ach-field input[type="text"]:focus,
#add_payment_method .fc-ach-field input[type="text"]:focus {
	border-color: #6bc9d3;
	box-shadow: 0 0 0 3px rgba(107, 201, 211, 0.15);
	outline: none;
}

/* Account type tabs */
.woocommerce-add-payment-method .fc-ach-account-type-tabs,
#add_payment_method .fc-ach-account-type-tabs {
	display: flex;
	gap: 0;
	background: #f0f0f0;
	border-radius: 6px;
	padding: 4px;
	margin-bottom: 18px;
}

.woocommerce-add-payment-method .fc-ach-type-tab,
#add_payment_method .fc-ach-type-tab {
	flex: 1;
	padding: 12px 16px;
	border: none;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.woocommerce-add-payment-method .fc-ach-type-tab:hover,
#add_payment_method .fc-ach-type-tab:hover {
	color: #333;
}

.woocommerce-add-payment-method .fc-ach-type-tab.active,
#add_payment_method .fc-ach-type-tab.active {
	background: #fff;
	color: #6bc9d3;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Numbers row - routing and account side by side */
.woocommerce-add-payment-method .fc-ach-numbers-row,
#add_payment_method .fc-ach-numbers-row {
	display: flex;
	gap: 16px;
}

.woocommerce-add-payment-method .fc-ach-numbers-row .fc-ach-field,
#add_payment_method .fc-ach-numbers-row .fc-ach-field {
	flex: 1;
}

@media (max-width: 480px) {
	.woocommerce-add-payment-method .fc-ach-numbers-row,
	#add_payment_method .fc-ach-numbers-row {
		flex-direction: column;
	}
}

/* Field hints */
.woocommerce-add-payment-method .fc-ach-hint,
#add_payment_method .fc-ach-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #888;
}

/* Security notice */
.woocommerce-add-payment-method .fc-ach-security-notice,
#add_payment_method .fc-ach-security-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	margin-top: 20px;
	font-size: 13px;
	color: #666;
}

.woocommerce-add-payment-method .fc-ach-security-notice svg,
#add_payment_method .fc-ach-security-notice svg {
	flex-shrink: 0;
	color: #6bc9d3;
}

/* Submit button styling */
.woocommerce-add-payment-method #place_order,
#add_payment_method #place_order {
	background: linear-gradient(135deg, #6bc9d3 0%, #5ab8c2 100%);
	border: none;
	color: #fff;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-add-payment-method #place_order:hover,
#add_payment_method #place_order:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(107, 201, 211, 0.3);
}