/**
 * User Account Frontend Styles - TikTok-like Simple Layout
 *
 * @package User_Account
 */

.user-account-wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

.user-account-container {
    display: flex;
    gap: 0;
    background: #fff;
    border: none;
    min-height: 100vh;
}

/* Left Sidebar - TikTok Style */
.user-account-sidebar {
    width: 200px;
    background: #fff;
    border-right: 1px solid #e5e5e5;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.user-account-header {
    padding: 20px 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-link {
    text-decoration: none;
    flex-shrink: 0;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-avatar-link:hover .user-avatar {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar .avatar-placeholder {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.user-avatar .avatar-edit-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 50%;
}

.user-avatar .avatar-edit-icon i {
    color: #fff;
    font-size: 16px;
}

.user-avatar-link:hover .avatar-edit-icon {
    opacity: 1;
}

.user-info {
    text-align: left;
    min-width: 0;
    flex: 1;
}

.user-name {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    margin: 0;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-account-menu {
    padding: 0;
}

.user-account-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-account-menu .menu-item {
    margin: 0;
    border-bottom: none;
}

.user-account-menu .menu-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: #000;
    text-decoration: none;
    background: #fff;
    font-size: 14px;
    border-left: 3px solid transparent;
}

.user-account-menu .menu-item .menu-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: #666;
    flex-shrink: 0;
}

.user-account-menu .menu-item.active .menu-icon {
    color: #000;
}

.user-account-menu .menu-item .menu-text {
    flex-grow: 1;
}

.user-account-menu .menu-item.active a {
    background: #f5f5f5;
    border-left-color: #000;
    font-weight: normal;
}

.user-account-menu .menu-item.logout-link a {
    color: #000;
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
}

/* RnD Collapsible Menu */
.menu-item-rnd-parent {
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
}

.menu-item-rnd-parent > a.rnd-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    color: #666;
    text-decoration: none;
    background: #fafafa;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.menu-item-rnd-parent > a.rnd-toggle:hover {
    background: #f0f0f0;
}

.menu-item-rnd-parent.expanded > a.rnd-toggle {
    background: #f0f0f0;
    border-left-color: #999;
}

.rnd-label {
    flex: 1;
}

.rnd-arrow {
    font-size: 10px;
    color: #999;
    transition: transform 0.2s ease;
}

.menu-item-rnd-parent.expanded .rnd-arrow {
    transform: rotate(0deg);
}

.rnd-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
    border-left: 3px solid #e5e5e5;
}

.rnd-submenu .menu-item {
    margin: 0;
}

.rnd-submenu .menu-item a {
    display: block;
    padding: 10px 15px 10px 25px;
    color: #333;
    text-decoration: none;
    background: transparent;
    font-size: 13px;
    border-left: none;
}

.rnd-submenu .menu-item a:hover {
    background: #f0f0f0;
}

.rnd-submenu .menu-item.active a {
    background: #e8e8e8;
    font-weight: 500;
    color: #000;
}

.menu-text {
    font-size: 14px;
    font-weight: normal;
}

/* Right Content Area - TikTok Style */
.user-account-content {
    flex: 1;
    min-width: 0;
    background: #fff;
}

.user-account-content-inner {
    padding: 30px 40px;
    max-width: 100%;
}

.tab-title {
    margin: 0 0 30px;
    font-size: 20px;
    font-weight: normal;
    color: #000;
    border-bottom: none;
    padding-bottom: 0;
}

/* Dashboard */
.dashboard-page-header {
    margin-bottom: 20px;
}

.dashboard-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
}

.dashboard-subtitle {
    margin: 0;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #4b5563;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 2px 9px;
    font-weight: 500;
}

.dashboard-location-badge .fa-location-dot {
    color: #ef4444;
    font-size: 11px;
}

/* Compact Stats */
.dashboard-stats-compact {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.stat-card-mini {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    transition: all 0.2s ease;
    min-width: 0;
    position: relative;
}

.stat-add-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    line-height: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 2;
}

.stat-card-mini:hover .stat-add-btn {
    opacity: 1;
}

.stat-add-btn:hover {
    background: #16a34a;
    transform: scale(1.1);
}

.stat-card-mini.stat-card-clickable {
    cursor: pointer;
}

.stat-card-mini.stat-card-clickable:hover {
    background: #f8f9fa;
    border-color: #1a1a1a;
}

.stat-card-mini.stat-highlight {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
}

.stat-card-mini.stat-highlight .stat-mini-value,
.stat-card-mini.stat-highlight .stat-mini-label {
    color: #fff;
}

.stat-card-mini.stat-highlight .stat-mini-icon {
    color: rgba(255, 255, 255, 0.9);
}

.stat-mini-icon {
    font-size: 14px;
    color: #667eea;
    margin-bottom: 4px;
}

.stat-mini-icon i {
    font-size: inherit;
}

.stat-mini-value {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-mini-label {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
    white-space: nowrap;
}

/* Sales Activity Chart */
.sales-chart-container {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.sales-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sales-chart-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.sales-chart-period {
    font-size: 11px;
    color: #888;
}

/* Chart Legend Inline */
.chart-legend-inline {
    display: flex;
    gap: 16px;
    align-items: center;
}

.legend-item-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #666;
}

.legend-dot-new {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #667eea;
}

.legend-dot-active {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
}

.sales-chart-wrapper {
    width: 100%;
    height: 120px;
}

.sales-chart-wrapper canvas {
    width: 100% !important;
}

/* Legacy stats (keep for compatibility) */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 20px;
    text-align: center;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: #000;
    margin-bottom: 5px;
    line-height: 1.2;
}

.stat-label {
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.stat-card-clickable:hover {
    background: #f5f5f5;
    border-color: #000;
}

/* Context Items List */
.context-items-list {
    background: #fff;
    border: 1px solid #e5e5e5;
    margin-bottom: 30px;
    padding: 20px;
}

.context-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.context-list-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.close-context-list {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-context-list:hover {
    color: #000;
}

.context-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.context-item-card {
    display: block;
    padding: 15px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.context-item-card:hover {
    background: #f0f0f0;
    border-color: #000;
}

.context-item-title {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    margin-bottom: 8px;
}

.context-item-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
}

.context-meta-item {
    font-size: 13px;
    color: #666;
}

.context-meta-item strong {
    color: #000;
    font-weight: 600;
}

.context-item-date {
    font-size: 12px;
    color: #999;
}

.context-list-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}

.context-list-footer a {
    color: #000;
    text-decoration: none;
    font-size: 14px;
}

.context-list-footer a:hover {
    text-decoration: underline;
}

/* Dashboard Accordion */
.dashboard-accordion {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fafafa;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.accordion-header:hover {
    background: #f0f0f0;
}

.accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 12px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.accordion-title i {
    color: #888;
    font-size: 12px;
}

.accordion-arrow {
    color: #888;
    transition: transform 0.3s ease;
}

.accordion-arrow i {
    font-size: 10px;
}

.dashboard-accordion.expanded .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
    padding: 0;
    border-top: 1px solid #eee;
}

.dashboard-accordion.expanded .accordion-content {
    display: block;
}

/* Sales Activity collapsible accordion */
.sales-chart-accordion .accordion-title.sales-chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    color: #1a1a1a;
}

.sales-chart-accordion .accordion-title.sales-chart-title h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.sales-chart-accordion .accordion-content {
    padding: 0 12px 12px;
}

/* Quick Links */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px 20px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    margin-bottom: 30px;
}

.quick-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.quick-link-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.quick-link-item:first-child {
    padding-top: 0;
}

.quick-link-label {
    color: #333;
    font-weight: 500;
    white-space: nowrap;
}

.quick-link-actions {
    display: flex;
    gap: 8px;
}

.quick-link-actions .btn-copy,
.quick-link-actions .btn-share {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-link-actions .btn-copy {
    background: #f0f0f0;
    color: #333;
}

.quick-link-actions .btn-copy:hover {
    background: #e0e0e0;
}

.quick-link-actions .btn-copy.copied {
    background: #d4edda;
    color: #155724;
}

.quick-link-actions .btn-share {
    background: #000;
    color: #fff;
}

.quick-link-actions .btn-share:hover {
    background: #333;
}

.quick-link-actions .btn-copy i,
.quick-link-actions .btn-share i {
    font-size: 12px;
}

.quick-link-url {
    color: #000;
    text-decoration: none;
    word-break: break-all;
}

.quick-link-url:hover {
    text-decoration: underline;
}

/* Booking Manager */
.booking-manager-panel {
    background: #fff;
    border: 1px solid #e5e5e5;
    margin-bottom: 30px;
    padding: 20px;
}

/* Two Column Layout */
.booking-manager-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e5e5;
}

/* Mini Calendar */
.booking-calendar-column {
    display: flex;
    flex-direction: column;
}

.bm-calendar {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 15px;
}

.bm-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.bm-month-name {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.bm-nav {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.bm-nav:hover {
    background: #f0f0f0;
}

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

.bm-day-header {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    padding: 5px;
    text-transform: uppercase;
}

.bm-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.bm-day:hover:not(.empty) {
    background: #f0f0f0;
    border-color: #ccc;
}

.bm-day.empty {
    background: transparent;
    cursor: default;
}

.bm-day.today {
    background: #e3f2fd;
}

.bm-day.has-booking {
    background: #e8f5e9;
}

.bm-day.selected {
    background: #000;
    color: #fff;
}

.bm-day.selected .bm-day-num {
    color: #fff;
}

.bm-day-num {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.bm-booking-dot {
    width: 5px;
    height: 5px;
    background: #4caf50;
    border-radius: 50%;
    position: absolute;
    bottom: 3px;
}

.bm-day.selected .bm-booking-dot {
    background: #fff;
}

.bm-day.blackout,
.bm-day.closed {
    background: #f5f5f5;
    cursor: not-allowed;
}

.bm-day.blackout .bm-day-num,
.bm-day.closed .bm-day-num {
    color: #bbb;
    text-decoration: line-through;
}

.bm-unavailable-marker {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 8px;
    color: #d32f2f;
    line-height: 1;
}

.bm-day.blackout:hover,
.bm-day.closed:hover {
    background: #eee;
}

/* Booking Form Column */
.booking-form-column {
    display: flex;
    flex-direction: column;
}

.add-booking-form {
    flex: 1;
}

.add-booking-form h4 {
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.booking-form-field {
    margin-bottom: 12px;
}

.booking-form-field label {
    display: block;
    font-size: 13px;
    color: #333;
    margin-bottom: 5px;
}

.booking-form-field input[type="date"],
.booking-form-field input[type="time"],
.booking-form-field input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    box-sizing: border-box;
}

.booking-form-field input:focus {
    outline: none;
    border-color: #000;
}

/* Time Autocomplete */
.time-autocomplete-wrapper {
    position: relative;
}

.time-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #000;
    border-top: none;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.time-dropdown.active {
    display: block;
}

.time-option {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.time-option:last-child {
    border-bottom: none;
}

.time-option:hover,
.time-option.highlighted {
    background: #f5f5f5;
}

.time-option.selected {
    background: #000;
    color: #fff;
}

.time-option.hidden {
    display: none;
}

/* Customer Autocomplete for Booking */
.customer-autocomplete-wrapper {
    position: relative;
}

.customer-autocomplete-wrapper input[type="text"] {
    padding-right: 30px;
}

.customer-autocomplete-wrapper input.has-selection {
    background: #e8f5e9;
    border-color: #4caf50;
}

.clear-customer-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.clear-customer-btn:hover {
    color: #333;
}

.customer-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    background: #fff;
    border: 1px solid #000;
    border-top: none;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.customer-dropdown.active {
    display: block;
}

.customer-dropdown-list {
    max-height: 180px;
    overflow-y: auto;
}

.customer-option {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.customer-option:hover {
    background: #f5f5f5;
}

.customer-option-name {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.customer-option-email {
    font-size: 12px;
    color: #666;
}

.customer-dropdown-footer {
    border-top: 1px solid #e5e5e5;
    padding: 8px;
    background: #fafafa;
}

.create-new-customer-btn {
    width: 100%;
    background: none;
    border: 1px dashed #ccc;
    padding: 8px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    border-radius: 3px;
}

.create-new-customer-btn:hover {
    background: #f0f0f0;
    border-color: #999;
    color: #333;
}

.no-customers-found {
    padding: 15px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* Inline New Customer Form */
.inline-new-customer-form {
    margin-top: 10px;
    padding: 12px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.inline-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.inline-form-header button {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.inline-form-header button:hover {
    color: #333;
}

.inline-form-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.inline-form-fields input {
    padding: 8px 10px;
    border: 1px solid #ddd;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.inline-form-fields input:focus {
    outline: none;
    border-color: #000;
}

.button-small {
    padding: 6px 12px !important;
    font-size: 12px !important;
}

.optional {
    font-weight: normal;
    color: #999;
    font-size: 12px;
}

/* Product Autocomplete (for Booking) */
.product-autocomplete-wrapper {
    position: relative;
}

.product-autocomplete-wrapper input[type="text"] {
    padding-right: 30px;
}

.product-autocomplete-wrapper input.has-selection {
    background: #e3f2fd;
    border-color: #2196f3;
}

.clear-product-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.clear-product-btn:hover {
    color: #333;
}

.product-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    background: #fff;
    border: 1px solid #000;
    border-top: none;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow-y: auto;
}

.product-dropdown.active {
    display: block;
}

.product-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
}

.product-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.product-option:last-child {
    border-bottom: none;
}

.product-option:hover {
    background: #f5f5f5;
}

.product-option-image {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.product-option-no-image {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 18px;
    flex-shrink: 0;
}

.product-option-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-option-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-option-price {
    font-size: 12px;
    color: #666;
}

.no-products-found {
    padding: 15px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.booking-product {
    font-size: 12px;
    color: #1976d2;
    margin-top: 2px;
}

.bookings-list h4 {
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.bookings-table {
    border: 1px solid #e5e5e5;
}

.booking-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #e5e5e5;
}

.booking-row:last-child {
    border-bottom: none;
}

.booking-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.booking-date {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    min-width: 100px;
}

.booking-time {
    font-size: 13px;
    color: #666;
    min-width: 60px;
}

.booking-title {
    font-size: 14px;
    color: #333;
}

.booking-customer {
    font-size: 12px;
    color: #2196f3;
    background: #e3f2fd;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 5px;
}

.booking-delete {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
}

.booking-delete:hover {
    color: #d32f2f;
}

.booking-delete:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.booking-row {
    transition: opacity 0.3s, transform 0.3s;
}

.booking-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-meeting-links {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.booking-meeting-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s;
}

.booking-meeting-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    color: #fff;
}

.booking-meeting-btn.host {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.booking-meeting-btn.host:hover {
    box-shadow: 0 2px 8px rgba(245, 87, 108, 0.4);
}

.booking-meeting-btn.guest {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.booking-meeting-btn.guest:hover {
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.4);
}

.booking-copy-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.booking-copy-link-btn:hover {
    background: #e0e0e0;
    border-color: #ccc;
}

.booking-copy-link-btn.copied {
    background: #d4edda;
    border-color: #28a745;
}

.booking-resend-email-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.booking-resend-email-btn:hover {
    background: #2196f3;
}

.booking-resend-email-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.booking-resend-email-btn.sent {
    background: #d4edda;
    border-color: #28a745;
}

.booking-send-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.booking-send-link-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
}

.booking-send-link-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.booking-send-link-btn.sent {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.booking-create-meeting-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #667eea;
    color: #667eea;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.booking-create-meeting-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: transparent;
}

.booking-create-meeting-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.booking-create-meeting-btn.loading {
    pointer-events: none;
}

.booking-meeting-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: #ede7f6;
    color: #5e35b1;
    font-size: 11px;
    font-weight: 500;
    border-radius: 10px;
}

/* Booking Manager Tabs */
.bm-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e5e5;
}

.bm-tab {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.bm-tab:hover {
    color: #333;
}

.bm-tab.active {
    color: #000;
}

.bm-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #000;
}

.bm-tab-content {
    display: none;
}

.bm-tab-content.active {
    display: block;
}

/* Hours of Operation Tab */
.bm-hours-section {
    max-width: 600px;
}

.bm-hours-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.bm-hours-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

.bm-hours-form {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 20px;
}

.bm-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
}

.bm-hours-row:last-of-type {
    border-bottom: none;
}

.bm-hours-day {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 150px;
    cursor: pointer;
}

.bm-hours-day input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.bm-hours-day span {
    font-size: 14px;
    font-weight: 500;
}

.bm-hours-times {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bm-time-input {
    padding: 8px 10px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    width: 120px;
}

.bm-time-input:focus {
    outline: none;
    border-color: #000;
}

.bm-hours-separator {
    font-size: 13px;
    color: #666;
}

.bm-hours-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

/* Blackout Dates Tab */
.bm-blackout-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.bm-blackout-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

.bm-blackout-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.bm-blackout-form-column {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 20px;
}

.bm-blackout-field {
    margin-bottom: 15px;
}

.bm-blackout-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}

.bm-blackout-field label .optional {
    font-weight: normal;
    color: #999;
}

.bm-blackout-field input[type="date"],
.bm-blackout-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    box-sizing: border-box;
}

.bm-blackout-field input:focus {
    outline: none;
    border-color: #000;
}

.bm-blackout-list-column h5 {
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: 600;
}

.bm-blackout-list {
    border: 1px solid #e5e5e5;
    max-height: 300px;
    overflow-y: auto;
}

.bm-blackout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
}

.bm-blackout-item:last-child {
    border-bottom: none;
}

.bm-blackout-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bm-blackout-date {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.bm-blackout-reason {
    font-size: 12px;
    color: #666;
}

.bm-blackout-delete {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
}

.bm-blackout-delete:hover {
    color: #d32f2f;
}

.no-blackout-dates {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

@media (max-width: 768px) {
    .bm-tabs {
        flex-wrap: wrap;
    }
    
    .bm-tab {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .bm-hours-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .bm-hours-day {
        width: 100%;
    }
    
    .bm-blackout-columns {
        grid-template-columns: 1fr;
    }
}

/* Image Tab */
.bm-image-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.bm-image-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

.bm-image-columns {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 25px;
}

.bm-image-crop-column h5,
.bm-image-preview-column h5 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cropper Container */
.bm-cropper-container {
    width: 100%;
    max-height: 400px;
    background: #1a1a1a;
    overflow: hidden;
}

.bm-cropper-container img {
    display: block;
    max-width: 100%;
}

/* Drop Zone */
.bm-image-drop-zone {
    width: 100%;
    min-height: 300px;
    background: #fafafa;
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.bm-image-drop-zone:hover,
.bm-image-drop-zone.drag-over {
    border-color: #000;
    background: #f5f5f5;
}

.bm-drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #999;
}

.bm-drop-icon {
    font-size: 48px;
}

.bm-drop-text {
    font-size: 14px;
    font-weight: 500;
}

.bm-drop-hint {
    font-size: 12px;
    color: #bbb;
}

/* Cropper Actions */
.bm-cropper-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.bm-cropper-actions .button-link-delete {
    color: #d32f2f;
    margin-left: auto;
}

.bm-cropper-actions .button-link-delete:hover {
    color: #b71c1c;
}

/* Circular Cropper Mask */
.cropper-crop-box.cropper-circular .cropper-view-box,
.cropper-crop-box.cropper-circular .cropper-face {
    border-radius: 50%;
}

.cropper-crop-box.cropper-circular .cropper-view-box {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    outline: none;
}

.cropper-crop-box.cropper-circular .cropper-dashed {
    display: none;
}

/* Preview Column */
.bm-preview-box {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bm-preview-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #eee;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #ddd;
}

.bm-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #999;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.bm-preview-note {
    font-size: 11px;
    color: #999;
    margin: 15px 0 0;
    text-align: center;
}

@media (max-width: 768px) {
    .bm-image-columns {
        grid-template-columns: 1fr;
    }
    
    .bm-image-preview-column {
        order: -1;
    }
}

/* Payments Tab */
.bm-payments-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.bm-payments-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 25px;
}

.bm-payments-group {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 20px;
    margin-bottom: 20px;
}

.bm-payments-group h5 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.bm-payment-methods-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bm-payment-method-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    transition: all 0.15s;
}

.bm-payment-method-item:hover {
    border-color: #000;
}

.bm-payment-method-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
}

.bm-payment-method-info {
    flex: 1;
}

.bm-payment-method-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.bm-payment-method-desc {
    display: block;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.bm-payments-notice {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.bm-payments-notice p {
    margin: 0 0 15px;
    color: #666;
}

.bm-payments-field {
    margin-bottom: 15px;
}

.bm-payments-field:last-child {
    margin-bottom: 0;
}

.bm-payments-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.bm-payments-field input[type="email"],
.bm-payments-field input[type="text"],
.bm-payments-field textarea {
    width: 100%;
    max-width: 400px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    font-size: 14px;
    box-sizing: border-box;
}

.bm-payments-field input:focus,
.bm-payments-field textarea:focus {
    outline: none;
    border-color: #000;
}

.bm-field-hint {
    font-size: 12px;
    color: #999;
    margin: 5px 0 0;
}

.bm-bank-details-field {
    margin-top: 15px;
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
}

.bm-bank-details-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}

.bm-bank-details-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    font-size: 13px;
    font-family: monospace;
    box-sizing: border-box;
}

.bm-payments-actions {
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

/* Stripe Section */
.bm-stripe-section {
    background: linear-gradient(135deg, #f6f9fc 0%, #eef2f7 100%);
    border: 2px solid #e3e8ee;
}

.bm-stripe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e3e8ee;
}

.bm-stripe-logo svg {
    display: block;
}

.bm-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bm-status-active {
    background: #d1fae5;
    color: #065f46;
}

.bm-status-inactive {
    background: #fef3c7;
    color: #92400e;
}

.bm-status-missing {
    background: #fee2e2;
    color: #991b1b;
}

.bm-stripe-toggle {
    background: #fff;
    border: 2px solid #635bff;
}

.bm-stripe-toggle:hover {
    border-color: #635bff;
    background: #fafaff;
}

.bm-stripe-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e3e8ee;
}

.bm-stripe-feature {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
}

.bm-stripe-test-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    font-size: 13px;
    color: #92400e;
}

.bm-stripe-test-notice .bm-notice-icon {
    flex-shrink: 0;
}

.bm-stripe-setup {
    text-align: center;
    padding: 20px;
}

.bm-stripe-setup p {
    margin: 0 0 15px;
    color: #666;
}

.bm-stripe-ready .bm-payment-method-item {
    margin-bottom: 0;
}

/* Checkout Tab */
.bm-checkout-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.bm-checkout-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 25px;
}

.bm-checkout-main-toggle {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border: 2px solid #e5e5e5;
    margin-bottom: 25px;
}

.bm-checkout-main-toggle .bm-toggle {
    flex-shrink: 0;
    margin-top: 2px;
}

.bm-checkout-toggle-label .bm-setting-label {
    font-size: 15px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.bm-checkout-toggle-label .bm-setting-desc {
    margin: 0;
}

.bm-checkout-options {
    transition: opacity 0.2s;
}

.bm-checkout-group {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 20px;
    margin-bottom: 20px;
}

.bm-checkout-group h5 {
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.bm-group-desc {
    font-size: 12px;
    color: #666;
    margin: -10px 0 15px;
}

.bm-checkout-field {
    margin-bottom: 15px;
}

.bm-checkout-field:last-child {
    margin-bottom: 0;
}

.bm-checkout-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #333;
}

.bm-checkout-field label .optional {
    font-weight: normal;
    color: #999;
}

.bm-checkout-field input[type="text"],
.bm-checkout-field input[type="number"],
.bm-checkout-field input[type="email"],
.bm-checkout-field select,
.bm-checkout-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    font-size: 14px;
    box-sizing: border-box;
}

.bm-checkout-field input:focus,
.bm-checkout-field select:focus,
.bm-checkout-field textarea:focus {
    outline: none;
    border-color: #000;
}

.bm-checkout-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.bm-checkout-toggles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.bm-checkout-toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    font-size: 13px;
}

.bm-checkout-toggle-item:hover {
    background: #f5f5f5;
}

.bm-checkout-toggle-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.bm-checkout-info {
    background: #fffbeb;
    border-color: #f59e0b;
}

.bm-info-text {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.bm-info-text a {
    color: #000;
    font-weight: 500;
}

.bm-checkout-actions {
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

@media (max-width: 768px) {
    .bm-checkout-field-row {
        grid-template-columns: 1fr;
    }
    
    .bm-checkout-toggles {
        grid-template-columns: 1fr;
    }
}

/* Settings Tab */
.bm-settings-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.bm-settings-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 25px;
}

.bm-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.bm-setting-item {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 15px;
}

.bm-setting-item.bm-setting-highlight {
    background: #fffbeb;
    border-color: #f59e0b;
}

.bm-setting-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
}

.bm-setting-label {
    font-weight: 600;
    font-size: 14px;
}

.bm-setting-desc {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.bm-setting-with-input .bm-setting-input {
    margin-top: 10px;
}

.bm-setting-input input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e5e5;
    font-size: 13px;
    box-sizing: border-box;
}

.bm-setting-input input:focus {
    outline: none;
    border-color: #000;
}

.bm-setting-input .bm-setting-desc {
    margin-top: 5px;
}

/* Toggle Switch */
.bm-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.bm-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.bm-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.2s;
    border-radius: 24px;
}

.bm-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
}

.bm-toggle input:checked + .bm-toggle-slider {
    background-color: #000;
}

.bm-toggle input:checked + .bm-toggle-slider:before {
    transform: translateX(20px);
}

.bm-settings-actions {
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.bm-checkout-status {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.bm-checkout-status.enabled {
    background: #22c55e;
    color: #fff;
}

.bm-checkout-status.disabled {
    background: #e5e5e5;
    color: #999;
}

.bm-setting-link {
    display: inline-block;
    margin-left: 8px;
    color: #000;
    font-weight: 500;
    text-decoration: none;
}

.bm-setting-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .bm-settings-grid {
        grid-template-columns: 1fr;
    }
    
    .bm-image-preview {
        max-width: 100%;
    }
}

/* Customer Manager */
.customer-manager-panel {
    background: #fff;
    border: 1px solid #e5e5e5;
    margin-bottom: 30px;
    padding: 20px;
}

.customer-manager-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.customer-list-column h4,
.customer-form-column h4,
.add-customer-form h4 {
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.customers-table {
    max-height: 400px;
    overflow-y: auto;
}

.customer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    transition: opacity 0.3s, transform 0.3s;
}

.customer-row:hover {
    background: #fafafa;
}

.customer-row.selected {
    background: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.customer-info-clickable {
    cursor: pointer;
    flex: 1;
}

.customer-info-clickable:hover .customer-name {
    color: #2196f3;
}

.customer-row:last-child {
    border-bottom: none;
}

.customer-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.customer-name {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.customer-email {
    font-size: 13px;
    color: #666;
}

.customer-phone {
    font-size: 13px;
    color: #999;
}

.customer-delete {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
}

.customer-delete:hover {
    color: #d32f2f;
}

.customer-delete:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.customer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-send-credentials {
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 4px 10px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
    white-space: nowrap;
}

.customer-send-credentials:hover {
    background: #e0e0e0;
    border-color: #ccc;
}

.customer-send-credentials:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.credentials-sent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #4caf50;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
}

.customer-form-checkbox {
    margin-top: 5px;
}

.customer-form-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

.customer-form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.customer-form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.customer-form-buttons .button-secondary {
    background: #f0f0f0;
    border-color: #ddd;
    color: #333;
}

.customer-form-buttons .button-secondary:hover {
    background: #e0e0e0;
}

.field-note {
    font-size: 12px;
    color: #999;
    margin: 5px 0 0;
    font-style: italic;
}

.no-customers {
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    font-size: 14px;
    color: #666;
    margin: 0;
}

.customer-form-field {
    margin-bottom: 12px;
}

.customer-form-field label {
    display: block;
    font-size: 13px;
    color: #333;
    margin-bottom: 5px;
}

.customer-form-field input[type="text"],
.customer-form-field input[type="email"],
.customer-form-field input[type="tel"],
.customer-form-field textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    box-sizing: border-box;
}

.customer-form-field input:focus,
.customer-form-field textarea:focus {
    outline: none;
    border-color: #000;
}

.customer-form-field textarea {
    resize: vertical;
    min-height: 60px;
}

.no-bookings {
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    font-size: 14px;
    color: #666;
    margin: 0;
}

.no-context-items {
    padding: 30px;
    text-align: center;
    background: #f9f9f9;
}

.no-context-items p {
    margin: 0 0 15px;
    font-size: 14px;
    color: #666;
}

.dashboard-widgets {
    display: block;
}

.widget {
    background: #fff;
    padding: 0;
    border: none;
    margin-bottom: 30px;
}

.widget h3 {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: normal;
    color: #000;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget ul li {
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    color: #000;
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li strong {
    font-weight: normal;
    color: #666;
    margin-right: 10px;
}

/* Upcoming Bookings Widget */
.widget.upcoming-bookings h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget.upcoming-bookings h3 i {
    color: #667eea;
}

.bookings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s;
}

.booking-item:hover {
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.booking-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e9ecef;
}

.booking-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-thumb.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 18px;
}

.booking-details {
    flex: 1;
    min-width: 0;
}

.booking-datetime {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.booking-date {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.booking-time {
    font-size: 12px;
    color: #667eea;
    background: #eef1ff;
    padding: 2px 6px;
    border-radius: 4px;
}

.booking-customer {
    font-size: 13px;
    color: #666;
}

.booking-customer strong {
    color: #333;
    font-weight: 500;
}

.booking-service {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.booking-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.booking-status {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.booking-status.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.booking-status.status-confirmed {
    background: #d1fae5;
    color: #065f46;
}

.booking-status.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.booking-status.status-in-progress {
    background: #dbeafe;
    color: #1e40af;
    animation: pulse-status 2s infinite;
}

@keyframes pulse-status {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* In Progress Checklist */
.booking-item.has-issues {
    border-left: 3px solid #f59e0b;
}

.booking-checklist {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fef3c7;
    border-radius: 6px;
    font-size: 12px;
}

.booking-checklist.all-good {
    background: #d1fae5;
}

.checklist-header {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.checklist-header.success {
    color: #065f46;
}

.checklist-header i {
    font-size: 13px;
}

.checklist-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #78350f;
    font-size: 11px;
}

.checklist-item.error {
    color: #991b1b;
}

.checklist-item.error i {
    color: #dc2626;
}

.checklist-item.warning {
    color: #92400e;
}

.checklist-item.warning i {
    color: #f59e0b;
}

.checklist-item.success {
    color: #065f46;
}

.checklist-item.success i {
    color: #10b981;
}

.checklist-item i {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* Reminder button states */
.booking-action-btn.remind.sent {
    background: #d1fae5;
    color: #065f46;
}

.booking-action-btn.remind.sent:hover {
    background: #a7f3d0;
}

/* Action Required / All Set Buttons */
.action-required-btn,
.all-set-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.action-required-btn {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

.action-required-btn:hover {
    background: #fde68a;
}

.action-required-btn .issue-count {
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.all-set-btn {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.all-set-btn:hover {
    background: #a7f3d0;
}

/* Action Required Modal */
.ar-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.ar-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: arModalIn 0.3s ease;
}

@keyframes arModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.ar-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

.ar-modal-title i {
    font-size: 20px;
}

.ar-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.ar-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ar-modal-body {
    padding: 20px;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

.ar-booking-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}

.ar-booking-id {
    font-family: monospace;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 6px;
}

.ar-booking-status {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
}

.ar-booking-status.in-progress {
    background: #dbeafe;
    color: #1e40af;
}

.ar-booking-status.upcoming {
    background: #d1fae5;
    color: #065f46;
}

.ar-booking-status.confirmed {
    background: #d1fae5;
    color: #065f46;
}

.ar-booking-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.ar-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ar-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.ar-checklist-item.completed {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.ar-checklist-item.pending {
    background: #fffbeb;
    border-color: #fde68a;
}

.ar-checklist-item.error {
    background: #fef2f2;
    border-color: #fecaca;
}

.ar-checklist-item.warning {
    background: #fffbeb;
    border-color: #fde68a;
}

.ar-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ar-checklist-item.completed .ar-item-icon {
    color: #10b981;
}

.ar-checklist-item.pending .ar-item-icon {
    color: #f59e0b;
}

.ar-checklist-item.error .ar-item-icon {
    color: #ef4444;
}

.ar-checklist-item.warning .ar-item-icon {
    color: #f59e0b;
}

.ar-item-content {
    flex: 1;
    min-width: 0;
}

.ar-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.ar-item-desc {
    font-size: 12px;
    color: #6b7280;
    word-break: break-word;
}

.ar-item-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ar-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.ar-action-btn.primary {
    background: #667eea;
    color: #fff;
}

.ar-action-btn.primary:hover {
    background: #5a67d8;
}

.ar-action-btn.secondary {
    background: #e5e7eb;
    color: #374151;
}

.ar-action-btn.secondary:hover {
    background: #d1d5db;
}

.ar-action-btn.success {
    background: #10b981;
    color: #fff;
}

.ar-action-btn.success:hover {
    background: #059669;
}

.ar-action-btn.warning {
    background: #f59e0b;
    color: #fff;
}

.ar-action-btn.warning:hover {
    background: #d97706;
}

/* Action button group */
.ar-action-group {
    display: flex;
    gap: 6px;
}

.ar-action-group .ar-action-btn {
    padding: 8px 10px;
}

/* Link display */
.ar-link-display {
    margin-top: 4px;
}

.ar-link-display code {
    font-size: 10px;
    background: #e5e7eb;
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
    color: #374151;
}

.ar-status-badge {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
}

.ar-status-badge.success {
    background: #d1fae5;
    color: #10b981;
}

.ar-status-badge.pending {
    background: #fef3c7;
    color: #f59e0b;
}

.ar-status-badge.error {
    background: #fee2e2;
    color: #ef4444;
}

.ar-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 13px;
}

.ar-message.success {
    background: #d1fae5;
    color: #065f46;
}

.ar-message.error {
    background: #fee2e2;
    color: #991b1b;
}

.ar-modal-footer {
    padding: 16px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

.ar-btn-close {
    padding: 10px 20px;
    background: #374151;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.ar-btn-close:hover {
    background: #1f2937;
}

/* Responsive */
@media (max-width: 480px) {
    .ar-checklist-item {
        flex-wrap: wrap;
    }
    
    .ar-item-action {
        width: 100%;
        margin-top: 10px;
    }
    
    .ar-action-btn {
        width: 100%;
        justify-content: center;
    }
}

.booking-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #667eea;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.booking-join-btn:hover {
    background: #5a6fd6;
    color: #fff;
}

.view-all-link {
    display: block;
    margin-top: 15px;
    text-align: center;
    font-size: 13px;
    color: #667eea;
    text-decoration: none;
}

.view-all-link:hover {
    text-decoration: underline;
}

/* Dashboard Two Column Layout */
.dashboard-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-column {
    min-width: 0;
}

.dashboard-column .widget {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-column .widget .bookings-list,
.dashboard-column .widget .events-list {
    flex: 1;
}

.empty-widget-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #888;
    text-align: center;
}

.empty-widget-message i {
    font-size: 40px;
    color: #ddd;
    margin-bottom: 12px;
}

.empty-widget-message p {
    margin: 0;
    font-size: 14px;
}

/* Events Widget */
.upcoming-events h3 i {
    color: #e91e63;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s;
}

.event-item:hover {
    border-color: #e91e63;
    background: #fff;
    box-shadow: 0 2px 8px rgba(233, 30, 99, 0.1);
}

.event-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e9ecef;
}

.event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-thumb.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
    color: rgba(255,255,255,0.8);
    font-size: 18px;
}

.event-details {
    flex: 1;
    min-width: 0;
}

.event-id-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.event-id {
    font-size: 10px;
    font-family: 'Monaco', 'Consolas', monospace;
    color: #e91e63;
    background: #fce4ec;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.event-id:hover {
    background: #f8bbd9;
}

.live-badge {
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    background: #dc2626;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.event-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-datetime {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #888;
}

.event-datetime i {
    margin-right: 3px;
    color: #aaa;
}

.event-price {
    font-size: 14px;
    font-weight: 600;
    color: #e91e63;
    flex-shrink: 0;
}

.event-price .free {
    color: #22c55e;
}

@media screen and (max-width: 900px) {
    .dashboard-two-columns {
        grid-template-columns: 1fr;
    }
}

/* Widget Tabs & Filters */
.widget-header-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.widget-header-tabs h3 {
    margin: 0;
}

.widget-tabs {
    display: flex;
    gap: 4px;
    background: #f0f0f0;
    padding: 3px;
    border-radius: 8px;
}

.widget-tab {
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.widget-tab:hover {
    background: rgba(255,255,255,0.5);
}

.widget-tab.active {
    background: #fff;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tab-count {
    font-size: 10px;
    background: #e5e5e5;
    padding: 1px 5px;
    border-radius: 10px;
    color: #666;
}

.widget-tab.active .tab-count {
    background: #667eea;
    color: #fff;
}

.widget-tab-content {
    display: none;
}

.widget-tab-content.active {
    display: block;
}

.filter-pills {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 5px 10px;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-pill:hover {
    border-color: #667eea;
    color: #667eea;
}

.filter-pill.active {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}

.filter-pill span {
    font-size: 10px;
    opacity: 0.8;
}

.empty-widget-message {
    text-align: center;
    padding: 30px 20px;
    color: #888;
}

.empty-widget-message i {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
    color: #ddd;
}

.empty-widget-message p {
    margin: 0;
    font-size: 13px;
}

.booking-item.archived,
.event-item.archived {
    opacity: 0.7;
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.pagination-info {
    font-size: 11px;
    color: #888;
}

.pagination-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pg-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #666;
}

.pg-btn:hover:not(:disabled) {
    border-color: #667eea;
    color: #667eea;
}

.pg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pg-current {
    font-size: 12px;
    color: #666;
    min-width: 50px;
    text-align: center;
}

.draft-badge {
    font-size: 9px;
    font-weight: 600;
    color: #f59e0b;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Dashboard Two Columns */
.dashboard-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-column {
    min-width: 0;
}

@media screen and (max-width: 900px) {
    .dashboard-two-columns {
        grid-template-columns: 1fr;
    }
}

/* Booking ID */
.booking-id-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.booking-id {
    font-size: 10px;
    font-family: 'Monaco', 'Consolas', monospace;
    color: #667eea;
    background: #f0f4ff;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.booking-id:hover {
    background: #e0e7ff;
}

.copy-id-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    border-radius: 4px;
    font-size: 10px;
    transition: all 0.2s;
}

.copy-id-btn:hover {
    background: #f0f0f0;
    color: #667eea;
}

.copy-id-btn.copied {
    color: #22c55e;
}

/* Booking Action Buttons */
.booking-action-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.booking-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.booking-action-btn.join {
    background: #667eea;
    color: #fff;
    text-decoration: none;
}

.booking-action-btn.join:hover {
    background: #5a6fd6;
    color: #fff;
}

.booking-action-btn.remind {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.booking-action-btn.remind:hover {
    background: #16a34a;
    color: #fff;
}

.booking-action-btn.edit {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.booking-action-btn.edit:hover {
    background: #2563eb;
    color: #fff;
}

.booking-action-btn.cancel {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.booking-action-btn.cancel:hover {
    background: #dc2626;
    color: #fff;
}

.booking-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Update Booking Modal */
.ub-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.ub-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ub-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
}

.ub-modal-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ub-modal-header h4 i {
    color: #667eea;
}

.ub-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ub-modal-close:hover {
    background: #e5e5e5;
}

.ub-modal-body {
    padding: 20px;
}

.ub-form-row {
    margin-bottom: 16px;
}

.ub-form-row:last-child {
    margin-bottom: 0;
}

.ub-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ub-section-title:not(:first-child) {
    margin-top: 20px;
}

.ub-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ub-form-grid .ub-form-row {
    margin-bottom: 0;
}

.ub-required {
    color: #dc2626;
}

.ub-field-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #f59e0b;
    margin-top: 4px;
}

.ub-field-hint i {
    font-size: 12px;
}

.ub-form-row label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 6px;
}

.ub-form-row input,
.ub-form-row select,
.ub-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.ub-form-row input:focus,
.ub-form-row select:focus,
.ub-form-row textarea:focus {
    outline: none;
    border-color: #667eea;
}

.ub-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e5e5e5;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.ub-btn-cancel {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ub-btn-cancel:hover {
    background: #f5f5f5;
}

.ub-btn-save {
    flex: 2;
    padding: 10px 16px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ub-btn-save:hover {
    opacity: 0.9;
}

.ub-btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Forms */
.user-account-form {
    max-width: 500px;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: normal;
    color: #000;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    font-size: 14px;
    background: #fff;
    color: #000;
    font-family: inherit;
}

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

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

/* Signup - Role selection buttons (Broker / Artist) */
.signup-role-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.signup-role-label {
    font-size: 15px;
    font-weight: 500;
    color: #374151;
}

.signup-role-btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.signup-role-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.signup-role-btn i {
    font-size: 18px;
    opacity: 0.85;
}

.signup-role-btn:hover {
    border-color: #667eea;
    color: #667eea;
    background: #f8f9ff;
}

.signup-role-btn.active {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.signup-role-btn.active i {
    opacity: 1;
}

.signup-role-btn:focus {
    outline: none;
}

.signup-role-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.35);
}

/* Gig tab - Artist -> Customer flow */
.user-account-gig .gig-flow-row {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    max-width: 400px;
}
.user-account-gig .gig-flow-row .stat-card-mini {
    min-width: 0;
    padding: 8px 4px;
}
.user-account-gig .gig-flow-row .stat-mini-icon { font-size: 12px; margin-bottom: 2px; }
.user-account-gig .gig-flow-row .stat-mini-value { font-size: 13px; }
.user-account-gig .gig-flow-row .stat-mini-label { font-size: 8px; }
.user-account-gig .gig-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}
.user-account-gig .dashboard-page-header { margin-bottom: 14px; }
.user-account-gig .dashboard-title { font-size: 18px; }
.user-account-gig .dashboard-subtitle { font-size: 12px; }

.form-actions {
    margin-top: 25px;
}

.button {
    padding: 10px 20px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border-radius: 0;
    font-weight: normal;
    display: inline-block;
}

.button:hover {
    background: #333;
    border-color: #333;
}

.button-secondary {
    background: #fff;
    color: #000;
    border-color: #000;
}

.button-secondary:hover {
    background: #f5f5f5;
}

.button-small {
    padding: 6px 12px;
    font-size: 13px;
}

.form-message {
    margin-top: 15px;
    padding: 12px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    background: #f5f5f5;
}

.form-message.success {
    background: #f0f8f0;
    border-color: #4a4;
    color: #000;
}

.form-message.error {
    background: #fff0f0;
    border-color: #a44;
    color: #000;
}

/* Tables */
.orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid #e5e5e5;
}

.orders-table th,
.orders-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    color: #000;
}

.orders-table th {
    background: #f5f5f5;
    font-weight: normal;
    color: #000;
}

.orders-table tr:last-child td {
    border-bottom: none;
}

.orders-table a {
    color: #000;
    text-decoration: underline;
}

/* Order Type Badge */
.order-type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

.order-type-badge.booking {
    background: #e3f2fd;
    color: #1565c0;
}

/* Order Status Badges */
.order-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.order-status.status-completed {
    background: #e8f5e9;
    color: #2e7d32;
}

.order-status.status-processing {
    background: #fff3e0;
    color: #e65100;
}

.order-status.status-pending {
    background: #fff8e1;
    color: #f57f17;
}

.order-status.status-on-hold {
    background: #fce4ec;
    color: #c2185b;
}

.order-status.status-cancelled,
.order-status.status-failed {
    background: #ffebee;
    color: #c62828;
}

.order-status.status-refunded {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* Booking order row highlight */
.orders-table tr.booking-order {
    background: #fafafa;
}

/* Invoices Table */
.invoices-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid #e5e5e5;
}

.invoices-table th,
.invoices-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    color: #000;
}

.invoices-table th {
    background: #f5f5f5;
    font-weight: normal;
    color: #000;
}

.invoices-table tr:last-child td {
    border-bottom: none;
}

.invoices-table a {
    color: #000;
    text-decoration: none;
}

.invoices-filters {
    margin-bottom: 20px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
}

.invoices-filters form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.invoices-filters select,
.invoices-filters input[type="search"] {
    padding: 8px 12px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    background: #fff;
    color: #000;
}

.invoices-filters select:focus,
.invoices-filters input[type="search"]:focus {
    outline: none;
    border-color: #000;
}

.invoice-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.invoice-status.status-draft {
    background-color: #f0f0f0;
    color: #666;
}

.invoice-status.status-sent {
    background-color: #e3f2fd;
    color: #1976d2;
}

.invoice-status.status-paid {
    background-color: #e8f5e9;
    color: #388e3c;
}

.invoice-status.status-overdue {
    background-color: #ffebee;
    color: #d32f2f;
}

.no-invoices {
    padding: 40px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.no-invoices p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Addresses */
.addresses-wrapper {
    display: block;
    margin-top: 20px;
}

.billing-address,
.shipping-address {
    background: #fff;
    padding: 0;
    border: none;
    margin-bottom: 30px;
}

.billing-address h3,
.shipping-address h3 {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: normal;
    color: #000;
}

.address-content address {
    font-style: normal;
    line-height: 1.8;
    color: #000;
    font-size: 14px;
}

/* Showcase Page */
.user-account-showcase {
    max-width: 600px;
}

.showcase-preview {
    border: 1px solid #e5e5e5;
    padding: 20px;
    margin-bottom: 30px;
    background: #fff;
}

.showcase-preview h3 {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: normal;
    color: #000;
}

.showcase-status {
    margin-bottom: 20px;
    padding: 10px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    font-size: 14px;
}

.showcase-status.active {
    background: #f0f8f0;
    border-color: #4a4;
}

.showcase-status.inactive {
    background: #fff0f0;
    border-color: #a44;
}

.showcase-url {
    margin: 20px 0;
    padding: 15px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
}

.showcase-url strong {
    font-weight: normal;
    color: #000;
    font-size: 14px;
}

.showcase-url a {
    color: #000;
    text-decoration: underline;
    font-size: 16px;
}

.showcase-url a.button {
    display: inline-block;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border: 1px solid #000;
    font-size: 14px;
    margin-top: 10px;
}

.showcase-url a.button:hover {
    background: #333;
    border-color: #333;
}

.showcase-url p {
    margin: 10px 0 0;
    font-size: 12px;
    color: #666;
}

/* Login Required */
.user-account-login-required {
    max-width: 400px;
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border: 1px solid #e5e5e5;
}

.user-account-login-required h2 {
    margin: 0 0 20px;
    font-size: 18px;
    text-align: left;
    color: #000;
    font-weight: normal;
}

#user-account-login-form {
    margin-top: 20px;
}

#user-account-login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: normal;
    color: #000;
    font-size: 14px;
}

#user-account-login-form input[type="text"],
#user-account-login-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
    color: #000;
}

#user-account-login-form input:focus {
    outline: none;
    border-color: #000;
}

#user-account-login-form .button-primary {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: normal;
}

#user-account-login-form .login-remember {
    margin: 15px 0;
    font-size: 14px;
}

#user-account-login-form .login-submit {
    margin-top: 20px;
}

/* Account Sub-Tabs */
.account-sub-tabs {
    margin-bottom: 25px;
    border-bottom: 1px solid #e5e5e5;
}

.account-sub-tabs .sub-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.account-sub-tabs .sub-tab-item {
    margin: 0;
    padding: 0;
}

.account-sub-tabs .sub-tab-item a {
    display: block;
    padding: 12px 20px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    background: #fff;
    transition: all 0.2s ease;
}

.account-sub-tabs .sub-tab-item a:hover {
    color: #000;
    background: #f5f5f5;
}

.account-sub-tabs .sub-tab-item.active a {
    color: #000;
    border-bottom-color: #000;
    font-weight: 500;
}

.account-sub-content {
    padding-top: 10px;
}

.account-sub-content h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

/* Subscription Tab */
.subscriptions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subscription-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
}

.subscription-status {
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.subscription-status.status-active {
    background: #e8f5e9;
    color: #388e3c;
}

.subscription-status.status-pending {
    background: #fff3e0;
    color: #f57c00;
}

.subscription-status.status-cancelled,
.subscription-status.status-expired {
    background: #ffebee;
    color: #d32f2f;
}

.subscription-details {
    flex: 1;
}

.subscription-details p {
    margin: 0 0 5px;
    font-size: 14px;
    color: #333;
}

.subscription-actions {
    flex-shrink: 0;
}

.no-subscription {
    padding: 40px;
    text-align: center;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
}

.no-subscription p {
    margin: 0 0 15px;
    font-size: 14px;
    color: #666;
}

/* Activity Tab */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #666;
}

.activity-details {
    flex: 1;
}

.activity-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.activity-meta {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.activity-meta .status-completed,
.activity-meta .status-processing {
    color: #388e3c;
}

.activity-meta .status-pending,
.activity-meta .status-on-hold {
    color: #f57c00;
}

.activity-meta .status-cancelled,
.activity-meta .status-failed {
    color: #d32f2f;
}

.no-activity {
    padding: 40px;
    text-align: center;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
}

.no-activity p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* Account Details Tab */
.account-details-tab .user-account-form,
.account-password-tab .user-account-form {
    max-width: 450px;
}

/* Custom URLs Tab */
.account-custom-urls-tab {
    max-width: 600px;
}

.url-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
}

.url-section:last-of-type {
    border-bottom: none;
}

.url-section h3 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.url-description {
    margin: 0 0 15px;
    font-size: 13px;
    color: #666;
}

.url-display {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
}

.url-display code {
    flex: 1;
    font-size: 14px;
    color: #333;
    background: none;
    padding: 0;
}

.url-display code strong {
    color: #000;
}

.url-visit {
    color: #000;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.url-visit:hover {
    text-decoration: underline;
}

.url-input-group {
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    background: #fff;
}

.url-prefix {
    padding: 10px 0 10px 15px;
    font-size: 14px;
    color: #666;
    background: #f5f5f5;
    border-right: 1px solid #e5e5e5;
    padding-right: 10px;
}

.url-slug-input {
    flex: 1;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
}

.url-slug-input:focus {
    box-shadow: none;
}

.url-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #999;
}

.url-items-list {
    margin-top: 20px;
}

.url-items-list h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.items-table {
    border: 1px solid #e5e5e5;
}

.item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #e5e5e5;
}

.item-row:last-child {
    border-bottom: none;
}

.item-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex: 1;
}

.item-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.item-title {
    font-size: 14px;
    color: #000;
}

.item-status {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 500;
}

.item-status.published {
    background: #e8f5e9;
    color: #388e3c;
}

.item-status.unpublished {
    background: #f5f5f5;
    color: #999;
}

.items-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #666;
}

.no-items {
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    color: #666;
}

.custom-urls-form .form-actions {
    margin-top: 30px;
}

/* Responsive */
/* Products Sub-Tabs */
.products-sub-tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.products-sub-tabs .sub-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.products-sub-tabs .sub-tab-item {
    margin: 0;
    padding: 0;
}

.products-sub-tabs .sub-tab-item a {
    display: block;
    padding: 10px 15px;
    color: #000;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    background: #fff;
}

.products-sub-tabs .sub-tab-item a:hover {
    background: #f5f5f5;
}

.products-sub-tabs .sub-tab-item.active a {
    border-bottom-color: #000;
    font-weight: normal;
}

.products-sub-content {
    margin-top: 15px;
}

.products-sub-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: normal;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.product-item {
    border: 1px solid #e5e5e5;
    background: #fff;
    padding: 15px;
}

.product-item .product-image {
    margin-bottom: 10px;
}

.product-item .product-image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-item .product-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: normal;
}

.product-item .product-title a {
    color: #000;
    text-decoration: underline;
}

.product-item .product-price {
    font-size: 14px;
    color: #000;
    margin-bottom: 5px;
}

.product-item .product-status {
    font-size: 12px;
    color: #666;
}

/* Products Checkbox List */
.products-checkbox-list {
    margin-top: 10px;
}

.product-checkbox-item {
    display: block;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #e5e5e5;
    background: #fff;
}

.product-checkbox-item input[type="checkbox"] {
    margin-right: 10px;
}

.product-checkbox-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #000;
}

.product-price-small {
    font-size: 12px;
    color: #666;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .user-account-container {
        flex-direction: row;
    }
    
    /* Left sidebar with icons only */
    .user-account-sidebar {
        width: 60px;
        min-width: 60px;
        border-right: 1px solid #e5e5e5;
        border-bottom: none;
        height: auto;
        min-height: 100vh;
        position: sticky;
        top: 0;
        background: #fff;
    }
    
    /* User account header - smaller avatar, hide name/email on mobile */
    .user-account-sidebar .user-account-header {
        padding: 10px;
        justify-content: center;
    }
    
    .user-account-sidebar .user-avatar {
        width: 36px;
        height: 36px;
    }
    
    .user-account-sidebar .user-avatar .avatar-placeholder {
        font-size: 14px;
    }
    
    .user-account-sidebar .user-avatar .avatar-edit-icon i {
        font-size: 12px;
    }
    
    .user-account-sidebar .user-info {
        display: none;
    }
    
    .user-account-menu {
        padding: 10px 0;
    }
    
    .user-account-menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 0;
    }
    
    .user-account-menu .menu-item {
        border-bottom: none;
        width: 100%;
    }
    
    .user-account-menu .menu-item a {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 12px 8px;
        border-left: 3px solid transparent;
        border-bottom: none;
        border-radius: 0;
        margin: 0;
        background: transparent;
    }
    
    .user-account-menu .menu-item a:hover {
        background: #f5f5f5;
    }
    
    .user-account-menu .menu-item .menu-icon {
        font-size: 20px;
        width: auto;
        color: #666;
    }
    
    .user-account-menu .menu-item .menu-text {
        display: none;
    }
    
    .user-account-menu .menu-item.active a {
        border-left-color: #000;
        border-bottom: none;
        background: #f5f5f5;
    }
    
    .user-account-menu .menu-item.active .menu-icon {
        color: #000;
    }
    
    .user-account-menu .menu-item.logout-link {
        margin-top: auto;
        border-top: 1px solid #e5e5e5;
        padding-top: 10px;
    }
    
    .user-account-menu .menu-item.logout-link a {
        border-top: none;
        margin-top: 0;
    }
    
    .user-account-menu .menu-item.logout-link .menu-icon {
        color: #dc3545;
    }
    
    /* Hide RnD menu on mobile */
    .menu-item-rnd-parent {
        display: none;
    }
    
    /* Content area takes remaining space */
    .user-account-content {
        flex: 1;
        min-width: 0;
    }
    
    .user-account-content-inner {
        padding: 20px;
    }
    
    .dashboard-stats-compact {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .stat-mini-value {
        font-size: 13px;
    }
    
    .stat-mini-label {
        font-size: 8px;
    }
    
    .stat-card-mini {
        padding: 10px 6px;
    }
    
    .sales-chart-container {
        padding: 12px;
    }
    
    .sales-chart-wrapper {
        height: 100px;
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-value {
        font-size: 22px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    .context-items-list {
        padding: 15px;
    }
    
    .context-items-grid {
        grid-template-columns: 1fr;
    }
    
    .context-item-meta {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .dashboard-widgets {
        display: block;
    }
    
    .addresses-wrapper {
        display: block;
    }
    
    /* Mobile Products Sub-Tabs */
    .products-sub-tabs .sub-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .products-sub-tabs .sub-tab-item {
        flex-shrink: 0;
    }
    
    /* Mobile Account Sub-Tabs */
    .account-sub-tabs .sub-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .account-sub-tabs .sub-tab-item {
        flex-shrink: 0;
    }
    
    .account-sub-tabs .sub-tab-item a {
        padding: 10px 15px;
        white-space: nowrap;
    }
    
    .subscription-item {
        flex-direction: column;
        gap: 10px;
    }
    
    .activity-item {
        gap: 10px;
    }
    
    .activity-icon {
        width: 30px;
        height: 30px;
    }
    
    .activity-icon .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
    }
    
    /* Mobile RnD Menu */
    .menu-item-rnd-parent {
        border-top: none;
        margin-top: 0;
        position: relative;
    }
    
    .menu-item-rnd-parent > a.rnd-toggle {
        padding: 12px 15px;
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    
    .menu-item-rnd-parent.expanded > a.rnd-toggle {
        border-left: none;
        border-bottom-color: #999;
    }
    
    .rnd-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 150px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-left: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        z-index: 100;
        display: flex;
        flex-direction: column;
    }
    
    .rnd-submenu .menu-item {
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .rnd-submenu .menu-item:last-child {
        border-bottom: none;
    }
    
    .rnd-submenu .menu-item a {
        padding: 10px 15px;
        border-bottom: none;
    }
    
    /* Mobile Booking Manager */
    .booking-manager-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .bm-calendar {
        padding: 10px;
    }
    
    .bm-day-num {
        font-size: 12px;
    }
    
    .booking-info {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .booking-date {
        min-width: auto;
    }
    
    /* Mobile Customer Manager */
    .customer-manager-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .customers-table {
        max-height: 250px;
    }
}

/* =====================================================
   Live Events Tab Styles
   ===================================================== */
.bm-live-events-section {
    padding: 10px 0;
}

.live-events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.live-events-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.add-event-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.add-event-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 176, 155, 0.3);
    color: #fff;
}

.live-events-products,
.live-events-orders {
    margin-bottom: 25px;
}

.live-events-products h5,
.live-events-orders h5 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-count {
    font-weight: 400;
    color: #888;
}

/* Events List */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 15px;
    transition: all 0.2s;
}

.event-item:hover {
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.event-item.past-event {
    opacity: 0.7;
    background: #f9f9f9;
}

.event-item-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.event-item-info {
    flex: 1;
    min-width: 0;
}

.event-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.event-badge.past {
    background: #f3f4f6;
    color: #6b7280;
}

.event-badge.virtual {
    background: #f3e5f5;
    color: #7b1fa2;
}

.event-badge.hybrid {
    background: #e3f2fd;
    color: #1565c0;
}

.event-badge.in-person {
    background: #e8f5e9;
    color: #2e7d32;
}

.event-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.event-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.stat-item {
    font-size: 12px;
    color: #555;
    background: #f5f5f5;
    padding: 3px 8px;
    border-radius: 4px;
}

.event-item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.event-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.event-action-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.event-action-btn.host-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: transparent;
}

.event-action-btn.host-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.event-action-btn.go-live-btn {
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
    animation: pulse-live 2s infinite;
}

.event-action-btn.go-live-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 12px rgba(229, 57, 53, 0.5);
    animation: none;
}

@keyframes pulse-live {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(229, 57, 53, 0);
    }
}

.event-action-btn.create-meeting-btn {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.event-action-btn.create-meeting-btn:hover {
    background: #c8e6c9;
}

/* No Events Message */
.no-events-message {
    text-align: center;
    padding: 40px 20px;
    background: #f9f9f9;
    border-radius: 10px;
}

.no-events-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.no-events-message p {
    color: #666;
    margin: 0 0 15px;
}

.create-event-link {
    color: #00b09b;
    text-decoration: none;
    font-weight: 500;
}

.create-event-link:hover {
    text-decoration: underline;
}

/* Orders Table */
.orders-table-wrapper {
    overflow-x: auto;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.orders-table th,
.orders-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
}

.orders-table th {
    font-weight: 600;
    color: #555;
    background: #f9f9f9;
    font-size: 12px;
    text-transform: uppercase;
}

.orders-table tbody tr:hover {
    background: #f9f9f9;
}

.customer-info {
    display: flex;
    flex-direction: column;
}

.customer-name {
    font-weight: 500;
    color: #333;
}

.customer-email {
    font-size: 11px;
    color: #888;
}

.order-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.order-status.status-processing {
    background: #fff3cd;
    color: #856404;
}

.order-status.status-completed {
    background: #d4edda;
    color: #155724;
}

.order-status.status-on-hold {
    background: #e2e3e5;
    color: #383d41;
}

.order-actions {
    display: flex;
    gap: 6px;
}

.order-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.order-action-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.order-action-btn.send-link-btn:hover {
    background: #e3f2fd;
    border-color: #2196f3;
}

.no-orders-message {
    text-align: center;
    color: #888;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 10px;
}

/* Live Events Footer */
.live-events-footer {
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}

.live-events-footer a {
    color: #00b09b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.live-events-footer a:hover {
    text-decoration: underline;
}

/* Mobile Live Events */
@media (max-width: 768px) {
    .event-item-main {
        flex-direction: column;
    }
    
    .event-item-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }
    
    .orders-table th:nth-child(3),
    .orders-table td:nth-child(3),
    .orders-table th:nth-child(4),
    .orders-table td:nth-child(4) {
        display: none;
    }
}