/* =========================
   AYANO COMMENT WIDGET
   DARK + LIGHT MODE THEME
   ========================= */

/* MAIN WRAPPER */
#c_widget {
    width: 580px;
    margin-top: 4px;

    padding: 10px;

    background: linear-gradient(180deg,#010101 70%, #090B0D 100%);
    border: 1px double #1a1d23;

    box-shadow:
        inset 0 0 0 2px #010101,
        inset 0 0 0 3px #1a1d23;

    color: #5c6f91;

    font-family: 'Alice', serif;

    text-shadow: 0 0 6px #282b36;
}

/* TITLE */
#c_widgetTitle {
    margin: 0 0 12px 0;

    font-size: 18px;
    font-style: italic;
    font-weight: normal;

    color: #5c6f91;

    text-shadow:
        0 0 6px rgba(140,170,255,0.18);

    letter-spacing: 1px;

    position: relative;
}

#c_widgetTitle::after {
    content: "";

    display: block;

    width: 100%;
    height: 1px;

    margin-top: 6px;

    background:
        linear-gradient(
            to right,
            transparent,
            #5c6f91,
            transparent
        );

    opacity: 0.6;
}

/* FORM */
#c_form {
    margin-bottom: 18px;
}

.c-inputWrapper {
    margin-bottom: 8px;
}

.c-label {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;
    letter-spacing: 1px;

    color: #737c94;

    font-family: 'Eurostile', sans-serif;
}

/* INPUTS */
.c-input {
    width: 100%;

    padding: 6px;

    box-sizing: border-box;

    background: #010101;

    border: 1px solid #1a1d23;

    color: #5c6f91;

    font-size: 12px;

    font-family: 'Eurostile', sans-serif;
}

.c-input:focus {
    outline: none;

    border-color: #5c6f91;

    box-shadow:
        0 0 6px rgba(92,111,145,0.3);
}

/* TEXTAREA */
.c-textInput {
    resize: vertical;
    min-height: 80px;
}

/* BUTTONS */
#c_submitButton,
.c-replyButton,
.c-expandButton,
.c-paginationButton {
    padding: 6px 10px;

    background:
        linear-gradient(
            180deg,
            #010101 20%,
            #090B0D 100%
        );

    border: 1px double #1a1d23;

    box-shadow:
        inset 0 0 0 2px #010101,
        inset 0 0 0 3px #1a1d23;

    color: #5c6f91;

    font-family: 'Alice', serif;

    cursor: pointer;

    text-shadow:
        0 0 6px #282b36;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

#c_submitButton {
    width: 100%;
}

#c_submitButton:hover,
.c-replyButton:hover,
.c-expandButton:hover,
.c-paginationButton:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* COMMENT */
.c-comment,
.c-reply {
    margin-top: 12px;

    padding: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(7,9,12,0.85),
            rgba(10,12,15,0.95)
        );

    border-top: 1px dotted #aab3c2;
}

/* REPLY */
.c-reply {
    margin-left: 18px;

    border-left: 1px dotted #aab3c2;

    padding-left: 12px;
}

/* NAME */
.c-name {
    margin: 0;

    font-size: 14px;
    font-weight: normal;
    font-style: italic;

    color: #cfd6e6;

    letter-spacing: 0.5px;
}

/* TIMESTAMP */
.c-timestamp {
    display: inline-block;

    margin-top: 2px;
    margin-right: 8px;

    font-size: 10px;

    opacity: 0.7;

    color: #737c94;

    font-family: 'Eurostile', sans-serif;
}

/* WEBSITE LINK */
.c-site {
    font-size: 10px;

    color: #5c6f91;

    text-decoration: underline dotted;

    font-family: 'Eurostile', sans-serif;
}

/* COMMENT TEXT */
.c-text {
    margin-top: 8px;

    line-height: 1.7;

    font-size: 13px;

    color: #5c6f91;

    letter-spacing: 0.2px;
}

/* REPLY BUTTON */
.c-replyButton {
    margin-top: 8px;

    font-size: 11px;
}

/* PAGINATION */
#c_pagination {
    display: flex;

    justify-content: space-between;

    margin-top: 18px;
}

/* REPLYING TEXT */
#c_replyingText {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;

    color: #737c94;

    font-family: 'Eurostile', sans-serif;
}

/* =========================
   LIGHT MODE
   ========================= */

body.light-mode #c_widget {

background: linear-gradient(
    0deg,
    rgba(245,240,241,1) 0%,
    rgba(254,254,254,1) 100%
);

    border: 1px solid #D9CBCD;

    outline: 1px solid #fff;
    outline-offset: -2px;

    box-shadow:
        inset 0 0 0 1px #ffffff,
        inset 0 0 0 2px #EDE7E8;

    color: #8e646c;

    text-shadow: none;
}

/* TITLE */
body.light-mode #c_widgetTitle {
    color: #8e646c;

    text-shadow:
        0 0 4px rgba(164,111,121,0.08);
}

body.light-mode #c_widgetTitle::after {
    background:
        linear-gradient(
            to right,
            transparent,
            #bf9aa0,
            transparent
        );
}

/* LABELS */
body.light-mode .c-label {
    color: #bf9aa0;
}

/* INPUTS */
body.light-mode .c-input {
    background: #fff;

    border: 1px solid #d8cdd0;

    color: #8e646c;
}

body.light-mode .c-input:focus {
    border-color: #bf9aa0;

    box-shadow:
        0 0 6px rgba(191,154,160,0.25);
}

/* BUTTONS */
body.light-mode #c_submitButton,
body.light-mode .c-replyButton,
body.light-mode .c-expandButton,
body.light-mode .c-paginationButton {

background: linear-gradient(
    0deg,
    rgba(245,240,241,1) 0%,
    rgba(254,254,254,1) 100%
);

    border: 1px solid #D9CBCD;

    outline: 1px solid #fff;
    outline-offset: -2px;

    box-shadow:
        inset 0 0 0 1px #ffffff,
        inset 0 0 0 2px #EDE7E8;

    color: #8e646c;

    text-shadow: none;
}

/* COMMENTS */
body.light-mode .c-comment,
body.light-mode .c-reply {

background: linear-gradient(
    0deg,
    rgba(252,248,249,1) 0%,
    rgba(255,255,255,1) 100%
);

    border-top: 1px dotted #d8cdd0;
}

/* REPLY */
body.light-mode .c-reply {
    border-left: 1px dotted #d8cdd0;
}

/* NAME */
body.light-mode .c-name {
    color: #8e646c;
}

/* TIMESTAMP */
body.light-mode .c-timestamp {
    color: #bf9aa0;
}

/* LINKS */
body.light-mode .c-site {
    color: #a46f79;
}

/* TEXT */
body.light-mode .c-text {
    color: #736365;
}

/* REPLYING TEXT */
body.light-mode #c_replyingText {
    color: #a4868c;
}