/* ==========================================================================
   Global Button Styles - Chatujme.cz
   Unified button styling for .btn-info, .btn-purple, .btn-success
   ========================================================================== */

/* CSS Variables for buttons */
:root {
    --btn-info-bg: #21749a;
    --btn-info-hover: #1a5f7f;
    --btn-info-active: #155067;
    --btn-purple-bg: #cb2f79;
    --btn-purple-hover: #a8265f;
    --btn-purple-active: #8a1f4e;
    --btn-success-bg: #449d44;
    --btn-success-hover: #398439;
    --btn-success-active: #2d672d;
    --btn-radius: 8px;
    --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --btn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    --btn-transition: all 0.2s ease;
}

/* ==========================================================================
   Base Button Styles
   ========================================================================== */

.btn-info,
.btn-purple,
.btn-success,
a.btn-info,
a.btn-purple,
a.btn-success,
input.btn-info,
input.btn-purple,
input.btn-success,
button.btn-info,
button.btn-purple,
button.btn-success {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: var(--btn-radius) !important;
    box-shadow: var(--btn-shadow) !important;
    transition: var(--btn-transition) !important;
    cursor: pointer;
    text-shadow: none !important;
    background-image: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   btn-info Styles
   ========================================================================== */

.btn-info,
a.btn-info,
input.btn-info,
button.btn-info {
    background: linear-gradient(180deg, #2d8bb8 0%, var(--btn-info-bg) 100%) !important;
    color: #fff !important;
    border: 1px solid var(--btn-info-hover) !important;
}

.btn-info:hover,
a.btn-info:hover,
input.btn-info:hover,
button.btn-info:hover {
    background: linear-gradient(180deg, var(--btn-info-bg) 0%, var(--btn-info-hover) 100%) !important;
    color: #fff !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.btn-info:focus,
a.btn-info:focus,
input.btn-info:focus,
button.btn-info:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(33, 116, 154, 0.3) !important;
}

.btn-info:active,
a.btn-info:active,
input.btn-info:active,
button.btn-info:active {
    background: linear-gradient(180deg, var(--btn-info-hover) 0%, var(--btn-info-active) 100%) !important;
    color: #fff !important;
    transform: translateY(0);
    box-shadow: var(--btn-shadow) !important;
}

/* ==========================================================================
   btn-purple Styles
   ========================================================================== */

.btn-purple,
a.btn-purple,
input.btn-purple,
button.btn-purple {
    background: linear-gradient(180deg, #e84167 0%, var(--btn-purple-bg) 100%) !important;
    color: #fff !important;
    border: 1px solid var(--btn-purple-hover) !important;
}

.btn-purple:hover,
a.btn-purple:hover,
input.btn-purple:hover,
button.btn-purple:hover {
    background: linear-gradient(180deg, var(--btn-purple-bg) 0%, var(--btn-purple-hover) 100%) !important;
    color: #fff !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.btn-purple:focus,
a.btn-purple:focus,
input.btn-purple:focus,
button.btn-purple:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(203, 47, 121, 0.3) !important;
}

.btn-purple:active,
a.btn-purple:active,
input.btn-purple:active,
button.btn-purple:active {
    background: linear-gradient(180deg, var(--btn-purple-hover) 0%, var(--btn-purple-active) 100%) !important;
    color: #fff !important;
    transform: translateY(0);
    box-shadow: var(--btn-shadow) !important;
}

/* ==========================================================================
   btn-success Styles
   ========================================================================== */

.btn-success,
a.btn-success,
input.btn-success,
button.btn-success {
    background: linear-gradient(180deg, #5cb85c 0%, var(--btn-success-bg) 100%) !important;
    color: #fff !important;
    border: 1px solid var(--btn-success-hover) !important;
}

.btn-success:hover,
a.btn-success:hover,
input.btn-success:hover,
button.btn-success:hover {
    background: linear-gradient(180deg, var(--btn-success-bg) 0%, var(--btn-success-hover) 100%) !important;
    color: #fff !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.btn-success:focus,
a.btn-success:focus,
input.btn-success:focus,
button.btn-success:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(68, 157, 68, 0.3) !important;
}

.btn-success:active,
a.btn-success:active,
input.btn-success:active,
button.btn-success:active {
    background: linear-gradient(180deg, var(--btn-success-hover) 0%, var(--btn-success-active) 100%) !important;
    color: #fff !important;
    transform: translateY(0);
    box-shadow: var(--btn-shadow) !important;
}

/* ==========================================================================
   Button Sizes
   ========================================================================== */

/* Small buttons */
.btn-info.btn-sm,
.btn-purple.btn-sm,
.btn-success.btn-sm,
.btn-info.btn-xs,
.btn-purple.btn-xs,
.btn-success.btn-xs {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* Default buttons */
.btn-info,
.btn-purple,
.btn-success {
    padding: 10px 18px !important;
    font-size: 14px !important;
}

/* Large buttons */
.btn-info.btn-lg,
.btn-purple.btn-lg,
.btn-success.btn-lg {
    padding: 14px 28px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
}

/* Block buttons */
.btn-info.btn-block,
.btn-purple.btn-block,
.btn-success.btn-block {
    display: flex !important;
    width: 100% !important;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

body.night-mode {
    --btn-info-bg: #1e5a7a;
    --btn-info-hover: #2d7ca3;
    --btn-info-active: #154560;
    --btn-purple-bg: #a82862;
    --btn-purple-hover: #c93a78;
    --btn-purple-active: #8a1f4e;
    --btn-success-bg: #3d8b3d;
    --btn-success-hover: #4cae4c;
    --btn-success-active: #2d672d;
}

body.night-mode .btn-info,
body.night-mode a.btn-info,
body.night-mode input.btn-info,
body.night-mode button.btn-info {
    background: linear-gradient(180deg, #2d7ca3 0%, var(--btn-info-bg) 100%) !important;
    border-color: #3a8ab8 !important;
}

body.night-mode .btn-info:hover,
body.night-mode a.btn-info:hover {
    background: linear-gradient(180deg, #3a8ab8 0%, #2d7ca3 100%) !important;
}

body.night-mode .btn-purple,
body.night-mode a.btn-purple,
body.night-mode input.btn-purple,
body.night-mode button.btn-purple {
    background: linear-gradient(180deg, #c93a78 0%, var(--btn-purple-bg) 100%) !important;
    border-color: #d44a88 !important;
}

body.night-mode .btn-purple:hover,
body.night-mode a.btn-purple:hover {
    background: linear-gradient(180deg, #d44a88 0%, #c93a78 100%) !important;
}

body.night-mode .btn-success,
body.night-mode a.btn-success,
body.night-mode input.btn-success,
body.night-mode button.btn-success {
    background: linear-gradient(180deg, #4cae4c 0%, var(--btn-success-bg) 100%) !important;
    border-color: #4cae4c !important;
}

body.night-mode .btn-success:hover,
body.night-mode a.btn-success:hover {
    background: linear-gradient(180deg, #5cb85c 0%, #4cae4c 100%) !important;
}

/* ==========================================================================
   Disabled State
   ========================================================================== */

.btn-info:disabled,
.btn-info.disabled,
.btn-purple:disabled,
.btn-purple.disabled,
.btn-success:disabled,
.btn-success.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Icon in Buttons
   ========================================================================== */

.btn-info i,
.btn-info .fa,
.btn-info .fas,
.btn-info .far,
.btn-info .glyphicon,
.btn-purple i,
.btn-purple .fa,
.btn-purple .fas,
.btn-purple .far,
.btn-purple .glyphicon,
.btn-success i,
.btn-success .fa,
.btn-success .fas,
.btn-success .far,
.btn-success .glyphicon {
    font-size: inherit;
}

/* ==========================================================================
   Input Group Buttons
   ========================================================================== */

.input-group-btn .btn-info,
.input-group-btn .btn-purple,
.input-group-btn .btn-success {
    border-radius: 0 !important;
    transform: none !important;
}

.input-group-btn .btn-info:hover,
.input-group-btn .btn-purple:hover,
.input-group-btn .btn-success:hover {
    transform: none !important;
}

/* Button position based on wrapper position in input-group */
.input-group-btn:first-child > .btn-info:not(:last-child),
.input-group-btn:first-child > .btn-purple:not(:last-child),
.input-group-btn:first-child > .btn-success:not(:last-child) {
    border-radius: var(--btn-radius) 0 0 var(--btn-radius) !important;
}

.input-group-btn:last-child > .btn-info:not(:first-child),
.input-group-btn:last-child > .btn-purple:not(:first-child),
.input-group-btn:last-child > .btn-success:not(:first-child) {
    border-radius: 0 var(--btn-radius) var(--btn-radius) 0 !important;
}

/* Button is last child inside its container - right side rounded */
.input-group-btn > .btn-info:last-child,
.input-group-btn > .btn-purple:last-child,
.input-group-btn > .btn-success:last-child,
.input-group-btn > input.btn-info:last-child,
.input-group-btn > input.btn-purple:last-child,
.input-group-btn > input.btn-success:last-child {
    border-radius: 0 var(--btn-radius) var(--btn-radius) 0 !important;
}

/* Button is first child inside its container - left side rounded */
.input-group-btn > .btn-info:first-child:not(:last-child),
.input-group-btn > .btn-purple:first-child:not(:last-child),
.input-group-btn > .btn-success:first-child:not(:last-child),
.input-group-btn > input.btn-info:first-child:not(:last-child),
.input-group-btn > input.btn-purple:first-child:not(:last-child),
.input-group-btn > input.btn-success:first-child:not(:last-child) {
    border-radius: var(--btn-radius) 0 0 var(--btn-radius) !important;
}

/* Single button - all corners rounded */
.input-group-btn > .btn-info:only-child,
.input-group-btn > .btn-purple:only-child,
.input-group-btn > .btn-success:only-child,
.input-group-btn > input.btn-info:only-child,
.input-group-btn > input.btn-purple:only-child,
.input-group-btn > input.btn-success:only-child {
    border-radius: var(--btn-radius) !important;
}