/* Meeting Scheduler Styles */

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    color: #2c3e50;
    line-height: 1.6;
}

.scheduler-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.scheduler-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.scheduler-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #2c3e50;
}

.scheduler-header p {
    font-size: 1.1rem;
    color: #7f8c8d;
}

.scheduler-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .scheduler-grid { 
        grid-template-columns: 1fr; 
    }
}

/* Hide the subtitle on small/mobile screens to save vertical space.
   Keep .profile-name visible by excluding it from the rule. */
@media (max-width: 600px) {
    .scheduler-header p:not(.profile-name) {
        display: none;
    }
    /* Reduce header padding slightly on very small screens */
    .scheduler-header { padding: 20px 12px; margin-bottom: 20px; }
    .scheduler-header h1 { font-size: 1.6rem; }
}

.scheduler-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.scheduler-card h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: #2c3e50;
}

.duration-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.duration-btn {
    padding: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.duration-btn:hover {
    border-color: #3498db;
    background: #f8f9fa;
}

.duration-btn.selected {
    border-color: #3498db;
    background: #e3f2fd;
}

.duration-btn strong {
    display: block;
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 5px;
}

.duration-btn span {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.calendar-container {
    /* Contain absolutely positioned overlays (context menu) so they can be
       be positioned relative to the calendar area without escaping other
       page overlays. */
    position: relative;
}

.calendar-nav {
    border: 1px solid #e0e0e0;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    color: #2c3e50;
    margin: 3px;
    background: #f8f9fa;
}

/* Context menu shown when right-clicking an active calendar day */
.calendar-context-menu {
    position: absolute;
    z-index: 100000; /* sit above backdrops/overlays */
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #e6eef6;
    box-shadow: 0 10px 30px rgba(12,20,28,0.12);
    border-radius: 8px;
    padding: 6px;
    display: none;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.calendar-context-menu.visible { display: flex; opacity: 1; visibility: visible; }

.calendar-context-item {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    color: #2c3e50;
    margin: 3px;
}
.calendar-context-item:hover { background: #4171a8; color: #fff; }
.calendar-context-item[aria-pressed="true"] { background: #2b5b86; color: #fff; }

/* Ensure no focus outline/border is shown on context menu items regardless of focus state */
.calendar-context-item:focus,
.calendar-context-item:focus-visible,
.calendar-context-item:active,
.calendar-context-item[aria-pressed="true"]:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Extra defensive rules for browser-specific focus rings */
.calendar-context-item:focus {
    outline-color: transparent !important;
    outline-style: none !important;
    outline-width: 0 !important;
    -webkit-focus-ring-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Keyboard focus should mirror hover for non-pressed items.
   Use :focus-visible so programmatic focus (when opening the menu)
   doesn't show hover styling—preserves keyboard accessibility. */
.calendar-context-item:focus-visible:not([aria-pressed="true"]) {
    background: #4171a8 !important;
    color: #fff !important;
}

.calendar-context-caret {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Badges for admin day-level availability types */
.day-type-badges {
    position: absolute;
    top: 3px;
    right: 3px;
    display: flex;
    gap: 3px;
    align-items: center;
    pointer-events: none;
    z-index: 9999; /* raise above potential stacking contexts in Chromium */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.day-type-badge {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(12,20,28,0.12);
    pointer-events: none;
}
.day-type-badge.online { background: #27ae60; }
.day-type-badge.phone  { background: #f39c12; }
.day-type-badge.physical { background: #8e44ad; }
@media (min-width: 769px) {
    /* Slightly larger badges on wider screens for visibility */
    .day-type-badge {
        width: 9px !important;
        height: 9px !important;
    }
}
.calendar-context-caret.caret-below {
    top: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    box-shadow: -1px -1px 0 rgba(0,0,0,0.03);
}
.calendar-context-caret.caret-above {
    bottom: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffff;
    box-shadow: -1px 1px 0 rgba(0,0,0,0.03);
}

/* Animation tweaks for flip direction */
.calendar-context-menu.open-below { transform: translateY(-6px); }
.calendar-context-menu.open-below.visible { transform: translateY(0); }
.calendar-context-menu.open-above { transform: translateY(6px); }
.calendar-context-menu.open-above.visible { transform: translateY(0); }

/* When an inline slot warning is shown, make the menu background light pink and allow wrapping
   so the message can break into multiple lines and the menu can grow vertically instead
   of widening. */
.calendar-context-menu.slot-warning {
    background: #fff0f2 !important;
    max-width: 230px !important;
    white-space: normal !important;
}
.calendar-context-menu.slot-warning .calendar-context-item,
.calendar-context-menu.slot-warning .calendar-context-caret {
    white-space: normal !important;
}


.calendar-month {
    font-size: 1.2rem;
    font-weight: 600;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-day-header {
    text-align: center;
    padding: 10px;
    font-weight: 600;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    position: relative; /* allow badges to be positioned within the cell */
    overflow: visible; /* ensure absolutely positioned badges are not clipped (Chromium fix) */
}

.calendar-day:hover:not(.disabled):not(.other-month) {
    border-color: #3498db;
    background: #f8f9fa;
}

/* Context menu styles are defined earlier and consolidated; keep single source of truth. */

.calendar-day.selected {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.calendar-day.disabled {
    background: #f5f5f5;
    color: #bdc3c7;
    cursor: not-allowed;
}

.calendar-day.other-month {
    color: #bdc3c7;
}

.time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.time-slot {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    position: relative; /* allow absolute-positioned badges inside the slot */
}

.time-slot:hover:not(.unavailable) {
    border-color: #3498db;
    background: #f8f9fa;
}

.time-slot.selected {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.time-slot.unavailable {
    /* Show unavailable slots visually but subdued so users can see them and admins can edit via context menu */
    display: block;
    opacity: 0.6;
    color: #7f8c8d;
    background: #fbfbfb;
}

/* Slot-level badges (small circles) */
.slot-badges {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.slot-badges .day-type-badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ecf0f1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    opacity: 0.45;
}
.slot-badges .day-type-badge.online.active { background: #3498db; opacity: 1; }
.slot-badges .day-type-badge.phone.active { background: #f39c12; opacity: 1; }
.slot-badges .day-type-badge.physical.active { background: #2ecc71; opacity: 1; }

.booking-form {
    display: none;
}

.booking-form.active {
    display: block;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

/* Meeting type buttons */
.meeting-location-options {
    display: flex;
    gap: 8px;
}
.meeting-type-btn {
    background: #ffffff;
    border: 1px solid #dfe6ee;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: #2c3e50;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px rgba(12,20,28,0.03);
    /* allow long labels to wrap rather than overflowing the button */
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.1;
}
.meeting-type-btn:hover {
    transform: translateY(-1px);
    border-color: #3498db;
    background: #f6fbff;
}
.meeting-type-btn.selected {
    background: linear-gradient(135deg, #dff3ff 0%, #cfeafc 100%);
    border-color: #237ab7;
    color: #073047;
    box-shadow: 0 6px 18px rgba(35,122,183,0.12);
    transform: translateY(-2px);
}
.meeting-type-btn:focus { outline: 3px solid rgba(52,152,219,0.12); }

/* Reduce meeting-type button padding and font size in the intermediate narrow desktop range
   so longer labels (e.g. "Appel téléphonique") wrap and fit. Covers 769px-1060px. */
@media (min-width: 769px) and (max-width: 1060px) {
    .meeting-type-btn {
        padding: 10px 10px;
        font-size: 0.95rem;
        min-height: 40px;
    }
    /* When page language is French, use a slightly smaller font to avoid awkward wrapping */
    :lang(fr) .meeting-type-btn,
    html[lang|="fr"] .meeting-type-btn,
    .lang-fr .meeting-type-btn,
    body.lang-fr .meeting-type-btn {
        /* Use a pixel value for cross-browser consistency (Firefox vs Chrome) */
        font-size: 13px !important;
    }
    /* Target phone button specifically to avoid the French label splitting */
    .lang-fr .meeting-type-btn[data-type="phone"],
    body.lang-fr .meeting-type-btn[data-type="phone"],
    html[lang|="fr"] .meeting-type-btn[data-type="phone"],
    :lang(fr) .meeting-type-btn[data-type="phone"] {
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}

/* Address suggestion items */
.address-suggestions { border: 1px solid #eee; border-radius: 6px; background: white; max-height: 300px; overflow:auto; }
.address-suggestions .addr-item:hover { background:#f8f9fa; }

/* Dropdown behavior: hidden by default, fades/slides into view when .visible is added.
   It can also flip above the input when .open-up is present. Anchored to the helper via
   #meeting-location-fields { position: relative } so absolute positioning is scoped. */
.address-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 27px);
    bottom: auto;
    z-index: 60;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.address-suggestions.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.address-suggestions.open-up {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
    transform: translateY(6px);
}
.address-suggestions.open-up.visible {
    transform: translateY(0);
}

/* Ensure meeting-location helper inputs look like other form inputs even when placed outside .form-group */
#meeting-location-fields input,
#meeting-location-fields textarea,
.meeting-location-container input,
.meeting-location-container textarea,
.meeting-location-container .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.meeting-location-container input:focus,
.meeting-location-container textarea:focus,
#meeting-location-fields input:focus,
#meeting-location-fields textarea:focus {
    outline: none;
    border-color: #3498db;
}

/* Improve meeting-location block spacing and typography to match surrounding content */
.meeting-location-container {
    margin: 0 0 16px 0; /* remove extra top gap, consistent bottom spacing */
    padding: 0; /* no extra padding inside card */
}
.meeting-location-heading,
.meeting-location-container h2 {
    margin: 0 0 12px 0;
    font-size: 1.5rem; /* match .scheduler-card h2 size */
    color: #2c3e50;
    font-weight: 600;
}

/* Make helper paragraphs and labels match the heading styling */
.meeting-location-container label,
#meeting-location-fields p,
.meeting-help {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: #2c3e50;
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
}

/* Make meeting-type buttons more touch-friendly and responsive */
.meeting-location-options {
    display: flex;
    gap: 12px;
}

/* City input for in-person meetings */
.meeting-city-input { max-width: 320px; display: inline-block; }
.meeting-map-link { font-size: 0.95rem; color: #3498db; text-decoration: none; vertical-align: middle; }
.meeting-map-link:hover { text-decoration: underline; }
.meeting-type-btn {
    padding: 12px 16px;
    font-size: 1rem;
    min-width: 0;
    flex: 1; /* distribute evenly */
}

/* On small screens stack the buttons for easier tapping */
@media (max-width: 600px) {
    .meeting-location-options {
        flex-direction: column;
        gap: 10px;
    }
    .meeting-type-btn {
        width: 100%;
        padding: 16px 18px;
        font-size: 1.15rem;
        min-height: 48px;
    }
    .meeting-location-heading,
    .meeting-location-container h2 { font-size: 1.2rem; }
}

/* Meeting-location helper fixed area (user-specified) */
/* Anchor container for meeting-location helper inputs and suggestion dropdowns */
#meeting-location-fields {
    position: relative;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

/* Reminders select styling */
select#reminder-minutes {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: white;
    font-size: 1rem;
}

/* Small helper text under reminder */
.reminder-helper { color: #7f8c8d; font-size: 0.92rem; }

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-primary {
    background: #3498db;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-primary:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.confirmation-message {
    display: none;
    text-align: center;
    padding: 40px;
}

.confirmation-message.active {
    display: block;
}

.confirmation-icon {
    font-size: 4rem;
    color: #27ae60;
    margin-bottom: 20px;
}

.error-message {
    background: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: none;
}

.error-message.active {
    display: block;
}

.loading {
    display: none;
    text-align: center;
    padding: 20px;
}

.loading.active {
    display: block;
}

.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Invitation Acceptance Page Styles */
.invitation-error-link {
    text-align: center;
    margin-top: 20px;
}

.invitation-admin-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

.invitation-prompt-text {
    margin-top: 10px;
}

.invitation-details-heading {
    margin-bottom: 20px;
    color: #212529;
}

/* Invitation Acceptance Page - Full Styles */
body.invitation-acceptance-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    color: white !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

body.invitation-acceptance-page .container {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    max-width: 600px !important;
    width: 100% !important;
    overflow: hidden !important;
    color: #212529 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.invitation-acceptance-page .header {
    padding: 40px 30px !important;
    text-align: center !important;
    color: #212529 !important;
    margin: 0 !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px 12px 0 0 !important;
}

body.invitation-acceptance-page .header h1 {
    font-size: 32px !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    color: #212529 !important;
}

body.invitation-acceptance-page .header p {
    font-size: 16px !important;
    opacity: 0.8 !important;
    margin: 0 !important;
    color: #6c757d !important;
}

body.invitation-acceptance-page .content {
    padding: 40px 30px !important;
    margin: 0 !important;
}

body.invitation-acceptance-page .error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

body.invitation-acceptance-page .success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

body.invitation-acceptance-page .invitation-details {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

body.invitation-acceptance-page .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

body.invitation-acceptance-page .detail-row:last-child {
    border-bottom: none;
}

body.invitation-acceptance-page .detail-label {
    color: #6c757d;
    font-weight: 500;
}

body.invitation-acceptance-page .detail-value {
    color: #212529;
    font-weight: 600;
}

body.invitation-acceptance-page .role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}

body.invitation-acceptance-page .role-admin {
    background: #007bff;
    color: white;
}

body.invitation-acceptance-page .role-member {
    background: #28a745;
    color: white;
}

body.invitation-acceptance-page .permissions-box {
    background: #e7f3ff;
    border-left: 4px solid #007bff;
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
}

body.invitation-acceptance-page .permissions-box h3 {
    color: #004085;
    margin-bottom: 12px;
    font-size: 16px;
}

body.invitation-acceptance-page .permissions-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.invitation-acceptance-page .permissions-box li {
    padding: 6px 0;
    color: #004085;
}

body.invitation-acceptance-page .permissions-box li:before {
    content: "✓ ";
    color: #28a745;
    font-weight: bold;
    margin-right: 8px;
}

body.invitation-acceptance-page .actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

body.invitation-acceptance-page .btn {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

body.invitation-acceptance-page .btn-accept {
    background: #28a745;
    color: white;
}

body.invitation-acceptance-page .btn-accept:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

body.invitation-acceptance-page .btn-decline {
    background: #6c757d;
    color: white;
}

body.invitation-acceptance-page .btn-decline:hover {
    background: #5a6268;
}

body.invitation-acceptance-page .login-prompt {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
}

body.invitation-acceptance-page .login-prompt a {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 24px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

body.invitation-acceptance-page .signup-prompt {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
}

body.invitation-acceptance-page .signup-prompt a {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 24px;
    background: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

body.invitation-acceptance-page .footer {
    background: #f8f9fa !important;
    padding: 20px 30px !important;
    text-align: center !important;
    color: #6c757d !important;
    font-size: 14px !important;
    border-top: 1px solid #e9ecef !important;
    margin: 0 !important;
}

body.invitation-acceptance-page .footer a {
    color: #667eea !important;
    text-decoration: none !important;
}

/* Signup Form Styles within Invitation Acceptance Page */
body.invitation-acceptance-page .signup-form {
    margin: 0 !important;
}

body.invitation-acceptance-page .signup-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

body.invitation-acceptance-page .signup-table tr {
    border: none !important;
}

body.invitation-acceptance-page .signup-table td {
    padding: 8px 0 !important;
    border: none !important;
}

body.invitation-acceptance-page .field {
    position: relative !important;
    margin-bottom: 15px !important;
}

body.invitation-acceptance-page .inputspan4 {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
}

body.invitation-acceptance-page .inputspan4:focus {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

body.invitation-acceptance-page .field label {
    position: absolute !important;
    top: 1px !important;
    left: 12px !important;
    background: #ffffff00 !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}

body.invitation-acceptance-page .subtitle h2 {
    margin: 0 0 20px 0 !important;
    color: #212529 !important;
    font-size: 24px !important;
    text-align: center !important;
}

body.invitation-acceptance-page .chat-btn-submit {
    background: #28a745 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    width: 100% !important;
}

body.invitation-acceptance-page .chat-btn-submit:hover {
    background: #218838 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

/* Links inside footer */
body.invitation-acceptance-page .footer .links-to {
    text-align: center !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e9ecef !important;
    color: #6c757d !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

body.invitation-acceptance-page .footer .links-to .clickable {
    color: #667eea !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}

body.invitation-acceptance-page .footer .links-to .clickable:hover {
    color: #5a67d8 !important;
}