@import "../../../../css/partials/base";

#myaccount .myaccount-content .billing-content-wrapper .billing-body {
	.add-card-content-wrapper {
		position: relative;
		background-color: #e0e0e2;

		.settings-item-section {
			.credit-card-input {
				display: block;
				width: 100%;
				box-sizing: border-box;
				height: 2.25rem;
				padding: 0.5rem 0.75rem;
				margin: 0;
				border-radius: 2px;
				box-shadow: none;
				background-color: #ffffff;
				border: 1px solid #c0c0c9;
				transition: border linear .2s, box-shadow linear .2s;
				font-size: 14px;
				line-height: 20px;
				color: #555555;
				font-family: 'Source Sans Pro', Helvetica, sans-serif;
				font-weight: normal;

				&.braintree-hosted-fields-focused {
					border-color: #2297FF;
				}

				&.monster-invalid {
					border-color: #FF3D24;
				}
			}

			.control-group {
				&.control-group-large {
					width: calc(100% - 1rem);

					&:last-child {
						margin-bottom: 0;
					}
				}

				&.control-group-small {
					width: calc(25% - 1rem);
				}

				&.control-group-hidden {
					display: none;
				}
			}
		}
	}

	.show-card-content-wrapper {
		padding-top: 0.75rem;

		.show-card-row {
			margin-bottom: 0.5rem;
		}
		.show-card-label {
			height: 20px;
			font-size: 14px;
			font-weight: normal;
			line-height: 20px;
		}
		.show-card-value {
			padding-left: 1rem;
			height: 20px;
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
		}
		.card-type {
			margin-left: 0.5rem;
		}
		.monster-button-danger {
			margin-top: 1rem;
		}
	}
}

.myaccount-creditcard-dialog, .myaccount-creditcard-dialog-no-card {
	.disclaimer-dialog-title.ui-dialog-titlebar {
		background: $white;
		padding: 1.5rem;

		.ui-dialog-title {
			font-size: 22px;
			line-height: 2rem;
			color: #333;
		}

		.svg-icon {
			float: left;
			padding-right: 1rem;
			width: 2rem;
			height: 2rem;
		}
	}

	#myaccount_creditcard_disclaimer_dialog {
		max-width: 510px;
		padding: 0 1.5rem  1.5rem 1.5rem;

		.disclaimer-dialog-notice {
			margin-bottom: 1rem;
		}

		.disclaimer-dialog-agreement {
			margin-bottom: 1rem;

			label {
				font-size: 15.4px;
				line-height: 20px;
			}

			a {
				color: $primary-color;
			}
		}

		.disclaimer-dialog-footer {
			margin-top: 2rem;

			.monster-button {
				margin-left: 0.5rem;
			}
		}
	}
}

.myaccount-creditcard-dialog .disclaimer-dialog-title.ui-dialog-titlebar .svg-icon {
	color: $warning-color;
}

.myaccount-creditcard-dialog-no-card .disclaimer-dialog-title.ui-dialog-titlebar .svg-icon {
	color: $danger-color;
}
