/* ==================================================
   CodeReplacements.com - Amember Custom CSS
   Version: 2.0
   Updated: November 18, 2025
   Description: Updated styling to match website redesign
   ================================================== */

/* ------------------------------------- 
   BASE STYLES
------------------------------------- */
body, input, select, textarea {
    color: #474747;
    font-family: Arial, 'Source Sans Pro', sans-serif;
    font-size: 16px;
    background: #f7f7f7 url("https://www.codereplacements.com/images/bg01.png");
}

.am-body {
    background: #fff;
}

/* ------------------------------------- 
   TYPOGRAPHY
------------------------------------- */
strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    color: #495057;
    font-weight: 600;
}

/* ------------------------------------- 
   LINKS
------------------------------------- */
a {
    -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    color: #37c0fb;
    text-decoration: none;
    border-bottom: dotted 1px;
}

a:hover {
    color: #2a9fd8;
    border-bottom-color: transparent;
}

/* ------------------------------------- 
   HEADER & LOGO
------------------------------------- */
#header {
    text-align: center;
    margin: 2em;
    padding: 1em 0;
}

.logo {
    font-family: Garamond, Georgia, serif;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
    display: inline-block;
    text-decoration: none;
    border: none !important;
}

/* Logo split styling - "Code" dark, "Replacements" blue */
.logo .logo-code {
    color: #495057 !important;
    text-shadow: none;
}

.logo .logo-replacements {
    color: #37c0fb !important;
    text-shadow: none;
}

/* Tagline under logo */
.logo-tagline {
    display: block;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    color: #37c0fb;
    letter-spacing: 2px;
    margin-top: 5px;
    font-weight: normal;
    opacity: 0.7;
}

/* Logo divider line */
.logo-divider {
    width: 200px;
    height: 1px;
    background-color: #37c0fb;
    opacity: 0.3;
    margin: 8px auto 0 auto;
}

/* Fallback for old single-class logo */
.logo:not(:has(.logo-code)) {
    color: #37c0fb !important;
    text-shadow: 1px 1px 0px #111;
}

/* ------------------------------------- 
   FOOTER
------------------------------------- */
#footer {
    padding: 3em 0 9em 0;
    text-align: center;
    color: #6c757d;
}

#footer .copyright {
    color: #6c757d;
    margin-top: 1.5em;
    text-align: center;
    font-size: 0.9em;
}

#footer a {
    color: #37c0fb;
    border-bottom-color: rgba(55, 192, 251, 0.3);
}

#footer a:hover {
    color: #2a9fd8;
    border-bottom-color: transparent;
}

#footer .icons {
    text-align: center;
    margin: 0;
}

/* ------------------------------------- 
   MENU & LISTS
------------------------------------- */
ul.menu {
    margin: 0 0 2em 0;
}

ul.menu li:first-child {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}

ul.icons li:first-child {
    padding-left: 0;
}

ul.icons li {
    display: inline-block;
    line-height: 1em;
    padding-left: 1.5em;
}

/* ------------------------------------- 
   ICONS
------------------------------------- */
.icon {
    position: relative;
    text-decoration: none;
}

.icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
}

.icon > .label {
    display: none;
}

.icon.major {
    text-align: center;
    cursor: default;
    background-color: #37c0fb;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
    background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
    background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
    color: white;
    border-radius: 100%;
    display: inline-block;
    width: 5em;
    height: 5em;
    line-height: 5em;
    box-shadow: 0 0 0 7px white, 0 0 0 8px #e0e0e0;
    margin: 0 0 2em 0;
}

.icon.major:before {
    font-size: 36px;
}

ul.icons li a, ul.icons li span {
    font-size: 2em;
    border: 0;
}

/* ------------------------------------- 
   BUTTONS & FORMS
------------------------------------- */
button, .btn, input[type="submit"], input[type="button"] {
    background-color: #37c0fb;
    border: none;
    color: white;
    transition: background-color 0.2s ease-in-out;
}

button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
							  background-color: #2a9fd8;
						      }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], select, textarea {
    border: 1px solid #d1dde8;
    border-radius: 4px;
    padding: 8px 12px;
    transition: border-color 0.2s ease-in-out;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="tel"]:focus, select:focus, textarea:focus {
					   border-color: #37c0fb;
					   outline: none;
				       }

/* ------------------------------------- 
   PAYMENT SYSTEM SPECIFIC
------------------------------------- */
.paypal-img {
    width: 250px;
    float: right;
}

.braintree-option__card {
    background-image: url(/include/images/ccs.png) !important;
    background-size: 300px !important;
    background-repeat: no-repeat !important;
    background-position: 98% 50% !important;
}

.am-receipt td.am-receipt-total {
    background-color: #fff;
}

/* ------------------------------------- 
   AMEMBER SPECIFIC STYLES
------------------------------------- */
.am-popup {
    max-width: 600px !important;
}

.agreement {
    font-size: 13px;
}

#am-form-login-remember {
    font-size: 12px;
    color: #999;
}

a.am-tabs-narrow-dashboard {
    display: none;
}

/* Amember tables */
.am-table {
    border-collapse: collapse;
    width: 100%;
}

.am-table th {
    background-color: #f0f5fa;
    color: #495057;
    font-weight: 600;
    padding: 12px;
    text-align: left;
}

.am-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
}

.am-table tr:hover {
    background-color: #f7f7f7;
}

/* Amember alerts/notifications */
.am-alert {
    border-radius: 4px;
    padding: 12px 15px;
    margin-bottom: 15px;
}

.am-alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.am-alert-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.am-alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.am-alert-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* ------------------------------------- 
   RESPONSIVE DESIGN
------------------------------------- */
@media only screen and (max-width: 780px) {
    #am-paysystem-braintree-desc img {
	width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    .braintree-option__card {
	background-size: 50% !important;
    }
}

@media only screen and (max-width: 500px) {
    #header {
	margin: 1em;
    }

    .logo {
	font-size: 30px !important;
    }

    .logo-tagline {
	font-size: 9px;
    }

    #footer {
	padding: 1em 1em 5em 1em;
    }
}

@media only screen and (max-width: 420px) {
    .braintree-option__card {
	background: transparent !important;
    }
}

@media only screen and (max-width: 400px) {
    .logo {
	font-size: 26px !important;
    }

    .logo-tagline {
	font-size: 8px;
	letter-spacing: 1px;
    }
}

/* ------------------------------------- 
   UTILITY CLASSES
------------------------------------- */
.text-center {
    text-align: center;
}

.text-primary {
    color: #37c0fb;
}

.text-dark {
    color: #495057;
}

.text-muted {
    color: #6c757d;
}

.mb-1 { margin-bottom: 0.5em; }
.mb-2 { margin-bottom: 1em; }
.mb-3 { margin-bottom: 1.5em; }
.mt-1 { margin-top: 0.5em; }
.mt-2 { margin-top: 1em; }
.mt-3 { margin-top: 1.5em; }