// Comment out this import if you don't want to use normalize
@import './bower_components/foundation/scss/normalize';

// Or selectively include components
@import "foundation/components/grid";

@import "foundation/components/buttons";
@import "foundation/components/forms";
@import "foundation/components/block-grid";
@import "foundation/components/visibility";

$green: #58AA58;
$row-height: rem-calc(46);

body {
    line-height: 1.4;
    font-family: Arial, sans-serif;

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        margin-top: rem-calc(10);
        font-family: Arvo, sans-serif;

    }
    ul {
        margin: 0;
        padding: 0;
        padding-left: rem-calc(20);
        padding-top: rem-calc(8);
    }
    p {
        margin: 0;
        margin-top: rem-calc(10);
    }
}
.container {
    @include grid-row();
    margin-top: rem-calc(10);
}
.title,
.subtitle {
    @include grid-column(12);
}
.subtitle {
    margin-bottom: rem-calc(10);
}
.about {
    @include grid-column(12);
    @media #{$medium-up} { @include grid-column(6); }
}
.profile {
    padding-left: 0;

    li {
        list-style: none;
        border-bottom: 1px solid #ccc;
        line-height: $row-height;
    }
    strong {
        display: inline-block;
        width: 30%;
        color: #4d4d4d;
    }
    .profile-value {
        display: inline-block;
        width: 70%;
        text-align: right;
    }
}
.activation,
.register-sms {
    @include grid-column(12);
    @media #{$medium-up} { @include grid-column(6); }
}

span.error {
	margin-bottom: 0;

	&.hidden {
		display: none !important;
	}
}

.activation-form {
	label {
		font-weight: bold;
		display: inline-block;
		width: 30%;
		line-height: $row-height;
		&.no-width {
			font-weight: normal;
			display: inline-block;
			width: auto;
			border-bottom: 0;
			line-height: 1;
		}
	}
	.form-row {
		border-bottom: 1px solid #ccc;
	}
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=password] {
		display: inline-block;
		width: 70%;
		background-color: white;
		border: 0;
		text-shadow: none;
		height: $row-height;
		margin: 0;
	}
	select {
		display: inline-block;
		width: 70%;
		background-color: white;
		border: 0;
		padding-left: 0;
		height: $row-height;
		outline: 0;
		margin: 0;

		&[name=day],
		&[name=month],
		&[name=year] {
			width: 23.333333333333%;
		}
	}
	input[name=zipcode],
	.area-wrap {
		width: 33.33333%;
	}
	.area-wrap {
		display: inline-block;
		padding-left: 4px;
	}
	label[for=id_newsletter] {
		border-bottom: 0;
	}
	.newsletter-text {
		display: inline-block;
		width: 70%;
		border-bottom: 0;
		height: $row-height;

		input {
			margin: 0;
			margin-right: 4px;
		}
	}
	
	.username-row {
		position: relative;
	}
	input[name=username] {
	}
	.username-check {
		position: absolute;
		pointer-events: none;
		right: 0;
		top: 0;
		width: 46px;
		height: 46px;
		z-index: 4;
		background-image: url('../img/icon-check.png');
		background-size: 50% 50%;
		background-position: center center;
		background-repeat: no-repeat;
		visibility: hidden;

		&.check {
			background-image: url('../img/icon-check.png');
			visibility: visible;
		}
		&.failed {
			background-image: url('../img/icon-failed.png');
			visibility: visible;
		}
	}
}
#id_date_of_birth_day,
#id_date_of_birth_month,
#id_date_of_birth_year {
    width: 33.333333%;
}

.btn-submit,
.button {
    font-family: Arial, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 20px;
    padding: 0.8em 1.2em;
    border: none;
    background-color: $green;
    display: inline-block;
    text-align: center;
    border-radius: 6px;
    margin: 0;

    &:hover,
    &:focus {
        background-color: lighten($green, 10%);
    }
    &:active {
        background-color: lighten($green, 10%);
    }
    &.submitted:before {
        position: absolute;
        left: 5px;
        content: ' ';
        display: block;
        width: 16px;
        height: 16px;
        margin-top: 1px;
        background-image: url('../img/spinner.gif');
    }
}

.btn-submit {
    display: block;
    width: 100%;
    margin-top: rem-calc(16);

    @media #{$medium-up} {
        display: inline-block;
        width: auto;
    }

}

footer {
    @include grid-column(12);

    text-align: left;

    .logo {
        margin-right: rem-calc(36);
    }
}

/* Confirmation*/
.confirmed {
    margin-top: 0;
    footer {
        margin-top: rem-calc(20);
        text-align: center;
    }
}
.success-wrap {
    text-align: center;
    position: relative;
    .title {
        position: absolute;
        font-size: rem-calc(16);
        top: rem-calc(32);
        color: white;
        text-shadow: 2px 2px 0 black;
        .em {
            text-transform: uppercase;
            font-size: rem-calc(72);
        }
    }
    img {
    }
    .button-wrap {
        position: absolute;
        bottom: rem-calc(32);
        left: 0;
        right: 0;
        text-align: center;
    }
}