/* =========================================================
   CREATE TEAM
   LIGHT + SIMPLE + PROFESSIONAL STUDENT DESIGN
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

    --ct-primary: #f59a23;
    --ct-primary-dark: #e4840d;
    --ct-primary-light: #fff4e5;

    --ct-secondary: #27345a;

    --ct-white: #ffffff;

    --ct-bg: #f6f7f9;

    --ct-text: #172033;
    --ct-text-medium: #596273;
    --ct-text-light: #7b8494;

    --ct-border: #e2e6ec;
    --ct-border-light: #edf0f4;

    --ct-success: #198754;
    --ct-success-bg: #eaf7ef;

    --ct-danger: #dc3545;
    --ct-danger-bg: #fff0f1;

    --ct-shadow:
        0 8px 25px rgba(31, 41, 55, 0.07);

}


/* =========================================================
   CREATE TEAM FORM WRAPPER
   ========================================================= */

.create-team-form-wrapper {

    width: 100%;

    max-width: 650px;

    margin: 15px auto 35px;

    padding: 0;

}


/* =========================================================
   CREATE TEAM FORM
   ========================================================= */

.create-team-form {

    width: 100%;

    background: var(--ct-white);

    border: 1px solid var(--ct-border);

    border-radius: 16px;

    padding: 30px;

    box-shadow: var(--ct-shadow);

}


/* =========================================================
   FORM HEADING
   ========================================================= */

.create-team-form h2 {

    margin: 0 0 8px;

    text-align: left;

    color: var(--ct-secondary);

    font-size: 23px;

    line-height: 1.35;

    font-weight: 700;

}


/* Small heading underline/accent */

.create-team-form h2::after {

    content: "";

    display: block;

    width: 45px;

    height: 3px;

    margin-top: 10px;

    border-radius: 10px;

    background: var(--ct-primary);

}


/* =========================================================
   INFO MESSAGE
   ========================================================= */

.info-message {

    margin: 18px 0 24px;

    padding: 13px 15px;

    background: var(--ct-primary-light);

    border: 1px solid #f4d29e;

    border-left: 4px solid var(--ct-primary);

    border-radius: 9px;

    color: #76501e;

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================================
   LABEL
   ========================================================= */

.create-team-form label {

    display: block;

    margin-bottom: 7px;

    color: var(--ct-text);

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   INPUT
   ========================================================= */

.create-team-form input {

    width: 100%;

    min-height: 46px;

    padding: 11px 13px;

    margin-bottom: 18px;

    background: #ffffff;

    border: 1px solid var(--ct-border);

    border-radius: 8px;

    color: var(--ct-text);

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.create-team-form input::placeholder {

    color: #9ba3af;

}


.create-team-form input:hover {

    border-color: #cbd1da;

}


.create-team-form input:focus {

    background: #ffffff;

    border-color: var(--ct-primary);

    box-shadow:
        0 0 0 3px rgba(245, 154, 35, 0.12);

}


/* =========================================================
   MEMBER ROW
   ========================================================= */

.create-member-row {

    display: flex;

    align-items: center;

    gap: 9px;

    width: 100%;

    margin-bottom: 12px;

}


.create-member-row input {

    flex: 1;

    margin-bottom: 0;

}


/* =========================================================
   REMOVE MEMBER BUTTON
   ========================================================= */

.create-member-row button {

    min-height: 42px;

    padding: 8px 13px;

    border: 1px solid #f0c6ca;

    border-radius: 8px;

    background: var(--ct-danger-bg);

    color: var(--ct-danger);

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;

}


.create-member-row button:hover {

    background: var(--ct-danger);

    border-color: var(--ct-danger);

    color: #ffffff;

}


/* =========================================================
   ADD MEMBER BUTTON
   ========================================================= */

.add-member-btn {

    width: 100%;

    min-height: 44px;

    margin-bottom: 14px;

    padding: 10px 14px;

    border: 1px dashed #e7b76b;

    border-radius: 8px;

    background: var(--ct-primary-light);

    color: var(--ct-primary-dark);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

}


.add-member-btn:hover {

    background: #ffebcf;

    border-color: var(--ct-primary);

    transform: translateY(-1px);

}


/* =========================================================
   CREATE BUTTON
   ========================================================= */

.create-btn {

    width: 100%;

    min-height: 46px;

    padding: 11px 18px;

    border: 1px solid var(--ct-primary);

    border-radius: 8px;

    background: var(--ct-primary);

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.create-btn:hover {

    background: var(--ct-primary-dark);

    border-color: var(--ct-primary-dark);

    transform: translateY(-1px);

    box-shadow:
        0 6px 15px rgba(245, 154, 35, 0.20);

}


.create-btn:active {

    transform: translateY(0);

}


/* =========================================================
   CREATE BUTTON DISABLED
   ========================================================= */

.create-btn:disabled,
.create-btn.disabled {

    background: #c9cdd3 !important;

    border-color: #c9cdd3 !important;

    color: #ffffff !important;

    cursor: not-allowed !important;

    opacity: 0.75;

    transform: none !important;

    box-shadow: none !important;

}


/* =========================================================
   MESSAGE BOX
   ========================================================= */

.message {

    width: 100%;

    margin-bottom: 16px;

    padding: 11px 13px;

    border-radius: 8px;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 500;

    display: none;

}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.message.success {

    display: block;

    background: var(--ct-success-bg);

    color: #176b3a;

    border: 1px solid #c6e6d2;

}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.message.error {

    display: block;

    background: var(--ct-danger-bg);

    color: #b02a37;

    border: 1px solid #f0c5ca;

}


/* =========================================================
   LOCKED FORM
   ========================================================= */

.form-locked {

    opacity: 0.68;

    pointer-events: none;

    filter: grayscale(20%);

}


.form-locked .create-btn {

    background: #aeb4bd !important;

    border-color: #aeb4bd !important;

    color: #ffffff !important;

    cursor: not-allowed !important;

    box-shadow: none !important;

}


/* =========================================================
   SUCCESS / TEAM CREATED CARD
   This is used by lockCreateTeamUI()
   ========================================================= */

.create-team-form-wrapper .team-welcome-card {

    width: 100%;

    background: var(--ct-white);

    border: 1px solid var(--ct-border);

    border-radius: 16px;

    padding: 30px;

    box-shadow: var(--ct-shadow);

    text-align: left;

}


/* =========================================================
   TEAM CREATED HEADING
   ========================================================= */

.create-team-form-wrapper .team-welcome-card h2 {

    margin: 0 0 8px;

    color: var(--ct-secondary);

    font-size: 22px;

    font-weight: 700;

}


/* =========================================================
   TEAM CREATED TEXT
   ========================================================= */

.create-team-form-wrapper .team-welcome-card p {

    margin: 0 0 20px;

    color: var(--ct-text-medium);

    font-size: 13px;

}


/* =========================================================
   VIEW MY TEAM BUTTON
   ========================================================= */

.create-team-form-wrapper .team-welcome-card .create-btn {

    width: auto;

    min-width: 150px;

}


/* =========================================================
   LOADING STATE
   ========================================================= */

.create-btn.loading {

    position: relative;

    pointer-events: none;

}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 768px) {

    .create-team-form-wrapper {

        max-width: 100%;

        margin: 10px auto 25px;

    }


    .create-team-form {

        padding: 25px;

        border-radius: 14px;

    }


    .create-team-form h2 {

        font-size: 21px;

    }


    .info-message {

        font-size: 12px;

    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .create-team-form {

        padding: 20px;

        border-radius: 12px;

    }


    .create-team-form h2 {

        font-size: 19px;

    }


    .create-team-form label {

        font-size: 12px;

    }


    .create-team-form input {

        min-height: 44px;

        font-size: 13px;

    }


    .create-btn {

        min-height: 44px;

    }


    .info-message {

        padding: 11px 12px;

        margin: 15px 0 20px;

    }


    .create-team-form-wrapper .team-welcome-card {

        padding: 21px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .create-team-form-wrapper {

        margin-top: 5px;

    }


    .create-team-form {

        padding: 18px;

    }


    .create-member-row {

        flex-direction: column;

        align-items: stretch;

    }


    .create-member-row input {

        width: 100%;

    }


    .create-member-row button {

        width: 100%;

    }


    .add-member-btn {

        min-height: 43px;

    }


    .create-btn {

        min-height: 44px;

        font-size: 12px;

    }


    .message {

        font-size: 12px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .create-team-form {

        padding: 15px;

    }


    .create-team-form h2 {

        font-size: 18px;

    }


    .info-message {

        font-size: 11px;

    }

}