/* ============================================
   inLiker Order System – Professional Dark Theme
   ============================================ */

.inliker-order-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 16px;
    color: #ccc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);  /* subtle container shadow */
}

/* ----- Section Labels ----- */
.inliker-section-label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Platform Toggle with gradients ===== */
.inliker-platform-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.inliker-platform-btn {
    flex: 1;
    padding: 14px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    color: #aaa;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: none;  /* no glow by default */
}
.inliker-platform-btn:hover:not(.active) {
    background: #333;
}
/* Instagram active gradient – no heavy shadow */
.inliker-platform-btn[data-platform="instagram"].active {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(204,35,102,0.3);
}
/* Facebook active gradient – no heavy shadow */
.inliker-platform-btn[data-platform="facebook"].active {
    background: linear-gradient(45deg, #1877f2, #0c5dc7);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(24,119,242,0.3);
}

/* ===== Service Buttons Grid – 3 columns ===== */
.inliker-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.inliker-service-btn {
    padding: 14px 6px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    color: #aaa;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: none;
}
/* GOLDEN active state – soft glow */
.inliker-service-btn.active {
    background: #FFD700;
    border-color: #DAA520;
    color: #000;
    box-shadow: 0 0 6px rgba(255,215,0,0.3);
}
.inliker-service-btn:hover:not(.active) {
    background: #333;
}

/* ===== Amount Buttons Grid ===== */
.inliker-amounts-grid {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
}
.inliker-amount-btn {
    padding: 12px 6px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    color: #bbb;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: none;
}
/* GOLDEN active state – soft glow */
.inliker-amount-btn.active {
    background: #FFD700;
    border-color: #DAA520;
    color: #000;
    box-shadow: 0 0 5px rgba(255,215,0,0.25);
}
.inliker-amount-btn:hover:not(.active) {
    background: #333;
}

/* ===== Link Input – rounded corners ===== */
.inliker-link-input {
    width: 100%;
    padding: 14px 16px;
    background: #1e1e1e !important;
    border: 2px solid #2196F3 !important;
    border-radius: 25px !important;
    color: #eee !important;
    font-size: 15px;
    outline: none;
    margin-bottom: 15px;
    box-sizing: border-box;
    transition: 0.2s;
    box-shadow: none;
}
.inliker-link-input:focus {
    border-color: #42a5f5 !important;
    box-shadow: 0 0 4px rgba(33,150,243,0.2);
}

/* ===== Comment Section ===== */
#inliker-comment-section {
    margin-bottom: 15px;
}

.inliker-comment-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #1e1e1e;
    border: 2px solid #2196F3;
    border-radius: 15px;
    overflow: hidden;
}

/* Line numbers gutter */
.inliker-line-numbers {
    background: #151515;
    padding: 14px 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #888;
    text-align: right;
    font-family: monospace;
    user-select: none;
    border-right: 1px solid #333;
    white-space: pre;
}

/* The actual textarea */
.inliker-comments-box {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #eee;
    font-size: 15px;
    padding: 14px 10px;
    resize: none;
    line-height: 1.6;
    font-family: inherit;
    overflow-y: auto;
}
.inliker-comments-box::placeholder {
    color: #888;
}

/* Line counter (rounded, top-right inside the wrapper) */
.inliker-line-counter {
    position: absolute;
    top: 8px;
    right: 12px;
    background: #2a2a2a;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 12px;
    color: #aaa;
    font-weight: 600;
    pointer-events: none;
    border: 1px solid #3a3a3a;
}

/* ===== Total Bill – reduced spacing ===== */
.inliker-total {
    font-size: 24px;
    font-weight: 700;
    color: #4caf50;
    text-align: center;
    margin: 12px 0 8px 0;
    letter-spacing: 0.5px;
}

/* ===== Submit Button ===== */
.inliker-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(25,118,210,0.2);
}
.inliker-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #42a5f5, #1e88e5);
    box-shadow: 0 4px 10px rgba(66,165,245,0.3);
    transform: translateY(-1px);
}
.inliker-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Message ===== */
#inliker-order-message {
    text-align: center;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
}
#inliker-order-message.success { color: #4caf50; }
#inliker-order-message.error   { color: #ff5252; }

/* ===== Misc ===== */
.inliker-login-prompt {
    text-align: center;
    color: #ff5252;
    padding: 40px;
}

/* ===== Mobile responsiveness ===== */
@media (max-width: 480px) {
    .inliker-order-container { padding: 12px; }
    .inliker-platform-btn { padding: 12px; font-size: 14px; }
    .inliker-service-btn { font-size: 13px; padding: 12px 4px; }
    .inliker-amount-btn { padding: 10px 2px; font-size: 13px; }
    .inliker-total { font-size: 20px; }
    .inliker-line-numbers { font-size: 12px; padding: 12px 6px; }
}