.demo-container { max-width: 500px; margin: 40px auto; position: relative; } .trigger-button { width: 100%; padding: 16px; background: white; border: 1px solid #d1d5db; border-radius: 12px; font-size: 16px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .trigger-button:hover { border-color: var(--orange); } .select-input { font-size: 13px; min-height: 40px; display: flex; align-items: center; cursor: pointer; } .select-input.placeholder { color: #9ca3af !important; font-weight: 400; } .picker-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; transition: opacity 0.3s ease; } .picker-overlay.active { display: block; opacity: 1; } .picker-modal { display: none; position: absolute; top: 100%; left: 0; background: white; border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); z-index: 1000; padding: 0; margin-top: 8px; } .picker-modal.active { display: block; } .picker-content { background: white; border-radius: 16px; max-width: 700px; width: 100%; padding: 24px; } .picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .calendar-section { padding-right: 16px; border-right: 1px solid #e5e7eb; } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .month-display { font-size: 16px; font-weight: 600; color: #111827; } .nav-btn { background: none; border: none; padding: 4px; cursor: pointer; border-radius: 4px; transition: background 0.2s; } .nav-btn:hover { background: #f3f4f6; } .weekday-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; } .weekday { text-align: center; font-size: 12px; font-weight: 500; color: #6b7280; padding: 8px 0; } .day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .day-cell { aspect-ratio: 1; border: none; background: none; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.2s; color: #374151; } .day-cell:hover:not(.empty):not(.selected) { background: #f3f4f6; } .day-cell.selected { background: var(--orange); color: white; font-weight: 600; } .day-cell.empty { cursor: default; visibility: hidden; } .calendar-footer { margin-top: 16px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; } .time-section { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .time-header { margin-bottom: 16px; } .time-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 4px; } .time-subtitle { font-size: 12px; color: #6b7280; } .time-selectors { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .time-select { flex: 1; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; cursor: pointer; background: white; } .time-separator { font-size: 18px; font-weight: 500; color: #6b7280; } .button-group { display: flex; gap: 12px; margin-top: 40px; } .btn { flex: 1; padding: 10px 16px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-cancel { background: white; color: #374151; border: 1px solid #d1d5db; } .btn-cancel:hover { background: #f9fafb; } .btn-ok { background: var(--orange); color: white; } .btn-ok:hover { background: #0317d7; } .custom-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 100; display: none; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #ddd; border-radius: 18px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); } .custom-dropdown.active { display: block; } .dropdown-option { padding: 12px 16px; cursor: pointer; transition: background 0.2s; font-size: 15px; color: #374151; } .dropdown-option:first-child { border-radius: 12px 12px 0 0; } .dropdown-option:last-child { border-radius: 0 0 12px 12px; } .dropdown-option:hover { background: #f3f4f6; } .dropdown-option.selected { color: #0317d7; font-weight: 500; } @media (max-width: 720px) { .picker-grid { gap: 0; } .mo-720 { display: none; } .time-selectors { margin-bottom: 0; } } @media (max-width: 640px) { .picker-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; } .picker-overlay.active { display: block; } .picker-modal { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 24px 24px 0 0; max-height: 90vh; transform: translateY(100%); transition: transform 0.3s ease; margin-top: 0; } .picker-modal.active { transform: translateY(0); } .picker-content { border-radius: 24px 24px 0 0; max-height: 90vh; overflow-y: auto; } .picker-grid { grid-template-columns: 1fr; } .calendar-section { border-right: none; border-bottom: 1px solid #e5e7eb; padding-right: 0; padding-bottom: 10px; } .time-section { padding-left: 0; padding-top: 10px; } }