/* ==========================================================================
   Clipter signup custom styles
   Upload to: /login/application/default/views/public/css/site.css
   Survives aMember upgrades. Loads on every user page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. MAIN CONTENT PANEL
   Kills the default thin gray border line and replaces it with a clean
   rounded panel and a soft shadow. If the line is still there after this,
   inspect that element, grab its class, and send it to me.
   -------------------------------------------------------------------------- */

.am-main,
.am-body-content-wrapper,
.am-layout .am-main {
    border: none !important;
}

.am-main {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    padding: 30px 35px !important;
}


/* --------------------------------------------------------------------------
   2. FORM ROWS
   Adds breathing room between fields.
   -------------------------------------------------------------------------- */

.am-form .am-row {
    margin-bottom: 18px !important;
}

.am-form .am-element-title,
.am-form .am-row > label {
    font-weight: 600 !important;
    color: #2b2b2b !important;
}


/* --------------------------------------------------------------------------
   3. INPUTS, SELECTS, TEXTAREAS
   Covers the email, name, address, coupon, and credit card fields.
   -------------------------------------------------------------------------- */

.am-form .am-element input[type="text"],
.am-form .am-element input[type="email"],
.am-form .am-element input[type="password"],
.am-form .am-element input[type="tel"],
.am-form .am-element input[type="number"],
.am-form .am-element select,
.am-form .am-element textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #222 !important;
    background: #ffffff !important;
    border: 1px solid #d8dde3 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.am-form .am-element input::placeholder,
.am-form .am-element textarea::placeholder {
    color: #9aa3ad !important;
}


/* --------------------------------------------------------------------------
   4. FOCUS STATE
   Red accent to match the NEXT button.
   -------------------------------------------------------------------------- */

.am-form .am-element input:focus,
.am-form .am-element select:focus,
.am-form .am-element textarea:focus {
    outline: none !important;
    border-color: #d00000 !important;
    box-shadow: 0 0 0 3px rgba(208, 0, 0, 0.12) !important;
}


/* --------------------------------------------------------------------------
   5. CREDIT CARD FIELDS
   The CC number, expiry, and CVV render on the payment step after NEXT.
   These rules clean up the row so it does not look cramped.
   -------------------------------------------------------------------------- */

.am-form .am-cc-expire select,
.am-form .am-element .am-cc-expire select {
    width: auto !important;
    min-width: 90px !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

.am-form .am-cc-number input,
.am-form .am-cc-cvv input,
.am-form .am-cc-code input {
    letter-spacing: 1px !important;
}


/* --------------------------------------------------------------------------
   6. SUBMIT BUTTON
   Keeps your red button, adds a subtle hover and pointer.
   -------------------------------------------------------------------------- */

.am-form input[type="submit"],
.am-form button[type="submit"],
.am-form .am-submit {
    cursor: pointer !important;
    transition: filter .15s ease, transform .05s ease !important;
}

.am-form input[type="submit"]:hover,
.am-form button[type="submit"]:hover,
.am-form .am-submit:hover {
    filter: brightness(1.07) !important;
}

.am-form input[type="submit"]:active,
.am-form button[type="submit"]:active,
.am-form .am-submit:active {
    transform: translateY(1px) !important;
}


/* --------------------------------------------------------------------------
   7. COUPON FIELD
   Light touch so it reads as optional, not a required field.
   -------------------------------------------------------------------------- */

.am-form .am-coupon input {
    background: #fafbfc !important;
}